SMF For Free Support Forum

Going to post the instructions first.   The code for the main and mirrortab section is after the instructions.

Instructions:

To change the background color of the main and mirror tabs:

Look for the following in the codes for the main and mirror tabs :
        background:  #5F81A0;   
Replace the color code with your own.


To change the border color of the main and mirror tabs:

Look for the following in the code for each of the main and mirror tabs and replace the color code with your own.
(note:  not all tabs will contain all 3 of these)
 
       border-left:  1px solid #696969;
       border-right:  1px solid #696969;
       border-bottom:  1px solid #696969;


To change the background color of the main and mirror active tabs

Look for the following in the codes for the main and mirror active tabs : 
       background: #98B2CB;   
Replace the color code with your own.


To change the border color of the main and mirror active tabs:

Look for the following in the code for each of the main and mirror active tabs and replace the color code with your own.
(note:  not all tabs will contain all 3 of these)
 
      border-left:  1px solid #696969;
      border-right:  1px solid #696969;
      border-top:  1px solid #696969;

Save it at this point to be sure you have the background and borders as you want them.
Once that is done go back in and go thru to change the color codes for the fonts.

* Keep in mind that although this does work the tabs will have a flat appearance to them because they are not graphic images and will look like the graphic below.     Change the border width if need be, and the border color to go with the rest of your stylesheet.

The tabs in this example have the borders set to 3px



Here is the code:

Replace the ENTIRE main and mirror tabs section with the following code:
( WARNING :   This is not the entire css.  This is ONLY the css for the tabs)


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background: #5F81A0;
             border-left:  1px solid #696969;
             border-bottom:  1px solid #696969;
width: 10px;
}
.maintab_back
{
background: #5F81A0;
             border-bottom:  1px solid #696969;
}
.maintab_last
{
background: #5F81A0;
             border-right: 1px solid #696969;
             border-bottom: 1px solid #696969;
width: 8px;
}
.maintab_active_first
{
background: #98B2CB;
             border-left:  1px solid #696969;
             border-bottom:  1px solid #696969;
width: 6px;
}
.maintab_active_back
{
background: #98B2CB;
              border-bottom:  1px solid #696969;
             
}
.maintab_active_last
{
background: #98B2CB;
             border-right:  1px solid #696969;
             border-bottom: 1px solid #696969;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 10px;
}
.mirrortab_back
{
background: #5F81A0;
             border-top:  1px solid #696969;
}
.mirrortab_last
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-right:  1px solid #696969;
width: 6px;
}
.mirrortab_active_first
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 6px;
}
.mirrortab_active_back
{
background: #98B2CB;
             border-top:  1px solid #696969;
}
.mirrortab_active_last
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-right: 1px solid #696969;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}



how do we put a picture in the tabs?!?

like flames

You would need to make 12 images.   

The tabs at the top of the forum (home, help, search)  use 6 of them.
3 are for the main tabs, 3 are for the main active tabs

The other 6 are the mirror tabs  (places like "Mark all Messages as Read")
3 are for the mirror tabs, 3 are for the mirror active tabs

The css for the tabs is in the bottom part of the css.

If you replace the graphics you may also need to change the font colors.

can someone plz help me. i followed all instructions and it does not work.

i forgot to fill this part out, when i did, it changed:

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 10px;
}
.mirrortab_back
{
background: #5F81A0;
             border-top:  1px solid #696969;
}
.mirrortab_last
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-right:  1px solid #696969;
width: 6px;
}
.mirrortab_active_first
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 6px;
}
.mirrortab_active_back
{
background: #98B2CB;
             border-top:  1px solid #696969;
}
.mirrortab_active_last
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-right: 1px solid #696969;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}



yes, the only thing is that how can i change all that is above the tabs

I fixed it hoping that the New CSS doesn't get deleted.