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! > Transparent Backgrounds in Content Box Bodies
archabaddon (New Admin) 3/12/2008 11:37 AM EST : Transparent Backgrounds in Content Box Bodies
archabaddon
Posts: 643
Zomgawsh Poster

Hello all,

I've been trying to do something to my content boxes but can't seem to pull it off right.

On my CSS, I've been trying to use an opacity value for the Content Boxes (.ContentBoxBody) to make the background transparent (to better view the page background).  My only problem is that the content inside the boxes ends up inheriting the opacity value of the background, making the text and images in the content boxes semi-transparent as well.

Is there any way around this using CCS3?  I would prefer to make just the background opaque, and not the rest of the content in the box.

Any help would be greatly appreciated.  Thanks in advance for saving me from pulling out my hair.
TopBottom

Jabberie (New Admin) 3/13/2008 5:39 AM EST : RE: Transparent Backgrounds in Content Box Bodies

Jabberie
Posts: 130
Posts With Wolves

might pay to give the text and images their own values..


TopBottom

archabaddon (New Admin) 3/13/2008 8:05 AM EST : RE: Transparent Backgrounds in Content Box Bodies
archabaddon
Posts: 643
Zomgawsh Poster

Jabberie said:
might pay to give the text and images their own values..



Exactly, but I'm not sure how to do that.

In the Customization Guide, the only value for he actual content box (AFAIK) is .ContentBoxBody.  If there were a separate div for .ContentBoxText or similar, all would be well.  Right now it appears that the background-color and the (text) color are in the same div, meaning that the text and anything else in the body inherits the background opacity properties.

So the question is, what am I doing wrong on the CSS?  Perhaps I'm not defining the function in the correct div, or maybe just using the wrong function?

Here's my CSS for reference.  Currently for the background I'm using a repeateing dithered GIF to "fake" 50% opacity.  But I want to use true opacity and not a "screen door" effect.

h1 {
font-family: Arial;
font-size: 12pt;
}

html, body, div, p, table, td, form, img, h2, h3, h4, h5, h6, input, select {
font-family: Arial
;font-size: 10pt;
}

body {
BACKGROUND-IMAGE: url('http://www.axiomfiles.com/Files/79617/screenshot2008-03-07-01-24-16.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
BACKGROUND-COLOR: #000000;
}
form {
padding: 3px;border: none;
}

img {
border: none;
}

hr {
color: #0033CC;
}

.TabBar {
margin: 0px;padding: 0px;
}

.SelectedTab {
background-color: #000000;
color: #FFFFFF;
border: solid 2px #0033CC;
border-color: #CC3300;
text-align: center;
padding: 2px;
}

.UnSelectedTab {
background-color: #000000;
color: #FFFFFF;
border: solid 2px #0033CC;
text-align: center;
cursor: pointer;padding: 2px;
}

.UnSelectedTabMo {
background-color: #000000;
color: #FFFFFF;
border: solid 2px #0033CC;
border-color: #0033CC;
cursor: pointer;
text-align: center;
padding: 2px;
}

.AltGridRow {
background-color: #000000;
color: #FFFFFF;
}

.NormGridRow {
background-color: #000000;
color: #FFFFFF;
}

.ContentBox {
border: solid 2px #0033CC;
background-color: #000000;
border: solid 1px #0033CC;
}

.ContentBoxTitle {
border: solid 2px #0033CC;
padding: 5px;
background-color: #000000;
color: #FFFFFF;
FONT-SIZE: 12pt;
FONT-FAMILY: Arial Bold;
}

.ContentBoxBody {
BACKGROUND-IMAGE: url('http://www.axiomfiles.com/Files/79617/Generic-BG.gif');
background-repeat: repeat;
background-color: transparent;
color: #FFFFFF;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}


.StateBar {
background-color: #000000;
color: #FFFFFF;
text-align: center;
padding: 5px;
}

.ForumCategoryHeader {
background-color: #000000;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #0033CC;
padding-left: 5px;
color: #FFFFFF;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;}

.ContentBoxTitleNoBackground {
COLOR: #ffffff;
font-size: 8pt;
font-family: Arial;
font-weight: bolder;
font-variant: small-caps;
}

A:active {
color: #CCCCCC;
text-decoration: none;
}

A:link {
color: #3399ff;
text-decoration: none;
}

A:hover {
color: #3399ff;
text-decoration: underline;
}

A:visited {
color: #0066cc;
text-decoration: none;
}

.toolTipHeader {
color: lime;
font-weight: bold;
}

#dhtmltooltip {
position: absolute;
width: 150px;
border: solid 1px white;
padding: 3px;
background-color: black;
color: white;
visibility: hidden;
z-index: 100;
}

TopBottom

Ebenthorin (Guild Admin) 3/17/2008 5:42 AM EST : RE: Transparent Backgrounds in Content Box Bodies
Ebenthorin
Posts: 1274
Zomgawsh Poster

Use a transparent .png for the background image. Works in FF and IE 6.0 (pathed) and above. Although IE 6/7 choke a bit if you do transparent images and floating backgrounds. Scrolling gets a bit choppy.

-Rick
TopBottom

Tymanicor (New Admin) 3/21/2008 2:41 AM EST : RE: Transparent Backgrounds in Content Box Bodies
Tymanicor
Posts: 881
Zomgawsh Poster

take a look at our site...I'm not sure if that's what you're looking for, but we have a static background image, that shows through everything. Lemme know if that's what you were lookin for, and I'll see what I can remember about how I did it lol.
TopBottom

Eph (MVP) 3/21/2008 7:42 AM EST : RE: Transparent Backgrounds in Content Box Bodies
GuildPortal MVP
Eph
Posts: 596
Zomgawsh Poster

Here is what my CSS looks like for a transparent content box background.

.ContentBoxBody {
background-color: ;
background-image:;
background-repeat:repeat;
color: #ffff20;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
TopBottom

archabaddon (New Admin) 3/26/2008 5:33 AM EST : RE: Transparent Backgrounds in Content Box Bodies
archabaddon
Posts: 643
Zomgawsh Poster

Thanks for all the feedback all.  I was out of town for a bit, hence my slow response.

I did end up using a .PNG work-around, since I didn't want to use a completely transparent background, and GIFs weren't cutting it (alpha's pretty binary with GIFs apparently).  It seems to be the easiest way to do this with CSS.  Here's the CSS code:


.ContentBoxBody {
BACKGROUND-IMAGE: url('http://xxx/Generic-BG.png');
background-repeat: repeat;
background-color: transparent;
color: #FFFFFF;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

The results are at http://pr.webhop.net (or just click on my sig).  Thanks again for the advice!
TopBottom

Rosary_KT (Guild Admin) 3/26/2008 11:00 AM EST : RE: Transparent Backgrounds in Content Box Bodies
Rosary_KT
Posts: 1072
Zomgawsh Poster

Looks nice, just remember png transparency is not supported by all browser versions.
No alternate text supplied.
TopBottom

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