Builder CSS: Classes and IDs Overview

From IThemes Codex
(Difference between revisions)
Jump to: navigation, search
(Ordered Classes)
(Ordered Classes)
 
(One intermediate revision by one user not shown)
Line 28: Line 28:
 
==Ordered Classes==
 
==Ordered Classes==
  
Modules can be targeted by their order in the Layout.
+
Modules can be targeted by their order in the [[Builder_Layouts:_Introduction|Layout]].
  
 
<br />
 
<br />
  
===Targeting Modules based on their position in the [[Builder_Layouts:_Introduction|Layout]]===
+
===Targeting Modules based on their position in the Layout===
  
 
{| class="wikitable"  
 
{| class="wikitable"  

Latest revision as of 08:52, July 30, 2013

Contents

Classes

Builder Default Module Classes

Builder Module classes apply site-wide styles to specific Modules:


Class Description
.builder-module-header The Header Module
.builder-module-navigation The Navigation Module
.builder-module-image The Image Module
.builder-module-content The Content Module
.builder-module-widget-bar The Widget Bar Module
.builder-module-footer The Footer Module
.builder-module-html The HTML Module


Ordered Classes

Modules can be targeted by their order in the Layout.


Targeting Modules based on their position in the Layout

Class Description
.builder-module-1 First Module from the top
.builder-module-2 Second Module from the top


Applying ordered classes to Builder Module Classes

Class Description
.builder-module-image-1 First Image Module from the top
.builder-module-widget-bar-2 Second Widget Bar Module from the top


Combining order with module classes

Class Description
.builder-module-1 .builder-module-sidebar All sidebars in first module


Misc. Classes

By default, style rules apply to all sections of the site. For a finer and granular control, it is possible to restrict the style rules to:

  • Home (i.e, site's front page)
  • Posts page
  • All Pages
  • A Layout
  • A specific Page
  • All posts
  • A specific post
  • All archives and category listings
  • A specific category


Class Description
.home Homepage only
.home Posts page only
.home All pages
.home All single post entries
.archive Any category or date or tag archive page
.category All category archive pages
.category-issues Archive page of a specific category whose slug is "issues"
.category-18 Archive page of a specific category whose ID is 18
.tag Tag archive page
.page-id-500 A specific Page whose ID# is 500
.postid-392 A specific Post whose ID# is 391


Template Classes

The following classes target specific templates

Class Description How to locate
.builder-template-index View Class (body) View the source of the page when logged in as an admin


View Classes

The following classes target specific templates

Class Description
.builder-view-home The Home View
.builder-view-post-1053 View Class (body)


IDs

IDs can be found by viewing the source of the page when logged in as an admin.

Layout ID (Body)

Targets the body of a specific layout using IDs

Example Description
#builder-layout-4f4443ee86124 Targets the specific Layout body where ID# is 4f4443ee86124


Container ID (Container)

Example ID Description
#builder-container-4f4443ee86124 Targets the specific container body where ID# is 4f4443ee86124


Module IDs

Target specific modules using IDs.

Example ID Description
#builder-module-5067807ebedd5 Targets the specific image module where ID is 5067807ebedd5
#builder-module-506780b5e46de Targets specific navigation module where ID is 506780b5e46de


Combinations of Classes & IDs

Example Description
.home .builder-module-content .builder-module-sidebar .widget Targets sidebar widget of the content module on the home page
.home .builder-module-content .builder-module-sidebar h4.widget-title Targets sidebar widget title of the content module
.builder-module-content .builder-module-sidebar .widget Targets widget in content module sidebar
.builder-module-content .builder-module-sidebar.right .widget Targets widget in right sidebar of content module


Target specific modules using a combination of IDs + Classes

Example Description
#builder-module-4ddb5b00e3efd .widget Targets widget module where ID of module is 4ddb5b00e3efd
#builder-module-4d3956642cc05 .middle .widget Targets middle widget module where ID of module is 4d3956642cc05
#builder-module-4d3956642cc05 .left .widget Targets left widget module where ID of module is 4d3956642cc05

See also


← Back to Builder Codex Home

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox