> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://essential-grid.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Using the Item Skin Editor ## Customize the look of your Essential Grid Items with the Item Skin Editor. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_17uhwdp.png =850x450) ### Table of Contents * [Introduction](https://www.essential-grid.com/documentation/item-skin-editor/#introduction) * [Add/Remove Layers](https://www.essential-grid.com/documentation/item-skin-editor/#add-remove-layers) * [Styling](https://www.essential-grid.com/documentation/item-skin-editor/#styling) * [Positioning](https://www.essential-grid.com/documentation/item-skin-editor/#positioning) * [Visibility](https://www.essential-grid.com/documentation/item-skin-editor/#visibility) ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_10dhfju.png =850x503) Next, next time you will find the renamed skin on your skin list which will be already selected. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_nkosm3.png =450x739) [](https://www.themepunch.com/wp-content/uploads/2018/06/select-new-skin.jpg) ### 2. Add / Remove Layers From the plugin’s main admin page, choose “Edit Skin”. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_wjibt4.png =850x450) 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. [](https://www.themepunch.com/wp-content/uploads/2018/06/delete-skin-element.jpg) ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_81zekb.png =850x454) 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_sbjx7j.png =850x447) ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1irgl64.png =850x440) [](https://www.themepunch.com/wp-content/uploads/2018/06/add-skin-layer.jpg) And finally, choose the item’s Source: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1i6426m.png =850x492) [](https://www.themepunch.com/wp-content/uploads/2018/06/item-skin-layer-source.jpg) ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_wkp49d.png =850x716) [](https://www.themepunch.com/wp-content/uploads/2018/06/adjust-layer-styles.jpg) Font-style adjustments: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_10i8hjk.png =850x633) [](https://www.themepunch.com/wp-content/uploads/2018/06/font-style-adjustments.jpg)Background Color adjustment: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_rnxfiw.png =850x644) [](https://www.themepunch.com/wp-content/uploads/2018/06/background-color-adjustments.jpg) Background Padding adjustment: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_18srep2.png =850x643) [](https://www.themepunch.com/wp-content/uploads/2018/06/background-padding-adjustments.jpg) Border-Radius Adjustments: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_170hn1a.png =850x639) [](https://www.themepunch.com/wp-content/uploads/2018/06/border-border-radius.jpg) #### Quick Tip #1 Activate and apply styles to the “Hover” tab to add/adjust hover styles for the element. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_uwitxo.png =850x643) [](https://www.themepunch.com/wp-content/uploads/2018/06/saved-termplate-style.jpg) ### 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. [](https://www.themepunch.com/wp-content/uploads/2018/06/layer-position.jpg) Adjust Alignment: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_84x2zx.png =850x631) [](https://www.themepunch.com/wp-content/uploads/2018/06/adjust-layer-alignment.jpg) Drag and Drop the Layers throughout the available Drop-Zones: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1xiyspq.png =550x587) Change the display property of the Layer from “inline-block” to “block” to spread the element across the entire width of the Grid Item. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_y9ye1z.png =850x543) And then apply some margins to the Layer: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_xr6gk2.png =850x478) [](https://www.themepunch.com/wp-content/uploads/2018/06/layer-position-margins.jpg) ### 5. Show Layers by default without a mouse-hover From the plugin’s main admin page, choose “Edit Skin”. Next, select the Layer you would like to always show by default on desktop, select the “Show/Hide” tab, and then enable the “Show without Hover on Desktop” option, as shown in the following screenshot. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_o3usyp.png =850x591) [](https://www.themepunch.com/wp-content/uploads/2018/06/always-show.jpg) To display the Layer on mobile without “Tapping” on the grid item, enable the “Show without Tap on Mobile” option, as shown in the following screenshot. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_5mc3mh.png =850x488) [](https://www.themepunch.com/wp-content/uploads/2018/06/mobile-tap.jpg)