Mark CSS stying

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.)

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.


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