header

Collapse

Edit sprite icons image for dummies

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Go to Thank You emi
    Junior Member
    ❤️
    • 03.2022
    • 13
    • 20
    • 28

    Font Size
    #1

    vB5.X.X Edit sprite icons image for dummies

    Go to Thank You
    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:
    Code:
    https://inkscape.org/release/inkscape-1.1.2/
    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:
    Code:
    https://www.flaticon.com/
    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

    Go to Top of Post
    Last edited by emi; 26.03.22, 04:51.
    Similar Threads
  • Go to Thank You yilmaz
    Administrator

    ❤️❤️❤️❤️❤️❤️❤️
    • 12.2020
    • 783
    • 5.7.1
    • 514
    • 250

    Font Size
    #2
    Go to Thank You
    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 GIFGo to Top of Post

    Comment

    • Go to Thank You Nessa
      Junior Member
      ❤️
      • 03.2022
      • 9
      • 17
      • 48

      Font Size
      #3
      Go to Thank You
      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:

      Code:
      /* 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 !Go to Top of Post
      https://cdn.discordapp.com/attachmen...ntitled-22.gif

      Comment

      • Go to Thank You yilmaz
        Administrator

        ❤️❤️❤️❤️❤️❤️❤️
        • 12.2020
        • 783
        • 5.7.1
        • 514
        • 250

        Font Size
        #4
        Go to Thank You
        WoW Very good, I did it, thanks again, you're great.😍

        Go to Top of Post

        Comment

        X

        Thread Information

        Collapse

        Users Browsing this Thread

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

          widgetinstance 297 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
          Working...
          😀
          😂
          🥰
          😘
          🤢
          😎
          😞
          😡
          👍
          👎

          AdBlock Detected

          Please Disable Adblock

          Please consider supporting us by disabling the ad blocker.

          I've Disabled AdBlock
          Home