Tweet
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
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/
3- Go to some site to download icons, i will use:
Code:
https://www.flaticon.com/
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
Comment