1. Make sure the filters you’d like to use are also selected as the grid’s main source.
![](http://www.themepunch.com/wp-content/uploads/2017/09/select-cat-new.jpg)
2. Add the “filter” element to your Grid, and then select your filters.
![](http://www.themepunch.com/wp-content/uploads/2017/09/filter-element.jpg)
![](http://www.themepunch.com/wp-content/uploads/2017/09/filter-select-new.jpg)
3. Make note of the “slug” name for each of your filters
![](http://www.themepunch.com/wp-content/uploads/2017/09/slug-note.jpg)
![](http://www.themepunch.com/wp-content/uploads/2017/09/select-slug.jpg)
4. Add the following CSS inside the Item Skin Editor and replace the “data-selectedfilter” with your filter “slug” name and the “background: url” link with your preferred image links.
Quick Note:
To display the images on the right of the grid filter instead of left, replace the words “before” in the CSS below with the word “after”
/* Change the "data-selectedfilter" name with the "slug" name */
/* Example: [data-selectedfilter="filter-my-filter-slug"] */
/* Change the “background: url("");” link with the your preferred image link */
/* Example: background: url("http://www.themepunch.com/my-image.png"); */
.esg-filterbutton[data-filter="filter-entertainment"]:before {
background: url("http://www.themepunch.com/entertainment.png");
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: "";
float: left;
width: 50px;
height: 50px;
margin: 5px 10px 5px 0px;
border-radius:50% !important;
}
.esg-filterbutton[data-filter="filter-scenery"]:before {
background: url("http://www.themepunch.com/scenery.png");
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: "";
float: left;
width: 50px;
height: 50px;
margin: 5px 10px 5px 0px;
border-radius:50% !important;
}
.esg-filterbutton[data-filter="filter-modern"]:before {
background: url("http://www.themepunch.com/modern.png");
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: "";
float: left;
width: 50px;
height: 50px;
margin: 5px 10px 5px 0px;
border-radius:50% !important;
}
.esg-filterbutton {
float:left;
}
.esg-filterbutton span {
margin-top: 15pxdata-selectedfilter” name with the “slug” name */
/* Example: [data-selectedfilter=”filter-my-filter-slug”] */
/* Change the “background: url(“”);” link with the your preferred image link */
/* Example: background: url(“http://www.themepunch.com/my-image.png”); */
.esg-filterbutton[data-filter=”filter-entertainment”]:before {
background: url(“http://www.themepunch.com/entertainment.png”);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: “”;
float: left;
width: 50px;
height: 50px;
margin: 5px 10px 5px 0px;
border-radius:50%!important;
}
.esg-filterbutton[data-filter=”filter-scenery”]:before {
background: url(“http://www.themepunch.com/scenery.png”);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: “”;
float: left;
width: 50px;
height: 50px;
margin: 5px 10px 5px 0px;
border-radius:50%!important;
}
.esg-filterbutton[data-filter=”filter-modern”]:before {
background: url("http://www.themepunch.com/modern.png");
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: "" !important;
float: left;
}