The avatarMaker comes with a highly customizable skin entirely written in scss. You can use it as it is or as a base to build your own.


The AvatarMaker *used to ship with 4 different skins. Due to the low interest showed buy the community we removed them to focus on improving the base one.

Custom skins

Because the base skin is written in scss, you can change all the colors and some sizes by editing some variables without touching a single line of code.

In the base.scss file inside the source/app/scss folder you can find 45 individual variables the content of which will determine the look of the skin. This file is fully commented and each variable has a name easy to link with its function. For your convenience here are some naming conventions:

Variable Name Effect
* - background Change the background color
* - color change the text color
* - border Change the border color
* - * - hover Set the color of the corresponding style element on mouse over

As an example $sidebar-menu-background-hover controls the background color of the sidebar menu items when the mouse cursor is over them.