Welcome Guest To HOWTODOIT

Text

Adding A Background Image

This forum is locked: you cannot post, reply to, or edit topics.

This topic is locked: you cannot edit posts or make replies.

howtodoit.myfreeforum.org Forum Index -> Howtodoit

View previous topic :: View next topic

Author

Message

Please Register and Login to this forum to stop seeing this advertsing.

Add Karma

Posted: Post subject:

symon
Site Admin

Location:

Joined: 13 Mar 2006
Posts: 866

Location: Hampshire Add Karma

Posted: Sun Oct 28, 2007 3:26 pm Post subject: Adding A Background Image

The first thing to remember is that not many templates are geared to have a background image to work smoothly.

Ok here is HOWTODOIT

Please remember to use the Editor account before making any template changes, If you have not made an editor account yet please read HERE

Second you must have all ready a template you can edit.

If you have not done this please read HOWTODOIT

1. Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find

overall_header.tpl

Check in there first to see if it hosts your .css your .css will start like the code below if not then come out of that file and goto myff_yourtemplate.css (this is not the one called form_IE.css)

First off look for a code like below if it shows with out a background image then you need to add one, if it does have a background imagine already then please follow step 2

Code with out a back ground image

Code:

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #E5E5E5;
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};

Code with back ground image

Code:

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #E5E5E5;
background-image: url(http://testhtml.myfastforum.org/templates/myfs_testhtml1/images/fond01.gif);
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};

Step 1

(a) First of all you must upload your image to your template, to do this

1. Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Now look in the middle, in the area marked Upload Image (make sure the filename does not contain spaces, brackets etc)

Click on browse and find your image on your pc then click upload.

Now please remember what you called it for eg background and remember what format it was in for eg .gif

Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find

overall_header.tpl Or myff_yourtemplate.css depending on where your .css is controlled from.

Now find something like

Code:

Now add this code to it

Code:

background-image: url(http://testhtml.myfastforum.org/templates/myfs_testhtml1/images/fond01.gif);

So it may look like

Code:

You must remember to change the url of the image to your url for your forum and template, so your code would be

Code:

http://YOUR FORUM URL/templates/YOUR TEMPLATE NAME/images/THE NAME OF YOUR IMAGE EG BACKGROUND.GIF

Step 2

This is for templates that are already using a background image, if you have followed step 1 then you should not need to follow this part of the guide unless you wish to change your image.

(A) 1. Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find

overall_header.tpl

Check in there first to see if it hosts your .css your .css will start like the code below if not then come out of that file and goto myff_yourtemplate.css (this is not the one called form_IE.css)

Look for this code or similar

Code:

Now note the name of the image and what format it is for example this code the background image is called fond01.gif

You now have two choices

1. upload the new background picture you want making sure it has the same name and is in the same format.

2. Upload your new background image, remembering what it is called and just edit the image code to suit, for example if my new picture is called background23.png my new code would be

Code:

background-image: url(http://testhtml.myfastforum.org/templates/myfs_testhtml1/images/background23.png);

See Step 1 if you are unsure how to upload your images.

Tips

Any changes to the .css may only take places after you have refreshed your page a few times and cleared all cookies and cache and T.I.F

How to clear cookies.

On IE

Click on tools -- internet options --- now click on the area marked clean cookies and clean files.

On FireFox

Tools --- clear private data

And thats HOWTODOIT

_________________
Join me on FaceBook = symon field

Display posts from previous:

	howtodoit.myfreeforum.org Forum Index -> Howtodoit	All times are GMT
Page 1 of 1

Jump to:

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File Gallery Forum Archive

HOWTODOIT was designed and built by Symon Field
Creator Of ☆ FarnboroughInvincibles ☆ AgonyAuntFairies ☆ Asylum Alliance ☆ FunnyWorld ☆ HOWTODOIT PHPbb3
HOWTODOIT© Symon Field 2006,2007,2008
Powered by phpBB Group © 2001,2005.

Create your own free forum | Buy a domain to use with your forum