This article gives some guidance on targeting layouts, elements, and blocks in WordPress and Headway HTML for styling. Use these selectors in the Live CSS Editor to further customize your site’s CSS. Most code samples are prefaced with body.custom (see the first section for an explanation).
Body Classes
Body classes include the custom class and other classes that target particular layouts. These classes must appear immediately after the body selector (no space).
body.custom
In your live WordPress-Headway site, the <body> tag has a class of “custom,” among others. Out of the box, this particular class does nothing. It’s included so that if you want to code your own CSS, you can preface your selectors with body.custom to identify which changes you made. Doing this can help when troubleshooting with web development tools like Firebug—you’ll know which CSS code is yours and which is Headway’s.
In other words, these two selectors would do the same thing:
body.custom .boxshadow h1 .boxshadow h1
The only difference is that you know for sure that you added all of the attributes and values under the body.custom version yourself.
Note: In Headway versions earlier than 3.0, using body.custom was required for custom CSS. Starting with version 3.0, the main reason to use it is for troubleshooting.
The Home Page
Class: home
Selectors:
body.custom.home body.home
The Blog Index
Class: blog
Selectors:
body.custom.blog body.blog
Layouts Being Used
These classes take advantage of layout inheritance or the use of layout templates. Use these selectors to target a full set of child layouts or layouts using a particular layout template.
Classes:
- layout-using-index
(for layouts inheriting from Blog Index) - layout-using-single
(for child layouts of Single) - layout-using-archive
- (for child layouts of Archive)
- layout-using-template-1
(where 1 is the consecutive number assigned to the layout template; this class does not use a slug based on the template’s name)
Selector examples:
body.custom.layout-using-index body.custom.layout-using-template-2 body.layout-using-single
Posts and Pages
Post and page IDs can be found in permalinks (if they are set to use IDs) and in the URL of the WordPress edit screen for the post or page.
Classes:
- single
(for an individual post) - page
- page-slug-my-slug
(where my-slug is a particular page’s slug) - pageid-99
(where 99 is the page’s ID) - layout-single-post-99
(where 99 is the post’s ID) - layout-single-page-99
(where 99 is the page’s ID)
Selector examples:
body.custom.single body.custom.page-slug-about-me body.custom.pageid-10 body.page body.layout-single-post-13
Post Types
Classes:
- post-type-post
- post-type-page
(has the same effect as the “page” class selector) - post-type-my-slug
(for custom post types, where my-slug is the custom type’s slug)
Selector examples:
body.custom.post-type-post body.custom.post-type-product-demos body.post-type-page
Category Archives
Classes:
- category
(for all category archive pages) - category-my-slug
(where my-slug is the category’s slug) - s-category-my-slug
(where my-slug is the category slug; this targets single posts in the specified category)
Selector examples:
body.custom.category body.custom.category-tuesday-talk body.s-category-thursday-thoughts
Author Archives
Classes:
- author
(for all author archive pages) - author-username
(where username is the author’s username, which can’t be changed) - s-author-username
(where username is the author’s username, which can’t be changed; this targets single posts by the specified author)
Selectors:
body.custom.author body.custom.author-admin body.s-author-jdoe
whitewrap
The element directly after the body element is a div that contains everything else. It has the id (not class) of “whitewrap.” Because it contains everything on the webpage, its height is always the height of the entire page.
One use of #whitewrap is to add a background image at the bottom of your webpages in addition to one at the top. To create this effect, you would add a background image to the top of the body element and a background image to the bottom of #whitewrap.
body.custom { background: url('images/bgtop.png') repeat-x top left; } body.custom #whitewrap { background: url('images/bgbottom.png') repeat-x bottom left; }
wrapper
Inside #whitewrap is a div with a class of “wrapper,” which contains the rest of the site. The default margins of .wrapper in Headway Base are:
30px auto;
Setting 30px to 0px in Design Mode removes the top and bottom margins.
If you want your site to be set against the left side of the page instead of horizontally centered inside #whitewrap, add this code in the Live CSS Editor:
body.custom .wrapper { margin: 0; }
Sections
Headway webpages use the HTML5 “section” element with two classes: “row” and “column.” Rows hold columns, which hold blocks. When you arrange blocks in Grid Mode, Headway interprets your layout into rows and then columns. Use these selectors to target rows and columns in general:
body.custom .row body.custom .column
The column sections have additional classes related to ordering, position, and width:
- column-1
(where 1 is consecutive numbering starting from the left) - grid-left-3
(where 3 indicates the number of Grid Mode columns from the left side of the grid where the section begins; valid values are 0–23) - grid-width-10
(where 10 indicates the number of Grid Mode columns that this section spans)
For example, if you wanted a particular background image for all blocks in the second column:
body.custom .column-2 { background: url('images/gradient.png') repeat-x top left; }
Blocks and Block Content
Blocks can be styled 1) generally, 2) by ID, and 3) by type.
General
Use the “block” class to apply styles to all blocks. For example:
body.custom .block { border: 1px solid #ccc; }
To target content within blocks, use the “block-content” class. Sometimes it’s better to use this class instead of .block. For example, if you wanted more white space around your content, add padding to .block-content instead of .block to avoid affecting the size of the block itself and possibly disrupting your layout.
body.custom .block .block-content { padding: 10px; }
Important: If you’re using LoopBuddy, don’t use .block-content. Refer to their documentation about CSS classes for content.
Type
Each block type has a corresponding class that, for ease of remembering, is like a slug prefaced with “block-type-“:
- Header: block-type-header
- Navigation: block-type-navigation
- Content: block-type-content
- Footer: block-type-footer
- Breadcrumbs: block-type-breadcrumbs
- Custom code: block-type-custom-code
- Widget area: block-type-widget-area
- Text: block-type-text
- Slider: block-type-slider
- Embed: block-type-embed
- Image: block-type-image
- Pinboard: block-type-pinboard
- Social: block-type-social
- Search: block-type-search
- Listings: block-type-listing
ID
A block’s ID is displayed in the upper-left corner of the block when you mouse over it. It’s not recommended that you customize CSS by block ID because your CSS could get unwieldy fast. And it’s hard to know by looking at the CSS why block 7 should have a black background and white text. It’s better to add custom classes in the Live CSS Editor and then assign those classes in the block options.
That said, you may have a specific reason for wanting to target a block by its ID, so use this ID (not class):
#block- 99
(where 99 is the block’s ID)
Additional Content Styling
Use these classes for more targeted styling within content blocks.
Structure
See this sample HTML source code on snipplr. You can target any of the elements or classes you see in this code.
Post and Page Titles
To target post titles on single posts, use one of these:
body.custom .entry-title body.custom h1.entrytitle
To target the titles on other pages (like the blog index and archives) that link to single posts, use one of these:
body.custom .entry-title a { } body.custom h2.entry-title a { }
For information about hiding post and page titles, see “Display” in Content Block Options.
Post Meta Data
All meta data has the class of “entry-meta,” plus an additional class depending on the placement and type of meta data:
- entry-meta-above
(div class applied when located between the title and body) - entry-utility-below
(div class applied when located below the body) - entry-date
(span class applied to the date only, not the “Published on” text) - published
(span class applied to the date only, not the “Published on” text) - author-link
(link class applied to the post author’s name) - fn
(link class applied to the post author’s name) - nickname
(link class applied to the post author’s name) - url
(link class applied to the post author’s name) - entry-comments
(link class applied to the number of comments)
Examples:
body.custom .block-type-content div.entry-meta span.entry-date body.custom .block-type-content div.entry-meta a.entry-comments
Post Content
WordPress applies several classes to posts. Each post has the “hentry” class and may have other classes assigned:
- Post ID: post-99
(where 99 is the post’s ID) - Custom post type: type-my-slug
(where my-slug is the custom post type’s slug) - Post status: status-publish; status-pending; status-draft; status-new; etc.
( see the WordPress Codex for more statuses) - Post format: format-standard; format-aside; etc.
( see the WordPress Codex for more formats) - Post category: category-my-slug
(where my-slug is the category’s slug) - Post author: author-username
(where username is the author’s username)
This article was last updated for Headway version 3.8.3
