"Tab image help" : Pimp My Site! : GuildPortal Help Community Home - Site at GuildPortal - Guild Hosting

• Login: Password: Save New User? Forgot?

Top Mods!

Forum Module - Media

by Mottie

Mail Notification

by Mottie

Wowhead Search

by sonofsamedi

Event Signup/Withdraw Button

by Mottie

Signup Status Color

by Mottie

Admin Forums

Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.

Available Forums

: > Tab image help

1 2 3 4 5 6Next

Womp (New Admin)

4/25/2008 1:32 AM EST : Tab image help

Posts: 328

Fingers of Fury!

Okay i used GRsite to great some custom buttons on my site which is http://www.guildportal.com/Guild.aspx?GuildID=214795&TabID=1811736

after i creat the buttons it gives me a HTML code such as

The problem i have is where can i input this much text, for now i just right clicked the properties and pasted the url to get the images to appear, it seems to work but i dont get the mouse over effect i put in. can anyone help me understand this, im sure there is a way to do this.

Top • Bottom

Everdark (MVP)

4/25/2008 7:00 AM EST : RE: Tab image help

GuildPortal MVP Everdark Posts: 3918 Zomgawsh Poster	Control Panel, Styles and Colors, Tab Images: You can paste the Default and Active button URLs there. As far as mousing over, I'm not sure. I think you need to use CSS and someone else with more experience can explain what to do. *"The person who says it cannot be done should not interrupt the person doing it."* Everdark (T), Evadarr, Nevinn (AC), Soninn, Croninn, Zakarr, Avirded (SC)
Top • Bottom

Womp (New Admin)

4/25/2008 10:35 AM EST : RE: Tab image help

Womp Posts: 328 Fingers of Fury!	Yep i've gotten to the point so the buttons are actually posted, and i think you're right as far as i need to use CSS, but i have no clue as where to start in that area
Top • Bottom

Mottie (MVP)

5/6/2008 8:56 PM EST : RE: Tab image help

GuildPortal MVP

Posts: 3872

Zomgawsh Poster

I am by no means an expert at HTML or CSS, but I have looked at the way GuildPortal set up the tabs. The way it looks to me, there is no way to enable the mouse over effect using the "Tab Images" page in the control panel. So you are left with CSS to solve it and so far I've only found two ways to almost get what you want.

1. Don't bother with assigning images in the tab and use CSS. With CSS only you are limited in that you can't assign a different image for each tab. There are only four (4) CSS options for the tabs:

Selected tab (SelectedTab)
Selected tab mouseover (SelectedTabMo)
Unselected tab (UnSelectedTab)
Unselected tab mouseover (UnSelectedTabMo)

I used this method to make pseudo buttons that highlight when you hover over them. The images have a transparent middle, but right now there are no sides, but I think I figured out a way to fix that too - I'll post that later when I iron out all the bugs. Check out what I did here.

2. The second method is simpler but not quite as clean, and it does something a little different on different browsers (Firefox vs Internet Explorer). Just add this to your Custom StyleSheet:

td.Tab a:hover {
background: #ffff00;
border: #ffff00 1px solid;
}

What that does is highlights the link (e.g., the image) when you hover over it with yellow (#ffff00). So change the color to whatever you want, make the border thicker or whatever. But it will make the whole tab bar jump a little when you hover over it - I have no idea how to prevent that. I hope this helps

Top • Bottom

Mottie (MVP)

5/13/2008 10:17 AM EST : RE: Tab image help

GuildPortal MVP

Posts: 3872

Zomgawsh Poster

Ok, I think I've solved the button issue (at least for me) - see what it looks like in action on my test website.

First off, you're limited to using text over a graphical button, so you won't have any fancy fonts with this method. Then set up the site as follows:

Clear out all tab images: Control Panel > Style & Colors > Tab Images
Set the Navigation to "Horizontal Tab Bar": Control Panel > Style & Colors > Tab Bar Style

I started out with the image on the left below, each button is 150px wide and 42px tall. The top image is for a selected tab (SelectedTab), middle for an unselected tab (UnSelectedTab) and the bottom for a moused over tab (UnSelectedTabMo).
* I've included the image on the right for people who want a different color - just change "wowbutton1.gif" to "wowbutton2.gif"

I added the following to my Custom StyleSheet (CSS) - be sure to overwrite the existing ".TabBar" in the CSS. This will look different on IE versus Firefox and other browsers, so there are extra styles listed. If you decide to use a different sized image, please read the note at the bottom.

Custom StyleSheet

Tabs 150px wide (click me)

.TabBar {
background: transparent;
border: 0;
margin: 0 auto;
padding: 0;
width: 100px;
}
.SelectedTab a {
color: #ffffff !important;
}
.UnSelectedTabMo a {
color: #ffcc00 !important;
}
.SelectedTab, .UnSelectedTab, .UnSelectedTabMo {
color: #ffffff;
background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton1.gif) no-repeat;
font-weight: bold;
text-align: center;
height: 42px;
width: 150px;
padding: 14px 0 0 0;
border: 0px;
}
.SelectedTab {
background-position: left top;
}
.UnSelectedTab {
background-position: left -42px;
}
.UnSelectedTabMo {
background-position: left bottom;
}
/* html>body added for non-IE styling */
html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo {
height: 28px;

Tabs 125px wide (click me)

.TabBar {
background: transparent;
border: 0;
margin: 0 auto;
padding: 0;
width: 100px;
}
.SelectedTab a {
color: #ffffff !important;
}
.UnSelectedTabMo a {
color: #ffcc00 !important;
}
.SelectedTab, .UnSelectedTab, .UnSelectedTabMo {
color: #ffffff;
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/wowbutton1x.gif) no-repeat;
font-weight: bold;
text-align: center;
height: 42px;
width: 125px;
padding: 14px 0 0 0;
border: 0px;
}
.SelectedTab {
background-position: left top;
}
.UnSelectedTab {
background-position: left -42px;
}
.UnSelectedTabMo {
background-position: left bottom;
}
/* html>body added for non-IE styling */
html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo {
height: 28px;
}

Tabs 100px wide (click me)

.TabBar {
background: transparent;
border: 0;
margin: 0 auto;
padding: 0;
width: 100px;
}
.SelectedTab a {
color: #ffffff !important;
}
.UnSelectedTabMo a {
color: #ffcc00 !important;
}
.SelectedTab, .UnSelectedTab, .UnSelectedTabMo {
color: #ffffff;
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/wowbutton2-1.gif) no-repeat;
font-weight: bold;
text-align: center;
height: 41px;
width: 100px;
padding: 13px 0 0 0;
border: 0px;
}
.SelectedTab {
background-position: left top;
}
.UnSelectedTab {
background-position: left -41px;
}
.UnSelectedTabMo {
background-position: left bottom;
}
/* html>body added for non-IE styling */
html>body .SelectedTab, html>body .UnSelectedTab, html>body .UnSelectedTabMo {
height: 28px;
}

That's it!

Using Custom Text Colors:

The Selected tab color is set to white in the CSS above. Change the color in above in the ".SelectedTab a" variable above in blue.
If you want to prevent the text color change on mouse over of the tab, change the color of the ".UnSelectedTabMo a" variable also in blue.

Using Custom Images:

* Note: Follow these instructions, if you decide to use a different set of images:

Change the url () to the desired image. The "left top", "left -42px" and "left bottom" tell the browser which part of the image to display. Take those out of you are using three separate images.
For Internet explorer, change "height: 42px;" to the exact height of the new button image
For Firefox and other browsers, you will be changing the "height: 28px;" in the CSS. This is a little more tricky in that if you set it to the height of the button, it will be larger than intended because of the extra "padding". Just make sure that the height + padding = the new button height. (in the above CSS, the height = 28 and the padding = 14, 28 + 14 = 42.
For all browsers, change any instance of "150px", "125px" or "100px" depending on which CSS you pick above to the width of your new image and adjust the "padding: 14px 0 0 0;" to vertically center the text in the middle of the button. There are four numbers there to tell the browser the amount of padding to set for top, right, bottom and left sides - we are only interested in setting the top padding here.

Feel free to mail me if any of my instructions are confusing or if you find an error

Edit: I added a set of red buttons named "wowbutton3.gif"

Edit (8/17/2009): Added CSS in section 1 to make tabs that are 150px,125px and 100px wide. With the 125 px wide tab buttons, you are limitedto 9 tabs before it goes off the screen for users that have ascreen/browser resolution of 1024 x 768 or less.

>>help-site<<

Top • Bottom

Everdark (MVP)

5/13/2008 2:15 PM EST : RE: Tab image help

GuildPortal MVP

Posts: 3918

Zomgawsh Poster

That's sweet Mottie! I've been reading up a lot on CSS this past week and actually understood what you were saying as I read it (which frankly blows my mind!).

I didn't know that you can select different areas of the same image with those kind of declarations, which gives me some good ideas when working on my new site layout.

~~Btw, did you consider using z-index: -1 with your tab buttons to allow the text to float on top?~~ I've read about it although haven't gotten around to putting it into practice yet.

EDIT: Nm, it looks like it isn't necessary.

"The person who says it cannot be done should not interrupt the person doing it."

Everdark (T), Evadarr, Nevinn (AC), Soninn, Croninn, Zakarr, Avirded (SC)

Top • Bottom

Mottie (MVP)

5/16/2008 9:24 PM EST : RE: Tab image help

GuildPortal MVP

Posts: 3872

Zomgawsh Poster

Oh, I just wanted add one more thing:

Add this code to the CSS to stop the text from changing color when you mouse over it. I found it looks better and more professional. I added it to the code above to be complete.

.SelectedTab a {
color: #ffffff !important;
}

.UnSelectedTabMo a {
color: #ffcc00 !important;
}

The "!important" on the end stop the color change

I also added a new set of red buttons if you prefer that color.

>>help-site<<

Top • Bottom

Mottie (MVP)

5/29/2008 6:29 AM EST : RE: Tab image help

GuildPortal MVP

Posts: 3872

Zomgawsh Poster

Here is how you can add hover effects to tab buttons. I made two sets of buttons. The "Selected Tab" images have the background filled in with a solid color. The "Unselected Tab" images have the same design but a transparent background. Hover over the second column to see the effect.

Selected Tab	Unselected Tab

To make this work for your site:

1. Add the tab images as you would normally do.

Control Panel > Styles & Colors > Tab Bar Styles > Horizontal Tab Bar

then Style & Colors > Tab Images

Add the URL of your images here and then save

2. Now add this to your CSS (Styles & Colors > Custom StyleSheet)

Add the "table.TabBar" if you want your buttons all scrunched together. Add the other two for the hover effect to work. Change the green text below to change your non-hover (333333 = dark grey) and hover (0000aa = blue) colors.

Custom StyleSheet

table.TabBar {
border: 0;
margin: 0 auto;
padding: 0;
width:100px;
}

td.Tab a img {
background: #333333;
}

td.Tab a:hover img {
background: #0000aa;
}

That's it!

... feel free to use the images I made. You can make additional ones and if you want to match the style, the name of the font I used is called Christopherhand.

>>help-site<<

Top • Bottom

Pentamorous (New Admin)

5/29/2008 7:25 AM EST : RE: Tab image help

Pentamorous Posts: 2317 Zomgawsh Poster	Nice Technique Mottie! (*wave.. now I'm stalking you) ok.. so I've got to know where you got those icon images from to make the tab buttons.
Top • Bottom

Mottie (MVP)

5/29/2008 8:43 AM EST : RE: Tab image help

GuildPortal MVP

Posts: 3872

Zomgawsh Poster

I found most of my images from checking out other people's sites... These buttons were originally from ~Sarrita~ on her Knights of Hyrule site. I made the Calendar button from an image I found somewhere... ummmm, I included the original below LOL

But you can get ideas from just doing a google image search for warcraft icons, or even use Thottbot if you know what you're looking for (Wowhead's images are harder to get to unless you do a screen capture):

Examples:
Calendar icon I used:

Image from Thottbot:

Grove Street Media:

>>help-site<<

Top • Bottom

1 2 3 4 5 6Next

Admins Online

There are members online.

GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy

GuildPortal™ Axiom Shift, LLC. All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.

Forum Module - Media v5

Mail Notification v6

Wowhead Search v5

Event Signup/Withdraw Button v3

Signup Status Color v5