Builder CSS: Theme CSS Outline

The following is the basic structure of Builder child themes with specific or necessary class examples.

Theme Version Info

Information included in the child theme introduction:

Name	Required Value	Notes
URI:
Description:
Author:
Author UI:
Version:
Template:	Builder	This is extremely important** — assigns child theme to Builder theme.
Tags:

Import Font Info

To import web fonts, use the following below the theme version info.

@import url ('http://')

Default Font Settings and Typography

Note: The font-size percentage is 16px (0.75 * 16px = 12.

html

body

input, select, textarea

pre, code, tt, kbd

h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, dfn, img, ul, ol, dl

a img

Constrain table and input widths

table, input, textarea, select

Main Background

body

Universal Link Styles

Any hyperlink

a

Hover state of hyperlink

a:hover

Focus state

a:focus

A normal, unvisited link

a:link

A link the moment it is clicked

a:active

Global Button Styles

.btn, .more-link, .loop-utility a, input[type="submit"], .comment-reply-link

.more-link:hover, .loop-utility a:hover, input[type="submit"]:hover, .comment-reply-link:hover

.more-link:active, .loop-utility a:active, input[type="submit"]:active, .comment-reply-link:active

Headings

Applies global styling to all headings

h1, h2, h3, h4, h5, h6

Global styling for h1-h6 headings

h1

h2

h3

h4

h5

h6

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img

.hentry h3

.hentry h3 a

.hentry h3 a:hover

Container Div

The container is the wrapper div that contains all the modules

.builder-container

.builder-container-outer-wrapper

Default Module Styling

.builder-module-outer-wrapper

.builder-module

.builder-module-last

.builder-module-block

.builder-module-header

.builder-module-widget-bar

.middle .builder-module-element

.right .builder-module-element

• More Default Module Classes

Header Module

.builder-module-header

.builder-module-header .builder-module-sidebar

.builder-module-header .builder-module-sidebar .widget

.site-title

.site-title a

.site-title a:hover

.site-tagline

.site-tagline a

.site-tagline a:hover

Styling the a search bar widget in the header module

.builder-module-header .builder-module-sidebar .widget_search

.builder-module-header .widget_search .widget-title

.builder-module-header .widget_search input 

.builder-module-header .widget_search input[type="text"]

.builder-module-header .widget_search input[type="text"]:focus

.builder-module-header .widget_search input[type="submit"]

.builder-module-header .widget_search input[type="submit"]:hover

.builder-module-header .widget_search input[type="submit"]:active

.builder-module-header .right .widget_search

.builder-module-header .site-title 

All Sidebars

.builder-module-sidebar

.builder-module-sidebar.right

.builder-module-sidebar.left

.builder-module-sidebar .widget-wrapper

.builder-module-sidebar .widget

.builder-module-sidebar .widget a

.builder-module-sidebar .widget a:hover

.builder-module-sidebar .widget h3

.builder-module-sidebar .widget h4

.builder-module-sidebar .widget h5

.builder-module-sidebar .widget img

.builder-module-block-outer-wrapper

.builder-module-block-outer-wrapper .widget-wrapper-left .widget

.builder-module-block-outer-wrapper .widget-wrapper-middle .widget

.builder-module-block-outer-wrapper .widget-wrapper-right .widget

.builder-module-block-outer-wrapper .left .widget

.builder-module-block-outer-wrapper .middle .widget

.builder-module-block-outer-wrapper .right .widget

.builder-module-block-outer-wrapper.left .builder-module-element

.builder-module-block-outer-wrapper.middle .builder-module-element

.builder-module-block-outer-wrapper.right .builder-module-element

.builder-module-element .builder-module-before-widget-bar

.builder-module-sidebar h4.widget-title

.builder-module-sidebar h4.widget-title a

.builder-module-sidebar .widget *:first-child

.builder-module-sidebar .widget *:last-child

.builder-module-sidebar .widget a.rsswidget img

.builder-module-sidebar .widget img 

.builder-module-sidebar .widget p

.builder-module-sidebar .widget ul

.builder-module-sidebar .widget li

Navigation Module

.builder-module-navigation

.builder-module-navigation-outer-wrapper

.builder-module-navigation .builder-module-element

.builder-module-navigation:before

.builder-module-navigation:after

.builder-module-navigation .builder-module-block.builder-module-element:before

.builder-module-navigation .builder-module-block.builder-module-element:after

.builder-module-navigation ul

.builder-module-navigation ul.menu

.builder-module-navigation li

.builder-module-navigation ul.menu > li:first-child > a

.builder-module-navigation ul.menu li a

.builder-module-navigation ul.menu li a:hover

.builder-module-navigation li a

.builder-module-navigation li.current_page_item li a

.builder-module-navigation li.current-cat li a

.builder-module-navigation li a:hover 

.builder-module-navigation li.current_page_item > a,

.builder-module-navigation li.current-cat > a

.builder-module-navigation li.current_page_item a,

.builder-module-navigation li.current-cat a

.builder-module-navigation li a:active

Second Level Navigation

.builder-module-navigation li ul

.builder-module-navigation li li

.builder-module-navigation li li a

.builder-module-navigation li li a:hover,

.builder-module-navigation li li a.sfhover

.builder-module-navigation li ul ul

.builder-module-navigation li ul.sub-menu

.builder-module-navigation li ul.sub-menu li

.builder-module-navigation li ul.sub-menu li a

.builder-module-navigation li ul.sub-menu li a:hover

.builder-module-navigation li ul.sub-menu li a:active

.builder-module-navigation li ul.sub-menu li:first-child

.builder-module-navigation li ul.sub-menu li:first-child a

.builder-module-navigation li ul.sub-menu li:last-child

.builder-module-navigation li ul.sub-menu li:last-child a

Greater than two levels

.builder-module-navigation li ul.sub-menu .sub-menu

.builder-module-navigation li ul.sub-menu .sub-menu:before

Bottom Navigation

.builder-module-navigation.builder-module-bottom

.builder-module-navigation.builder-module-bottom:before,

.builder-module-navigation.builder-module-bottom:

The Widget Bar Module

.builder-module-widget-bar

.builder-widget-bar .widget

.builder-module-widget-bar.widget-bar-alternate 

.builder-module-widget-bar.widget-bar-alternate .widget-wrapper-single .widget

.builder-module-widget-bar.widget-bar-alternate .left .widget 

.builder-module-widget-bar.widget-bar-alternate .right .widget

.builder-module-widget-bar .builder-module-sidebar

.builder-module-widget-bar .builder-module-sidebar .widget

.builder-module-widget-bar h4.widget-title

.builder-module-widget-bar.default-module-style .builder-module-sidebar .widget a

.builder-module-widget-bar.default-module-style .builder-module-sidebar .widget a:hover

The Footer Module

.builder-module-footer

.builder-module-footer .builder-module-element

.builder-module-footer .builder-module-element .alignright

.builder-module-footer .builder-module-element a

.builder-module-footer .builder-module-element a:hover

.builder-module-footer .builder-module-sidebar

The Image Module

.builder-module-image

.builder-module-image .builder-module-element

.builder-module-image .builder-module-element img

The HTML Module

.builder-module-html

.builder-module-html .builder-module-block-outer-wrapper

.builder-module-html .builder-module-sidebar-outer-wrapper

.builder-module-html .builder-module-block

.builder-module-html .builder-module-block.sidebar

.builder-module-html.html-alternate

.builder-module-html.html-alternate .builder-module-block-outer-wrapper

HTML Module sidebars

.builder-module-html .builder-module-sidebar .widget 

.builder-module-html .builder-module-sidebar.right .widget

.builder-module-html .builder-module-sidebar.left .widget

.builder-module-html .builder-module-sidebar.right .widget a

.builder-module-html .builder-module-sidebar.right .widget

The Content Module

.builder-module-content consists of .builder-module-element + 1 or more .builder-module-sidebar.

The actual area where the content gets displayed is .builder-module-element and the wrapper for this is .builder-module-element-outer-wrapper.

The default class for the Content Module:

.builder-module-content 

.builder-module-content-outer-wrapper

.builder-module-content .builder-module-element

.builder-module-content h1

.builder-module-content .hentry

.builder-module-content .hentry .entry-header

.builder-module-content .hentry .entry-image

.builder-module-content .hentry .entry-image-wrapper

.builder-module-content .hentry .entry-image-wrapper.above-post

.builder-module-content .hentry .entry-image.xl-thumb img

.builder-module-content .hentry .image-data

.builder-module-content .hentry .image-data.on_image

.builder-module-content .hentry .image-data.above_image

.builder-module-content .hentry .entry-image.alternate-thumb

.builder-module-content .hentry .entry-image.alternate-thumb img

.builder-module-content .hentry .entry-image img

.builder-module-content .hentry:last-child

.builder-module-content .builder-module-element .page

.entry-title

.entry-title a

.entry-title a:hover

.entry-content

.entry-content p

.entry-content.teasers

.post-edit-link

.post-edit-link:hover

.builder-module-content .magazine-post

.hentry

.hentry .thumbnail-wrap

.hentry .entry-meta.date.absolute-circle

.hentry .entry-meta

.hentry .entry-meta a

.hentry .entry-meta a:hover

.hentry .thumbnail-wrap

.hentry .date 

.hentry .entry-meta.date.absolute-circle span

.hentry .entry-meta.date.absolute-circle span.month

.hentry .entry-meta.date.absolute-circle span.day

.hentry .entry-attachment .attachment

.hentry .entry-footer

.hentry .entry-footer .entry-meta

.hentry .entry-footer img

.hentry .edit-entry-link

.single-post-thumbnail

.single-post-thumbnail img 

.front-page-thumbnail

.front-page-thumbnail img 

.builder-module-content .builder-module-element .loop	

.loop-title

.loop-utility a

.loop-utility img

.loop-utility img:hover

Sidebar in Content Module

.builder-module-content.sidebar-background

.builder-module-content.sidebar-background .builder-module-sidebar

.builder-module-content .builder-module-element

.builder-module-content .builder-module-sidebar .widget

.builder-module-content .builder-module-sidebar h4.widget-title

.builder-module-content .builder-module-sidebar h4.widget-title a

.builder-module-content .builder-module-sidebar.right .widget

.builder-module-content .builder-module-sidebar.left .widget

.builder-module-content .builder-module-sidebar.right .widget a

.builder-module-content .builder-module-sidebar.right .widget

Search Bar in Content Module Sidebar

.builder-module-content .builder-module-sidebar .widget.widget_search

.builder-module-content .widget.widget_search .widget-title

.builder-module-content .widget_search input

.builder-module-content .widget_search input[type="text"]

.builder-module-content .widget_search input[type="text"]:focus

.builder-module-content .widget_search input[type="submit"]

.builder-module-content .widget_search input[type="submit"]:hover

.builder-module-content .widget_search input[type="submit"]:active

.builder-module-content .right .widget_search

.builder-module-content .right .widget_search:after