Pinegrow Community Support Forum

Wordpress - editing style.css in an external editor - does this work?

It seems to me that Pinegrow is ignoring / not noticing / overwriting changes made to style.css in Wordpress development. When I save in an external editor, there isn’t the “auto-refresh” that I get when making changes to html, and I have to export the theme to pick up changes. Tonight, it seemed that changes I made were being totally ignored, and in desperation, I closed Pinegrow, edited style.css and then re-opened Pinegrow, and the change had disappeared! I’m editing the file that is in the same folder as category.html, etc.

I want to use an external editor because sometimes there is a css rule that I have elsewhere, that I just want to copy in, and this is much easier in direct edit.

Is style.css a special case that should not be edited outside Pinegrow? Or is it too late at night and I’m going ga-ga?

I did see a message once about the file appears to have changed and did I want to overwrite, but the text of this message is confusing to me - it wasn’t clear WHICH version if it was asking if I should overwrite. Pretty sure this message didn’t come up every time I went to export, though.

Thanks for any information.

@greyguru I know this doesn’t answer your question but have you tried to edit the css directly in Pinegrow using the code editor: Page > Edit code > then click css in the top bar of editor window and select the stylesheet you want to edit. Sometimes I find this is faster that using the CSS panel and it has autocomplete to help speed the process up.

Hello,

style.css is a mandatory file in any WordPress theme BUT having styles inside that file is not mandatory at all.

https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

You can have as many external CSS files you want with whatever name you want as long as style.css is located at the root level of your theme folder.

As an example, here is the content of the style.css from the current Pinegrow documentation theme.

/*
Theme Name: pg_doc2017
Theme URI: http://docs.pinegrow.com/
Author: Pinegrow Team
Author URI: http://pinegrow.com/
Description: Pinegrow Web Editor Documentation Theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pg_doc2017
*/
1 Like

Thanks Rob - at least this way the changes do get made if I save the underlying html (although the messages about what is being exported to the theme do not include the css). I don’t see any syntax highlighting like your screen shot - do you have an edit plugin? Also, each time I switch to css I have to get to line 2000 again, as it always starts at the top. But the changes are getting made!

I was trained as an IBM 360 assembler programmer. Scarcely any levels of abstraction between me and the hardware. Today’s environments: Pinegrow > php > theme > Wordpress > php > html > browser > output (Not to mention local development vs how it works from my hosting company) has way too many places where something can go wrong or be misunderstood. Until one is confident at every level, there is a lot of frustration. I spent many hours debugging before I found out that Chrome wasn’t picking up the css changes all of the time with a simple refresh, and needed a hard refresh.

Thanks for getting me over one hump - I think there are still some mysteries surrounding style.css handling in Pinegrow, but I can’t solve everything

1 Like

Thanks Emmanue

Is this a recommended practice for Pinegrow?

A workflow that’s been great for me: (I don’t necessarily go against wp’s style.css, but i do use front-end frameworks built from sass) my page will have its “main” css file - in the case of foundation, app.css; for wp, it would be style.css. i attach a separate pg.css. pg.css is what i edit in pinegrow, and i edit the main elsewhere. I have a gulp task that merges pg to main, but you could juat as well leave them separate or manually merge periodically.