Builder CSS: Theme CSS Outline

From IThemes Codex
Revision as of 17:13, July 29, 2013 by Kristen (Talk | contribs)
Jump to: navigation, search

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


Contents

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



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

Post Meta Styles

Previous/Older Posts Navigation

Comment Styles

Text Examples

Lists

Tables

Misc Classes

Forms

Success, Notice and Error Boxes

Widget Styling

Obligatory WP Styles

Outer Wrapper Styling

Page-Specific Styling

Post Specific Styles

Custom Gravity Forms Styling

Attachment/Image Specific Styles

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox