Announcement

Collapse
No announcement yet.

CSS Editor in Genesis Extender

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Editor in Genesis Extender

    OK - using any of the browsers with their web developer feature is a staple of my development style, allowing me to edit css and immediately see the results on the browsed page. The idea of the front-end CSS editor in Genesis Extender is therefore compelling for me. So I have several questions -

    1. the CSS I enter into the editor is temporary until I click on the save button, right?
    2. where is that temporary CSS saved?
    3. how do I get it back into my stylesheet once it has been saved from the front-end editor?

    Thanks!

  • #2
    OK - using any of the browsers with their web developer feature is a staple of my development style, allowing me to edit css and immediately see the results on the browsed page.
    Trying to understand this question and I´m interested in the approach - wouldn´t it slow your dev flow down if you would have install a plugin just to search for the styles later, to move them?
    The big advantage in using a plugin for this is to keep the childtheme and your edits (CSS, JS, PHP) separated, in case the childtheme ever gets an update. That´s what Extender is there for. As it seems you don´t plan to use this - why buy this plugin then?

    Or did I get you wrong and your question was something else actually?

    Comment


    • msummers
      msummers commented
      Editing a comment
      Using the Genesis CSS front-end editor is very much like using the web developer options in Chrome/FF/Edge except that the front-end editor can more easily accumulate a series of change and give them back to you in a single copy-able listing than any of the developer extensions. I enqueue my custom files separately anyhow (see my comment to eric) so even if the child theme is updated, the worst case would be that I just edit the new functions.php file to enqueue again.

  • #3
    1. the CSS I enter into the editor is temporary until I click on the save button, right?

    Correct.

    2. where is that temporary CSS saved?

    The "temporary" CSS is added directly to the page source of the one implementing it (not affecting any other visitor or browser) through jQuery (javascript) code.

    3. how do I get it back into my stylesheet once it has been saved from the front-end editor?

    You click the "Copy To Clipboard" button and then click the <> icon to reveal the Custom CSS Editor, and paste it in there and then save your changes.

    See this for more details:

    https://vimeo.com/200436020

    Comment


    • eric
      eric commented
      Editing a comment
      Currently there is no way to change which stylesheet is used with the Front-End CSS Editor, but I'll keep that kind of thing in mind for a possible future update.

    • msummers
      msummers commented
      Editing a comment
      So, the FE Editor adds the styles into the child theme's style.css file? Does it just append them at the bottom of the file?

    • eric
      eric commented
      Editing a comment
      No, the Genesis Extender FE Style Editor actually works with/adds to the Custom CSS file that's created when you first activate Extender. This CSS file is then added, right after the Child Theme's default stylesheet is added, to the HEAD of the site. So it's simply an additional stylesheet. If you wanted to work directly with the Child Theme's style.css file, on the front-end of your site like you do with Extender, our Child Themer Plugin might be a nice addition to your dev toolbox:

      https://cobaltapps.com/downloads/child-themer-plugin/

  • #4
    OK - yes I see that file. Thanks, Eric!

    Comment

    Working...
    X