Puzzling Out the Styles in a Theme

Half the battle in editing style.css is figuring out how to write your selector. Often,
you won’t know the class or ID name of the page element you want to change, so
you need to do a bit of detective work.
The best starting point is to scour the HTML that WordPress creates for your page.
You can do this in any browser by visiting the page, right-clicking it, and choosing
a command with a name like “View Source.” This shows you the complete HTML
markup, and you need to search for the piece of content you want to change. To get
started, hit Ctrl+F (Command+F on Macs), and type in a bit of the text that’s near
the part of the page you want to change. For example, to change the comments
section, you might search for “Leave a Reply” to jump to the heading that starts off
the section. Many browsers make this process easier with a feature for homing in
on the HTML in a specific part of a page (Figure 13-10).
Once you find the right place—roughly—the real hunt begins. Look at the elements
just before your content, and check the class and id attributes for names you recognize,
or that seem obvious. Pay special attention to the <div> element, which
HTML pages use to group blocks of content, like sidebars, posts, menus, headers,
and footers. You’ll often find one <div> nested inside another, which lets the theme
apply a layered tapestry of style settings (which is great for flexibility, but not so
good when you’re trying to understand exactly what rule is responsible for a specific
formatting detail).

Once you have a potential class or ID name, it’s time to experiment. Pop open the
theme editor and add a new style rule that targets the section you identified. Do
something obvious first, like changing the background color with the backgroundcolor
property. That way, you can check your site and immediately determine if you
found the right element.

STYLE SELECTOR CORRESPONDS TO…
.site-header

The header section at the top of every page;
it includes the site title, site description,
navigation menu, and header image.

.site-header img

Just the header image. Use this class to
change the header’s size or position.

.site-title

The site title in the header (for example,
“Magic Tea House”).

.site-description

The byline that appears under the site title in
the header (for example, “Tea Emporium and
Small Concert Venue”).

.site

All the content in the page, including the
header and footer. The style for this class
sets the maximum width of the site layout
(currently, that’s 960 pixels).

.widget-area

The right sidebar that holds all the widgets.
The style for this class allocates 26 percent
of the available width to the sidebar, and the
content area gets the remaining space.

.front-widgets

The bottom sidebar on the front page, when
you use the Front Page template

.widget Any widget in a widget area.
.widget-title

The optional title that appears above a
widget.

.nav-menu

The navigation menu at the top of each
page.

.nav-menu li An individual entry in the navigation menu.
.colophon

The footer area on every page, starting with
the solid horizontal line that separates the
footer from the main content area

.entry-title

The title of any post. Post titles appear in
several places (including the home page, the
single-post page, and the search page). You
probably don’t want to format titles all the
same way, so you need to combine a class
name with another selector, as shown in the
next three examples

.blog .entry-title The title of any post in the main list of posts.
.single .entry-title The title of any post on a single-post page.
.template-front-page .entry-title The title of any post on a showcase page.
.entry-content

The content in the post. As with the entrytitle
class, this applies to the post content no
matter where it appears, unless you combine
this selector with another one.

.entry-meta

The information about the post, which
appears before it (for example, “Posted on
January 14, 2014” and after it (“This entry
was posted in News by Katya Greenview on
March 16, 2014.”)

.comments-area The comments area after a post.
.comment-meta

The byline for a comment, such as “Salah on
April 26, 2014 at 11:00 pm said:”

.comment-content The comment text, after the byline.
.commentlist li.bypostauthor

A comment left by you (the author of the
post).

.commentlist li.byuser A comment left by someone other than you.
.logged-in

A class added if the current visitor is logged
in as a website user (page 370). For example,
you can use the selector .logged-in body to
change the formatting of the <body> element
for people you know.

Advertisements
Puzzling Out the Styles in a Theme

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s