WordPress Tip – Add tabs to your sidebar!

There can be lots of reasons why the scripts that you have attempted to use for creating tabs in your sidebar are not working.
Problems can include: various factors, including some weird ones, having other anchor links (like #comments) in the WordPress theme, a conflict between Prototype framework used by WordPress and jQuery used by a script, etc, etc.
Try out Yahoo! UI Library.
Their TabView works great and is very quick to install.
How To Implement Yahoo! TabView
1st – realize that you won’t be able to insert widgets into the tabbed navigation, using the visual editor from WordPress admin, you’ll have to add them from the outside of the tabbed navigation.
2nd – Add the script reference to your header.php and the HTML code to the sidebar.php file.
3rd – The CSS
.yui-navset {     background: #E8F4FD;     padding: 5px 5px 3px 5px;     margin-bottom: 35px; }Styling for the actual tabs (yui-nav):
.yui-nav li {     list-style: none;     float: left;     margin-right: 2px;     text-align: center;     font-size: 90%;     font-weight: bold; }  .yui-nav li a {     text-decoration:none;     color: #005288;     display: block;     padding: 8px; }  .yui-nav li.selected a {     background: #FFFFFF; }  .yui-nav li a:hover {     color: #000; }Styling for the content holder (yui-content):
.yui-content {     background: #FFFFFF;     clear: both; }Of course you will also have to style the content itself, like unordered lists, paragraphs, etc. For example, my content is made of unordered lists, which have the following style assigned to them:
.tab-list li {     padding: 8px;     border-bottom: 2px solid #E8F4FD; }
This adds that nice white space around the list items, as well as a 2px bottom border.
That’s it!

There can be lots of reasons why the scripts that you have attempted to use for creating tabs in your sidebar are not working.

Sidebar tabs

Problems can include: various factors, including some weird ones, having other anchor links (like #comments) in the WordPress theme, a conflict between Prototype framework used by WordPress and jQuery used by a script, etc, etc.

Try out Yahoo! UI Library.

Their TabView works great and is very quick to install.

How To Implement Yahoo! TabView

1st – realize that you won’t be able to insert widgets into the tabbed navigation, using the visual editor from WordPress admin, you’ll have to add them from the outside of the tabbed navigation.

2nd – Add the script reference to your header.php and the HTML code to the sidebar.php file.

3rd – The CSS

.yui-navset {     background: #E8F4FD;     padding: 5px 5px 3px 5px;     margin-bottom: 35px; }Styling for the actual tabs (yui-nav):

.yui-nav li {     list-style: none;     float: left;     margin-right: 2px;     text-align: center;     font-size: 90%;     font-weight: bold; }  .yui-nav li a {     text-decoration:none;     color: #005288;     display: block;     padding: 8px; }  .yui-nav li.selected a {     background: #FFFFFF; }  .yui-nav li a:hover {     color: #000; }Styling for the content holder (yui-content):

.yui-content {     background: #FFFFFF;     clear: both; }Of course you will also have to style the content itself, like unordered lists, paragraphs, etc. For example, my content is made of unordered lists, which have the following style assigned to them:

.tab-list li {     padding: 8px;     border-bottom: 2px solid #E8F4FD; }

This adds that nice white space around the list items, as well as a 2px bottom border.

That’s it!

You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.

Powered by WordPress | AT&T Cell Phones for Sale at iFreeCellPhones.com | Thanks to PalmPreBlog.com, MMORPGs and Online Shopping