Author Topic: [Guide] How to Use Your Own Rank Images  (Read 98322 times)

0 Members and 1 Guest are viewing this topic.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
[Guide] How to Use Your Own Rank Images
« on: February 18, 2008, 05:39:57 pm »
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: [Select]
<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>


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"]
« Last Edit: June 05, 2011, 08:47:11 am by simply sibyl »

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to Use Your Own Rank Images
« Reply #1 on: August 22, 2008, 05:19:17 pm »
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

Offline Fluro

  • SMF For Free Newbie
  • *
  • Posts: 11
    • View Profile

  • Total Badges: 9
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to Use Your Own Rank Images
« Reply #2 on: August 22, 2008, 07:44:58 pm »
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>

I put that into my Footer.

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to Use Your Own Rank Images
« Reply #3 on: August 22, 2008, 08:31:00 pm »
The second url in your code isnt good.

This one...     

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

Offline Fluro

  • SMF For Free Newbie
  • *
  • Posts: 11
    • View Profile

  • Total Badges: 9
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to Use Your Own Rank Images
« Reply #4 on: August 22, 2008, 08:44:42 pm »
Ooo i see now, It got changed. Thanks though!

Offline eddie

  • SMF For Free Member
  • *
  • Posts: 29
    • View Profile

  • Total Badges: 13
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: [Guide] How to Use Your Own Rank Images
« Reply #5 on: August 23, 2008, 12:25:36 am »
nice guide sibyl

Offline Aragorn4003

  • SMF For Free Member
  • *
  • Posts: 28
    • View Profile
    • LOTR Wars Forum!

  • Total Badges: 10
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to Use Your Own Rank Images
« Reply #6 on: September 12, 2008, 09:32:16 pm »
I used this, but it didn't work =[.
Code: [Select]
<script type='text/javascript'>
/*
Change Any Image On Page
Created by iFusion
*/
var img_b = new Array();

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/ModRank.gif" , "http://i37.tinypic.com/23lbm74.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/AdminRank.gif" , "http://i37.tinypic.com/2m7ul4n.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank1.gif" , "http://i38.tinypic.com/2n6tg88.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank2.gif" , "http://i36.tinypic.com/mjmp35.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank3.gif" , "http://i37.tinypic.com/294rpqt.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank4.gif" , "http://i37.tinypic.com/2r3ji2c.gif" ]
img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/LED/g_rank5.gif" , "http://i37.tinypic.com/2a65x1c.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[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

Nvm. I got it to work. Thanks for great guide Sibyl.
« Last Edit: September 12, 2008, 09:37:56 pm by Aragorn4003 »

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to Use Your Own Rank Images
« Reply #7 on: September 12, 2008, 09:51:51 pm »
You need to go back to the starfile page and use images that do show on that page.
The image links you used do not work at this time.   Only use ones that are not red x's , etc on that starfile page as the original images and it will work for you.    SMF for Free is aware there are many images on that page that do not work.  It is going to take some time for him to edit/fix that.   

Offline Aragorn4003

  • SMF For Free Member
  • *
  • Posts: 28
    • View Profile
    • LOTR Wars Forum!

  • Total Badges: 10
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to Use Your Own Rank Images
« Reply #8 on: September 13, 2008, 08:16:26 am »
You need to go back to the starfile page and use images that do show on that page.
The image links you used do not work at this time.   Only use ones that are not red x's , etc on that starfile page as the original images and it will work for you.    SMF for Free is aware there are many images on that page that do not work.  It is going to take some time for him to edit/fix that.  

Actually those links weren't the problem. I just changed the http://www.smfboards.com in each link to http://images.smfboards.com and it worked fine =].

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to Use Your Own Rank Images
« Reply #9 on: September 13, 2008, 09:27:25 am »
You need to go back to the starfile page and use images that do show on that page.
The image links you used do not work at this time.   Only use ones that are not red x's , etc on that starfile page as the original images and it will work for you.    SMF for Free is aware there are many images on that page that do not work.  It is going to take some time for him to edit/fix that.  

Actually those links weren't the problem. I just changed the http://www.smfboards.com in each link to http://images.smfboards.com and it worked fine =].

Yep... normally that would have been what I would have recommended but at the time you posted that last nite the image server was having an issue and it "appeared" those were part of a group of images that do not work so I "wrongly" figured it was best to change using different ones   :P

Offline gm gerald

  • SMF For Free Newbie
  • *
  • Posts: 8
    • View Profile

  • Total Badges: 8
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 First Post
Re: [Guide] How to Use Your Own Rank Images
« Reply #10 on: September 26, 2008, 03:03:13 pm »
First you need to set up the rank images using the ones on the starfile image page.
Admin > Membergroups
Modify the group you want to do this to.

Click on the starfile image link.   

Choose one of the images  (it doesnt matter which ones you choose as you will be swapping them)

Enter the filename for the image you chose in the star image filename blank for the membergroup.

You need to know the url of the image so you can swap it.
Right mouse click on the image - Do this on the starfile image page so you have the correct url.    
Click Propertys.
You will see the url there.
Copy the url.


To make the code to swap the image go here:

Swap Images Generator

Put the url of the starfile image 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)
hey bro i copied the code it told me to do in the box but when i save it, the image is still the same.....


Code: [Select]
<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/Admin2.bmp" , "http://forum.ruff-rose.com/donator_icon.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[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>

Offline monsta

  • SMF For Free Member
  • *
  • Posts: 47
    • View Profile

  • Total Badges: 11
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 10 Posts
Re: [Guide] How to Use Your Own Rank Images
« Reply #11 on: September 27, 2008, 03:31:28 am »
good guide, it will help alot of new people to the smfforfree forums.


Offline OutOfOrder

  • SMF For Free Sr. Member
  • *
  • Posts: 385
  • Creator of the X-treme Gaming Forums
    • View Profile
    • X-treme Gaming Forums!!!

  • Total Badges: 14
    Badges: (View All)
    Topic Starter Combination Level 3 Level 2 Level 1
Re: [Guide] How to Use Your Own Rank Images
« Reply #12 on: October 12, 2008, 05:50:11 am »
this was beyond madly helpful for me!

thanks! :)

Offline sheeba

  • SMF For Free Newbie
  • *
  • Posts: 4
    • View Profile

  • Total Badges: 8
    Badges: (View All)
    Topic Starter Combination Level 2 Level 1 First Post
Re: [Guide] How to Use Your Own Rank Images
« Reply #13 on: October 12, 2008, 08:13:30 pm »
Whats wrong, when i go to member groups it shows the origional icon. Than when i click modify it shows the picture of my custom one but on the post it shows the origional one.


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

img_b[img_b.length++] = [ "http://www.smfboards.com/ranks/Futura_6/PDT_Rang_w.gif" , "http://img300.imageshack.us/img300/1713/forummodgr4.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[i].src == img_b[j][0]){
     all_images[i].src = img_b[j][1];
}}}
</script>
« Last Edit: October 12, 2008, 08:29:05 pm by sheeba »

Offline simply sibyl

  • Helpers
  • *
  • Posts: 14347
  • On hiatus
    • View Profile
    • The Tent Dwellers

  • Total Badges: 31
    Badges: (View All)
    Level 6 Poll Voter Webmaster Arcade Highscore Windows User
Re: [Guide] How to Use Your Own Rank Images
« Reply #14 on: October 12, 2008, 08:30:59 pm »
your code looks fine.     So long as you put it in your Footer and you put this in for the star image filename for the Membergroup you want the image for and made sure THAT image was working for them first it should work fine:   Futura_6/PDT_Rang_w.gif