CSS Code?

rsirota · August 26, 2013

Now that I have my feet wet.. I need to do a little customization. In the old world I could just get one of the css developer tools and hover over the item I want to customize to get the css link .sm-xxx etc. I see to be having a problem in the new world with this.

What I want to do is on page x and only page x change the font color of a menu that I have put on page x. Page y has a menu too but It can have the system settings...

So I need something like

.sm-mymenu {
color: white;
}

Any suggestions to get the css of this particular item? I will want to customize other special items too...

Hikin' Mike · August 27, 2013

Since you haven't unveiled your site, I can't give you specific codes. To isolate a specific page, you'll have to find the page ID, something like id="yui_3_8_0_1_1377576070984_390" and then add in your navigation code:

#yui_3_8_0_1_1377576070984_390" .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
color: white;
}

thenickdude · August 27, 2013

Those YUI IDs are randomly generated. They'll change on every page load, so you can't use them to target a specific gallery. They are also not added until fairly late in the page loading process, as they're not added until the mouse moves over the window.

Instead, the stable page ID classes that SmugMug generate look like "sm-page-node-7ia2z" and you can find them applied to the body tag, so you can do something like:

body.sm-page-node-7ia2z .sm-page-widget-nav-toplink {
  color:white;
}

Those IDs should stay the same indefinitely.

Allen · August 27, 2013

Every page has a different "node" class. What grips me is a folder has a specific "node" name but
the body class of children do not carry the parent/s "node" class. This makes it impossible to apply
CSS at any level and have it flow down.

Hikin' Mike · August 27, 2013

Lamah wrote: »
Those YUI IDs are randomly generated. They'll change on every page load, so you can't use them to target a specific gallery. They are also not added until fairly late in the page loading process, as they're not added until the mouse moves over the window.

Instead, the stable page ID classes that SmugMug generate look like "sm-page-node-7ia2z" and you can find them applied to the body tag, so you can do something like:
body.sm-page-node-7ia2z .sm-page-widget-nav-toplink {
  color:white;
}
Those IDs should stay the same indefinitely.

I didn't know that. Then again I never tried to do that for one page.

thenickdude · August 27, 2013

Hikin' Mike wrote: »

I didn't know that. Then again I never tried to do that for one page.

Yeah, I only investigated the YUI ids because I was hoping to use them as a source of random numbers, but unfortunately because they get added so late, I couldn't!

CSS Code?

Comments