Builder CSS: Theme CSS Outline

From IThemes Codex
Revision as of 16:18, 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

.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


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