Essential Grid Magento 1.x Extension Documentation

Item Skin Editor

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

1. Introduction

back to menu
  • Quick Tip:
    Always duplicate a Skin before editing to preserve copies of the original templates.
From the plugin's Item Skin Editor, make a duplicate of your grid's current skin.
Next, click over to the last page of skins, and click the "Edit Skin" button for the skin titled "Item Skin 1".
Next, rename the duplicated skin and save.
And finally, assign the duplicated skin to your Grid.

From your grid’s “Skins” tab:

Select the newly duplicated skin:

2. Add / Remove Layers

back to menu
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.
To add a new element, find an "Available Layer" from the bottom list, and drag it into the "Item Layout".
And finally, choose the item's Source:

3. Adjust Text, Icon & Button Styles

back to menu
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.
  • Quick Tip #2:
    Save your customized element as a new "Template" that can then be used for other skins.

4. Adjust Content Positioning

back to menu
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

back to menu
From the plugin's main admin page, choose "Edit Skin".
Next, from "Layout Composition -> Animation", set "Group Animation" to "None":
Next, select the Layer you would like to always show by default, set its "Transition" to "None", and then also choose "Always Visible" from the second drop-down, as shown in the following screenshot.