Archive for howtodoit.myfastforum.org Walkthough guides for myfreeforum phpbb 2 forums
 


       howtodoit.myfastforum.org Forum Index -> HowToDoit
Symon

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:
 /* 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};


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:
/* 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};


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:
/* 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};


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

       howtodoit.myfastforum.org Forum Index -> HowToDoit
Page 1 of 1
Create your own free forum | Buy a domain to use with your forum