{"id":80893,"date":"2017-06-08T05:45:28","date_gmt":"2017-06-08T09:45:28","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=80893"},"modified":"2017-10-20T08:57:02","modified_gmt":"2017-10-20T12:57:02","slug":"js-animated-website-templates-use-colorswitcher","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-website-templates-use-colorswitcher.html","title":{"rendered":"JS Animated Website Templates. How to use ColorSwitcher"},"content":{"rendered":"<p>This video tutorial is going to show you how to use ColorSwitcher in <a href=\"https:\/\/www.templatemonster.com\/website-templates.php\" title=\"JS Animated templates\" target=\"_blank\">JS Animated templates<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/cCdieeSligg\"><\/iframe>\r\n<\/div>\r\n<p>Some JS Animated templates have ColorSwitcher tool included. This tool allows you to preview color schemes available in your template package and  allows you to make color changes in your theme:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_1.jpg\" alt=\"\" width=\"935\" height=\"475\" class=\"alignnone size-full wp-image-80895\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_1.jpg 935w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_1-150x76.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_1-300x152.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_1-768x390.jpg 768w\" sizes=\"(max-width: 935px) 100vw, 935px\" \/><\/a>\r\n\r\n<p class=\"attention\">Note! This tool is only available in the demo preview page of the template.<\/p>\r\n\r\n<h3 class=\"custom\">Color scheme change<\/h3>\r\n<p>Let&#8217;s change our site color scheme:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2.jpg\" alt=\"\" width=\"1260\" height=\"640\" class=\"alignnone size-full wp-image-80896\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2.jpg 1260w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2-150x76.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2-300x152.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2-768x390.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_2-1024x520.jpg 1024w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" \/><\/a>\r\n\r\n<p>To do that, please, follow the steps below:<\/p>\r\n<ol>\r\n\t<li><p>Connect to your server using FTP or hosting cPanel.<\/p><\/li>\r\n\t<li>\r\n\t<p>Open <strong>index.html<\/strong> file (or any .html file you are working with) with any php\/text editor (recommended software is NotePad++, Sublime).<\/p><\/li>\r\n\t<li>\r\n\t\t<p>First of all you will need to add reference to the color scheme style sheet file. Locate <strong>&lt;head&gt;<\/strong> section. Add following  line there:<\/p>\r\n\t\t<pre class=\"brush:html\">&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/colorScheme-4.css&quot;&gt;<\/pre>\r\n\t\t<p>Where <strong>colorScheme-4.css<\/strong> is your color scheme file.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Save file and refresh your site to see the change. Color scheme has been successfully changed:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3.jpg\" alt=\"\" width=\"1260\" height=\"640\" class=\"alignnone size-full wp-image-80897\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3.jpg 1260w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3-150x76.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3-300x152.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3-768x390.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_3-1024x520.jpg 1024w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\r\n<\/ol>\r\n<h3 class=\"custom\">Existing color scheme modification<\/h3>\r\n<p>What if there is no color you wish to use in color schemes available? To edit existing color scheme:<\/p>\r\n<ol>\r\n\t<li><p>Please, connect to your server using FTP or hosting cPanel.<\/p><\/li>\r\n\t<li>\r\n\t<p>Open <strong>css<\/strong> folder in your server root directory.<\/p><\/li>\r\n\t<li>\r\n\t<p>Edit <strong>colorScheme-X.css<\/strong> file (where X is the number of the color scheme). It is recommended using FireBug plugin (for FireFox browser) to inspect the website source code and modify CSS files. You can read more about browser developer tools in our tutorial. Click this <a href=\"\/help\/developer-tools.html\" target=\"_blank\">link<\/a> to open it.<\/p><\/li>\r\n\t<li>\r\n\t\t<p>Use  Search and Replace tool (<strong>CTRL+F<\/strong> or <strong>CTRL+H<\/strong> hot-keys) to search for color you wish to change and replace it with your new color.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4.jpg\" alt=\"\" width=\"1260\" height=\"671\" class=\"alignnone size-full wp-image-80898\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4.jpg 1260w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4-150x80.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4-300x160.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4-768x409.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/JS_Animated_Templates._How_to_use_ColorSwitcher_4-1024x545.jpg 1024w\" sizes=\"(max-width: 1260px) 100vw, 1260px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t<p>Replace all color instances, save file, upload it back to your server and check your site to see color changes.<\/p><\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n <a href=\"http:\/\/www.youtube.com\/watch?v=cCdieeSligg?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated Website Templates. How to use ColorSwitcher<\/a>","protected":false},"excerpt":{"rendered":"<p>This video tutorial is going to show you how to use ColorSwitcher in JS Animated templates.<\/p>\n","protected":false},"author":55,"featured_media":80899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[2583,2415,2582],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80893"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=80893"}],"version-history":[{"count":8,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80893\/revisions"}],"predecessor-version":[{"id":83107,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80893\/revisions\/83107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/80899"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=80893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=80893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=80893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}