Open up the wordpress theme you are using and inside it open the header.php document you will probably see this:

<body <?php body_class(); ?>>

The body_class() capacity is a flawless little capacity that releases CSS classes that make it simple to change the foundation shade of your About page, for instance. It's not difficult to discover the particular CSS class to target. Here is the manner by which you do it:

View the source code of any page and quest for the <body> tag. On this page, for instance, the <body> label resembles this:

<body lang="en" class="single single-tips postid-2811 single-format-standard logged-in admin bar browser-chrome">

The class="" is the part we are principally intrigued by for this tip. Every one of those CSS classes (single, single-tips, postid-2811, etc.) give us CSS snares to focus in our template, in the same way as this:

.single { background-color: black }

.single-tips { background: #ededed url(http://example.com/images/this-is-your-background-image.jpg) repeat top left; }

.postid-2811 { background-color: #ccc; }

As should be obvious, Wordpress permits granular control over the CSS on every single page. Here is the extent of each one class above:

  • .single – all single posts, applies to all posts
  • .single-tips – all single tips, applies to all tips
  • .postid-2811 – just this particular post, doesn't have any significant bearing to any others
  • .single-format-standard – applies to all posts with the "standard" post configuration chose
  • .logged-in – shows for clients who are logged in
  • .admin-bar – just shows if the administrator bar is empowered
  • .browser-chrome – just shows when clients are utilizing the Google Chrome program. This classes progressions relying upon which program is constantly utilized.

Really perfect, eh? You could even augment textual styles, adjust text style shades, or truly change about anything by focusing on these CSS classes in your template. For instance, here is the manner by which you could extend section text styles on single posts just:

.single p { font-size: 1.2em; }

It's not difficult to run over the edge with this. Kindly don't. Outline consistency is vital in web plan. That said, the body classes above will permit you do style every last page or post contrastingly in Wordpress with a tiny bit of CSS.

Services