Advertise Here
« previous next »
Pages: [1]

Author Topic: Second Mirror Tabs  (Read 1686 times)

0 Members and 1 Guest are viewing this topic.

Offline -A-

  • SMF For Free Sponsors
  • *
  • Posts: 877
  • Don't be afraid.
    • View Profile

    • Total Badges: 22
    Badges: (View All)
    Search Apple User Mobile User Windows User Topic Starter
Second Mirror Tabs
« on: January 21, 2008, 08:47:13 pm »
On the edit, there is one set of mirror tabs for the tabs such as Home, Forums, ect. What is the second for, and can I use the same tabs as the first, or will it not look good?
Logged

Offline LaundryLady

  • Helpers
  • *
  • Posts: 3253
  • Internet Challenged
    • View Profile

    • Total Badges: 26
    Badges: (View All)
    Seventh year Anniversary Sixth year Anniversary Search Poll Voter Level 5
Re: Second Mirror Tabs
« Reply #1 on: January 21, 2008, 08:56:07 pm »
You can use the same images if you like.  If you have one set for maintab first, last and back, you can repeat them in the mirror tabs.  If you have a diff image for the maintab active you can repeat them in the mirror tabs. 

If you look here:  http://stylesheetbuilder.smfforfree4.com/

you can see what I did with the tabs.

Code: [Select]
/* 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: lowercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  13px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: verdana, tahoma, sans-serif;
}

.maintab_first
{

background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/BACK15.jpg)  left top no-repeat;
width: 10px;
}
.maintab_back
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/BACK15.jpg) left top repeat-x;
}
.maintab_last
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/BACK15.jpg) left top no-repeat;
width: 8px;
}
.maintab_active_first
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/aquametalicglitter2_tlg.gif) left top no-repeat;
width: 6px;
}
.maintab_active_back
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/aquametalicglitter2_tlg.gif)  center repeat-x;
}
.maintab_active_last
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/aquametalicglitter2_tlg.gif) left top no-repeat;
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: #000000;
                  font-weight:bold;
text-decoration: none;
}

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

.mirrortab_first
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/BACK15.jpg) no-repeat;
width: 10px;
}
.mirrortab_back
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/BACK15.jpg) repeat-x;
}
.mirrortab_last
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/BACK15.jpg) no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/aquametalicglitter2_tlg.gif) no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/aquametalicglitter2_tlg.gif) repeat-x;
}
.mirrortab_active_last
{
background: url(http://i246.photobucket.com/albums/gg100/LaundryLadyStylesheets/PinkPrincess/aquametalicglitter2_tlg.gif) no-repeat;
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: #000000;
                  font-weight:bold;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #BCED91;
                  font-weight:bold;
text-decoration: none;
}

I used two different images, one for mirror tabs and one for main tabs.

Logged


And I Play:  Mafia-Mandemz

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

    • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: Second Mirror Tabs
« Reply #2 on: January 22, 2008, 04:22:47 am »
Quote from: JoeHio on January 21, 2008, 08:47:13 pm
On the edit, there is one set of mirror tabs for the tabs such as Home, Forums, ect. What is the second for, and can I use the same tabs as the first, or will it not look good?

There are two sets of tabs.
The first set is the Main tabs.    Those are for the Home, Forums, Mark as Read, etc.  (you'll see them underneath things)
There are 6 images.     3 for the main tab bar.    3 for the active tab (the one you are on)

The second set is the Mirror tabs.  You'll see those in places like when you click on the Member List.  (you'll see them on top of things)   
There are 6 images.     3 for the main mirror tab bar.   3 for the active tab (the one you are on)

As LL said you CAN use one image for all the regular ones, then another for the active tabs in both sets.
It really depends on what type of tab you are making.  If its something very simple that could work.

There is also a way to do them without using graphics.
You can do it totally with color codes.     
Directions for how to do that here:   Make tabs using color codes
Logged
Pages: [1]
« previous next »
 

Related Topics

  Subject / Started by Replies Last post
4 Replies
1180 Views 		Last post November 14, 2007, 07:24:17 am
by BlueButterfly
2 Replies
1626 Views 		Last post April 30, 2008, 09:05:09 pm
by Sparkwattclock
16 Replies
5361 Views 		Last post December 24, 2009, 07:46:22 am
by MS7XWDC