Builder CSS: Viewing Page Source

From IThemes Codex
Revision as of 16:07, July 29, 2013 by Kristen (Talk | contribs)
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.


link


This will display classes and IDs for elements on the page.


Inspect-element-2.png


Each element will have multiple classes that can be used to style it. The list will be ordered from general to specific. For example, this one element has the following classes:

Example Output Description
builder-module Home The current Builder Layout of the page
builder-module-2 page.php The current template file of the page
builder-module-content-1 builder_is_home The function of the active View of the page
builder-module-middle home, singular, page, page-59 The Views of the page
builder-module-content-last builder_is_home, builder_is_singular, builder_is_page The View functions of this page
builder-module-before-navigation .builder-template-page The template class
builder-module-after-header .builder-view-home The View class
builder-module-51f29d795ae04 .builder-view-singular The View class




← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox