Accessing vFlyer Sites CSS and The Most Commonly Used Selectors

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

 

Theme-Editor-CSS-box.png
 

 

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 {}
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk