Builder CSS: Theme CSS Outline

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(All Sidebars)
(The Content Module)
 
Line 500: Line 500:
  
  
'''The default class for the Content Module''':
 
 
  .builder-module-content  
 
  .builder-module-content  
 
  
 
  .builder-module-content-outer-wrapper
 
  .builder-module-content-outer-wrapper

Latest revision as of 12:11, July 30, 2013

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

Global Styling

h1, h2, h3, h4, h5, h6

h1-h6 Styles

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-element
.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


Search Bar in Header Sidebar

.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:


Mobile Navigation Menu

#it-mobile-menu


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


Image Module (No Spacing)

For child themes supporting the No Spacing Alternate Image Module Style

.image-no-spacing
.image-no-spacing .builder-module-element


Image Module (Alternate - Full Window)

For child themes supporting the Full Window Alternate Image Module Style

.image-full-window-outer-wrapper
.image-full-window
.image-full-window .builder-module-element
.image-full-window-outer-wrapper img


The HTML Module

.builder-module-html
.builder-module-html .builder-module-background-wrapper
.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.


.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 Box

.search-text-box
.search-submit-button


Search Forms

#searchform
#searchform input
#searchform input[type="text"
#searchform input[type="submit"]


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


Post Format Styling

Quote

.builder-module-content .format-quote .entry-content
.builder-module-content .format-quote .entry-content > *:last-child
.format-quote .edit-post-link a


Image

.builder-module-content .format-image
.builder-module-content .format-image .entry-header
.builder-module-content .format-image .entry-title
.builder-module-content .format-image .it-featured-image
.format-image .edit-post-link a
.single .builder-module-content .format-image


Video

.builder-module-content .format-video 
.builder-module-content .format-video .entry-header
.builder-module-content .format-video .entry-title 
.format-video .edit-post-link a
.single .builder-module-content .format-video


Status

.builder-module-content .format-status .entry-header
.builder-module-content .format-status .entry-content
.format-status .edit-post-link a


Custom Gravity Forms Styling

.gf_progressbar_percentage.percentbar_custom
.gform_wrapper .gf_progressbar
.gform_wrapper span.ginput_product_price
.gform_wrapper span.ginput_total


Attachment/Image Specific Styles

.attachment .loop-footer
.attachment .loop-utility
.attachment .loop-utility a


See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox