Create Skins

AlloyEditor bundles a couple of gorgeus skins that you can use out of the box. However, if you need a better integration with your app's look and feel, you can easily create your own skin.

1 - Get ready to build AlloyEditor

Follow the instructions in our How to build it guide to know how to change and build AlloyEditor.

2 - Create skin folders

Create a new directory under src/ui/react/assets/icons/ with the name of your skin (e.g zebra). This directory will contain all the required icons of your skin.

Create a new directory under src/ui/react/assets/sass/skin with the name of your skin (e.g zebra). This directory will contain the styling of the skin.

3 - Create your Skin

Place all the icons you need inside an svg folder in your skin's icon folder. These icons will be merged with the default ones, and the resulting set will be used to generate your skin icon font

Create a file called main.scss inside your skin folder. This will be the entry point of your skin and should contain all the styling of your look and feel.

4 - Build the editor

Your skin will be automatically picked up when building AlloyEditor:
gulp [build]

5 - Use your Skin

Include your skin to the page instead any of the default ones:
<link href="alloy-editor/assets/alloy-editor-zebra-min.css" rel="stylesheet">

That is everything! Now AlloyEditor will appear with a new beautiful look and feel!

comments powered by Disqus