Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Trying to Customize my Tab Bar
538617857_Inactive (New Admin) 2/7/2007 9:47 PM EST : Trying to Customize my Tab Bar

538617857_Inactive
Posts: 143
Posts With Wolves

Hey guys, im new to guild portal and trying to make my site a little bit different and customize it a bit.  I am currently using one of the templates provided but I would like to beable to Edit the Tab font.  I have no knowledge of HTML and CSS but by looking at the CSS and stuff on my template i figured out how to edit it a bit.  The thing is when i edit the text font/size/boldness or whatever it changes other text on my site that is not part of the tab bar.  Is there anyway to specify so I can just edit the tab text so its a little bigger and has a different font?

my site:  Virtue
TopBottom

538149821_Inactive (New Admin) 2/8/2007 1:10 AM EST : RE: Trying to Customize my Tab Bar

538149821_Inactive
Posts: 413
Fingers of Fury!

Are you using the custom CSS?  If so, you can change the font in the .UnSelectedTab and .SelectedTab section.  An example would be:

.UnSelectedTab {
BACKGROUND-COLOR: #000000;
COLOR: #C10218;
BORDER-WIDTH: 1px 1px 1px 1px;
BORDER-STYLE: solid;
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana;

TEXT-ALIGN: CENTER;
BORDER-COLOR: #C10218;
PADDING: 2px 2px 2px 2px;
SPACING: 0px 0px 0px 0px;
}

.SelectedTab {
BACKGROUND-COLOR: #C10218;
COLOR: #000000;
BORDER-WIDTH: 1px 1px 1px 1px;
BORDER-STYLE: solid;
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana;
BORDER-COLOR: #C10218;
TEXT-ALIGN: CENTER;
PADDING: 2px 2px 2px 2px;
SPACING: 0px 0px 0px 0px;
}

I'm not very good with CSS, but I hope that helps.
TopBottom

538617857_Inactive (New Admin) 2/8/2007 7:14 AM EST : RE: Trying to Customize my Tab Bar

538617857_Inactive
Posts: 143
Posts With Wolves

That helped with some of my problem and i figured out by editing that I can change colors and such, but there must be another thing in my CSS that is overriding the text.  I changed the font and size in that CSS you put up but it does not change anything and im trying to figure out why.  Here is my CSS so you can see if there is any problems (I did not make it, its a modified one from a template).

I also have one other questions, is there a list or anyway to know what fonts are available to use in my CSS commands and what they look like as im trying to get a gothik type decorative font just for the tab text.

body {
    background-color: #EFEFEF;
scrollbar-face-color:#EEEEEE;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#EEEEEE;
scrollbar-darkshadow-color:#EEEEEE;
scrollbar-shadow-color:#000000;
scrollbar-arrow-color:#5C6A00;
scrollbar-track-color:#EEEEEE;
    margin : 1px 0px 0px 1px;
}


table                { font-family: Verdana; font-size: 12px; color: #666666; }
a:link               { color: #666666; text-decoration: none; font-size: 12px; }
a:active             { color: #666666; text-decoration: none; font-size: 12px; }
a:visited            { color: #666666; text-decoration: none; font-size: 12px; }
a:hover              { color: #66C551; text-decoration: none; font-size: 12px; }

.pn-logo, .pn-title, .pn-pagetitle    { font-weight: bold; font-size: 12px; color: #999999 }
input.pn-button     { color: #999999; background-color: #eeeeee; font-weight: normal }
input.plasmainput { border-color: #999990; border-style: solid; border-width: 1px; width: 120px; background-color:#ffffff;color: #666666}



.whitetext            { font-family: Arial; font-size: 10px; color: #FFFFFF;}
.footer                { font-family: Arial; font-size: 10px; color: #999999;}
.newsblock            { font-family: Arial; font-size: 10px; color: #999999;}

.UnSelectedTab {
BACKGROUND-COLOR: #EEEEEE;
COLOR: #C10218;
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana;
TEXT-ALIGN: CENTER;
BORDER-COLOR: #C10218;
PADDING: 2px 2px 2px 2px;
SPACING: 0px 0px 0px 0px;
}

.SelectedTab {
BACKGROUND-COLOR: #EEEEEE;
COLOR: #000000;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
BORDER-COLOR: #C10218;
TEXT-ALIGN: CENTER;
PADDING: 2px 2px 2px 2px;
SPACING: 0px 0px 0px 0px;
}

I deleted the border stuff you had as I like the background color.  Just trying to get the font to change and be a little bolder/bigger without changing other test.  Thanks for any help.

BTW, I was going for something like this
without exactly copying it and changing my fonts and colors and such.  Thing is i dont know much about CSS so im trying to learn as I go.
TopBottom

538149821_Inactive (New Admin) 2/8/2007 7:52 AM EST : RE: Trying to Customize my Tab Bar

538149821_Inactive
Posts: 413
Fingers of Fury!

I used your code on my test site and it came out fine.  The only thing I changed was the font and size.
 
Verdana (whats in the code for the font) is the default I believe.  Try a different one, like Georgia, just to test things out.  What I posted was not meant to be taken literally.  I wasn't clear before.  The bolded part of the code in my previous post was the what you need to add/adjust/etc in your own code in order for the font to change where you want it to.


Like this:
.UnSelectedTab {
BACKGROUND-COLOR: #EEEEEE;
COLOR: #C10218;
FONT-SIZE: 12pt;
FONT-FAMILY: Georgia;
TEXT-ALIGN: CENTER;
BORDER-COLOR: #C10218;
PADDING: 2px 2px 2px 2px;
SPACING: 0px 0px 0px 0px;
}

.SelectedTab {
BACKGROUND-COLOR: #EEEEEE;
COLOR: #000000;
FONT-SIZE: 12px;
FONT-FAMILY: Georgia;
BORDER-COLOR: #C10218;
TEXT-ALIGN: CENTER;
PADDING: 2px 2px 2px 2px;
SPACING: 0px 0px 0px 0px;
}

As for actually finding fonts, I would google fonts or even use something like Word to look at different fonts.

The page you linked that has the look you are going for is using images for the buttons and actual text.

If you want to make the font bold, insert the following into the sections mentioned above:

FONT-WEIGHT: BOLD;
TopBottom

538149821_Inactive (New Admin) 2/8/2007 8:02 AM EST : RE: Trying to Customize my Tab Bar

538149821_Inactive
Posts: 413
Fingers of Fury!

Actually, upon further testing, I'm was only getting it to change the font, but the size was staying the same.  What I did to make it stop that was to take the size specification out of this section:

table                { font-family: Verdana; font-size: 12px; color: #666666; }
a:link               { color: #666666; text-decoration: none; font-size: 12px; }
a:active             { color: #666666; text-decoration: none; font-size: 12px; }
a:visited            { color: #666666; text-decoration: none; font-size: 12px; }
a:hover              { color: #66C551; text-decoration: none; font-size: 12px; }

so that it looks like this:


table                { font-family: Verdana; font-size: 12px; color: #666666; }
a:link               { color: #666666; text-decoration: none; }
a:active             { color: #666666; text-decoration: none; }
a:visited            { color: #666666; text-decoration: none; }
a:hover              { color: #66C551; text-decoration: none; }

TopBottom

538617857_Inactive (New Admin) 2/8/2007 9:04 AM EST : RE: Trying to Customize my Tab Bar

538617857_Inactive
Posts: 143
Posts With Wolves

Thank you for the help, using your advice and a little modifying I got it how I wanted it.   Now to have fun with other stuff, im sure i will have questions.
TopBottom

538149821_Inactive (New Admin) 2/8/2007 9:29 AM EST : RE: Trying to Customize my Tab Bar

538149821_Inactive
Posts: 413
Fingers of Fury!

Benis/Rificz said:
Thank you for the help, using your advice and a little modifying I got it how I wanted it.   Now to have fun with other stuff, im sure i will have questions.



Oh!  I like the font you decided on!  Looks really good with the rest of the page. 
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%