Author Topic: [GUIDE] Using Your Own Rank Images  (Read 14609 times)

0 Members and 0 Guests are viewing this topic.

Offline Seldom Fail

  • Global Moderator
  • *****
  • Posts: 207
  • Karma: 29
  • Gender: Male
    • View Profile
[GUIDE] Using Your Own Rank Images
« on: August 05, 2010, 06:38:36 pm »
Guide created by 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:

(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"]


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.



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
« Last Edit: February 14, 2012, 03:41:15 am by Seldom Fail »
<--- Donate to CreateAForum! :D

Jeremiah 33:3

Share on Facebook Share on Twitter


Offline simply sibyl

  • Full Member
  • ***
  • Posts: 189
  • Karma: 35
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #1 on: August 05, 2010, 09:41:52 pm »
Heya Seldom.  Thanks for getting that posted over here. You saved me the time and work  heh
You can remove the credit to me from it.  I don't need that.  That goes for any of my Guides from SMF for Free that you want to post here.

Note to others:  Just be sure to go thoroughly thru them and make sure they are correct for smf2.0 and update them if needbe
« Last Edit: August 05, 2010, 09:45:18 pm by simply sibyl »

Offline Damien

  • Newbie
  • *
  • Posts: 15
  • Karma: 0
  • Gender: Male
  • Location: Australia
    • View Profile
    • My Forums
Re: [GUIDE] Using Your Own Rank Images
« Reply #2 on: August 05, 2010, 11:44:43 pm »
I love this tutorial... I always swap images for my membergroups images. :P

Offline ozzmancometh

  • Newbie
  • *
  • Posts: 3
  • Karma: 0
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #3 on: July 07, 2011, 02:41:30 am »
the link does not work

Offline simply sibyl

  • Full Member
  • ***
  • Posts: 189
  • Karma: 35
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #4 on: July 07, 2011, 02:56:46 am »
The page for the Generator was made by a member (from SMF for Free) and his page must be down.

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"]

Offline ozzmancometh

  • Newbie
  • *
  • Posts: 3
  • Karma: 0
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #5 on: July 07, 2011, 03:51:04 am »
thats the thing, im also trying to figure out how to do image swaps, im not used to forums like this, could you perhaps give me a crash course on what i could use to put the code in?

Offline CB

  • Sr. Member
  • ****
  • Posts: 253
  • Karma: 2
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #6 on: August 27, 2011, 01:46:44 pm »
I would like to use Pennies instead of the default star image. Am I suppose to alter that list page with all the other rank badges for it to work? Or is there an alternative to what I need such as hosting it from Photobucket and using the URL code from there?
« Last Edit: August 27, 2011, 01:48:52 pm by CB »

Offline CB

  • Sr. Member
  • ****
  • Posts: 253
  • Karma: 2
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #7 on: August 29, 2011, 05:57:12 pm »
Bump

Offline simply sibyl

  • Full Member
  • ***
  • Posts: 189
  • Karma: 35
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #8 on: August 29, 2011, 06:12:57 pm »
CB - the only way you can use different rank images is to follow the instructions in the Guide.     
When you get to Step 3 in the Guide -  the page with the Generator is no longer available to skip a few posts to the post I made that has the code you will edit and put into your footer.  You MUST do all of the other steps before doing that

Offline CB

  • Sr. Member
  • ****
  • Posts: 253
  • Karma: 2
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #9 on: August 29, 2011, 07:19:35 pm »
CB - the only way you can use different rank images is to follow the instructions in the Guide.     
When you get to Step 3 in the Guide -  the page with the Generator is no longer available to skip a few posts to the post I made that has the code you will edit and put into your footer.  You MUST do all of the other steps before doing that


Still working my way around, but can you clarify for me as I currently have a code in the footer. Are you able to put more codes whatever the case may be or does it have to be empty with just one source code at a time?
« Last Edit: August 30, 2011, 12:59:10 am by CB »

Offline Alex

  • CAF Support Team
  • Full Member
  • ***
  • Posts: 235
  • Karma: 12
  • Gender: Male
  • Location: Greenville, North Carolina
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #10 on: August 29, 2011, 09:47:03 pm »
You can have multiple codes in your footer.
Terms Of Service

Please don't PM me with support questions

Offline aIURbliS

  • Hero Member
  • *****
  • Posts: 1215
  • Karma: 45
  • Gender: Male
  • Location: U.S.
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #11 on: August 29, 2011, 11:04:14 pm »
Well adding more codes in your headers and footers will result in longer loading times for your forum
All codes I make are tested on the latest version of Google Chrome and upon request of other browsers.

Offline legit dice

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #12 on: February 18, 2012, 06:42:45 pm »
How can you add over one image rank? like someone would have Administrator rank and V.I.P below how would you do this?

Offline aIURbliS

  • Hero Member
  • *****
  • Posts: 1215
  • Karma: 45
  • Gender: Male
  • Location: U.S.
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #13 on: February 18, 2012, 07:33:16 pm »
That wouldn't be possible with this code.
All codes I make are tested on the latest version of Google Chrome and upon request of other browsers.

Offline Seldom Fail

  • Global Moderator
  • *****
  • Posts: 207
  • Karma: 29
  • Gender: Male
    • View Profile
Re: [GUIDE] Using Your Own Rank Images
« Reply #14 on: February 19, 2012, 08:20:37 pm »
How can you add over one image rank? like someone would have Administrator rank and V.I.P below how would you do this?

The only way this is possible is if you created a separate membergroup called "Administrator - VIP" or whatever you'd want, and then make an image that has both of the rank images on it and use it in the code.
<--- Donate to CreateAForum! :D

Jeremiah 33:3

 

Related Topics

  Subject / Started by Replies Last post
0 Replies
334 Views
Last post August 12, 2012, 10:00:06 pm
by Tony
0 Replies
619 Views
Last post November 25, 2012, 03:56:29 am
by terrel8125
0 Replies
203 Views
Last post November 25, 2012, 04:59:15 am
by terrel8125
3 Replies
1575 Views
Last post July 17, 2013, 08:10:58 am
by aIURbliS
5 Replies
835 Views
Last post July 04, 2015, 12:07:02 pm
by Griff Grof