Logo Height Locked via Important Notice in CSS – Undo This?

  • Resolved jrothra

    (@jrothra)


    8 years, 8 months ago

    URL: https://www.johnrothra.com

    I want to adjust the height of the logo in the sticky header from 30px to 41px. However, the CSS is locking in the 30px height via the !important notice. So, when I add custom CSS, it overrides my customizations. How can I strip !important without editing the parent theme’s CSS (because doing so could be for naught at the next theme update)?

    Here’s the CSS that’s causing it:

    .sticky-enabled .tc-shrink-on .site-logo img {
    height: 30px!important;
    width: auto!important;
}
Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter jrothra

    (@jrothra)

    I should probably know this answer, but for some reason it’s escaping me.

    try also use the !important in your custom CSS and make it more specific;

    example:

    body.sticky-enabled .tc-shrink-on .site-logo img {
    height: 41px!important;
}
    Thread Starter jrothra

    (@jrothra)

    That does the trick, however using !important is generally not recommended unless you have to. It’s better to reorganize the CSS so that the effect desired comes later in the cascade. Since the initial !important is used in the theme, I’m wondering why the theme CSS isn’t reorganized to avoid needing that notice.

    I was hoping there was a way to avoid using that notice. There may not be.

    please try and see if the theme’s author does reply to this topic;
    or better start a new topic with focus on requesting the removal of !important from the original stylesheets..

    Hi, I can see why. I have seen this issue in a few sites. The programmers of the theme in a part of the site make the call to the child’s css before the main css. You can see it with Firebug extension for example, you will see that:

    The template first calls:

    https://www.johnrothra.com/wp-content/themes/customizr-child/style.css?ver=3.4.20 on line 15

    with the rule:

    .sticky-enabled .tc-shrink-on .site-logo img {
    height: 41px !important;
    }

    and LATER the main css of the site overrides your custom css (child) in its css on line 136

    .sticky-enabled .tc-shrink-on .site-logo img {
    height: 30px !important;
    width: auto !important;
    }

    So, find in your site the calls for the css (child and main) and invert them (first main css and the your child’s css)

    ??

    Thread Starter jrothra

    (@jrothra)

    @michael — I’ll get hold of the developers and share this info with them.

    @jesuscam — Glad you caught that. I overlooked it in my search for other things. Glad to have another pair of eyes. I’ll share this info with the theme developers.

    Since a temporary solution is known (albeit not the ideal one), I’ll mark this thread as resolved.

    ?? anytime

    Hello dr J,
    the thing is that that CSS (shrink) takes place because of an user option you can easily uncheck.

    Appearance -> Customize -> Header -> Design and layout -> Sticky header : shrink title / logo

    Then put whatever CSS you want without taking care about the !important stuff.

    Hope this helps.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Logo Height Locked via Important Notice in CSS – Undo This?’ is closed to new replies.