Resource icon

Replace Prefixes with Images 1.0.1

No permission to download

Matthew Hawley

Well-known member
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...
 
  • Like
Reactions: DFI
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
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;
 
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.
 
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
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.
 

Shelley

Well-known member
Please fix for Chrome
It would help if you specified what the issues you are encountering with in chrome. Could it just be you need to clear cache? I'm guessing since you never mentioned what the issue you have in chrome.
 

d12j28

Member
@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
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:
Rich (BB code):
.PrefixMenu .PrefixOption a.icon-tutorial {
   color: transparent;
}
10.png
11.png

Salud2
 
Last edited:

lazer

Well-known member
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 :)
 
Top