Documentation › Headway CSS Map

Headway CSS Map

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

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress