[TUT] How to round up Labrocca's Tabbed Menu tabs.

[TUT] How to round up Labrocca's Tabbed Menu tabs.

This will make your tab's look like this:
[Image: 5d634789dff8af78734cd8cb541f1005.png?1356789532]

Go to Templates & Style>Themes> Click (your theme)>Tabbed.css.
Click the tab saying ''Edit Sheet: Advanced Mode''
Look for where it says

Code:
background: white url(images/thead_bg.gif) top left repeat-x;

Under the css called .shadetabs li a{
Under that copy and paste the next code:

Code:
-moz-border-radius-topleft: 6px;

-moz-border-radius-topright: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-top-right-radius: 6px;

Click on ''Save Changes'' and look at the difference!
I hope this tutorial helped people that didn't know how to do this.

P.S. If you want to round the tabs up even more (or less) change the ''6'' in ''6px'' higher or lower.

ENJOY

Code:

.shadetabs{

padding: 3px 0;

margin-left: 0;

margin-top: 1px;

margin-bottom: 0;

font: bold 12px Verdana;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}



.shadetabs li{

display: inline;

margin: 0;

}



.shadetabs li a{

-moz-border-radius-topleft: 6px;

-moz-border-radius-topright: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-top-right-radius: 6px;

text-decoration: none;

position: relative;

z-index: 1;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid #778;

color: #ffffff;

background: white url(images/thead_bg.gif) top left repeat-x;

}



.shadetabs li a:hover{

text-decoration: underline;

}





.shadetabs li a.selected{ /*selected main tab style */

position: relative;

top: 1px;

}



.shadetabs li a.selected{ /*selected main tab style */

background:#ADCBE7;

color: #000000;

border-bottom-color: #81A2C4;

}



.shadetabs li a.selected:hover{ /*selected main tab style */

text-decoration: none;

}



.tabcontent{

display:none;

}



@media print {

.tabcontent {

display:block !important;

}

}