Target CSS to only one content block on a page?

oceanthrsty · February 20, 2014

So I have a text content block on a page.

http://www.glossyfinish.com/RipkenExperience

I want the link in that page to be RED. So I added a CSS block for just that page and put

.sm-user-ui a {
color: red !important;
}

It works but it also turns all the links in the customizer red too. Not that that should effect anything. I just don't know if that's the right way to do it. :dunno

Thanks!

Allen · February 20, 2014

oceanthrsty wrote: »

So I have a text content block on a page.

http://www.glossyfinish.com/RipkenExperience

I want the link in that page to be RED. So I added a CSS block for just that page and put

.sm-user-ui a {
color: red !important;
}

It works but it also turns all the links in the customizer red too. Not that that should effect anything. I just don't know if that's the right way to do it.

Thanks!

This is the class name of that box. All the widgets get assigned a unique class name. You can find it
in your page source if you don't have something like Web Developer.
this probably should work.

.sm-page-widget-484674 a {
color: red !important;
}

Because it has the exact class name of that widget you could put it at any level of CSS. I usually
make the page independent and add a CSS block to "Just this ..." CSS so I can find it and know where
it applies.

If you used an html block/widget instead of a text block/widget it has it own CSS in a tab.
In the tab all you'd need is this.

a {color: red !important;}

oceanthrsty · February 20, 2014

Perfect. Thanks. I've been using Google Developer tools and thought I could find the information I needed. I finally figured out I needed to get a plugin. All good now.

Thank you!

DanCarl97 · February 21, 2014

oceanthrsty wrote: »

Perfect. Thanks. I've been using Google Developer tools and thought I could find the information I needed. I finally figured out I needed to get a plugin. All good now.

Thank you!

You don't need a plugin, 'Inspect Element' works brill for me. Sometimes it may take a bit of searching though.

Allen · February 21, 2014

Here's a link explaining Inspect Element in Firefox.
http://www.wikihow.com/Use-the-Inspect-Element-in-Mozilla-Firefox

The two major things I use it for is after opening, scroll to the top and about five line down is the body page class.
<body id="yui_3_8_0_1_1392993941907_2535" class="sm-user-pro sm-page sm-page-node sm-page-node-zsB4B sm-page-home" style="">

This, page class name (red), can be used in CSS to define a change to a specific page. Every page has a unique class name.

The other is finding the class name of a specific widget like this html box. Right-click on box, might have to look up a few lines.

...
<div id="sm-page-widget-DCGGRDzS" class="sm-page-widget 
                sm-page-widget-html [COLOR=Red]sm-page-widget-1516504[/COLOR]" data-typeid="1516504">
    <div id="yui_3_8_0_1_1392994149649_1311" class="sm-page-widget-content">
        <div class="sm-page-widget-header"></div>
        <div id="sm-page-widget-RpxWkdG8" class="sm-page-widget-body"></div>
...

oceanthrsty · February 21, 2014

Gotcha. Perfect. Yeah I didn't realize chrome had inspect element in the right click menu. I used to use the web dev tools in FF.. I found the plugin for chrome.

I see the classes now.

Thanks

Target CSS to only one content block on a page?

Comments