Log in to check your private messages 
Username: Password:   
  howtodoit.myfastforum.org
  
Index • FAQ • Search • Memberlist • Usergroups • Profile

Text
Text
Friends
MYFF Support Forum
HOWTODOIT (PHPbb3)
portalogy
CGArts
ANNOUNCEMENTS
Complete List of templates Available
Please Read First Before Editing your template
Permissions
Admin Index
Sticky Articles
Understand Your Overall_Header.tpl
Creating An Editor user
How to find the forum footer / Control Panel
Edit Templates/Logos
Forum Index
Latest Posts
Rules
New Mod BBcode
Using http://dns.myff.org
Computers
Send Pm When Transfering Cash
Friends

Start | Stop

Adding A Background Image
Jump to:  
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » HowToDoit
Author Message
Symon
Guide Legend
Guide Legend



Joined: 11 Jun 2006
Posts: 909


Location: Hampshire,England

Add Comment
Show Comments
PostPosted: Sun Oct 28, 2007 4:27 pm Reply with quote
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
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » HowToDoit


 
 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

HOWTODOIT was designed and built by Symon Field
Creator Of ☆ ☆ FunnyWorld ☆
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