Request: An index page on the main site

[devol]

Linking to all the code examples. I'm having "fun" trying to dig up some samples you have mentioned for TabPanel. I'm looking for some styling examples and I know they are on the site somewhere, and index would help things a bunch!

[devol]

Ok nevermind I'm an idiot. I didn't notice that the list on the right side of the page was exactly what I was asking for. Carry On!

http://www.jackslocum.com/yui/2006/08/26/a-javascript-tabpanel-for-yahoo-ui/

[jack.slocum]

I don't think there's anything on styling the tabs in the tabs example. I am using the tabs in the comment dialog on the blog and the CSS I used to customize them looks like this (I threw in a couple comments too):



#comment-cn .tabset{
border-bottom:1px solid #6593cf;
}
#comment-cn .tabset .hd li,#comment-cn .tabset .hd em,#comment-cn .tabset .hd strong {
font-size:9px !important; <-- smaller font, also fixes weird overlap issue
font-family:tahoma,arial,helvetica;
}
#comment-cn .tabset .hd em{
padding-left:10px;padding-right:10px; <--- more padding
}
#comment-cn .tabset .hd li.on em{
color:#083772;
}
#comment-cn .tabset .hd li.on strong{
background-color:none;
background: url(/blog/images/tabs/tab-right-bg.gif) no-repeat top right;
}
#comment-cn .tabset .hd li.on em{
background-color:none;
background: url(/blog/images/tabs/tab-left-bg.gif) no-repeat;
}
#comment-cn .tabset .hd li a{
background-color:none; <--- new tab corners also provide gradient bg
background: url(/blog/images/tabs/tab-inactive-right-bg.gif) no-repeat top right;
}
#comment-cn .tabset .hd li em{
background-color:none;
background: url(/blog/images/tabs/tab-inactive-left-bg.gif) no-repeat;
}
#comment-cn .yui-ext-tabbody {
background-color:white;
border:1px solid #6593cf;
border-top:none;
height:200px;
overflow:auto;
}


I use JS to update the main tab body height when the user resizes the dialog.

[devol]

Thanks for this! No more pixelated fonts!