A skin is the look of every item in a grid: the layers that show its image, title, categories, buttons and icons, and what they do on hover. Skins in the dashboard’s top bar lists every skin of the site: the built-in skins, the skins that templates brought along, and your own.
A skin’s card
Each skin is a card that shows the skin in its shape: an Even skin at its ratio, a Masonry skin with its content, a skin with media and content side by side two columns wide. Below it:
- the name: a click opens the skin in the skin editor, in its own window;
- ⋯, the skin’s menu;
- tags for its layout, its structure and its content, and Built-in for a skin that comes with Essential Grid;
- how many grids use it (“7 grids”, or “not used”) and its main hover effect (“hover · fade”).
Pointing at a card shows its star and its eye: the star makes the skin a favourite, the eye opens its preview.
| In the menu | What it does |
|---|---|
| Edit skin | Opens the skin in the skin editor, in a new window (The skin editor). |
| Preview | Shows the skin larger, at rest and on hover, with what it is and which grids use it. |
| Rename | Renames the skin on its card: Enter saves, Esc keeps the old name. The class prefix follows the name; when the Global CSS has rules for the old prefix, Copy my n Global CSS rules to the new prefix (on) copies them. |
| Duplicate | Makes a copy (“Washington copy”) with its name ready to edit. |
| Add to favourites / Remove from favourites | The same as the star. |
| Export | Saves the skin to a file, the file Import/Export makes (Import and export). |
| Copy class prefix | Copies the skin’s CSS class prefix, such as .eg-washington-. |
| Delete… | Asks first and names the grids that use the skin: their items lose this look until you choose another skin. A built-in skin stays deleted until you restore the built-in skins. |
The preview shows the skin larger, with Idle and Hover (the end of its hover); pointing at the skin in Idle plays its hover, Replay plays it from the start, and Item width shows the skin 280, 360 or 480 px wide. Beside it, What this skin is lists its layout, structure, hover, content, class prefix, the grids it is used in and its origin. Delete…, Duplicate and Edit skin are below.
Filters and search
The filters on the left:
| Group | Choices |
|---|---|
| Skins | All skins, Favourites, In use, Not used, Built-in (one at a time) |
| Layout | Even, Masonry |
| Structure | Where the cover and the content are: Cover, Cover, always visible, Content below, Content above, Content on hover, Split … |
| Content | What the skin is made for, such as Posts or Products |
| Hover | Every effect its hover uses, such as Fade, Flip, Slide and Zoom (the card names only the main one) |
Several choices in one group show the skins that match any of them; choices in different groups narrow each other down. The number beside each filter follows the filters you have chosen. The chosen filters show as chips above the cards: × takes one away, Clear all takes them all away. In a narrow window the filters sit behind Filters.
Search skins, kinds, grids finds a skin by its name, its kind or the name of a grid that uses it. The / key puts the cursor in it.
The toolbar
| Control | What it does |
|---|---|
| Preview: Auto | Every skin at rest; pointing at a card plays its hover animation. |
| Idle | Every skin as a visitor first sees it, without animation. |
| Hover | Every skin in its hover state, without animation. |
| The order | Newest first (at first), Oldest first, Name A–Z, Name Z–A, Most used. Favourites stay on top. |
| S, M, L | Small, medium or large cards. |
| Board, List | The cards, or a list with a row per skin: its preview, Name · class prefix, Kind, Used in and Hover. |
| Select | A switch on each card and a bar for several skins at once: Select all on this page, Favourite, Export, Delete… and Done. |
Below the cards are the pages, with 12, 24, 48 or All per page (12 at first). The view keeps your order, page size, preview, view and card size in a cookie, for this browser. With reduced motion turned on in your system, Auto shows the hover state of the card you point at, without the animation.
New skin
| Choice | What it does |
|---|---|
| Blank skin | Opens the skin editor with an empty item and its starting points. |
| Copy a built-in | Click a built-in skin, such as Washington: Essential Grid duplicates it and opens the copy in the skin editor. |
| From a grid template | Opens the template library: a template brings its skins along. |
Import beside it opens Import/Export, for skins from an export file.
Restore the built-in skins
A built-in skin that you delete, or rename so that its class prefix changes, does not come back by itself. The filters then show how many built-in skins were removed, with Restore; Import/Export › Demo data › Download Fresh Skins leads here too. Restore asks first and adds the missing built-in skins again. Your own skins and renamed built-in skins stay as they are.
Good to know
- A change to a skin shows in every grid that uses it. To change a skin for one grid only, duplicate it and give that grid the copy (Items: skins on a grid and their hover).
- Favourites also filter the skin gallery of the grid editor.
- How a skin is built and changed: The skin editor.