• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Replace Prefixes with Images 1.0.1

No permission to download

Matthew Hawley

Well-known member
#1
yolulz submitted a new resource:

Replace Prefixes with Images - Title says it all ;)

Here I will show you how to replace prefixes with images! :)
You do not have to use the images included.

1. Upload the files to your root folder.

2. Admin CP -> Applications -> Thread Prefixes -> Create New Thread Prefix

Lets say were creating a PS3 prefix, and we want to show a PS3 Icon.

View attachment 43817

3. Now lets head over to EXTRA.css. And add this.

Code:
.icon-ps3 {
background: transparent url(tags/ps3.png) no-repeat top left;
}
4....
Read more about this resource...
 
#2
the text from the prefix title is showing up over my icons. the icons are also chopped off. i edited the top section of the CSS you provided to accommodate my image size (62x21) but that still doesn't seem to have helped. Can anyone help please?
 

Shelley

Well-known member
#3
the text from the prefix title is showing up over my icons. the icons are also chopped off. i edited the top section of the CSS you provided to accommodate my image size (62x21) but that still doesn't seem to have helped. Can anyone help please?
to remove the text you could add the following to each prefix if memory recalls I'm sure that will hide it:

Code:
color: transparent;
 
#4
that worked! thanks Shelley! I had been trying that but as
Code:
text-color: transparent;
instead. now i've just got to figure out how get the prefix properly sized.
 
#6
tha'ts what I thought, but i did not work. when i inspect element in chrome, it displays
Code:
span.icon-nba 24px x 17px
and i can't seem to figure out where its pulling those numbers from.
 

Ernest L. Defoe

Well-known member
#12
Please fix for Chrome
If it's not working in Chrome then either you need to update Chrome or you are not doing something right. I have something very similar to this working on one of my sites (when I say similar I mean identical but found posted by someone else on another site xFShowcase) and I have no issues in Chrome.
 
#16
@Shelley

I am having the same problems Alu03 and homeoftheknicks had. Yesterday I put the inline block and transparent fixes in and it showed fine on the threads. However now it is back to image being cut by the text. Also, the fix for the drop down menu you posted above is not working for me. Still shows the text over the image.

This is the CSS I used......

Code:
/* ICONS */

.icon {
display: block;
text-indent: -3000px;
width: 50px;
height: 20px;
}

.icon-pit {
text-color: transparent; background: transparent url(tags/pit.gif) no-repeat top left; color: transparent; display: inline-block;
}
 

lms

Well-known member
#17
Path to image: root/styles/
Image uploaded:
tutorial.png located into http://xenfacil.com/styles/tutorial.png and look like:

Code to add into EXTRA.css template of each style:
Code:
.icon {
    display: block;
    text-indent: -3000px;
    width: 60px;
    height: 15px;
}
.icon-tutorial {
    background: transparent url('./styles/tutorial.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
Image guide:
  1. Create prefix:
    8.png
  2. Add to EXTRA.css template (and save changes):
    7.png
  3. And looks like:
    9.png
    6.png
Fits the image size to the size of the text (I do not make it here)
To prevent the text to appear in the popup menu, add to EXTRA.css template for each icon:
Code:
.PrefixMenu .PrefixOption a.icon-tutorial {
   color: transparent;
}
10.png
11.png

Salud2
 
Last edited:

lazer

Well-known member
#18
Hey guys

I have the images showing in the prefixes dropdown:
Screen Shot 2014-08-26 at 13.33.00.png
So..they are also visible in the thread list...

SS25.png

I have a couple of questions...

1. How can I centralise the icons in the dropdown? They look a little 'lost' over there on the left of the column, with all that white space to the right.

2. How can I show the icons at full size in the thread list? As you can see, they are somewhat cut off.

Here's my current Extra code:

Code:
/* START CUSTOM PREFIXES START */
.icon {
    display: block;
    text-indent: -3000px;
    width: 35px;
    height: 35px;
}
.icon-uk {
    background: transparent url('./images/prefixes/uk_prefix.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-uk {
   color: transparent;
}
.icon-usa {
    background: transparent url('./images/prefixes/us_prefix.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-usa {
   color: transparent;
}
.icon-can {
    background: transparent url('./images/prefixes/can_prefix.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-can {
   color: transparent;
}
.icon-aus {
    background: transparent url('./images/prefixes/aus_prefix.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-aus {
   color: transparent;
}
.icon-eu {
    background: transparent url('./images/prefixes/eu_prefix.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-eu {
   color: transparent;
}
.icon-other {
    background: transparent url('./images/prefixes/other_prefix.png') no-repeat top left;
    text-color: transparent;
    color: transparent;
}
.PrefixMenu .PrefixOption a.icon-other {
   color: transparent;
}
/* END CUSTOM PREFIXES END */
Cheers :)