Mark CSS stying

Foundry
1

Adam and others: I have some CSS styling I wish to apply for marked text. I use:

mark {
    background-color: #FFC0CB;
    color: black;
}

If I put the above CSS snippet in the CSS tab for a specific page it works just dandy. But if I put it in the CSS under the Code settings (which should then apply to the whole website) it doesn’t “take”. Anyone know what’s going on here? I’m using RW 7.5.1.

I don’t remember having this kind of problem previously. Not sure if it’s a RW issue, a Stacks issue, or a Foundry issue. (Or just me.)

2

When you insert code into the global CSS field, it gets injected into the theme’s CSS file. This is loaded before the Foundry Control Center stack. Foundry’s Control Center contains a large majority of the Bootstrap CSS, as well as a CSS reset, which includes the <mark> tag declaration. This CSS comes after your global insertion.

The CSS you add in the Page Inspector gets injected into the main HTML file as a <style> tag, and is placed near the bottom of the HTML file. This is why it is able to override the Foundry <mark> tag styling, as it comes after the Control Center’s CSS.

If you want to use the global CSS field, you can add an !important to your CSS.

3 Likes
3

Adam: Thanks for the explanation. Makes complete sense now! The !important attribute solved everything but equally great to know WHY things weren’t working.

3 Likes