A theme's CSS can be accessed through the Theme Editor, which you can see in the screenshot below (Click here for a tutorial on using the Theme Editor).
Below you'll find a table of the most commonly used CSS selectors. If you want to target one module specifically, the syntax would look like the following:
#module_12345678 {
font-family: Helvetica, Arial, sans-serif;
}
The easiest way of finding the module ID is to use the Inspect Element feature in Google Chrome or FireBug in FireFox (this is a free add-on you can get here). Whether using Chrome's built-in Inspect Element or FireBug, you would just right click on an element and then select Inspect Element from the menu.
Since our Site Editor interface uses a right click function, you cannot simply right click from within the Site Editor. It's best to open up a Preview of your site in a new tab. If you're using FireFox, however, you can access your browsers right-click menu by holding the Shift key when you right click an element from within the Site Editor.
Site Wide Defaults
| Default Text | .module {} |
| Regular Links | .module a {} |
| Links on Hover | .module a:hover {} |
| Photo Frame | .module .photo-frame {} |
| Photo Caption | .module .vf-caption {} |
| H1 Text | .module h1, .module h1 a {} |
| H1 Block | .module h1 {} |
| H1 Background | .module h1 {} |
| H2 - H6 | Same slectors using relevant Heading tag |
| Button Default | .module a.theme-button, .module a.button-default {} |
| Button Hover | .module a.button-hover {} |
| Button Pressed | .module a.button-down {} |
| List Bullets | .module ul {} |
| List Block | .module ul {} |
| List Background | .module ul {} |
| List Item Text | .module ul li {} |
| List Item Block | .module ul li {} |
| List Item Background | .module ul li {} |
Site Backgrounds
| Site Background (Inner) | #container {} |
| Page Background (Inner) | #page_body_inner {} |
| Header Background (Special) | #header {} |
| Site Background | body {} |
| Single Background Page Width | #page, #below_page_inner {} |
| Single Background Page Block | #page {} |
| Single Background Page Background | #page {} |
Main Menu
| Main Menu Block | .menu-container {} |
| Main Menu Background | .menu-container {} |
| Default Menu Item Block (Outer) | .module ul.hnav li {} |
| Default Menu Item Text | .module ul.hnav li a.first-gen {} |
| Default Menu Item Block (Inner) | .module ul.hnav li a.first-gen {} |
| Default Menu Item Background (outer):hover | .module ul.hnav li:hover, .module ul.hnav li.sfHover {} |
| Default Menu Item Background (inner):hover | .module ul.hnav li.sfHover a.first-gen, .module ul.hnav li:hover a.first-gen {} |
| Default Menu Item Text Hover | .module ul.hnav li.sfhover a.first-gen, .module ul.hnav li:hover a.first-gen {} |
| Current Menu Item Block (outer) | .module ul.hnav li.current {} |
| Current Menu Item Background (outer) | .module ul.hnav li.current {} |
| Current Menu Item Text | .module ul.hnav li.current a.first-gen {} |
| Current Menu Item Block (inner) | .module ul.hnav li.current a.first-gen {} |
| Current Menu Item Background (inner) | .module ul.hnav li.current a.first-gen {} |
| Current Menu Item Background (outer):hover | .module ul.hnav li.current:hover,.module ul.hnav li.current.sfHover {} |
| Current Menu Item Text:hover | .module ul.hnav li.current.sfHover a.first-gen, .module ul.hnav li.current:hover a.first-gen {} |
| Current Menu Item Background (inner):hover | .module ul.hnav li.current.sfHover a.first-gen, .module ul.hnav li.current:hover a.first-gen {} |
| Main Pop-Up Menu Block | .module ul.hnav ul {} |
| Main Pop-Up Menu Background | .module ul.hnav ul {} |
| Main Pop-Menu Text | .module ul.hnav ul a {} |
| Main Pop-Menu Item Block | .module ul.hnav ul a {} |
| Main Pop-Menu Item Background | .module ul.hnav ul a {} |
| Main Pop-Menu Text Hover | .module ul.hnav ul a:hover {} |
| Main Pop-Menu Item Background:hover | .module ul.hnav ul a:hover {} |
Chromes (Special Boxes)
| Chrome Block | .chrome-wrapper {} |
| Chrome Background | .chrome-wrapper {} |
| Chrome Header Block (Outer) | .chrome-header {} |
| Chrome Header Background (Outer) | .chrome-header {} |
| Chrome Header Block (Inner) | .chrome-header span {} |
| Chrome Header Background (Inner) | .chrome-header span {} |
| Chrome Header Text | .chrome-header span {} |
| Chrome Body Block | .chrome-body {} |
| Chrome Body Background | .chrome-body {} |
| Chrome Body Text | .chrome-body .module, .module .chrome-body {} |
| Chrome Links | .chrome-body .module a, .module .chrome-body a {} |
| Chrome Links Hover | .chrome-body .module a:hover, .module .chrome-body a:hover {} |
Header
| Header Block | .module.header {} |
| Header Background | .module.header {} |
| Company Name/Nambe Block | .module.header h1 {} |
| Company Name/Name Text | .module.header h1, .module.header h1 a {} |
| Slogan Block | .module.header p.siteslogan {} |
| Slogan Text | .module.header p.siteslogan {} |
| Contact Block | .module.header p.headerphone {} |
| Contact Text | .module.header p.headerphone {} |
Footer
| Footer Block | .module.footer {} |
| Footer Background | .module.footer {} |
| Footer Text | .module.footer {} |
| Footer Links | .module.footer a {} |
| Footer Links Hover | .module.footer a:hover {} |
| Disclaimer Block | .module.disclaimer {} |
| Disclaimer Background | .module.disclaimer {} |
| Disclaimer Text | .module.disclaimer {} |
| Disclaimer Link | .module.disclaimer a {} |
| Disclaimer Link Hover | .module.disclaimer a:hover {} |
Section
| Section Block | .section {} |
| Section Background | .section {} |
0 Comments