How to use customized skins on 4.5.1?

Topic: How to use customized skins on 4.5.1?

newtongamajr pro asked 6 years ago

I didn't find how to use this new feature implemented on 4.5.1. Could you please, give me some help?

Add comment

Marta Wierzbicka staff answered 6 years ago

Hi,

This functionality will be improved in the next release which will be in May and we describe it in our documentation of skins but for now, I can tell you a few steps to do it. You need to use SCSS files to create your own skin.
<ol>
 	<li>In your package, in SCSS folder, you can see <code>_custom.scss</code> file, so create another file in the same place, eg. <code>_custom-skin.scss</code>.</li>
 	<li>Next, in the <code>mdb.scss</code> file, import your new file like on the second screen.</li>
 	<li>In your <code>_custom-skin.scss</code> file, add an object with colors and change "test" for your name and values of colors. Save the file and recompile.</li>
 	<li>Add your new skin to the <code>body</code> tag in your <code>index.html</code> file and save the file. After that, you should see your own skin.</li>
</ol>
<a href="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_454.png"><img class="alignnone size-full wp-image-57009" src="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_454.png" alt="" width="267" height="337" /></a>
<a href="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_455.png"><img class="alignnone size-full wp-image-57010" src="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_455.png" alt="" width="380" height="603" /></a>
<a href="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_456.png"><img class="alignnone size-full wp-image-57011" src="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_456.png" alt="" width="588" height="602" /></a>
<a href="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_457.png"><img class="alignnone size-full wp-image-57012" src="https://mdbootstrap.com/wp-content/uploads/2018/04/Screenshot_457.png" alt="" width="557" height="238" /></a>

I hope it helps you and I can say that in the next MDB package it will be so much easier.

Best,

Marta

Please insert min. 20 characters.

Hi, This functionality will be improved in the next release which will be in May and we describe it in our documentation of skins but for now, I can tell you a few steps to do it. You need to use SCSS files to create your own skin.

In your package, in SCSS folder, you can see _custom.scss file, so create another file in the same place, eg. _custom-skin.scss.
Next, in the mdb.scss file, import your new file like on the second screen.
In your _custom-skin.scss file, add an object with colors and change "test" for your name and values of colors. Save the file and recompile.
Add your new skin to the body tag in your index.html file and save the file. After that, you should see your own skin.