Inline lightbox incorrectly overrides page CSS

  • stever777

    (@stever777)


    11 years, 8 months ago

    Hi,

    My site’s style sheet uses color for my different header levels.
    h2 { color:green; }

    When I’m creating an inline lightbox using su_lightbox_content, the CSS from box-shortcodes.css line 522 sets all the headers within the lightbox content to “color:inherit.” This inherits the text color from the enclosing element, and all my headers are now black. The text color from the enclosing element is black, since the enclosing element is simply my BODY element. (Well, it’s actually a few DIVs down, but it’s an element whose text is black.)

    I’ve been able to hack around this by adding DIVs within the lightbox content and creating more specific CSS rules, but it was a huge hassle to discover the solution.

    If “color:inherit” meant “inherit the H2 color within the lightbox from whatever the H2 color is outside the lightbox,” then this would make sense. But “color:inherit” means “inherit the H2 color within the lightbox from whichever block–of any type–encloses the lightbox,” which is NOT what is wanted in sites whose headers vary in color from body text.

    The page in question is http://SteverRobbins.com/speaking. Click on one of the talk titles to see a popup. Currently the colors are correct, but that’s only because I spent a couple of hours figuring out the problem and then discovering that I didn’t understand CSS precedence enough to come up with a quick solution.

    (The happy good news is that now I *do* understand CSS precedence.)

    https://ww.wp.xz.cn/plugins/shortcodes-ultimate/

Viewing 1 replies (of 1 total)
  • Thread Starter stever777

    (@stever777)

    11 years, 8 months ago

    Here is the raw lightbox content that I needed to get this working:


    [su_lightbox_content id="musical"]
    <div class="slc">
    <h2>The Musical</h2>

    Stever's book....
    </div>
    [/su_lightbox_content]

    and here is the CSS I needed to create enough specificity to overwrite the lightbox content:


    h2, .su-lightbox-content .slc h2 { color: #00548B; }
    h3, .su-lightbox-content .slc h3 { color: #de5c11; }

Viewing 1 replies (of 1 total)

The topic ‘Inline lightbox incorrectly overrides page CSS’ is closed to new replies.