Add your own data to the custom skin


Step 1

Till now, your _custom-skin.scss should look like this:

Or, if you chose variables, you should have your custom variables instead on HEX type of colors.

In this moment is time for adding your own data to the skin object. At the end of the map, please add pairs of keys and values, eg. "skin-body": #2AD1A3, "skin-btn-danger": #311b92.

Step 2

After that, please create your own each loop. You can find its code on the screenshot below:

Step 3

Then, fill the loop with your own settings for particular elements of the website, for example for body and btn-danger.

Note: sometimes, to overwrite our default styles you need to add the !important flag. So, when you overwrite our settings and you still don't see yours, please add the !important flag and then you should see your custom styles.

Step 4

Finally, save your changes, recompile the CSS code and look at your beautiful, fully custom page.

Congratulations! You've just improved your custom skin with any data you wanted.

Previous lesson

Spread the word:
Do you need help? Use our support forum

About the author