Builder CSS: Basic Structure

(Difference between revisions)
Jump to: navigation, search
Line 68: Line 68:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! !! Output (IDs are examples) !! Description !! More info
+
! !! Output (IDs are examples) !! Description
 
|-
 
|-
| '''[BODY] #ID''' || #builder-layout-51d70c106ac69 || Targets the specific Layout body where ID# is 51d70c106ac69 || [[Builder_CSS:_Classes_and_IDs#Layout_ID_.28Body.29|Layout ID (Body)]]
+
| '''[BODY] #ID''' || #builder-layout-51d70c106ac69 || Targets the specific Layout body where ID# is 51d70c106ac69
 
|-
 
|-
|'''[builder-container-background-wrapper]''' || .builder-container-background-wrapper ||
+
|'''[builder-container-background-wrapper]''' || .builder-container-background-wrapper
 
|-
 
|-
|'''[builder-container-outer-wrapper]''' || .builder-container-outer-wrapper ||
+
|'''[builder-container-outer-wrapper]''' || .builder-container-outer-wrapper
 
|-
 
|-
|'''[builder-container] #ID''' || #builder-container-51d70c106ac69 || Targets the specific container body where ID# is 51d70c106ac69 ||[[Builder_CSS:_Classes_and_IDs#Container_ID_.28Container.29|Container ID (Container)]]
+
|'''[builder-container] #ID''' || #builder-container-51d70c106ac69 || Targets the specific container body where ID# is 51d70c106ac69
 
|-
 
|-
|'''[builder-module-backgroud-wrapper]''' || .builder-module-background-wrapper ||
+
|'''[builder-module-backgroud-wrapper]''' || .builder-module-background-wrapper
 
|-
 
|-
|'''[builder-module-outer-wrapper]''' || .builder-module-outer-wrapper ||
+
|'''[builder-module-outer-wrapper]''' || .builder-module-outer-wrapper
 
|-
 
|-
|'''[builder-module] #ID''' || #builder-module-51d70c106ab33 || Targets the specific module where ID# is 51d70c106ab33 || [[Builder_CSS:_Classes_and_IDs#Module_IDs|Module IDs]]
+
|'''[builder-module] #ID''' || #builder-module-51d70c106ab33
 
|-
 
|-
| '''[builder-module-block-outer-wrapper]''' || .builder-module-block-outer-wrapper ||
+
| '''[builder-module-block-outer-wrapper]''' || .builder-module-block-outer-wrapper
 
|-
 
|-
|'''[builder-module-block]''' || .builder-module-block ||
+
|'''[builder-module-block]''' || .builder-module-block
 
|-
 
|-
 
|}
 
|}

Revision as of 15:13, July 18, 2013

Contents

Container

Background Wrapper

Outer Wrapper

Module

Block

Element

Builder's Construction of CSS Wrappers

The following is a basic outline of Builder's construction of CSS wrappers.


[BODY] #ID
[builder-container-background-wrapper]
[builder-container-outer-wrapper]
[builder-container] #ID
[builder-module-backgroud-wrapper]
[builder-module-outer-wrapper]
[builder-module] #ID
[builder-module-block-outer-wrapper]
[builder-module-block]


For Example:

Output (IDs are examples) Description
[BODY] #ID #builder-layout-51d70c106ac69 Targets the specific Layout body where ID# is 51d70c106ac69
[builder-container-background-wrapper] .builder-container-background-wrapper
[builder-container-outer-wrapper] .builder-container-outer-wrapper
[builder-container] #ID #builder-container-51d70c106ac69 Targets the specific container body where ID# is 51d70c106ac69
[builder-module-backgroud-wrapper] .builder-module-background-wrapper
[builder-module-outer-wrapper] .builder-module-outer-wrapper
[builder-module] #ID #builder-module-51d70c106ab33
[builder-module-block-outer-wrapper] .builder-module-block-outer-wrapper
[builder-module-block] .builder-module-block

For Individual Modules


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox