Conditional CSS for IE

Shelley — Tue, 17 Nov 2009 15:38:37 +0000

Two methods for applying IE-specific styles.

Add Custom Classes to the Body Tag ∞

Place this code in custom_functions.php:

function add_ie_classes($classes) {
  $browser = $_SERVER['HTTP_USER_AGENT'];
  if (preg_match("/MSIE/", $browser)) {
  $classes[] .= 'ie';
    if (preg_match("/MSIE 6.0/", $browser))
	  $classes[] .= 'ie6';
    elseif (preg_match("/MSIE 7.0/", $browser))
	  $classes[] .= 'ie7';
    elseif (preg_match("/MSIE 8.0/", $browser))
	  $classes[] .= 'ie8';
  }
  return $classes;
}

add_filter('thesis_body_classes', 'add_ie_classes');

Note that if you’re using caching plugins, this method may not be ideal.

Add a Custom IE Stylesheet to Head Section ∞

Create a stylesheet (named iestyles.css in this example) in your Thesis custom folder to hold your IE-only styles; and then place this code in custom_functions.php:

function add_ie_css() {
  $sheet = get_bloginfo('template_url') . '/custom/iestyles.css';
  echo "\n";
  echo '';
}

add_action('wp_head','add_ie_css');

Note: By placing iestyles.css in the custom folder, it will also become editable using the Thesis Custom File Editor.

Using Custom CSS Classes for Posts and Pages

Shelley — Tue, 09 Jun 2009 14:24:41 +0000

By default, Thesis automatically adds a specific body class for every Page (not Posts) according to its title. For example, the body tag for your About Page looks like this (assuming you’ve already enabled the Thesis option to “Use custom stylesheet”):

So, for example, if you wanted the h1 tag on your “About” page to be red (without affecting the same tag when it appears on other pages of your site), you could use this in your custom.css file:

.custom.about h1 {
   color: red;
}

Category pages are assigned a custom body class based on the category’s slug. For example, the body tag for the “General” category page looks like this:

Archives pages are assigned a custom body class based on the archive type and the time period covered. For example, the body tag for the “January 2010” archives page looks like this:

To assign a custom class to individual Posts, you can use the SEO Details and Additional Style section of the Edit post panel. Look for the CSS Class field, and enter the name of the custom class you’d like to use for the post. (Note: CSS class names cannot begin with numbers!)

You can then specify styles for that particular class name in your custom.css file, similar to the example shown above for the About Page.

(Note that you can also use this same field on the Edit page panel, but doing so will replace the default class Thesis already assigns to the body tag with whatever class you’ve designated instead.)

class – Thesis Docs

Conditional CSS for IE

Add Custom Classes to the Body Tag ∞

Add a Custom IE Stylesheet to Head Section ∞

Using Custom CSS Classes for Posts and Pages