Tag Archives: CSS

Toolbox Essentials – Tutorial: Browser Detection to Execute IE Hacks

If you are a Firefox, Chrome or Mac user, you might be familiar with this scenario: Your Thesis site looks great and you are all proud. Then a friend emails you that your page is a mess in Internet Explorer. You gaze at the attached screenshot in horror. What can you do?

A new article, “Tutorial: Browser Detection to Execute IE Hacks” gives you two solutions. They will allow you to detect the Internet Explorer browser and include CSS code just for them to get them looking right. You can detect all IE browsers, or individual ones to target the problem.

Cross-browser compatibility is a big issue for developers. Clients insist on their sites looking the same in all browsers. These methods give you the tools needed to make the sites appear the same in all versions of IE, Firefox and Chrome both on the Mac and in Windows.

These tools are not always needed, but when they are, they are essential!

Important New Article! Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags

How many times have you wanted to customize just the Home page, or just one page, or only posts? You’ve heard about Conditional Tags but don’t have a clue how to use them!

Well, you will after reading this new article!

Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags” provides all you need to know to be a master of Conditional Tags in your custom_functions.php file. Fully illustrated with code examples, it walks you through using Conditional Tags for the Home and Front pages, posts, and pages. It even shows you how to use CSS on selected pages!

This article will surely become one that you come back to again and again to get ideas for your customizations!

It is filed under the “Tips” section in a new grouping called “Code You Can Use.”

Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags

There are many times when Thesis users want to apply customizations to just one page or post or to only pages or posts. For example:

  • You want a featured post plugin to appear only on the front or Home page.
  • Only posts should have a particular message following them, and only when the full post is displayed.
  • You need to execute some CSS code on a particular page to make the headlines green.

All these examples call for the use of what are called “Conditional Tags.” As the WordPress Codex says of them:

Conditional Tags can be used … to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog.

Conditional Tags are covered fully on a page in the WordPress Codex, which lists Tags for everything from the Home page to author pages.

This article shows you how to use the most common Tags in situations that many people want to use them in.

Basic use of Conditional Tags

Conditional Tags are always used in functions in the custom_functions.php file, and always within if statements.

All of the Conditional Tags covered in this article have the same syntax:

  • The Tag is followed by opening and closing parentheses.
  • If the Tag applies to all pages or posts there is nothing within the parentheses.
  • The condition to be tested is enclosed in quotes within the parentheses if a particular page or post is being called for. Note that the tags testing or the Home or front pages never have parameters.
  • All Conditional Tags evaluate to either “True” or “False.”

For example, the Conditional Tag testing for a page named “Some Page” would look like this: is_page('Some Page'). If it were simply testing that the document is a page rather than a post, it would be written: is_page()

The most commonly used Conditional Tags

The WordPress Codex article has Tags for everything you can imagine, but I find myself using the same ones over and over. They are:

  • is_home() tests whether the document being displayed is the Home page of a blog.
  • is_front_page() tests for the front page of either a blog or a static site, as set on the “Settings > Reading” admin panel. I tend to use this much more than the is_home() Tag since it covers both blogs and static sites.
  • is_page() determines whether the document on the screen is a page or a post. When used with a parameter, it can test for specific pages.
  • is_single() is used when you want to tell whether the document being displayed is a single post. A parameter within the parentheses enables it to test for a particular post.

Tags for the front or Home page

There are many instances when you only want something to appear on the front or Home page of your site. Using the is_front_page() Conditional Tag allows you to do this. As mentioned, I use this Tag in preference to the is_home() Tag, since is_home() tests only for the Home page of a blog, and is_front_page() tests for the front page of either a blog or a static site. I’m lazy!

Note that is_front_page() and is_home() do not take any parameters. Their opening and closing parentheses are always empty!

Say you are using a featured post plugin that you only want displayed on the front page. Following is how you would do it:

function test_for_front_page() {
if (is_front_page()) {
...code for the plugin...
}
}

You can also use this model for anything that you only want to appear on the front page, such as boxes placed above the sidebars, and even swapping headers (more on putting CSS into a function is found below).

The is_single() Tag for posts

The Tag is_single() is used for posts when they are displayed on a single page, as when you click on a blog post’s title on the front page of your blog and it goes to the post’s page.

Instances for the use of this Tag would be:

  • When you want a special message to be displayed at the end of all posts when displayed on their own page.
  • If you want a particular ad to be displayed only on post pages
  • A warning box should be displayed only on one post

Note: Although there is an is_page() Tag for pages (described below), there is no is_post() Tag! Always use is_single() for posts.

Testing for all posts

If you want all posts (and not pages) to have a particular item, use the is_single() Tag without any parameters within the parentheses. The following example would execute its code for all posts:

function test_for_posts() {
if (is_single()) {
...code for all posts...
}
}

Testing for a single post

To test for a certain post, you must put parameters within the parentheses between single quotation marks. Most of the time, I use either the post name or the post’s number (there are other parameters — check the WordPress Codex article for more).

I usually use the post name in the parameter and only use the post number when some character or word in the title causes PHP to complain. (If you don’t know how to find the post number, check out the “Quickie: How to Find a Page or Post’s Number” article.) For example:

function test_for_post() {
if (is_single('Some Post')) {
...code only for this post...
}
}

or if using the post number…

function test_for_post() {
if (is_single('234')) {
...code only for this post...
}
}

Note that when using post names, the name must be exact, with all the capitals, punctuation, etc!

If you want to be absolutely sure that a post is found, you can test for both the name and number by using the PHP “and” logical operator &&. It returns “True” if both the name of the post is “Some Post” and the post number is “234:”

function test_for_post() {
if (is_single('Some Post') && is_single('234')) {
...code only for this post...
}
}

You can also use the array parameter to test for a single post. The following example returns “True” if either the post name is “Some Post” or the post number is “234.” Note that the array parameter has parentheses of its own, and the post number is not put within single quotation marks:

function test_for_post() {
if (is_single(array(234,'Some Post'))) {
...code only for this post...
}
}

When using the array parameter be careful about your parentheses. In the example above you have one pair of parentheses for the if statement, one for the is_single() Tag and another for the array parameter, which means you end up with three closing parentheses at the end of the statement.

Testing for multiple posts

You can also use these methods to test for multiple posts. Say you want to want to display an ad on either of two posts. You would use the PHP logical operator || which means “or.” The following is_single() Tag would evaluate “true” if the post is either named “First Post” or is number “789:”

function test_for_post() {
if (is_single('First Post') || is_single('789')) {
...code for either post...
}
}

Once again, you can use the array parameter, this time for multiple posts. In the following example, we are testing for posts named “First Post,” “Second Post,” and “Third Post.” If the post being tested has any of these names it returns “True.” Note that the post names are enclosed within single quotation marks, and have a comma but no spaces between them:

function test_for_post() {
if (is_single(array('First Post','Second Post','Third Post'))) {
...code for any of these posts...
}
}

The is_page() Tag for pages

The is_page() Tag is used for pages (not posts). Its parameter syntax and uses are the same as for posts, so they will only be mentioned here:

  • Use the is_page() Tag without anything within the parentheses to test for all pages.
  • To test for a single page, you can use the page name within the Tag’s parameters, for example: is_page('Some Page')
  • You can also use the page number to test for a single page: is_page('234')
  • The syntax is the same for testing for multiple posts as for pages, except you use the is_page() Tag instead of the is_single() tag.

This example tests that the document is a page and not something else:

function test_for_any_page() {
if (is_page()) {
...code for all pages...
}
}

The following example tests for a page named “Some Page” and with the page number “234:”

function test_for_page() {
if (is_page('Some Page') && is_single('234')) {
...code only for this page...
}
}

And this example will evaluate as true if any of the pages have one of the names listed:

function test_for_pages() {
if (is_page(array('First Page','Second Page','Third Page'))) {
...code for any of these pages...
}
}

Executing CSS on pages or posts

In the article “Quickie: Executing CSS in custom_functions.php” I show you how to execute CSS within the PHP of your custom_functions.php file. Here is how to do it for just one post using one of the examples above — I’m sure you can figure out how to use it in the other instances covered above:

function test_for_post() {
if (is_single('Some Post')) {
?>
<style type="text/css">
.custom #some_id { background: #000000; }
.custom .some_class { position: relative; }
</style>
<?php
}
}

Conclusion

I hope this article is useful to you and that it will enable you to do things in custom_functions.php that you weren’t able to do before. As always, your comments are welcome. If you want to contact me directly by email, you may click on the “Contact” tab in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

Another New Menu! CSS Multilevel Dropdown Menu!

I just love menuing systems, and have posted my fifth one for your enjoyment.

It’s a CSS-only Multilevel Dropdown Menu, meaning that there is no JQuery, no JavaScript, and no plugin. That’s right — you can now have a multilevel dropdown menu at the same time as all of your favorite plugins like Featured Content Gallery.

Another big plus is that this menu is completely compatible with all major Windows and Mac browsers, including the notoriously hard-to-please Internet Explorer 6.

The CSS Multilevel Dropdown menu has these outstanding features:

  • CSS only — no JQuery, JavaScript or plugins!
  • Any URL can be put in any menu item, unlike the Thesis 1.6 menu
  • Completely compatible with Thesis 1.5x and Thesis 1.6
  • Works with Windows IE6, IE7, IE8, Chrome, Firefox and all Mac browsers
  • Very customizable — size, alignment, colors, borders, fonts, arrows, etc
  • Very easy to set up and use. No URL configuration required — it works right out of the box!
  • Great SEO: Menu items are included in the page HTML so Google and other ‘bots can index them
  • Coexists fully with JQuery plugins such as Featured Content Gallery
  • Very small CSS file takes up few system resources
  • Instant operation. No lags and flickering like JQuery menus.
  • Can have flyouts to the left as well as to the right.

Why would I be releasing a dropdown menu when the new Thesis 1.6 has them? Easy: mine does more than the Thesis menu! Here are three big differences, although there are many more:

  • You can put any URL in any menu position — there’s no restrictions or rules and no need to worry about parent-child relationships. You can mix and match pages, posts, category pages, and offsite URLs in any order you want them.
  • This menu has four levels with one dropdown and two flyouts. The Thesis menu has only a single dropdown.
  • This menu is more customizable. It can be customized in literally hundreds of combinations with an easy-to-use CSS file. It can even be made to look like the Thesis menu!

So why not give it a try-out on your site? It takes only a few minutes to set up and will enhance the looks and navigability of your blog greatly!

Tutorial: CSS Multilevel Dropdown Menu

There are several advantages to a CSS-only menuing system, the main ones being compatibility with JQuery plugins such as Featured Content Gallery, ease of setup and use, and fewer system resources used. The main problem is that most CSS-only menus are not compatible with Internet Explorer, particularly IE 6.

The CSS Multilevel Dropdown menu described in this tutorial is fully compatible with all versions of Internet Explorer and has all the advantages of CSS-only menus. It has four levels, with one dropdown and two flyouts. The flyouts can either go to the right or to the left. The menu is very versatile and can be configured in an almost endless number of ways.

You can see the menu in action above, since it is the menu used here on Thesis Theme Tools. There is also a demonstration on the Thesis Theme Tools demo site, which clearly shows all four menu levels.

Following are some illustrations of the CSS Multilevel Dropdown menu’s many modes of operation, including styling like the Thesis 1.6 menu:

Figure 1: CSS menu with one dropdown
Figure 1: CSS menu with one dropdown
Figure 2: CSS menu with two dropdowns
Figure 2: CSS menu with two dropdowns
Figure 3: CSS menu with three dropdowns
Figure 3: CSS menu with three dropdowns
Figure 4: CSS menu with left dropdown
Figure 4: CSS menu with left dropdown
Figure 5: CSS menu, left aligned tabs
Figure 5: CSS menu, left aligned tabs
Figure 6: CSS menu, tabs in center with no menu bar background
Figure 6: CSS menu, tabs in center with no menu bar background
Figure 7: CSS menu styled like the Thesis menu
Figure 7: CSS menu styled like the Thesis menu

The CSS Multilevel Dropdown menu has these outstanding features:

  • CSS only — no JQuery, JavaScript or plugins!
  • Any URL can be put in any menu item, unlike the Thesis 1.6 menu
  • Completely compatible with Thesis 1.5x and Thesis 1.6
  • Works with Windows IE6, IE7, IE8, Chrome, Firefox and all Mac browsers
  • Very customizable — size, alignment, colors, borders, fonts, arrows, etc
  • Very easy to set up and use. No URL configuration required — it works right out of the box!
  • Great SEO: Menu items are included in the page HTML so Google and other ‘bots can index them
  • Coexists fully with JQuery plugins such as Featured Content Gallery
  • Very small CSS file takes up few system resources
  • Instant operation. No lags and flickering like JQuery menus.
  • Can have flyouts to the left as well as to the right.

This menu is based on one developed by Stu Nicholls (no relation, unfortunately). The original files can be found on his site. The CSS has been modified extensively and the functions created so that it works with Thesis.

Rather than copy the files shown below, I recommend you get everything — all files and the arrow images — in a single zip file. You can download it by clicking here.

Navigation in the Tutorial

This description of the CSS Multilevel Dropdown Menu is in 5 parts. If you want to skip to a particular part, just click on the links below:

The files used in the menu

The CSS Multilevel Dropdown menu has 3 parts: The CSS file, functions for your custom_functions.php file, and the arrows. These are listed here so you can see how the menu works. Rather than copy these, I suggest you get the zip file.

The CSS file

Following is the “normal” version of the “css-menu.css” file. Also included in the zip file is a Thesis-like version. Note that the file is extensively annotated. The values shown below are the ones used for the menu at the top of this page. If you choose to copy the file from here, be sure to name it “css-menu.css.”

/* ================================================================ 
CSS MULTILEVEL DROPDOWN MENU
Original version by Stu Nicholls Copyright (c) 2005-2009 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/anywidth2.html
Modified and annotated by Mike Nichols, October 24, 2009
=================================================================== */

/* MENU BAR WIDTH, TAB ALIGNMENT & POSITIONING */
#css_menu {
	/* width of menu */
	width: 927px;
	/* center menu tabs or not */
	text-align:center;
	/* put your positioning statements here */
}

/*-----HEIGHT OF ITEMS */
/* all menu items */
#css_menu { height: 25px; }
#css_menu a { line-height:25px; }
/* all hover items */
#css_menu a:hover ul,
#css_menu li.left a:hover ul,
#css_menu ul li:hover > ul,
#css_menu li.left:hover > ul { top:25px; }
/* flyout positioning - this number must remain negative */
#css_menu ul ul li:hover > ul,
#css_menu li.left ul li:hover > ul { margin-top:-25px;}
/*-----*/

/* ITEM ARROWS AND FONT STYLING WHEN ITEM HAS DROPDOWNS AND FLYOUTS */
/* menu arrow down */
#css_menu li a.down {
	background:transparent url(arrow-down-white.gif) no-repeat right center;
}
/* menu arrow right, font color and weight when item has flyouts */
#css_menu li ul a.flyout {
	background:transparent url(arrow-right-black.gif) no-repeat right center;
	color: #408000;
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
}
/* menu arrow left, font color and weight when item has flyouts */
#css_menu li.left ul a.flyout {
	background:transparent url(arrow-left-black.gif) no-repeat left center;
	color: #408000;
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
}

/* ITEM BACKGROUND, BORDER AND FONT STYLING */
/* level one: main menu and default font styling */
#css_menu { 
	/* remove background to get floating tabs */
	background:#000000; 
	/* font family if desired */
	/*font-family: Verdana,Arial,sans-serif;*/
	/* cursor style */
	cursor: pointer;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 0px 1px 0px 1px;*/
}

/* level one; main menu tabs */
#css_menu ul.level1 { background:#000000; }
#css_menu ul.level1 a { 
	color: #FFFFFF; 
	font-size: 1.5em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: uppercase;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 20px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
} 
/* level two dropdown */
#css_menu ul.level2 { background:#C9CC99; }
#css_menu ul.level2 a { 
	color: #000000; 
	font-size: 1.2em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: none;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 10px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
}
/* level three flyout */
#css_menu ul.level3 { background:#D0CC99; } 
#css_menu ul.level3 a { 
	color: #000000; 
	font-size: 1.2em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: none;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 10px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
}
/* level four flyout */
#css_menu ul.level4 { background:#DCCD9B; } 
#css_menu ul.level4 a {
	color: #000000; 
	font-size: 1.2em; 
	/* bold or not */
	font-weight: bold;
	/* uppercase or not */
	text-transform: none;
	/* letter spacing */
	/*letter-spacing: 2px;*/
	/* item padding */
	padding:0 20px 0 10px;
	/* border if desired */
	/*border: 1px solid #000000;
	border-width: 1px 1px 1px 1px;*/
}
/* hover - these two should be the same */
#css_menu li a:hover,
#css_menu li a.flyout:hover {
	background-color:#9DB287;
	color: #FFFFFF;
	/* bold or not */
	font-weight: bold;
	/* underline or not */
	text-decoration:none;
} 
#css_menu li:hover > a,
#css_menu ul li:hover > a.flyout {
	background-color:#9DB287;
	color: #FFFFFF;
	/* bold or not */
	font-weight: bold;
	/* underline or not */
	text-decoration:none;
}

/* INDIVIDUAL LEVEL 1 TAB BACKGROUNDS */
#css_menu #tab1 { background: #088040; }
#css_menu #tab2 { background: #6666FF; }
#css_menu #tab3 { background: #804000; }
#css_menu #tab4 { background: #004080; }
#css_menu #tab5 { background: #808000; }
#css_menu #tab6 { background: #7F7F7F; }
#css_menu #tab7 { background: #008080; }
#css_menu #tab8 { background: #A36BFE; }
#css_menu #tab9 { background: #800040; }
#css_menu #tab10 { background: pink; }

/*===== DO NOT CHANGE ANYTHING BELOW THIS LINE =====*/
#css_menu { z-index: 100; }
#css_menu a { display:block; }
#css_menu a:hover ul {left:0; }
#css_menu li.left a:hover ul {left:auto; right:-1px; }
#css_menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#css_menu ul {display:inline-block;} 
#css_menu li {margin:0; padding:0; list-style:none;}
#css_menu li {display:inline-block; display:inline;}
#css_menu ul ul {position:absolute; left:-9999px;}
#css_menu ul.level1 {margin:0 auto;}
#css_menu ul.level1 li.level1-li {float:left; display:block; position:relative;}
#css_menu b {position:absolute;}
#css_menu ul.level1 li.level1-li a.level1-a {float:left;}
#css_menu ul li:hover > ul {visibility:visible; left:0; }
#css_menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto;}
#css_menu li.left:hover > ul {visibility:visible; left:auto; right:0; }
#css_menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; }
#css_menu li.left ul a {text-align:right; padding:0 10px 0 20px;}
#css_menu a:hover a:hover ul, 
#css_menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#css_menu li.left a:hover a:hover ul, 
#css_menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#css_menu a:hover ul ul, #css_menu a:hover a:hover ul ul {left:-9999px;}
#css_menu li.left a:hover ul ul, #css_menu li.left a:hover a:hover ul ul {left:-9999px;}
#css_menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#css_menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#css_menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#css_menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

The functions for custom_functions.php

There are two functions to place into your custom_functions.php file: one to link the CSS file in the header of your page, and another for your menu definitions. Also included is code to remove the default Thesis menu. If you choose to copy the file from here, name it “for-custom_functions.php.”

/*=============================
CSS MULTILEVEL DROPDOWN MENU
Mike Nichols - October 24, 2009
===============================*/

/*-----------------------------*/
/* REMOVE THE THESIS MENU */
/*-----------------------------*/
/* UNCOMMENT ONE OF THESE TO REMOVE THE THESIS NAV MENU */
/*remove_action('thesis_hook_before_header', 'thesis_nav_menu');*/
/*remove_action('thesis_hook_after_header', 'thesis_nav_menu');*/

/*-----------------------------*/
/* LINK CSS-MENU.CSS IN HTML */
/*-----------------------------*/
function css_menu_head() {
?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(template_directory)?>/custom/css-menu/css-menu.css" />
<?php
}
add_action('wp_head','css_menu_head');

/*-----------------------------*/
/* CSS MENU ITEM DEFINITION */
/*-----------------------------*/
function css_menu() {
?>
<div id="css_menu">
<ul class="level1">

<!-- LEVEL 1 SINGLE ITEM (HOME)-->
<li class="level1-li"><a class="level1-a" href="<?php bloginfo('url') ?>">Home</a></li>

<!-- LEVEL 1 SINGLE ITEM-->
<li class="level1-li"><a class="level1-a" href="#">Single Item</a></li>

<!-- LEVEL 1 WITH ONE DROPDOWN-->
<li class="level1-li"><a class="level1-a down" href="#">One Dropdown<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a href="#">Level 2-2</a></li>
<li><a href="#">Level 2-3</a></li>
<li><a href="#">Level 2-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- LEVEL 1 WITH A DROPDOWN AND A FLYOUT -->
<li class="level1-li"><a class="level1-a down" href="#">Three Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a href="#">Level 2-2</a></li>
<li><a class="flyout" href="#">Level 2-3 One Flyout<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 3 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#">Level 3-1</a></li>
<li><a href="#">Level 3-2</a></li>
<li><a href="#">Level 3-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 2-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- LEVEL 1 WITH A DROPDOWN AND TWO FLYOUTS -->
<li class="level1-li"><a class="level1-a down" href="#">Four Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a class="flyout" href="#">Level 2-2 Two Flyouts<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 3 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#">Level 3-1</a></li>
<li><a href="#">Level 3-2</a></li>
<li><a class="flyout" href="#">Level 3-3 One Flyout<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 4 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#">Level 4-1</a></li>
<li><a href="#">Level 4-2</a></li>
<li><a href="#">Level 4-3 Items can be of any length</a></li>
<li><a href="#">Level 4-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 3-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 2-3</a></li>
<li><a href="#">Level 2-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<!-- LEVEL 1 WITH A DROPDOWN AND TWO FLYOUTS TO THE LEFT -->
<li class="level1-li left"><a class="level1-a down" href="#">Four Levels to the Left<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 2 DROPDOWN -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#">Level 2-1</a></li>
<li><a class="flyout" href="#">Level 2-2 Two Flyouts<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 3 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#">Level 3-1</a></li>
<li><a href="#">Level 3-2</a></li>
<li><a class="flyout" href="#">Level 3-3 One Flyout<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!-- LEVEL 4 FLYOUT -->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#">Level 4-1</a></li>
<li><a href="#">Level 4-2</a></li>
<li><a href="#">Level 4-3</a></li>
<li><a href="#">Level 4-4</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 3-4</a></li>
<li><a href="#">Level 3-5</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Level 2-3</a><b></b></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

<?php
}
/* UNCOMMENT ONE OF THESE LINES TO DISPLAY THE MENU */
/*add_action ('thesis_hook_after_header','css_menu');*/
/*add_action ('thesis_hook_before_header','css_menu');*/

The arrows

There are six arrows included in the zip file: A black and a white version for each of the down, right and left arrows, for a total of six arrows. Here they are:
arrow-down-black
arrow-down-white
arrow-left-black
arrow-left-white
arrow-right-black

The six menu arrows
The six menu arrows

Setting up the CSS Multilevel Dropdown Menu

Step 1: Make a folder to hold the CSS file and arrows

Figure 8: css-menu folder created
Figure 8: css-menu folder created

Create a folder named “css-menu” in your /custom folder to hold your menu files. When you are finished, it will look like Figure 8.

Step 2: Copy the menu file and arrows to the folder

Figure 9: All files copied to the css-menu folder
Figure 9: All files copied to the css-menu folder

Copy the arrow files and the “css-menu.css” file to the new folder. If you downloaded the zip file, these are contained in a folder named “for-css-menu-folder”. If you want to try the Thesis-style menu, copy the “css-menu-thesis.css” file as well. Your /custom/css-menu folder should look like Figure 9 when you are done.

Step 3: Put the functions into your custom_functions.php file

Copy the entire contents of the “for-custom-functions.php” file and put it into your custom_functions.php file. It does not matter where it goes. Do not copy the file to your server!

Important! You must remove the Thesis menu by uncommenting one of the “remove_action” lines at the top of the contents you copied. Also, you must enable your new menu by uncommenting one of the “add_action” lines at the end of the “css_menu” function. If you don’t do this, your menu will not appear!

Using the CSS Multilevel Dropdown Menu

This menu has a few more requirements for use than other menuing systems on Thesis Theme Tools because of its great versatility and the need to maintain compatibility with the Internet Explorer browsers. This takes the form of extra classes and id’s for the first and subsequent levels’ <li> and <a> tags and all <ul> tags, as well as instructions for the Internet Explorer browsers.

There are a lot of extra lines of code due to the instructions for the IE browsers, which can make editing your menu file confusing if you don’t know what to ignore. The following section will show you need to know.

Basic menu item editing

Figure 10: Basic menu item ready to be edited
Figure 10: Basic menu item ready to be edited

However many levels your menu may have, each menu item is set up the same way. Figure 10 shows a typical menu lineitem before it has been edited. Note that every lineitem begins with a <li> tag and ends with a </li> tag.

Find the “#” after the “href” tag. That is where your URL goes — just highlight the pound sign and paste your URL over it, making sure to preserve the quotation marks.

The “Level 2-1” part in Figure 10 is the description as it appears in the menu. Highlight it and type your own description in over it.

For example, here is the same line configured to go to Thesis Theme Tools’ “About” page:

	<li><a href="http://thesisthemetools.com/about/">About</a></li>

Cutting and pasting menu items

The “css-menu” function has one each of code groups for a single item, a single dropdown, a dropdown with one flyout, a dropdown with two flyouts, and a left-facing dropdown with two flyouts. To create your own menu selections, all you have to do is to copy and paste the code groups you need in the order you want them and delete the rest.

The main thing to watch out for when cutting and pasting in the “css-menu” function is to make sure that you copy or cut all of a group of code and only the desired group of code.

Figure 11: css-menu function menu hierarchy
Figure 11: css-menu function menu hierarchy

Figure 11 shows the groups of code within a 4-level block. Note that every level begins with the <li> tag which marks the beginning of a lineitem. It ends with the </li> tag which marks the end the lineitem. The code for the dropdown or flyout for a particular level is found within those beginning and ending tags.

For example, say you want to create a second level 4 flyout. Just copy the entire section marked “Level 3 lineitem begin and end” and paste it where you want it to go. Make sure you don’t paste it inside another lineitem’s code! The same would go for deleting the entire level 4 flyout, but in this case you would cut the entire section.

I suggest keeping your “for-custom_functions.php” file for future reference rather than deleting it. As time goes on you will surely want to change and expand your menu, and having the file handy for cutting and pasting will make the task much easier.

Understanding how the CSS Multilevel Dropdown Menu works

You do not need to understand how the classes and IE code works to use the menu — all you have to do is cut and paste the provided code as-is. However, to take advantage of some of the features of the menu, you need to understand how the code works, especially the classes and id’s.

As mentioned, the “css-menu” function has extra classes and id’s that provide for its great versatility and configurability, as well as extra lines of code to maintain compatibility with the Internet Explorer browsers. It can be pretty confusing to see all this extra stuff at first, but once you get used to it, the menu code is easy to follow.

Classes and id’s used in the menu

There are several special classes and id’s used with the menu to enable its configurability. They are used in specific situations which will be explained later. They are:

  • The “down,” “flyout” and “left” classes tell the menu which arrows to use and how to place them. In addition, the “left” class tells the menu to fly to the left rather than to the right.
  • The “level1-li” and “level1-a” classes tell a first level item how to create a first level item and allow level-one-only customizations.
  • The “level2,” “level3” and “level4” classes enable customizations of these levels separately
  • The “tab1,” “tab2,” etc id’s are used to enable coloring the level 1 menu tabs individually.
Figure 12: Code for Level 1 with a dropdown and a flyout
Figure 12: Code for Level 1 with a dropdown and a flyout

Level 1 lineitem format

All level 1 items must have a specific format. Note the second line in Figure 12, which is the lineitem for the level 1 item. The <li> tag has the “level1-li” class and the <a>; tag has the “level1-a” class. These allow the first level items to be configured separately from the other items.

In addition, if the level 1 line has a dropdown, the “down” arrow class must be added to the <a> tag and a line of code for IE 7 and 8 added, as pointed out in Figure 12.

Flyouts to the left
If you want your flyouts to go to the left, add the class “left” to the <li> class list in the first level lineitem only. This not only directs the flyouts to the left, but uses a left-facing arrow. Here is what it looks like:

	<li class="level1-li left"><a class="level1-a down" href="#">Four Levels to the Left<!--[if gte IE 7]><!--></a><!--<![endif]-->

Dropdown and flyout classes

Insert a “down” class into the level 1 lineitem, as indicated in Figure 12 to get the down-facing arrow for the dropdown list.

For level 3 and 4 flyouts, insert the “flyout” class into the lineitem instead, as shown in Figure 12. It not only sets up the flyout arrow, but it enables positioning the flyouts exactly.

Classes for levels 2, 3 and 4

Figure 12 shows how the classes for levels 2, 3 and 4 are used. They are inserted into the <ul> tag. They allow each level to be configured separately.

Code enabling Internet Explorer compatibility

There are three sets of code that are required for IE compatibility.

When any lineitem has a dropdown or flyout, it must have a line of code appended to the lineitem for IE 7 and 8 compatibility, as shown in Figure 12.

In addition, the unordered list for a dropdown or flyout is surrounded by two lines of code intended for IE 6, which tricks it into thinking the list is a table. These code lines are illustrated in Figure 12.

Finally, the last lineitem in a dropdown or flyout must have bold turned on and off to keep IE 6 happy. This is also noted in Figure 12.

Coloring the level 1 menu tabs individually

If you want to color the level 1 menu tabs individually like those in the menu on this page, you must add a “tab” id to the level 1 lineitem code. There are provisions in the CSS file for up to 10 colored menu tabs, but you can add more if you wish.

All you have to do is to add an id for the individual tab to the <li> definition. The tabs are numbered starting on the left as “tab1,” “tab2,” “tab3” and so on. Here is what the id looks like for the first tab:

		<li class="level1-li" id="tab1"><a class="level1-a" href="#">Menu Tab 1</a></li>	

Editing the CSS file

The “css-menu.css” file is extensively annotated, so only a few highlights will be mentioned. Note the large section at the end marked “Do Not Change Anything Below This Line.” This consists of code that has no configurability, as well as code to maintain Internet Explorer compatibility. Obviously, look but don’t touch!

Menu bar width, tab alignment and menu positioning

The menu bar width can be expressed as a percentage of the page width such as 100%, or it can be a specific value, such as 900 pixels or 68.3em. The tabs on the menu bar can be aligned left, center, or right.

If you need to position the menu, for example move it up or down, this is where your CSS code would go.

Height of items

All the item height properties are found in this group. Generally, the height value used in the entire group will be the same. You may have to vary the value for the flyouts to keep them aligned with the menu item they are flying out from.

Item arrows and font styling when item has dropdowns and flyouts

There are three kinds of arrows provided: down, right and left. Each of these has a black and white version, making for six arrows in all. This section is where you designate which arrows you want to use. Since the arrow images are in the /custom/css-menu folder, no path is necessary.

The second and third selectors have in addition font properties for the item descriptions when they have flyouts. You can change the color and weight of the font of an item, and make it uppercase. By using these you can make the items with flyouts stand out from the list of items.

Item background, border and font styling

The first selector is for “#css_menu” and has properties both for the menu bar itself and for all fonts. If you comment out the background property, the menu bar tabs will float above the page. Here is where you set the font family for all fonts and the cursor used in the menu. You can also set the border used in the main menu bar.

Each of the following four levels has identical properties for background, fonts, item padding and borders. Using these properties, you can make each level appear differently from the others.

Finally, there are the hover properties which set the background and font characteristics when an item is hovered over. The values in these two groups should be the same — they have to be split out to maintain Internet Explorer 6 compatibility.

Level 1 menu items individual coloring

The last section of the CSS file deals with the individual colors of the level 1 menu items. If you have set these up in your custom_functions.php file as described above, change the background colors of the menu items to suit.

How to use the Thesis-style CSS file

Included in the zip file is a CSS file named “css-menu-thesis.css” that configures the menu to imitate the Thesis menu. To use it, rename the “css-menu.css” file to something like “css-menu-regular.css”. Then rename the “css-menu-thesis.css” file to “css-menu”. You’re good to go!

Conclusion

I recommend you get everything — all files and the arrow images — for this menu in a single zip file. You can download it by clicking here.

I hope you have found this tutorial easy to follow and useful. The CSS Multilevel Dropdown Menu is a great addition to any site, and I encourage you to give it a try! As always, your comments are welcome, and you can contact me directly by clicking on the “Contact” tab in the menu.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!

New Articles for Newbies: Basic Syntax for custom.css and custom_functions.php!

People who are just getting their feet wet with customizations are often daunted by the strange words and punctuation they find in the code for custom.css and custom_functions.php. Even the basic format of the CSS and PHP languages are foreign.

Two new articles just published in the Newbies “Getting Started” section, “Basic CSS Syntax for custom.css” and “Basic PHP Syntax for custom_functions.php” provide just the kind of information newbies need to get a grip on their first adventures with CSS and PHP in Thesis.

Both articles are filled with illustrations of what is being discussed, and are written in clear and concise language. They cover just the what’s needed to work with Thesis and leave the long tutorials to someone else.

The PHP article, in particular, is full of advice for preventing syntax mistakes and troubleshooting errors in the custom_functions.php file. This is because even the smallest syntax error in the PHP code will bring your blog crashing down, preventing access to your blog site, and delivering only a cryptic error message. In a large number of cases — perhaps the majority — the problem is not bad code, but some tiny syntax error.

I have many more articles on tap for Newbies, and am receiving some good suggestions for more. If you would like to see an article on a subject that is puzzling you, please leave a comment or email me directly by clicking the “Contact” button.

Basic CSS Syntax for custom.css

People faced with adding a customization into the custom.css file for the first time are often overwhelmed by the task, even if it’s just a cut-and-paste operation. What are all these strange terms? Are there any rules for the punctuation marks?

And many find that their first attempt at customizations on their own fail because some little punctuation mark or bracket is left out.

The purpose of this article is to give you a basic understanding of the syntax of CSS — how the statements are put together and the punctuation rules. This will help you as you begin to read and try to understand cut-and-paste customizations, as well as when you make customizations on your own. It is not a tutorial in CSS — that would take many, many pages! A good basic online CSS tutorial can be found on the w3schools.com site. It is useful not only for CSS beginners, but as a convenient reference when you’re more experienced.

CSS statements: selector, property, and value

CSS statements are made up of three parts: a selector, a property, and a value. The selector defines an element that you see on the screen, such as text or a background color. It has properties that are the individual attributes of the element being defined, and each property has a value. For example, in the definition of a red wagon, the selector would be “wagon,” the property “color,” and the value “red.”

The basic syntax of a CSS statement is illustrated below. The property and value are surrounded by curly braces. There is a colon after the property, and a semicolon after the value:

selector { property: value; }

The following example has two lines. The first is a typical CSS statement showing correct CSS syntax for a single value. The second statement has a value of two words. If a value has multiple words, put quotes around them:

example_selector { background: #000000; }

example_text_styling { font-family: "sans serif"; }

CSS statements: one line or several

You can put several CSS properties on a single line. Each property must be separated by a semicolon. To make your CSS code more readable, you can put each property and its value on a line by itself. It makes no difference to the browser how the selector is formatted. The following example has the same selector written as a single line, then broken out:

example_text_styling { font-weight: bold; color: #000000; font-family: "sans serif"; }

example_text_styling { 
	font-weight: bold; 
	color: #000000; 
	font-family: "sans serif"; 
}

CSS comments

It is a good practice to put comments into your code. It will help when you edit your code at a later date, and it helps other people understand what your code is doing. Comments are ignored by browsers.

A CSS comment begins with “/*”, and ends with “*/”. Note that you can put comments into the middle of code blocks, as in this example:

/* This is a comment */
example_text_styling { 
	font-weight: bold; 
	/* This is another comment */
	color: #000000; 
	font-family: "sans serif"; 
}

Comment marks are also useful to disable or “comment out” a block of code. All you have to do is to surround the code with beginning and ending comment marks to make it invisible to the browser, as in this example:

/* This code has been commented out */
/*example_text_styling { 
	font-weight: bold; 
	color: #000000; 
	font-family: "sans serif"; 
}*/

When to use “.custom” in front of a selector

Thesis is unique in the way it allows you to override the CSS properties and values of selectors in the core code. The way to do this is by inserting “.custom” in front of the selector. Failing to use “.custom” to override core code is bad practice and might break the theme! For example:

/* in the core code */
#header #logo { font-weight: bold; }

/* in custom.css */
.custom #header #logo { font-weight: normal; }

The one exception to this rule is when overriding the body selector. It must be followed by the “.custom” word:

/* in the core code */
body { background: #fff; color: #111; }

/* in custom.css */
body.custom { background: #000000; color: #FFFFFF; }

You do not have to put “.custom” in front of selectors, classes, or id’s that you create. It does not hurt to do so, but it is unnecessary since you are not overriding anything in the core code.

Grouping selectors

You can group selectors together that share a common property. Remember that in custom.css each selector must have “.custom” in front of it. Each selector in a group must be separated by a comma. In the following example some of the core title header elements are grouped together, and all changed to the color black:

.custom h1, .custom h2, .custom h3 { color: #000000; } 

The class selector

You may have noticed that some selectors are preceded by a period (.). This signifies that the selector is a class definition. Classes are used in HTML elements to change their behavior. Classes are often used and shared by many HTML statements on the same screen. A class definition for titles might look like this:

.my_own_title_class { color: #000000; }

This example class could be used in an HTML statement to make titles black. Note that there is no period in front of the class name when the class is used:

<p class="my_own_title_class">This is the title</p>

In custom.css you must preserve the period in front of the class definition from the core code. Note that the class selector in this example actually has two words. It is necessary to put “.custom” only at the beginning of the line:

/* in the core code */
.format_text a { text-decoration: underline; }

/* in custom.css */
.custom .format_text a { text-decoration: none; }

The id selector

You may also have noticed that some selectors are preceded by a pound sign (#). These are called id’s and are generally created for use by a single occurrence of a specific element on the screen. A typical id definition for a 125×125 ad box might look like this:

#my_own_ad_id { height: 125px; width: 125px; }

This id would be used in an HTML statement to define the size of a screen element for the ad. Note that there is no pound sign in front of the id name when it is used:

<div id="my_own_ad_id">

In custom.css, you must preserve the pound sign in front of an id definition. Note that the id selector in this example actually has two words. It is necessary to put “.custom” only at the beginning of the line:

/* in the core code */
#header #logo { font-weight: bold; }

/* in custom.css */
.custom #header #logo { font-weight: normal; }

I hope this brief introduction to CSS syntax has been helpful to you and goes toward demystifying the custom.css file. Remember that comments are always welcome, and that you can email me directly by clicking on the “Contact” button at the top of the page.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!