- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
Landing Page. How to change color scheme
August 19, 2015
This tutorial will show you how to change the color scheme in Landing Page Template.
Landing Page. How to change color scheme
Some Landing Page Templates come with customization tool included. This tool allows you to preview color schemes available in your template package. Note that this tool is only available in the demo preview page of the template:
Open the live demo preview page to find out whether your template comes with this tool:
Such templates come with 5 color scheme style files (colorScheme-1.css – colorScheme-5.css), so in order to change your color scheme, you will need to include a reference to these files in your .html file.
To change color scheme:
-
Open /site/css/ folder of your template package. You will see 5 color schemes style files (colorScheme-1.css – colorScheme-5.css). Select any color scheme file you want to use. You can preview color schemes on the template demo preview page:
-
Open index.html file (or any .html file you are working with) with any php/text editor (recommended software is Adobe Dreamweaver, NotePad++).
-
Add a reference to the color scheme style sheet file inside the <link> element. The <link> element goes inside the <head> section. E.g:
<link rel="stylesheet" href="css/colorScheme-4.css">
-
Save the file. Refresh your website to see the changes. Color scheme has been successfully changed:
To edit the existing color schemes:
-
Navigate to /site/css/ folder of your template package.
-
Edit colorScheme-X.css file (where X is the number of the color scheme) to your needs using any php/text editor. It is recommended using FireBug plugin (for FireFox browser) to inspect the website source code and modify CSS files:
-
Save the file. Refresh your website to see the changes.
Feel free to check the detailed video tutorial below:
