Support Forums

Support Forums > Categories > Webmaster Support > Forum Software Help > [TUT] How to round up Labrocca's Tabbed Menu tabs.
Full Version: [TUT] How to round up Labrocca's Tabbed Menu tabs.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Sick

12-29-2012, 07:03 AM
[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

common thief

12-30-2012, 03:53 PM
Omg it looks so sexy now! thanks dude

Sick

12-31-2012, 05:41 AM
(12-30-2012, 03:53 PM)common thief Wrote: [ -> ]Omg it looks so sexy now! thanks dude

No problem, enjoy!

TheArmyKid

04-08-2013, 03:51 PM
Hmm i done something wrong?

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;
}
}

thats what i did and didn't see any changes

robbygensic

04-15-2013, 12:58 AM
thanks for the codes direction ,they re great
Support Forums > Categories > Webmaster Support > Forum Software Help > [TUT] How to round up Labrocca's Tabbed Menu tabs.