HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Is there a way to
538433294_Inactive (New Admin) 2/11/2007 4:18 PM EST : Is there a way to link

538433294_Inactive
Posts: 105
Posts With Wolves

to make the black that is in my content boxes, I guess that is what they are called, into a semi-see thru type of fill in?

also, how do i turn the color of the text to black?  this is the code i am using at the moment, compliments of Moe Hightower.  Thanks again for everyone's help!

oh and this is what my site looks like at the moment:
http://theironbrigade.guildportal.com

.SelectedTab {

BACKGROUND-COLOR: #383838;

COLOR: #FFFFFF;

BORDER-WIDTH: 1px 1px 1px 1px;

BORDER-STYLE: solid;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

BORDER-COLOR: #666699;

TEXT-ALIGN: CENTER;

PADDING: 2px 2px 2px 2px;

SPACING: 0px 0px 0px 0px;

}

FORM

{

BORDER-RIGHT: medium none;

PADDING-RIGHT: 0px;

BORDER-TOP: medium none;

PADDING-LEFT: 0px;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

PADDING-BOTTOM: 0px;

MARGIN: 20px;

BORDER-LEFT: medium none;

PADDING-TOP: 0px;

BORDER-BOTTOM: medium none;

FONT-FAMILY: Verdana

}

.UnSelectedTab {

BACKGROUND-COLOR: #000000;

COLOR: #FFFFFF;

BORDER-WIDTH: 1px 1px 1px 1px;

BORDER-STYLE: solid;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

TEXT-ALIGN: CENTER;

BORDER-COLOR: #666699;

PADDING: 2px 2px 2px 2px;

SPACING: 0px 0px 0px 0px;

}

.AltGridRow {

BACKGROUND-COLOR: #000000;

COLOR: #FFFFFF;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

 BACKGROUND-IMAGE: url('');

}

.NormGridRow {

BACKGROUND-COLOR: #000000;

COLOR: #FFFFFF;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

 BACKGROUND-IMAGE: url('');

}

.ContentBox {

BACKGROUND-COLOR: #000000;

BORDER-WIDTH: 1px 1px 1px 1px;

BORDER-STYLE: solid;

PADDING-TOP: 0px;

MARGIN-TOP: 0px;

BORDER-COLOR: #666699;

 BACKGROUND-IMAGE: url('');

}

.ForumCategoryHeader {

BACKGROUND-COLOR: #000000;

BORDER-WIDTH: 1px 1px 1px 1px;

BORDER-STYLE: solid;

BORDER-COLOR: #666699;

PADDING-LEFT: 5px;

COLOR: #FFFFFF;

PADDING-RIGHT: 5px;

PADDING-TOP: 5px;

PADDING-BOTTOM: 5px;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

}

.ContentBoxTitle {

 PADDING-RIGHT: 5px;

 PADDING-LEFT: 25px;

 MARGIN-TOP: 0px;

 PADDING-TOP: 0px;

 BORDER-TOP: 0px;

 BACKGROUND-COLOR: #000000;

 COLOR: #FFFFFF;

 FONT-SIZE: 10pt;

 FONT-FAMILY: Verdana;

 BACKGROUND-IMAGE: url('');}

.ContentBoxTitleNoBackground {

COLOR: #FFFFFF;

 MARGIN-TOP: 0px;

 PADDING-TOP: 0px;

 FONT-SIZE: 10pt;

 FONT-FAMILY: Verdana;

}

A:active

{

COLOR: #9999ff; text-decoration: none

}

A:link

{

COLOR: #9999ff; text-decoration: none

}

A:hover

{

COLOR: #9999ff; text-decoration: underline

}

A:visited

{

COLOR: #ccccff; text-decoration: none

}

.ContentBoxBody {

BACKGROUND-COLOR: #000000;

COLOR: #FFFFFF;

PADDING-LEFT: 5px;

PADDING-RIGHT: 5px;

FONT-SIZE: 10pt;

FONT-FAMILY: Verdana;

 BACKGROUND-IMAGE: url('');

}

TD

{

 FONT-FAMILY: Verdana;

 FONT-SIZE: 10pt;

}

BODY {

SCROLLBAR-BASE-COLOR: #000000;

SCROLLBAR-ARROW-COLOR: #FFFFFF;

BACKGROUND-IMAGE: url(http://www.axiomfiles.com/Files/127713/zangarmarsh.JPG);

BACKGROUND-REPEAT: no-repeat;

BACKGROUND-ATTACHMENT: fixed;

BACKGROUND-POSITION: center bottom;

BACKGROUND-COLOR: #000000;

FONT-FAMILY: Verdana;

FONT-SIZE: 10pt;

}.toolTipHeader {

color: lime;

font-weight: bold;

}

IMG

{

BORDER-WIDTH: 0px 0px 0px 0px;

}

HR

{

COLOR: #666699;

}
Top • Bottom

Szleynix (New Admin) 2/11/2007 8:45 PM EST : RE: Is there a way to link
Szleynix
Posts: 2231
Zomgawsh Poster

I've highlighted in bold the bit which controls the default font colour. The CSS you have also contains an empty background property, which is the starting point for getting your content boxes to appear semi-transparent.

Although, I'd steer clear of this unless you have a more subtle page background as this could make reading the text of the container quite difficult - especially if the colour match is one of those that falls into the area of common colour blindness (reds, greens, yellows and/or greys).

Getting the semi-transparency is also quite a challenge. You can either create a faux (dummy) transparent image - hard to explain, but you make a .gif with transparent background, then colour in alternative pixels, leaving the spaces as transparent, see below...

My 'super' transparent .gif

X = colour
O = transparent

XOXOXOXOXOX
OXOXOXOXOXO
XOXOXOXOXOX
OXOXOXOXOXO

The other way of doing this is to create a .png file with transparency, you can then fill this image with a solid colour, which you then give opacity to.

It's a much better looking solution, but won't work in IE6 (still a very popular browser). In which case you'll need to add another line to the CSS, see 2nd example below.


.ContentBoxBody {
BACKGROUND-COLOR: #000000;

COLOR: #FFFFFF;

PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana;
BACKGROUND-IMAGE: url('');
}


In the 2nd CSS use something like:

BACKGROUND-IMAGE: url('background.png') !important;
BACKGROUND-IMAGE: url('background.gif');

This, should, tell modern browsers to use the 'important' line, crappy browsers like IE6 will ignore the first image as the CSS is telling is to then apply the second one instead.
Top • Bottom

538433294_Inactive (New Admin) 2/12/2007 6:30 AM EST : RE: Is there a way to link

538433294_Inactive
Posts: 105
Posts With Wolves
Szleynix said:

I've highlighted in bold the bit which controls the default font colour. The CSS you have also contains an empty background property, which is the starting point for getting your content boxes to appear semi-transparent.

Although, I'd steer clear of this unless you have a more subtle page background as this could make reading the text of the container quite difficult - especially if the colour match is one of those that falls into the area of common colour blindness (reds, greens, yellows and/or greys).

Getting the semi-transparency is also quite a challenge. You can either create a faux (dummy) transparent image - hard to explain, but you make a .gif with transparent background, then colour in alternative pixels, leaving the spaces as transparent, see below...

My 'super' transparent .gif

X = colour
O = transparent

XOXOXOXOXOX
OXOXOXOXOXO
XOXOXOXOXOX
OXOXOXOXOXO

The other way of doing this is to create a .png file with transparency, you can then fill this image with a solid colour, which you then give opacity to.

It's a much better looking solution, but won't work in IE6 (still a very popular browser). In which case you'll need to add another line to the CSS, see 2nd example below.


.ContentBoxBody {
BACKGROUND-COLOR: #000000;

COLOR: #FFFFFF;

PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana;
BACKGROUND-IMAGE: url('');
}


In the 2nd CSS use something like:

BACKGROUND-IMAGE: url('background.png') !important;
BACKGROUND-IMAGE: url('background.gif');

This, should, tell modern browsers to use the 'important' line, crappy browsers like IE6 will ignore the first image as the CSS is telling is to then apply the second one instead.




OK, please forgive me for being a total noob on this stuff.  Even the code above that I used was supplied to me by Moe Hightower.

With that said, I have a one more question and I hope someone can help.  

I don't know where to put those additional 2 lines that is supposed to help with IE6

Again, sorry for the noob question.
Top • Bottom

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.
So-and-so has logged on!
%title%
%message%