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.
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.
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.
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.
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.
ENCODE and copy the result.
Now go to your text editor where we renamed the class names and search for the first line that starts with
Remove everything in that line starting from the first percent character except the last three characters. So the line should look like this:
Now you can paste the copied encoded icon directly after the comma, so between
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.
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
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 ✌😏