View Single Post
Old 02-18-2005, 11:36 AM   #2 (permalink)
ReFlex
Member
 
ReFlex's Avatar
 
Join Date: Feb 2005

Location: Belgium
Posts: 14
Rep Power: 0 ReFlex is on a distinguished road
fTrader: (0)
fBuck$: 94.0
Bank: 0.0
Total fBuck$: 94.0

My Forumer
My Country:
Send a message via AIM to ReFlex Send a message via MSN to ReFlex Send a message via Yahoo to ReFlex
Default Re: How Do I Put A Custom BackGround Image On My Site?

--------------------------------------------------
HEADER (TITLE PICTURE)
--------------------------------------------------

Admin CP -> Skins & Templates -> Style Sheets.
Now click on the Edit link located in the middle right hand side corner.
Now find the following line in your CSS content and edit the text marked in blue with the URL of the gradient's you wish to change these main bars to:

Quote:
.titlemedium { font-weight:bold; color:#3A4F6C; padding:7px; margin:0px; background-image: url(style_images/<#IMG_DIR#>/tile_sub.gif) }
.titlemedium* a:link, .titlemedium* a:visited, .titlemedium* a:active* { text-decoration: underline; color: #3A4F6C }

.maintitle { vertical-align:middle;font-weight:bold; color:#FFF; padding:8px 0px 8px 5px; background-image: url(style_images/<#IMG_DIR#>/tile_back.gif) }
.maintitle a:link, .maintitle* a:visited, .maintitle* a:active { text-decoration: none; color: #FFF }
.maintitle a:hover { text-decoration: underline }


The .maintitle is the first blue bar you see on the default skin.
The .titlemeduim is the second blue bar you see on the default skin (it's a bit lighter then the first one - .maintitle).
By editing the text marked in blue you can change these images (called gradients) to suit your needs,
once you've edited the URL click on the link at the bottom of the page entitled Edit stylesheet and your new gradient's should be up

--------------------------------------------------


-------------------------------------------------
BACKGROUND
--------------------------------------------------

To add a background image onto your boards skin follow this path:
Admin CP -> Skins & Templates -> Style Sheets.
Now click the Edit link in the middle right handside corner, this will lead you to a new screen,
in your CSS content find the following line:


Quote:
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000000;
margin:0px 10px 0px 10px; background-color:#FFFFFF }


Edit it to look like this with the bolded part added and the text in green to whatever the backgrounds image URL is:


Quote:
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000000;
margin:0px 10px 0px 10px; background-color:#FFFFFF; background-image: url(http://www.domain.com/image.gif) }


Once you've completed that click on the Edit stylesheet link

--------------------------------------------------


--------------------------------------------------
CENTERING THE LOGO
--------------------------------------------------

Centering The Logo Way #1
Follow this path:
Admin CP -> Skins & Templates -> HTML Templates -> Manage HTML.
Now click on Global HTML elements and choose edit next to Board Header (logo, links, etc).

Find this:

Quote:
<div id='logostrip'>
* <img src='{ibf.vars.img_url}/logo4.gif' alt='Powered by Invision Power Board' border="0" />
</div>



And add the text marked in red:

Quote:
<div id='logostrip' align="center">
* <img src='{ibf.vars.img_url}/logo4.gif' alt='Powered by Invision Power Board' border="0" />
</div>

--------------------------------------------------


--------------------------------------------------
BACKGROUND COLOR
--------------------------------------------------

If you've ever wondered how you can change your boards background color it can be done by following this path:

Admin CP -> Skinning & Styles -> Manage Style Sheets

In your CSS contents find the following line and edit the text marked in Red:


Quote:
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000000;
margin:0px 10px 0px 10px; background-color:#FFFFFF }


Once completed click on the Edit CSS button to save your changes.

--------------------------------------------------


--------------------------------------------------
ReFlex is offline