child theme styles not overriding

  • I recently created a child theme for an already modified parent theme, and then the same theme unmodified — the latter was done because the former child attempt wasn’t working properly, as described below.

    The issues in both cases are:
    1) In order to make my css work, I have to add the !important rule to nearly every property.
    2) Some properties don’t take over even with the !important rule applied, and hence don’t work at all.

    The theme worked as desired when I had modified it and did not use a child theme.

    I’ve checked the theme’s code and there are no existing, relevant !important rules in its stylesheets which would prevent my css from working.

    I followed the codex instructions for setting up child themes in both scenarios (modified and unmodified theme).
    The theme in question is designed to be child-friendly — included in the .zip is the child directory with style.css and functions.php, so I also tried using the supplied goodies.

    • This topic was modified 8 years, 2 months ago by IT Hertz.
Viewing 6 replies - 1 through 6 (of 6 total)

  • What theme are you using? Can you post a link to your site with the child theme activated?

    Thread Starter IT Hertz

    (@it-hertz)

    Hello,

    It’s a premium theme (KingSize). I’m working on replacing it with a public domain theme, but have not tried a child theme with that one yet. My support period expired with the KS folks, and since I’m replacing it, I’m not going to pay for additional support from them.

    It isn’t a serious problem, since I can just use the modified parent theme until I perfect the replacement theme’s child (assuming I don’t have this problem with that one as well). I was just curious as to why this odd behavior is occurring.

    I neglected to mention that I’m using wamp to build/alter the site. I don’t see how that could be the culprit, since the only changes are css, but I suppose it might be.

    The hosting plan for this site is not multi-site and I can’t trash the live site by switching to a defective child. I could probably install the child on a subdomain for sandboxing, though.

    I’m not familiar with your particular theme, but some older themes aren’t compatible with the current recommended method to create a child theme. Unfortunately, without being able to inspect your theme’s code, there’s no way to know if that’s the case.

    Thread Starter IT Hertz

    (@it-hertz)

    I tried it last night with the free version of SKT Full Width theme, which has a vertical nav menu similar to KingSize, and am experiencing the same issue. I have to rule most properties !important in the child or they won’t work. Some do work w/o ruling them !important, and some don’t work even when I do rule them !important.

    I’ve looked for, among other things, specificity/hierarchy conflicts and can’t find what is preventing my child css from controlling.

    I also tried using Child Theme Configurator. It’s supposed to account for older themes that need @import and set them up accordingly. No joy; I have the exact same !important issue as when I install the child manually.

    I can, of course, keep using !important for the stubborn properties and perhaps use workarounds for those with which even !important doesn’t work, but I prefer to keep my css clean and eliminate !important rules as much as possible.

    What files do you have in your SKT Full Width’s child theme’s folder? Can you post their contents to Pastebin and post the link here?

    Thread Starter IT Hertz

    (@it-hertz)

    I set up a staging subdomain on my host and am experiencing the same issue, so it isn’t a wamp or local issue.

    I’ll give you a brief example.
    SKT parent main.css:

    /* Links------------------------------------------------- */
a {color:#86c301; text-decoration:none; outline:none;}
a:hover,a:focus,a:active {color:#eeeded; }

/* NAVIGATION */
#site-nav{ width:100%; margin:0; padding:0 0 60px; background:url(../images/menu-bg.png); text-transform:uppercase; font:300 16px 'Roboto Condensed', Arial; }

    My child css (I tried the modifications one at a time and none worked):

    /* Links------------------------------------------------- */
a {color:#a3a3a3 !important; text-decoration:none; outline:none;}
a:hover,a:focus,a:active {color:red !important; }

/* NAVIGATION */
#site-nav{ width:50% !important; margin:0; padding:0 0 60px; background:url(../images/menu-bg.png); text-transform:uppercase; font:300 12px 'Roboto Condensed', Arial !important; }

    All the above properties that come before !important do not work w/o the !important rule. As indicated, this applies to everything — color, text, size, classes, divs, etc.

    Though not shown here, my css does refer to the parent template in a comment line.

    I tried various enqueues — main.css only, style.css only, main plus style, even changed the filename of my modified css to main and style to match the parent being enqueued. Nothing works.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘child theme styles not overriding’ is closed to new replies.