Articles on: skin

Using the Item Skin Editor

Customize the look of your Essential Grid Items with the Item Skin Editor.

1. Introduction

Quick Tip

Your edited skin will always be duplicated to preserve copies of the original templates.

From the app’s gallery Skin Editor, a duplicate skin of your grid’s current skin will be created. For your conveniences you can copy the name of the skin.

Next, next time you will find the renamed skin on your skin list which will be already selected.

2. Add / Remove Layers

From the plugin’s main admin page, choose “Edit Skin”.

To delete an element, select its Layer from the Item Layout section located on the right side, and then click “Remove” from the Layer Settings on the left by scrolling down.

To add a new element, find an “Available Layer” from the bottom list, and drag it into the “Item Layout”.

](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1irgl64.png "=850x440")

And finally, choose the item’s Source:

3. Adjust Text, Icon & Button Styles

From the plugin’s main admin page, choose “Edit Skin”.
Next, select the Layer you’d like to edit, and adjust its styling.

Font-style adjustments:

Background Color adjustment:

Background Padding adjustment:

Border-Radius Adjustments:

Quick Tip #1

Activate and apply styles to the “Hover” tab to add/adjust hover styles for the element.

4. Adjust Content Positioning

From the plugin’s main admin page, choose “Edit Skin”.
Next, select the Layer you’d like to edit, and adjust the options from the “Spacing” tab.

Adjust Alignment:

Drag and Drop the Layers throughout the available Drop-Zones:

Change the display property of the Layer from “inline-block” to “block” to spread the element across the entire width of the Grid Item.

And then apply some margins to the Layer:

5. Show Layers by default without a mouse-hover