[Tutorial] How to use custom and unique icons in Popover

This tutorial shows 2 approaches to the following common questions:
1. How to use a custom icon in Popover widget.
2. How to use a custom unique icon for every element.

There are 2 approaches: the first one is an educational tutorial - the CSS approach. The second - is the advanced version of the widget that has such features insed can be used as a final easy solution.

The CSS approach

How to use a custom icon in Popover widget

1) First you need to select 'Custom' as a 'Toggle Icon' option in the widget settings at 'Popover' tab:

2) Then add a custom CSS class to the widget at ''General" tab, so that we can identify our widget somehow. You can use your own arbitrary valid CSS class name, in our example let's call it "ram-popover":

3) Then we need to add a custom CSS code to the theme. You can do that by editing the custom.css file in your theme or create your own style (which is the preferred method) and append your CSS there, read more about this in Yootheme documentation. The CSS code we need to add is:

.ram-popover a.wk-popover-toggle{  
width: 64px;  
height: 64px;  
display:block;  
background-size: contain;  
background-repeat: no-repeat;  
background: url('/images/custom-toggle.png');  
}

Make sure, that you set the correct size (width and height) above that corresponds to your image. The /images/custom-toggle.png is a path to your custom toggle image file.

How to use a custom unique icon for every element

First of all this approach requires that you know exactly the order in which your elements are displayed. It's easy to know the order if you use 'Custom' as a content source, in this case elements are displayed in the same order as they show in the widget's control panel. The first 2 steps are the same as in the previous paragraph.

4) You should add the following CSS code for each element that you want to use a unique image:

.ram-popover div.uk-position-absolute:nth-of-type(ID) a.wk-popover-toggle{  
    background-image: url(/images/custom-ID.png);  
}

Here the nth-of-type(ID) refers to the element and ID is the number of the element, it can be 1,2,3, etc. For the background-image you should specify you own valid image path. For example, if we want to put image /images/usa.png as a custom toggle for element number 3, we should put the following code:

.ram-popover div.uk-position-absolute:nth-of-type(3) a.wk-popover-toggle{  
    background-image: url(/images/usa.png);  
}

That's all

The advanced Popover widget

I created advanced version of the popover widget that allows to easily customize all the features we discussed above through the widget's control panel.