MediaCenter comes with 6 predefined color schemes. You can also create your own scheme and use it.
Using a predefined color
- Navigate to MC Options page.
- Select Styling tab
- Choose Yes for Use a predefined color scheme option.
- Choose the color of your choice from the dropdown for Main Theme Color. Colors available : green, blue, red, orange, navy and dark green.
- Click on Save Changes button.
Using a custom theme color
Using a custom color is simple but it requires a few extra steps.
Method 1 (Recommended) : Using LESS
- Navigate to assets/less/custom-color.less file.
- On line 7, set @primary-color to the color of your choice as a HEX value.
- Compile assets/less/custom-color.less file to assets/css/custom-color.css
- You can also use less2css.org to compile the LESS file and copy the output to assets/css/custom-color.css
Method 2 : Using CSS and Find and Replace
- Navigate to assets/css/green.css file.
- Copy the entire file content and paste it in assets/css/custom-color.css.
- Open assets/css/custom-color.css file using your favourite code editor.
- Do a find and replace of green color which is #59b210 with your choice of color as a HEX value.
- We have also used darken and lighten version of the primary color. Replace them as well. Use less2css.org to find out the lighten and darken values for your color.