Replace Prefixes with Images 1.0.1

[Matthew Hawley]

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.

.icon-ps3 {
background: transparent url(tags/ps3.png) no-repeat top left;
}

4....

Read more about this resource...

 

[homeoftheknicks]

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]

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:

color: transparent;

 

[homeoftheknicks]

that worked! thanks Shelley! I had been trying that but as

text-color: transparent;

instead. now i've just got to figure out how get the prefix properly sized.

 

[Shelley]

Won't defining a width and/or height fix this for each prefix?

 

[homeoftheknicks]

tha'ts what I thought, but i did not work. when i inspect element in chrome, it displays

span.icon-nba 24px x 17px

and i can't seem to figure out where its pulling those numbers from.

 

[Shelley]

Guessing here, try adding.....

 display: inline-block;

 

[homeoftheknicks]

the inline-block was exactly what it needed! you fixed both of them, thank you!

 

[Matthew Hawley]

yolulz updated [LetsPWN] Replace Prefixes with Images with a new update entry:

Update 1.0.1

Fixed an error with one of the icons in the CSS.

Read the rest of this update entry...

 

[Rho Delta]

Very cool idea!

 

[Alu03]

Please fix for Chrome

 

[Ernest L. Defoe]

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]

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.

 

[Alu03]

This error:

 

[Shelley]

This error:
View attachment 50303

add the following into the prefix css in extra if your referring to the blue text and your wanting it gone.

text-color: transparent;

 

[d12j28]

@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......

/* 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]

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:

.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:
   
   ​
2. Add to EXTRA.css template (and save changes):
   
   ​
3. And looks like:
   
   
   ​

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:

.PrefixMenu .PrefixOption a.icon-tutorial {
   color: transparent;
}

​

Salud2

 

[lazer]

Hey guys

I have the images showing in the prefixes dropdown:

So..they are also visible in the thread list...



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:

/* 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