Builder CSS: Theme CSS Outline
From IThemes Codex
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
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
.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
.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
.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
.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
.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