No announcement yet.

Edit sprite icons image for dummies

  • Filter
  • Time
  • Show
Clear All
new posts

  • Font Size

    vB5.X.X Edit sprite icons image for dummies

    Hi, i will show you how to edit the sprite icons image to put custom icons on your templates.

    1- Download the sprite icons image of your desired template:

    Turn on site editor, go to Style, CSS editor and select css_sprite_icons_general.css
    Scroll down a bit, and right click on the image then save image as...
    This will get you the sprite icons image of your current template

    2- Make a backup of the file (just in case), and then open the .svg image with a vector graphics editor, in my case i will use inkspace, since is free and open source, download link bellow:
    In here we can modify the icons the way we want, they are vectors so our imagination is the limit with no quality loss, in this case we are going to download some icons from internet and use them in our sprite image

    3- Go to some site to download icons, i will use:
    Search for the icons you like and download them, you can use the download button or just right click save image as...
    Once you have your icons drag them to the file in inkspace

    4- Change the size of the icon and place it in the correct place. I recommend you to place some rules, after that delete the original and place your downloaded icon:

    When you are done adding all the icons save the file to your PC. (file, save) Now comes the part where we copy the content of the file and we place it on our template
    But before we put our new sprite, make a backup of the file we will replace.

    5- Go to admincp, Styles and templates, Style manager, Edit Template (on you desired themplate), Sprite templates, and open sprite_icons_general.svg
    Copy the content of that file and save it to your PC in txt (it has to be in utf-8 mode)

    6- Now open the .svg file that you edited in the step 4 with a text editor, (i use notepad++), copy the content and paste it where the sprite_icons_general.svg lives

    7- save and check the result, that is it!

    Video tutorial

    Last edited by emi; 26.03.22, 04:51.
    yilmaz yilmaz Nessa Nessa like this.
    Similar Threads

  • Font Size
    I am very impressed, great job.👍👏

    I didn't know that, I'll try it right away.
    Thank you...

    The Office tarafından hazırlanan Heyecanlı Sezon 6 GIF
    emi emi Nessa Nessa like this.


    • Font Size
      The result is vey nice!! Here is how looks in Emi's forum

      Also I added on the template this code for make the comment bubble in red:

      /* like bubble s */ 
      .bubble-flyout {
      color: #FFF;
      font: bold 9px/18px Arial,sans-serif;
      background: #D31F1F url("images/css/sprite_gradients_vb.png") repeat-x scroll 0 -1000px!important;
      border: 1px solid #962222!important;
      .bubble-flyout i {
      border-right-color: #D31F1F!important;
      .bubble-flyout u {
      border-right-color: #D31F1F!important;
      /* like bubble e */
      Thank you emi !
      emi emi yilmaz yilmaz like this.


      • Font Size
        WoW Very good, I did it, thanks again, you're great.😍

        emi emi Nessa Nessa like this.



        Thread Information


        Users Browsing this Thread

        There are currently 1 users browsing this thread. (0 members and 1 guests)


          AdBlock Detected

          Please Disable Adblock

          Please consider supporting us by disabling the ad blocker.

          I've Disabled AdBlock