Builder CSS: Viewing Page Source

From iThemes Codex
Jump to: navigation, search

Builder displays the overarching Module ID#, Layout ID#s, Views and other helpful information for any post or page. This information can be found by viewing the source of the page when logged in as an admin.

View Page Source

When logged in as an admin, right click on any page of your Builder site and click View Page Source.

View the Page Source

This will display the source code of the page. Scroll until you see this block of info:

Example Source Code Information

From here, the following information will be visible (*example info only*):

Example Output Description
Layout: Home The current Builder Layout of the page
Template File: page.php The current template file of the page
Active View Function: builder_is_home The function of the active View of the page
Views: home, singular, page, page-59 The Views of the page
View Functions: builder_is_home, builder_is_singular, builder_is_page The View functions of this page
Template Class (body) .builder-template-page The template class
View Class (body): .builder-view-home The View class
View Class (body): .builder-view-singular The View class
View Class (body): .builder-view-page The View Class
View Class (body): .builder-view-page-59 The View Class
Layout ID (body): #builder-layout-4ea7299be3aec The Layout ID of this page
Container ID (container): #builder-container-4ea7299be3aec The container ID for this page
Module ID: header: #builder-module-5095c6295095d The header ID for this page
Module ID: widget-bar: #builder-module-5143b5063855c The widget bar ID of this page
Module ID: footer: #builder-module-509834349f60b The footer ID of this page

Inspecting Individual Elements

Right click on any element and click Inspect Element.


This will display classes and IDs for elements on the page. Each element will have multiple classes that can be used to style it. The list will be ordered from general to specific.


For example, a single element on this page has the following classes:

Example Output Description
builder-module Any Builder Module
builder-module-2 The second module on the page
builder-module-content-1 The first content module on the page
builder-module-middle The middle module on the page
builder-module-content-last The last content module on the page
builder-module-before-navigation The module that proceeds the Navigation Module
builder-module-after-header The module following the Header Module
builder-module-51f29d795ae04 The specific Module ID

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.


See also

← Back to Builder Codex Home