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

    ps3prefix.png

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

    Code:
    .icon-ps3 {
    background: transparent url(tags/ps3.png) no-repeat top left;
    }
    You may have to adjust some of the css if you are not using the images I provided.

    4. Tada!!! now complete! :)

    Here is the css for all the icons provided.

    Code:
    /* ICONS */
    
    .icon {
    display: block;
    text-indent: -3000px;
    width: 60px;
    height: 15px;
    }
    
    .icon-games {
    background: transparent url(tags/games.png) no-repeat top left;
    }
    
    .icon-pcgames {
    background: transparent url(tags/pcgames.gif) no-repeat top left;
    }
    
    .icon-photoshop {
    background: transparent url(tags/photoshop.gif) no-repeat top left;
    }
    
    .icon-****post {
    background: transparent url(tags/****post.jpg) no-repeat top left;
    }
    
    .icon-art {
    background: transparent url(tags/art.jpg) no-repeat top left;
    }
    
    .icon-photo {
    background: transparent url(tags/photos.png) no-repeat top left;
    }
    
    .icon-rant {
    background: transparent url(tags/rant.gif) no-repeat top left;
    }
    
    .icon-en {
    background: transparent url(tags/en.gif) no-repeat top left;
    }
    
    .icon-computers {
    background: transparent url(tags/computers.gif) no-repeat top left;
    }
    
    .icon-news {
    background: transparent url(tags/news.png) no-repeat top left;
    }
    
    .icon-stupid {
    background: transparent url(tags/stupid.gif) no-repeat top left;
    }
    
    .icon-repeat {
    background: transparent url(tags/repeat.gif) no-repeat top left;
    }
    
    .icon-science {
    background: transparent url(tags/science-posticon.png) no-repeat top left;
    }
    
    .icon-politics {
    background: transparent url(tags/politics.gif) no-repeat top left;
    }
    
    .icon-request {
    background: transparent url(tags/request.png) no-repeat top left;
    }
    
    .icon-movies {
    background: transparent url(tags/movies.gif) no-repeat top left;
    }
    
    .icon-help {
    background: transparent url(tags/help.gif) no-repeat top left;
    }
    
    .icon-humour {
    background: transparent url(tags/humour.png) no-repeat top left;
    }
    
    .ticon-gross {
    background: transparent url(tags/gross.gif) no-repeat top left;
    }
    
    .icon-wip {
    background: transparent url(tags/wip.png) no-repeat top left;
    }
    
    .icon-beta {
    background: transparent url(tags/beta.gif) no-repeat top left;
    }
    
    .icon-postyour {
    background: transparent url(tags/postyour.png) no-repeat top left;
    }
    
    .icon-question {
    background: transparent url(tags/question.png) no-repeat top left;
    }
    
    .icon-steam {
    background: transparent url(tags/steam.png) no-repeat top left;
    }
    
    .icon-wii {
    background: transparent url(tags/wii.jpg) no-repeat top left;
    }
    
    .icon-360 {
    background: transparent url(tags/360.jpg) no-repeat top left;
    }
    
    .icon-youtube {
    background: transparent url(tags/youtube.jpg) no-repeat top left;
    }
    
    .icon-music {
    background: transparent url(tags/music.gif) no-repeat top left;
    }
    
    .icon-ps3 {
    background: transparent url(tags/ps3.png) no-repeat top left;
    }
    
    .icon-love {
    background: transparent url(tags/love.jpg) no-repeat top left;
    }
    
    .icon-release {
    background: transparent url(tags/release.png) no-repeat top left;
    }
    
    .icon-tv {
    background: transparent url(tags/tv.gif) no-repeat top left;
    }
    
    .icon-map {
    background: transparent url(tags/map.jpg) no-repeat top left;
    }
    
    .icon-nsfw {
    background: transparent url(tags/nsfwpng) no-repeat top left;
    }
    
    .icon-school {
    background: transparent url(tags/school.gif) no-repeat top left;
    }
    
    .ticon-link {
    background: transparent url(tags/link.gif) no-repeat top left;
    }
    
    .icon-tutorial {
    background: transparent url(tags/tutorial.png) no-repeat top left;
    }
    
    .icon-cpp {
    background: transparent url(tags/cpp.png) no-repeat top left;
    }
    
    .icon-php {
    background: transparent url(tags/php.png) no-repeat top left;
    }
    
    .icon-html {
    background: transparent url(tags/html.png) no-repeat top left;
    }
    
    .icon-csharp {
    background: transparent url(tags/csharp.png) no-repeat top left;
    }
    It's fairly simple to change the image path.

    prefixiconpreview.png

    prefixicons.png

    If you've found this resource useful please don't forget to rate it and like it! ;)

    Please consider a donation.​
    garbo13, ManuTdi, vfustar and 10 others like this.

Recent Updates

  1. Update 1.0.1

Recent Reviews

  1. Sheratan
    Sheratan
    5/5,
    Version: 1.0
    Great! I like it.
    1. Matthew Hawley
      Author's Response
      Thanks for the review! :)
  2. Kirk
    Kirk
    5/5,
    Version: 1.0
    Awesome!
    1. Matthew Hawley
      Author's Response
      Thanks a bunch! :D
  3. AlexT
    AlexT
    5/5,
    Version: 1.0
    Thanks!
    1. Matthew Hawley
      Author's Response
      Thank you! :)