well, that really is done with the tabpane.css
I did this on my site:
http://www.danieltulp.nl/index.php?option=com_rsgallery2&Itemid=34&page=inline&id=239&catid=10&limitstart=0If you download the developer toolbar extension for firefox, than you are able to directly edit css and view your site at the same time.
All styles in tabpane.css refer to the layout of the comment and discription styles.
After the beta comes out, we will probably seperate this from the Tabs, as this also effects all tabs.
my tabpane.css is now:
[code:1]
.dynamic-tab-pane-control.tab-pane {
position: relative;
/*width: 100%; width needed weird IE bug */
/*margin-right: -2px; to make room for the shadow */
}
.dynamic-tab-pane-control .tab-row .tab {
width: 70px;
height: 16px;
border: 1px dashed #999999;
border-bottom-width:0px;
top: 0;
display: inline;
float: left;
overflow: hidden;
cursor: pointer;
padding: 3px 0 0 0;
margin: 0 0 0 0;
border: 0;
z-index: 1;
font: 11px Tahoma, Helvetica, sans-serif;
white-space: nowrap;
text-align: center;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
width: 74px !important;
height: 18px !important;
border: 1px dashed #999999;
background: #000011;
border-bottom-width: 0;
z-index: 3;
padding: 2px 0px 0px 0px;
top: -2px;
font: 11px Tahoma, Helvetica, sans-serif;
}
.dynamic-tab-pane-control .tab-row .tab a {
font: 11px Tahoma, Helvetica, sans-serif;
color: #333;
text-decoration: none;
cursor: pointer;
border-bottom-width:0px;
}
.dynamic-tab-pane-control .tab-row .tab.hover {
font: 11px Tahoma, Helvetica, sans-serif;
width: 70px;
height: 16px;
border: 1px dashed #999999;
padding: 2px 0px 0px 0px;
border-bottom-width:0px;
}
.dynamic-tab-pane-control .tab-page {
border: 1px dashed #999999;
z-index: 2;
position: relative;
top: -2px;
font: 11px Tahoma, Helvetica, sans-serif;
color: #333;
/*244, 243, 238*/
/* 145, 155, 156*/
padding: 5px;
width: 97%; /* stupid stupid stupid IE!!! */
float: left;
}
.dynamic-tab-pane-control .tab-row {
z-index: 1;
white-space: nowrap;
}
[/code:1]