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

Images and Galleries

.hentry .gallery a,

.hentry .gallery dt,

.hentry .gallery img

.hentry .gallery-item

.hentry .gallery-item img

.hentry .gallery-caption

.hentry .gallery + *

.hentry img

.hentry .alignright

.hentry .alignleft

.hentry .aligncenter

.hentry .wp-caption,

.hentry .wp-caption img

.hentry .wp-caption-text

.hentry .gallery-item,

.hentry img

.hentry .wp-caption

.hentry .wp-caption img 

.hentry .wp-caption-text 

Post Meta Styles

.entry-header

.entry-footer

.entry-footer .alignright

.entry-footer .categories

.entry-footer .tags

.entry-footer .comments

.EXIF table

.photometa h4

.photometa ul

Previous/Older Posts Navigation

.paging

.loop-utility

.loop-utility a

.loop-utility a:hover

Comment Styles

#comments

#comments .comments-title

#comments .comments-title a

#comments ol.commentlist

#comments li

#comments li .comment-body

#comments li.depth-1

#comments li.depth-2

#comments li.depth-4

#comments li.depth-6

#comments li.depth-8

#comments li.depth-10

#comments li.even

#comments li li

#comments li .comment-body

#comments .avatar-wrapper.top-level:before

#comments .avatar-wrapper img

#comments .avatar-wrapper.top-level

#comments .avatar-wrapper.top-level img

#comments .avatar-wrapper.lower-level

#comments ul.children

#comments ul.children li

#comments .card

#comments .vcard a

#comments .vcard a:hover

#comments .vcard .avatar

.comment-edit-link

.comment-edit-link:hover

#comments .comment-meta

#comments .reply a

#comments .reply a:hover

.builder-module #comments li.even,

.builder-module #comments li.odd

#comments blockquote

.comment-reply-link

#respond

#respond a

#respond input[type='submit']

#respond input[type='submit']

#respond input[type='submit']:hover

#respond input[type='text'],

#respond textarea

#respond input[type='text']:focus,

#respond textarea:focus

#respond h3

#respond .cancel-comment-reply

#respond .cancel-comment-reply a#cancel-comment-reply-link

.comment #respond

.comment #respond a

.comment #respond h3

.comment #respond input[type='submit']

.comment #respond input[type='submit']:hover

.comment #respond textarea

.comment #respond textarea:focus

#commentform label

#commentform input[type="text"]

#commentform input,

#commentform textarea

#commentform #comment

#commentform .comment-submit-wrapper

Text Elements

p

p img. left

p img.right

blockquote

blockquote blockquote

strong 

em, dfn

dfn

sup, sub

sup

sub

abbr, acronymn

address

del

pre

big

Lists

ul, ol

ol

.entry-content > ul,

.entry-content > ol

#ie6 ol, #ie7 ol

li

li > *

li *:last-child

li > p + ul

ul

ol

dl

dl dt

dd

dd + dd 

Tables

table

table, td, th

th

th, td, caption

tr:nth-child(2n) th

tr:nth-child(2n) td

tfoot

caption

Misc Classes

.small

.large

.hide

.quiet

.loud

.highlight

.added

.removed

.first

.last

.top

.bottom

Forms

label

fieldset

legend

input[type=text], input[type=password], input.text, input.title, textarea, select

input[type=text], input[type=password], input.text, input.title, textarea

input[type=text]:focus, input[type=password]:focus,

input.text:focus, input.title:focus, textarea:focus

textarea

input[type=checkbox], input[type=radio], input.checkbox, input.radio

.search-text-box

.search-submit-button

Success, Notice and Error Boxes

.error, .notice, .success

.error

.notice

.success

.error a

.notice a

.success a

Widget RSS Styling

.widget_rss li

.widget_rss .rsswidget

.widget_rss .rss-date

.widget_rss .rssSummary

Obligatory WP Styles

.alignright

.alignleft

.hentry img.wp-smiley 

Outer Wrapper Styling

.builder-module-content-outer-wrapper

.builder-module-widget-bar-outer-wrapper

.builder-module-image-outer-wrapper

.builder-module-html-outer-wrapper

.builder-module-navigation-outer-wrapper

.builder-module-before-navigation-outer-wrapper.builder-module-navigation-outer-wrapper

Page-Specific Styling

.page .entry-footer

.page .builder-module-content .hentry

.page .hentry .edit-entry-link

.page #respond

.page #commentform .comment-submit-wrapper

Post Specific Styles

.post.hentry

.post.hentry:last-child