Dear Friend,
This is soooo exciting! I'm happy to tell you we have another great help from our friend, The Exploding Boy yet again! Yesterday by luck I came across his vertical tab designs. These are indeed very good looking and professional designs. The first thing came to my mind was, of course, downloading and examining the code to see if I could re-use the horizontal tab hack to use for both vertical and horizontal cases.
My initial thought was true, that a list is a list, and that it doesn't know if it is a vertical or a horizontal bar! Therefore, to change from horizontal to vertical, we just have to add the appropriate CSS code, then change the tab name, and you'll have vertical tabs!
After tweaking it a while, I was able to integrate them into Beta. Please see the demo on my test site:
http://csspicstock.blogspot.com/2006/09/this-is-pic-stock-for-project-exploding.html
Following are the instructions on how to install:
1. Follow the instructions from the original Tab hack.
2.Add this code to the end of the CSS part, before the ] ] > sign:, change the CSS menu name from menu1 to menux (x varies from 1 to 14 [designs].)
#menu1 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}
3. Add the right CSS code next. I include the first one here, you can go to the demo site to grab the one you like the most
#menu1 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
}
#menu1 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);
padding: 8px 0 0 10px;
}
#menu1 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
4. Finally, change the div inside your widget to say "menu1" instead of "tabsF" like instructed in the original article. Keep the widget at the sidebar, and you should be able to see your vertical tabs.
(Another amazing thing is, Beta automatically detects and updates the widgets internally. I didn't have to visually create my 14 labels, I cut and paste the template code 14 times, change the label names and div names, then save the design, and it works!)
That's it! Enjoy your vertical tabs and don't forget to thank the Exploding Boy personally. I'm going there to thank him right after I'm done w/ typing this post.
Cheers,
Hoctro (9/2006)
Blog: http://hoctro.blogspot.com/