If you got a page with many subpages, it’s great to have a dropdown functionality in the navigation bar. Let’s say you’re working on a guide, with several parts. The guide can have a primary page, that is shown in the navigation menu, plus 4 parts or subpages that is shown when hovering the primary link.
The first option is a plugin called Multi-level Navigation Plugin. This provides a dropdown navigation menu, with lots of options. Fill the settings page however you want, and use the code <?php if (function_exists('pixopoint_menu')) { pixopoint_menu(); } ?> where you want to use it. You must remove your current navigation bar, if you don’t want two bars.
The second alternative is creating dropdown menus by CSS. kristarella.com has got a great guide for doing this in the Thesis Theme. She also shows a AJAX code so it works with Internet Explorer. It’s the one I use, and I think it’s the best option for me.
by John Ankarström on May 24, 2009
in Design
At WordPresser, the first letter in post is a huge capital letter. When I wanted to do this, I thought I had use p:firstletter everywhere I wanted it. This could be tricky, because all themes doesn’t have the same div-, p-, or whatever-classes for posts. Then I found a guide at WordPress Guy that shows how to make those big capital, by easily inserting a <span>. You just have to insert a CSS code into your style sheet. This works everywhere CSS and HTML works.
He also shows a code for doing this automatically in WordPress. Excellent! This is the best guide I’ve found for doing this.
Obviously, you can insert the <span> anywhere in your template, but the automation code will be useless everywhere, it just doing this in posts.
As you can see, my navigation bar isn’t the original one. So, this post shows how to customize the navigation bar like I did. This is valid CSS, but with 2 warnings. This is based on the kristarella.com code, but works better.
All you have to do is insert this in the custom.css file. This file is located under wp-content/themes/thesis-15/custom. Here’s the code:
.custom ul#tabs li {background:#909090;}
.custom ul#tabs li.rss {background:none;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#767676;}
.custom ul#tabs li.rss a:hover {
text-decoration: underline;
background: url(http://wpresser.com/wp-content/themes/thesis/images/icon-rss.gif) no-repeat;
background-position: right;}
.custom ul#tabs li a:hover {text-decoration:none; background:#686868;}
.custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#686868;}
.custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#686868;}
Replace http://wpresser.com with your own web address.
The .custom tabs li styling will set the standard background color of the tabs not active or hovering. Feel free to change all colours.
Then what makes this stands out from the crowd? In every other guides I’ve found to add similar functionality, the Subscribtion-button also gets the background, and the little RSS-icon disappears when hovering! The styling of my .custom ul#tabs li.rss and .custom ul#tabs li.rss a:hover solves this. The first one, makes so the tab background doesn’t affect the Subscribe-button. The second one makes so the Subscribe-button will instead use the RSS-icon as background when hovering, it’ll be aligned to right, and the text-decoration is set to underline. Of course you can change this too, but I like it this way.
