ForumUp English Language Support Forum Index ForumUp English Language Support
Before asking for support:

*Check the FAQ, Guides and Tutorials
*Use a title in posts that describes your question
*Include your forum's URL
*No PM or Email support!
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 


Welcome!

**ALWAYS include the URL to your forum in every post.**
You cannot register with a web.de or mail.ru email address at this time, due to a massive spam registering attack.
* Read the rules for signatures and avatars
* If you did not get your activation email, look here

* Click here for fast help for your questions.
How to Replace the Forum Icons Using a Script

 
Post new topic   Reply to topic    ForumUp English Language Support Forum Index -> Frequently Asked Questions, Guides and Tutorials
View previous topic :: View next topic  
Author Message
FoxLeonard
Admin.
<b>Admin.</b>


Joined: 25 Feb 2007
Posts: 1605
Location: Hyperborea (COM, DK, SE, VN, CO.UK Staff)

PostPosted: Thu Oct 18, 2007 10:08 pm    Post subject: How to Replace the Forum Icons Using a Script Reply with quote

Image replacement script - Forum Icons.

Explanation

This script, when placed in the Footer area, at the bottom of the forum, after all topics field, will replace the following Icons, with images of your own.

whosonline.gif : 'Who is Online'

folder_new.gif : 'New Posts'

folder.gif : 'No New Posts'

folder_lock.gif : 'Forum is Locked'

The script must be modified to suit the Style template in use, as the Icon image names, and directory structure, do not always remain the same.

imageorig01 . . 04: These four variables are where you must list the full URL of the original Icon images.

imagerplc01 . . 04: These four variables list the full URL of your replacement images.

Ensure that you have 'matched' each group of four. eg, 01 to 01, 02 to 02, etc. Otherwise your Icons will not represent what you intend them to, such as your 'Who's Online' image, marking a locked folder !

Note: Your replacement images must be the same size as the original Icons. Otherwise they will be resized in situ, and possibly distorted.

Idea You can find the full URL of an image, by right mouse clicking the image, then selecting 'Properties'. You'll be able to Copy & Paste the URL, direct from the pop-up Properties window.



Script

This example using 'subSilverPlus'. Edit it in a text editor, such as Notepad, then copy & paste it into the Footer:

Admin Panel >> General Admin >> ForumUp >> HTML codes on top and bottom of all forum pages >> Code at the bottom of the forum, after all topics.

Exclamation Be very careful to copy and paste the complete script. Double check that the closing tag </body> is there, before you click Edit allow HTML. A missing > can make a mess of your forum.

You must put YOUR forum URL in the code, in place of the sample forum in the script below.
Code:


<script>
function iconswap()
   {   
   var index = 0;

   var imageorig01 = "http://thebulgalads.forumup.org/templates/subSilverPlus/images/common/whosonline.gif";
   var imageorig02 = "http://thebulgalads.forumup.org/templates/subSilverPlus/images/common/folder_new_big.gif";
   var imageorig03 = "http://thebulgalads.forumup.org/templates/subSilverPlus/images/common/folder_big.gif";
   var imageorig04 = "http://thebulgalads.forumup.org/templates/subSilverPlus/images/common/folder_locked_big.gif";

   var imagerplc01 = "http://img152.imageshack.us/img152/4238/toolsbuttonwh5.gif";
   var imagerplc02 = "http://img152.imageshack.us/img152/4238/toolsbuttonwh5.gif";
   var imagerplc03 = "http://img152.imageshack.us/img152/4238/toolsbuttonwh5.gif";
   var imagerplc04 = "http://img152.imageshack.us/img152/4238/toolsbuttonwh5.gif";

   for(index=0; index<document.images.length; index++)
     {
     if(document.images[index].src == imageorig01) document.images[index].src = imagerplc01;
     if(document.images[index].src == imageorig02) document.images[index].src = imagerplc02;
     if(document.images[index].src == imageorig03) document.images[index].src = imagerplc03;
     if(document.images[index].src == imageorig04) document.images[index].src = imagerplc04;
     }
   }
</script>
<body onload="iconswap();"></body>


Advanced I

If you wish to swap more images, it is a simple matter to duplicate the lines of script, that represent the original, and the replacement images. Then insert the additional URL's.

You must also ensure that you increment the image count, above 04 and onwards. eg,

var imageorig05 = ..
var imageorig06 = ..

Most importantly, you must duplicate the following line. The process is as you performed above. Remember to increment the image counters - there are two here.
Code:
if(document.images[index].src == imageorig04) document.images[index].src = imagerplc04;

Place the amended script into the Code at the bottom of the forum, after all topics. field. (see above)


Advanced II

If you need to save space in the Footer, you can upload the script to a file host, and link to it.

Remove the code from between the <script> tags. Do not include them. Paste this code into a text file, and save it with a .js extension. eg, iconswap.js .

Upload this .js file to a File Host that allows for text files such as:

Only registered users can see links on this forum!
Register or Login on forum!

or
Only registered users can see links on this forum!
Register or Login on forum!



Using the remainder of the script, with your hosted file URL, we have the following,
Code:
<script src="http://Your_File_Host/iconswap.js"></script>
<body onload="iconswap();"></body>

This code is placed in the Footer, the Code at the bottom of the forum, after all topics. field, in the Admin Panel. (see above)

Exclamation Be very careful to copy and paste the complete code. Double check that the closing tag </body> is there, before you click Edit allow HTML. A missing > can make a mess of your forum.

Exclamation Please note: There will be some Style templates, and/or some Icons on which this script will not operate correctly.

Written by Kana3. Updated by FoxLeonard. Special thanks to Raulken for the original version of this code.

_________________

Only registered users can see links on this forum!
Register or Login on forum!


Svensk Support

Only registered users can see links on this forum!
Register or Login on forum!


Dansk Support

Only registered users can see links on this forum!
Register or Login on forum!


Lithuanian Support

Only registered users can see links on this forum!
Register or Login on forum!


Vietnamese Support

Only registered users can see links on this forum!
Register or Login on forum!

Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    ForumUp English Language Support Forum Index -> Frequently Asked Questions, Guides and Tutorials 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


View posts since last visit / View your posts


Powered by phpBB © 2001, 2005 phpBB Group

Powered by forumup.com free forum, create your free forum!
Created by Raulken of Hyarbor S.r.l.
TOS & Privacy.

Page generation time: 0.074