Center Catalog Layout Icons

Hi Cris,

If you are referring to the layout views’ icons, then the following CSS would align them in the center:

.prod-cat-header-div {
    text-align:center;
}
.upcp-thumb-toggle-icon, .upcp-list-toggle-icon, .upcp-details-toggle-icon {
    display:inline-block;
    float:none;
}

Let us know if it works out properly for you 🙂

Best,

Hi Cris,

We’re glad to know it’s working properly. As for the hovering, we suggest you not putting it due to the sizing of the icon containers. It might look a bit strange. You could give it a try by trying to add the following:

.upcp-thumb-toggle-icon:hover, .upcp-list-toggle-icon:hover, .upcp-details-toggle-icon:hover {
    background-color:#878383;
}

If not you could try with the same :hover CSS selector and change the background-image. In this case, you would have to create a new set of icons of different colors. Give it a try and let us know how it goes.

Best,