1

Using an Astra Child theme, I know how to work the Additional CSS editor. I also like that fact that you can define custom classes by post or by page or by site.

It's just that I find the space for it very narrow, it's maybe 15% of the screen or so. I'd prefer to edit a file instead.

From here, I understand that the custom css is stored in the database, not in a file one can edit.

How can I change this so that I do have my custom css file editable?

Or is this a bad idea altogether?

6
  • 1
    If this is possible, it isn't worth the effort. Why not just add a CSS file into the child theme that you can edit as needed if that's how you prefer to work? Or ask the Astra devs to build in a full screen version of their Additional CSS editor. Feb 19 at 22:51
  • Well, there is a style.css in the child theme, but changes in there are not picked up. That's why I went searching for the information in the link.
    – RolfBly
    Feb 20 at 13:59
  • 1
    There's no better solution for editing the Additional CSS from the database because it's not something anybody ever needs to do. More advanced users who find that necessary will move onto editing actual CSS files in themes or plugins using their preferred editor. If changes are not picked up you're likely running into browser caching, which is an important feature for performance. Assuming your theme is configured a certain way, increasing the theme version number might work to bust the cache. Feb 20 at 15:14
  • "not something anybody ever needs to do" - if only that were true. There's a whole lot to be desired in the defaults - the Additional CSS editor is there for a reason. As for browser caching, I thought one could refresh the browser while bypassing the cache?
    – RolfBly
    Feb 20 at 16:05
  • If the CSS is loaded from the DB then chances are that it's loading last, so the reason your child theme CSS isn't being used is because other style rules are loading AFTER it and thus overriding it. So the stuff you have in your Additional CSS section is overriding your child theme style.css. That or some other theme based CSS, or plugin based CSS is loading after your child CSS. Feb 20 at 16:22

1 Answer 1

0

This is configurable using the plugin Child Theme Configurator. Here's a screen shot. enter image description here

The option Separate stylesheet was selected originally. Changing it to Primary Stylesheet did the trick: Changes in Additional CSS are loaded first, and then changes in style.css in the child theme are loaded. No conflicts so far.

With the Separate stylesheet setting, none of the changes in any of the css files available in the Theme file editor would come through. I find the explanation with this option a bit puzzling, but I'm ok with the way it works now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.