Getting Child Theme CSS to Work

  • Resolved Reggy

    (@fluxwavez)


    8 years, 5 months ago

    I’ve tried reading multiple threads concerning getting custom CSS working in Hueman using a Child Theme, including this recent one, but I cannot find the solution to my issue.

    When I go into Appearance > Editor in the admin dashboard, modifying “style.css” or “custom.css” does not change anything on the main website. When I use the Jetpack plugin “Edit CSS” module, however, the changes are immediately reflected. What I’ve tried:

    1. Disabling caching plugin (W3 Total Cache) and CDN (Cloudflare).
    2. Disabling “Dynamic Styles” in Appearance > Customize.
    3. Used the website host’s File Manager to modify the CSS files.
    4. Disabled the Jetpack “Edit CSS” module.
    5. Erased everything in the Child Theme “style.css” and the “functions.php.”
    6. Modifying custom.css in the Main Theme directly.

    The code I’ve been testing with is:

    /* Modify caption text */
.entry .wp-caption-text {
	color: #000;
	font-size: 15px;
}

    I know little about CSS except for the rudimentary information I’ve gathered, but while this immediately works in the Jetpack “Edit CSS” module, it hasn’t been working after I’ve attempted it with the CSS files after trying all of the above. What am I doing wrong?

Viewing 7 replies - 1 through 7 (of 7 total)

  • What is it that’s not working? I just modified the font size in your child theme CSS and the captions on this page changed:
    https://personacentral.com/etrian-odyssey-v-new-screenshots-class-colors-titles-master-skills/

    Also, if you’re running the current version of the theme you don’t need this in the child theme style.css file:
    @import url("../hueman/style.css");

    Thread Starter Reggy

    (@fluxwavez)

    Could you please post images of what you’re seeing? Because when I go into the style.css of my Child Theme and modify the font size of that code, nothing is changing. The whole code actually isn’t doing anything in the style.css, while there’s an immediate and apparent change when I put the same code into the Jetpack “Edit CSS” module.

    I removed the “@import url” segment.

    Also, to be clear, it’s not just for that code but for other style changes I’ve tried to implement, notably concerning bbpress.css through the Child Theme, which aren’t working as well.

    Your child theme CSS is still the same as what Jeremy posted on the JP forum:
    https://personacentral.com/wp-content/themes/hueman-child/style.css

    It still includes the @import line. Have you updated the cache and CDN files?

    Thread Starter Reggy

    (@fluxwavez)

    Alright, I think the problem might be a caching issue after all? I had disabled W3 Total Cache and Cloudlfare at the same time before, but that hadn’t changed anything. Now, I’ve disabled W3 Total Cache while keeping Cloudflare activated, but I’ve purged the cache each time I’ve made a change to the style.css and that’s being reflected on the website (even though what I see from that link hasn’t seemed to change).

    Something’s not right with the caching; that’s frustrating. I don’t know why the Jetpack module works without purging the cache every single time a change is made while I need to do that for the Child Theme CSS files.

    I have no idea why JP would work without refreshing the cache; maybe it triggers a refresh automatically when you save the changes? If you’re ok with using the JP CSS module then you could just do that and forget about everything else. However, if you want to figure out what the issue is then I’d recommend deactivating whatever plugins or other configuration you have that affects the site display; minification, consolidation, caching, CDN, the code in your child theme style.css, etc. Then delete whatever cache-related folders you have on your site. The idea is to get to a known state where the theme works as it’s designed. Then add a simple change, like the one you’re working with now, to the child theme style.css file. If there isn’t anything active that interferes with it then it should take affect as soon as it’s saved. If that works then start with your other optimizations, one at a time, and make a change to your child theme CSS to make sure the changes that should work still do.

    Thread Starter Reggy

    (@fluxwavez)

    Thank you for your help, I did everything you suggested and isolated the issue. I discovered that, being an amateur at this, I didn’t realise that Cloudflare needed to be on “Development Mode” for CSS changes to be reflected on the website immediately. I’m guessing that that’s the reason purging the cache via Cloudflare is the only time the changes would appear, and that without the mode enabled, all previous resources were being kept as-is for a period of time that I had not been waiting for.

    Thanks again.

    You’re welcome; glad to help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Getting Child Theme CSS to Work’ is closed to new replies.