There is a Gridzy.js skin that shows a magnifier icon on mouse over. In this tutorial we will change that icon to another one.
There are only a view steps to make your own skin with your own icon. So let’s start.
Create a new folder in the skin directory
For this example we will make a skin with a video play icon and we name the skin gridzySkinPlay, so we create a folder named gridzy/skins/gridzySkinPlay and we copy the file gridzy/skins/gridzySkinMagnifier/style.css to the new folder.
Rename the class names in the new file
Open the new file in your favorite text editor and replace all gridzySkinMagnifier with our new skin name gridzySkinPlay. Afterwards we already have our new skin, but it still looks exactly like the old skin.
Get the new icon
To change the magnifier icon, we need an SVG.
If you don’t have any icon yet, you can find one on materialdesignicons.com (it can take a while to load the page, because there are really a lot of icons available).
If you have found your icon, right click that icon and select View SVG. There will appear an overlay that shows two tabs “Inline SVG for HTML” and “SVG File”. We need the “SVG File” tab so click SVG File.
There you can see a code snippet. We need to copy only a part of that code snippet. So search for the line that starts with <svg (probably the third line). Mark everything from this line onwards and copy it to your clipboard.
Colorize and URL-Encode the new icon
To use the icon in the new skin, we need to URL encode it first. You can use an online encoder like www.urlencoder.org for that. Open that page and paste the copied code snippet there.
If you want to change the color of the icon, now is the best moment to do that. Just look for fill="#000000" in the code snippet and change the color value to something else. For now we enter #FFFFFF to get a white icon.
Afterwards click ENCODE and copy the result.
Insert the new icon into the skin
Now go to your text editor where we renamed the class names and search for the first line that starts with background-image:.
Remove everything in that line starting from the first percent character except the last three characters. So the line should look like this: background-image: url("data:image/svg+xml;charset=utf8,");
Now you can paste the copied encoded icon directly after the comma, so between charset=utf8, and ");.
Resize the icon
If you want to resize the icon, you can add a new line after the background-image line. In that new line just write background-size: 40px 40px;. Instead of 40px you can enter whatever you need.
Change the light version of the skin
The gridzySkinMagnifier skin has a dark version, which is the default one, and a light version. To change the icon of the light version, you need to change the second line that start with background-image:.
Usually it could be a good idea to use a white icon for the dark skin and a black icon for the light skin.
Now you know how you can make your own icon skin 😉
If you miss something, just let me know ✌😏
