style – Thesis Docs

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.

Style Footer Text and Links

Shelley — Mon, 04 May 2009 12:28:04 +0000

Place this code in custom.css, then change to your preferences:

/* Customize Footer Text */
.custom #footer {
color: #888888;
text-align: right;
}

/* Customize Footer Links */

.custom #footer a {
border-bottom: 1px solid #CCCCCC;
color: #888888;
}

.custom #footer a:hover {
color: #111111;
}

Style Nav Menu Tabs

Shelley — Mon, 20 Apr 2009 18:02:14 +0000

This Answer is based on the style definitions from Thesis 1.5 or lower; in 1.6+, you can set colors for the Nav Menu under Thesis Design Options (under Fonts, Colors, and More!). For other styling, replacing #tabs in the examples below with .menu will generally be sufficient.

Change Color of All Menu Tabs ∞

Place this code in custom.css (changing the color values to use your own choices):

.custom #tabs li {
   background: #efefef;
}

Change Color of Active Menu Tab ∞

Place this code in custom.css (changing the color values to use your own choices):

.custom ul#tabs li.current-cat a, .custom ul#tabs li.current_page_item a {
  background-color: #000000;
  color: #ffffff;
}

Change Colors of Menu Tabs When Hovering ∞

Place this code in custom.css (changing the color values to use your own choices):

.custom ul#tabs li a:hover {
  background:#000000;
  color:#ffffff;
}

Remove Underline on Menu Tabs When Hovering ∞

Place this code in custom.css:

.custom ul#tabs li a:hover {
  text-decoration: none;
}

Remove Uppercase Formatting on Menu Tabs Text ∞

Place this code in custom.css:

.custom ul#tabs li a {
  text-transform: none;
}

Change Color of Borders on Menu Tabs ∞

Place this code in custom.css (changing the color values to use your own choices):

.custom #tabs, .custom #tabs li {
   border: 1px solid #ddd;
}

Note: This also affects the left and bottom borders along the nav menu itself.

Remove Borders around Menu Tabs ∞

Place this code in custom.css:

.custom #tabs, .custom #tabs li {
  border-style: none;
}

Note: This also affects the left and bottom borders along the nav menu itself.