Builder CSS: Basic Structure

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Outline Example)
 
(40 intermediate revisions by one user not shown)
Line 1: Line 1:
===Builder's Construction of CSS Wrappers===
+
=Builder's Construction of CSS Wrappers=
  
The following is a basic outline of Builder's construction of CSS wrappers.  
+
The following is a basic outline of Builder's construction of CSS wrappers. For individual module construction, see the Individual Module section below.  
  
  
Line 32: Line 32:
 
|'''[builder-module-block]'''
 
|'''[builder-module-block]'''
 
|-
 
|-
 +
|'''[builder-module-element]'''
 
|}
 
|}
 
|-
 
|-
Line 55: Line 56:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
! !! Output (IDs are examples) !! Description !! More info
+
! !! Output (IDs are examples)
 
|-
 
|-
| '''[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
 
|-
 
|-
|'''[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 ||
+
|'''[builder-container] #ID''' || #builder-container-51d70c106ac69
 
|-
 
|-
|'''[builder-module-backgroud-wrapper]''' || .builder-container-background-wrapper ||
+
|'''[builder-module-backgroud-wrapper]''' || .builder-module-background-wrapper
 
|-
 
|-
|'''[builder-module-outer-wrapper]''' || .builder-container-background-wrapper ||
+
|'''[builder-module-outer-wrapper]''' || .builder-module-outer-wrapper
 
|-
 
|-
|'''[builder-module] #ID''' || .builder-container-background-wrapper ||
+
|'''[builder-module] #ID''' || #builder-module-51d70c106ab33
 
|-
 
|-
| '''[builder-module-block-outer-wrapper]''' || Targets every module's outer wrapper ||
+
| '''[builder-module-block-outer-wrapper]''' || .builder-module-block-outer-wrapper
 
|-
 
|-
|'''[builder-module-block]''' || Targets only the navigation modules ||
+
|'''[builder-module-block]''' || .builder-module-block
 
|-
 
|-
 
|}
 
|}
  
== For Individual Modules==
+
<br />
 +
 
 +
=Outline Example=
 +
 
 +
[BODY] #ID
 +
[builder-container-background-wrapper]
 +
            [builder-container-outer-wrapper]
 +
- - - -          [builder-container] #ID
 +
- - - - - -            [MODULE]
 +
- - - - - - - -        [builder-module-background-wrapper]
 +
                              [builder-module-outer-wrapper]
 +
                                    [builder-module-block-outer-wrapper]
 +
                                      .    [builder-module-block]
 +
                                      .    [/]
 +
                                    [/]
 +
                                    [builder-module-block-outer-wrapper]
 +
                                            [builder-module-block]
 +
                                            [/]
 +
                                    [/]
 +
 
 +
<br />
 +
 
 +
=Using Firefox 3D View=
 +
 
 +
To see a 3-dimensional view of the Module classes and IDs that compose a page, use Firefox and '''Inspect Element'''. Click the '''3D View''' icon. Pan and zoom to see the location of different elements.
 +
 
 +
<br />
 +
 
 +
[[File:3D-Builder.png|800px|link=]]
 +
 
 +
<br />
 +
 
 +
= See also =
 +
* [[CSS_Introduction|CSS Introduction]]
 +
* [[Builder_CSS:_Tutorial_Videos| Tutorial Videos]]
 +
* [[Builder_CSS:_Basic_Structure|Basic Structure]]
 +
* [[Builder_CSS:_Viewing_Page_Source|Viewing Page Source]]
 +
* [[Builder_CSS:_Classes_and_IDs_Overview| Classes & IDs: Overview]]
 +
* [[Builder_CSS:_Theme_CSS_Outline|Theme CSS Outline]]
  
 
<br />
 
<br />
[[:Builder_Test|← Back to Builder Codex Home]]
+
[[:Builder|← Back to Builder Codex Home]]

Latest revision as of 08:28, October 7, 2013

Contents

Builder's Construction of CSS Wrappers

The following is a basic outline of Builder's construction of CSS wrappers. For individual module construction, see the Individual Module section below.


[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]
[builder-module-element]


For Example:

Output (IDs are examples)
[BODY] #ID #builder-layout-51d70c106ac69
[builder-container-background-wrapper] .builder-container-background-wrapper
[builder-container-outer-wrapper] .builder-container-outer-wrapper
[builder-container] #ID #builder-container-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


Outline Example

[BODY] #ID
[builder-container-background-wrapper]
           [builder-container-outer-wrapper]
- - - -          [builder-container] #ID
- - - - - -            [MODULE]
- - - - - - - -        [builder-module-background-wrapper]
                              [builder-module-outer-wrapper]
                                    [builder-module-block-outer-wrapper]
                                     .    [builder-module-block]
                                     .    [/]
                                    [/]
                                    [builder-module-block-outer-wrapper]
                                           [builder-module-block]
                                           [/]
                                    [/]


Using Firefox 3D View

To see a 3-dimensional view of the Module classes and IDs that compose a page, use Firefox and Inspect Element. Click the 3D View icon. Pan and zoom to see the location of different elements.


3D-Builder.png


See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox