SMF For Free Support > Guides and Tutorials

[Guide] How to Use Your Own Rank Images

(1/34) > >>

simply sibyl:
STEP 1:
Set up the rank images for your Membergroups
Admin > Membergroups
Click "Modify" across from a Membergroup
Click on the starfile image link.  
Choose an image

Enter the filename for the image you chose in the star image filename blank for the membergroup.
Set up a different starfile image for each Membergroup.
IMPORTANT:  Make SURE all of your Membergroup images are working before going on to the next step.


STEP 2:
Get the url of the image(s) you just set up
Get the url from the starfile image page or a members post that the image shows in - NOT the Membergroup page.

From the starfile image page or post:
Right mouse click on the image
Click Propertys.
You will see the url there.
Copy the url.

IMPORTANT: It is important that you have the CORRECT url or this will not work.
Make sure the image starts with:   http://images.smfboards.com NOT  http://www.smfboards.com



STEP 3:
To make the code to swap the image(s) go here:
Swap Images Generator
(IF the above link isnt working go to the end of this post)

Put the url of the starfile image you set up for the Membergroup under OLD IMAGE
Put the url of YOUR image under NEW IMAGE

If you want to do it for more images click ADD NEW FIELD and put in the urls for the additional images, old and new.
    
When you are done click the Get Code button.
Copy the code.
Paste it into your Footer   (Admin > Manage Styles > Edit HEader/Footer)

If you have problems getting it to work

FIRST:   go back thru the directions and double check your work.
If you still need help  reply to this thread
1.   paste the code you used so we can look at it.
2.   post your forum url - preferably to a post in the forum that shows the image is not correct


If the Generator URL is not working:

(The code goes in the Footer)


--- Code: ---<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
--- End code ---


Replace OLD IMAGE URL with the url of the image you want to replace
Replace NEW IMAGE URL with the url of the new image you want to use

Add more of these lines if you have several images to swap:

img_b[img_b.length++] = ["OLD IMAGE URL" , "NEW IMAGE URL"]

simply sibyl:
NOTICE:    To anyone who is currently using the Swap Image Code to use your own rank images.

If you are suddenly seeing red x's and the code is not working:

Go back thru the code in your footer that swaps the images.
For each place for the OLD links that it says:   http://www.smfboards.com
Change it to:   http://images.smfboards.com

Fluro:
My images just turn into *'s :(
Here is the code:


--- Quote ---<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://images.smfboards.com/ranks/staradmin.gif" , "http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif" ]

var all_images = document.getElementsByTagName('IMG');
for(i=0;i<all_images.length;i++){
for(j=0;j<img_b.length;j++){
   if(all_images.src == img_b[j][0]){
     all_images.src = img_b[j][1];
}}}
</script>
--- End quote ---

I put that into my Footer.

simply sibyl:
The second url in your code isnt good.

This one...     

http://www.runehq.com/image/specialreports/rare/yellowpartyhat.gif

Fluro:
Ooo i see now, It got changed. Thanks though!

Navigation

[0] Message Index

[#] Next page