Landing Page. How to change color scheme

Daniel Morales August 19, 2015
Rating: 3.7. From 3 votes.
Please wait...

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:

  1. 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:


  2. Open index.html file (or any .html file you are working with) with any php/text editor (recommended software is Adobe Dreamweaver, NotePad++).

  3. 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">


  4. Save the file. Refresh your website to see the changes. Color scheme has been successfully changed:


To edit the existing color schemes:

  1. Navigate to /site/css/ folder of your template package.

  2. 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:


  3. Save the file. Refresh your website to see the changes.

Feel free to check the detailed video tutorial below:

Landing Page. How to change color scheme

Best Landing Page Designs
This entry was posted in JS Animated tutorials, Landing Page Tutorials and tagged color, landing, scheme. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.