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