Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[TUT] How to round up Labrocca's Tabbed Menu tabs.
#1
[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
Reply
#2
Omg it looks so sexy now! thanks dude
Reply
#3
(12-30-2012, 03:53 PM)common thief Wrote: Omg it looks so sexy now! thanks dude

No problem, enjoy!
Reply
#4
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
Reply
#5
thanks for the codes direction ,they re great
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  MyBB - Tabbed Menu - How to put them in order? Squeaker 0 786 04-19-2014, 10:52 PM
Last Post: Squeaker
  [TuT]Setting Up Your Own Forum-Fast-Free-Easy[TuT] Vorfin 119 40,324 08-05-2013, 04:05 AM
Last Post: Uzi
  tabbed menu is acting up :/ four 0 609 11-12-2012, 12:24 AM
Last Post: four
  MyBB Tabbed Menu issue LanteGames™ 2 995 11-05-2012, 06:33 PM
Last Post: Nickelodeon
  Forum Tabs and such Dolan. 2 702 08-13-2012, 09:12 AM
Last Post: Renowned

Forum Jump:


Users browsing this thread: 1 Guest(s)