Transparency In Top Banner V2? (RESOLVED)

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Transparency In Top Banner V2? (RESOLVED)

Postby HallowedReaper » October 5th, 2011, 8:06 pm

I was wondering if there's anyway to have a transparent comic background. Um. Here's what I mean...
Spoiler! :
Image
I'm talking about the semi-transparent page. I know that's not Top Banner V2, but I was wondering if it was possible to do that in it.
Last edited by HallowedReaper on October 16th, 2011, 9:46 am, edited 1 time in total.
Image
User avatar
HallowedReaper
 
Posts: 20
Joined: September 11th, 2010, 10:57 pm
Location: A cardboard box outside WalMart

Re: Transparency In Top Banner V2?

Postby eishiya » October 5th, 2011, 8:18 pm

Are you talking about the little gradients, or something else?

The most common way to achieve any kind of transparency for static images like backgrounds is to have them as transparent PNGs, which are very easy to create in Photoshop and similar graphics editors.

If you mean the large green gradient background, that's not transparency, it's a static image that has the gradient, it's just been colour-coordinated with everything else.
Busy, busy.
User avatar
eishiya
 
Posts: 5734
Joined: December 5th, 2009, 11:17 am

Re: Transparency In Top Banner V2?

Postby HallowedReaper » October 5th, 2011, 8:32 pm

Sorry, let me start over. What I would like to do is make this white transparent.
Spoiler! :
Image
How would I go about doing this.
Image
User avatar
HallowedReaper
 
Posts: 20
Joined: September 11th, 2010, 10:57 pm
Location: A cardboard box outside WalMart

Re: Transparency In Top Banner V2?

Postby eishiya » October 5th, 2011, 8:39 pm

OH. Okay that made more sense. You can do that by just not setting a background and a border at all. By default, it'll be transparent.

In your Overall layout, you should have some code that looks roughly like this:
Code: Select all
   #main {
   background:#fff;
   color:#000;
   border:0;

Remove the lines starting with background and border, or comment them out by putting // in front of them (that way if you mess up, you can easily put them back in later).
Busy, busy.
User avatar
eishiya
 
Posts: 5734
Joined: December 5th, 2009, 11:17 am

Re: Transparency In Top Banner V2?

Postby HallowedReaper » October 5th, 2011, 9:09 pm

Okay I removed Background and Border. What now?
Image
User avatar
HallowedReaper
 
Posts: 20
Joined: September 11th, 2010, 10:57 pm
Location: A cardboard box outside WalMart

Re: Transparency In Top Banner V2?

Postby eishiya » October 5th, 2011, 9:13 pm

Whoops! Missed a bit. Remove background and border under #wrap as well.
Code: Select all
   #wrap {

   background:#fff;

   border:1px solid #000;
Busy, busy.
User avatar
eishiya
 
Posts: 5734
Joined: December 5th, 2009, 11:17 am

Re: Transparency In Top Banner V2?

Postby HallowedReaper » October 5th, 2011, 9:24 pm

Okay the white's gone. So am I able to put a transparent picture in its place?
Image
User avatar
HallowedReaper
 
Posts: 20
Joined: September 11th, 2010, 10:57 pm
Location: A cardboard box outside WalMart

Re: Transparency In Top Banner V2?

Postby eishiya » October 5th, 2011, 9:27 pm

Yep! To either #wrap or #main, add
Code: Select all
background: url(http://URL of your background image here);

Just remember that if you literally want the background to be transparent, the source image will have to be transparent.
Busy, busy.
User avatar
eishiya
 
Posts: 5734
Joined: December 5th, 2009, 11:17 am

Re: Transparency In Top Banner V2?

Postby HallowedReaper » October 5th, 2011, 9:31 pm

Thanks for all your help!
Image
User avatar
HallowedReaper
 
Posts: 20
Joined: September 11th, 2010, 10:57 pm
Location: A cardboard box outside WalMart


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 1 guest