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

Unmaintained Replace Prefixes with Images 1.0.1

Title says it all ;)

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    yolulz submitted a new resource:

    Replace Prefixes with Images - Title says it all ;)

    Read more about this resource...
     
    DFI likes this.
  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?
     
  3. Shelley

    Shelley Well-Known Member

    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.
     
  5. Shelley

    Shelley Well-Known Member

    Won't defining a width and/or height fix this for each prefix?
     
  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.
     
  7. Shelley

    Shelley Well-Known Member

    Guessing here, try adding.....

    Code:
     display: inline-block;
     
  8. the inline-block was exactly what it needed! you fixed both of them, thank you!
     
    Shelley likes this.
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

  10. Rho Delta

    Rho Delta Well-Known Member

    Very cool idea!
     
  11. Alu03

    Alu03 New Member

    Please fix for Chrome
     
  12. Ernest L. Defoe

    Ernest L. Defoe Well-Known Member

    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.
     
  13. Shelley

    Shelley Well-Known Member

    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.
     
  14. Alu03

    Alu03 New Member

    This error:
    imgprefix.png
     
  15. Shelley

    Shelley Well-Known Member

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

    Code:
    text-color: transparent;
     
  16. d12j28

    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;
    }
     
  17. lms

    lms Well-Known Member

    Path to image: root/styles/
    Image uploaded:
    tutorial.png located into http://xenfacil.com/styles/tutorial.png and look like: [​IMG]
    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: Dec 16, 2013
    Alu06, yreyes and d12j28 like this.
  18. lazer

    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 :)
     

Share This Page