For example: Inspire theme
To add a new color scheme please follow these steps :
1- Preparing the color file under /inspire-theme/docroot/diffs/css/color_schemes Folder
- Note: you need to prepare a background image and put it under /inspire-theme/docroot/diffs/images/color_schemes/ Folder with a name for example bg-mycolor.jpg.
- create a new file for example mycolor.css and put all these lines with your colors:
.aui{
body.skin-black {
background: #08BEF1 url(../../images/color_schemes/skin-mycolor/bg-mycolor.jpg) no-repeat top;
}
.skin-mycolor .aui-menu-content li a.aui-focus, .skin-black .lfr-menu-list ul .taglib-icon.aui-focus,.skin-black .lfr-menu-expanded li a:focus {
background-color: #08BEF1;
color: #FFFFFF;
text-shadow: -1px -1px #08BEF1;
}
}
2- Add the line bellow to custom.css file under /inspire-theme/docroot/diffs/css/ Folder :
/* ---------- color schemes import ---------- */
@import url(color_schemes/green.css);
@import url(color_schemes/black.css);
@import url(color_schemes/brown.css);
@import url(color_schemes/darkgreen.css);
@import url(color_schemes/grey.css);
@import url(color_schemes/lightblue.css);
@import url(color_schemes/lightred.css);
@import url(color_schemes/pink.css);
@import url(color_schemes/red.css);
@import url(color_schemes/violet.css);
@import url(color_schemes/mycolor.css);
3- Add your new color scheme to theme settings:
- Note: you need to prepare an image thumbnail and put it under /inspire-theme/docroot/diffs/images/color_schemes/skin-mycolor/Folder with a name for thumbnail.png( that's for showing your color scheme in theme settings).
- Go to /inspire-theme/docroot/web-inf/ Folder and open the liferay-look-and-feel.xml file
- you will see that there are many color scheme
- Add these lines bellow the last color scheme:
<color-scheme id="12" name="mycolor">
<css-class>skin-mycolor</css-class>
<color-scheme-images-path>${images-path}/color_schemes/${css-class}</color-scheme-images-path>
</color-scheme>
