Manual

Skins

The Skins tab in Essential Grid allows you to control several aspects of the way your grid looks:

In this guide we’re going to see how to use its options to configure the appearance of your grid background, navigation controls, and individual grid items.

Background

The Background panel contains the Main Background Color option, which sets the background color of the entire grid:

When you click the option a color selection dialogue box will appear which you can use to set the background color to transparent, a flat color, or a gradient:

You can see how your background color selection looks by scrolling down to the preview area at the bottom of the page:

Note: For more information on how to select colors check out our article “The Tools of the Color Selection Dialogue”.

Navigation

The Navigation panel contains options for configuring the appearance of any navigation controls such as filtering, sorting, pagination, search fields and so on:

Choose Skin

You can use the Choose Skin option to select from any of the navigation skins installed on your site:

Note: You may notice buttons next to the Choose Skin option enabling you to edit, create, and delete navigation skins. These buttons relate to working with custom skins, which we will cover in a later article.

Preview BG

You can then use the Preview BG option to see how the skin will look on different backgrounds, choosing between dark, light, transparent and your selected main background color:

Note: You can only preview the main background color if it’s a flat color, not a gradient.

Item Skins

Item skins control the content, layout and appearance of individual grid items, as well as what happens when you hover over them.

Selecting a Skin

The main area of the Item Skins panel displays a preview of each available item skin. You can hover over any of these previews to to see the hover effect for that skin:

To select a skin and apply it to your grid, click its preview with your mouse. Essential Grid will take a second or two to activate the skin, then you’ll be able to see it applied in the grid preview section below:

Filter Skins

Given there are several item skins to choose from you may wish to use the filtering options to refine the selection of skins being shown.

To do so just click one of the filter buttons in the left column of the Item Skins panel. You can choose from Selected Skin, Favorites, Even and Masonry:

To remove any filtering click the Filter-All button.

Up Next: Animations

On the next page of the manual we’ll learn how to handle animations in three areas: start animations, filter/pagination animations, and hover animations.