Create A Forum - Support Forums

Support => Guides and Tutorials => Topic started by: Seldom Fail on August 05, 2010, 06:38:36 pm

Title: [GUIDE] Using Your Own Rank Images
Post by: Seldom Fail 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
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: simply sibyl 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
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Damien on August 05, 2010, 11:44:43 pm
I love this tutorial... I always swap images for my membergroups images. :P
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: ozzmancometh on July 07, 2011, 02:41:30 am
the link does not work
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: simply sibyl 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"]
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: ozzmancometh 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?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: CB 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?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: CB on August 29, 2011, 05:57:12 pm
Bump
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: simply sibyl 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
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: CB 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?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Alex on August 29, 2011, 09:47:03 pm
You can have multiple codes in your footer.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: aIURbliS 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
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: legit dice 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?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: aIURbliS on February 18, 2012, 07:33:16 pm
That wouldn't be possible with this code.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Seldom Fail 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.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Hoppe on February 24, 2012, 12:15:15 am
I dont understand this where do i need to put the code and do i need to purhase something first i got the free version,


Please replay me i really need it, can some one maybe tell it on another way i really dont understand it.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: aIURbliS on February 24, 2012, 12:54:06 am
First go to your Admin Control Panel by clicking on the Admin tab. On the left side, there will be a sidebar with lots of links organized by category. There will be a bar that says Configuration and under that, there will be a link that says Style Manager. Look at the main part of the page where the tabs are and click on the Headers and Footers tab. Paste the code in the box that says Footers.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: DATa on August 17, 2012, 11:04:11 am
i cant upload my own images or links   :-\   ???
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Seldom Fail on August 17, 2012, 05:52:13 pm
Where are you trying to upload them to?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: DATa on August 17, 2012, 11:37:35 pm
i'm talking about this

(https://support.createaforum.com/proxy.php?request=http%3A%2F%2Fdata.imagup.com%2F10%2F1159912314.png&hash=cbffdcf7dc54437dd3a7ef2b74b784bb6c9d7657) (http://www.imagup.com/data/1159912314.html)

i cant choose my own URL or upload an image for my admin rank ??!!
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: aIURbliS on August 17, 2012, 11:43:22 pm
That's why this guide was made, go back to the original post and read it.
Title: [GUIDE] Using Your Own Rank Images
Post by: Badges8 on October 18, 2012, 07:44:22 am
 the only way you can use different rank images is to follow the instructions in the Guide. 
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: showtime on December 27, 2012, 08:51:20 pm
nothing is working why is it soo hard :'( :'( :'( :'( :'( :'( can some one help me or make a video....
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: aIURbliS on December 27, 2012, 11:59:54 pm
Maybe you didn't read the whole thing,
Quote
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
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: ๖ۣۜKernul on July 12, 2013, 11:38:50 pm
How do I get "http://images.smfboards.com" in front of my picture?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: rbeskow on September 25, 2013, 07:24:22 pm
It seems to work when I'm in the menu to edit member groups, after I click "Save" but it still shows the old image within a post.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Jack on October 01, 2013, 09:55:40 am
http://support.createaforum.com/8/problem-with-rank-image-change-script/new/#new (http://support.createaforum.com/8/problem-with-rank-image-change-script/new/#new)


Doesn't work.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: friendlygraphics on November 01, 2013, 06:31:55 pm
I have a question... when you make your new rank images, do you have to save the file as a .gif or can you use a .png image?


EDIT:
NEVERMIND! I got them to work. Thanks for the tut!
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Null on December 18, 2013, 06:52:02 am
This Dose'nt work anymore.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Null on December 18, 2013, 06:52:16 am
Am I right?
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: Null on December 18, 2013, 06:52:32 am
- 1 Karma.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: danny12 on November 05, 2015, 07:59:23 pm
<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/rank_flower.png" , "http://i.imgbox.com/saEH8013.png"]
img_b[img_b.length++] = ["http://images.smfboards.com/ranks/rank_gifted.png" , "http://i.imgbox.com/LgstQDsZ.png"]
img_b[img_b.length++] = ["http://images.smfboards.com/ranks/rank_gold.png" , "http://i.imgbox.com/AojGCB0Z.png"]
img_b[img_b.length++] = ["http://images.smfboards.com/ranks/rank_peace.png" , "http://i.imgbox.com/bonAaNNH.png"]
img_b[img_b.length++] = ["http://images.smfboards.com/ranks/rank_prof.png" ,"http://i.imgbox.com/On34fQ37.png"]
img_b[img_b.length++] = ["http://images.smfboards.com/ranks/rank_sweet.png" , "http://i.imgbox.com/MuGM3vFd.png"]




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>
<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/rank_flower.png' , 'http://i.imgbox.com/LgstQDsZ.png']

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>

does not work :(
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: KONGA on January 03, 2016, 04:30:19 am
Hi, I did all the steps, and it worked, but only in the "Edit Membergroups" section. I checked in a user's post and the image didn't change.
Please help.
Title: Re: [GUIDE] Using Your Own Rank Images
Post by: DarkRazor on August 05, 2016, 02:29:14 am
Where is the footer?