{"id":1759,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/misc\/article4.html"},"modified":"2020-01-28T04:32:18","modified_gmt":"2020-01-28T09:32:18","slug":"styleswitcher","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/styleswitcher.html","title":{"rendered":"&#8220;Styleswitcher&#8221;"},"content":{"rendered":"This script allows you to switch between several .css files by a single click, thus completely changing the design of your site. The main advantage is that all design changes remain when you open the site again. <br \/> <br \/> <span style=\"font-weight: bold;\">JavaScript<\/span> <br \/>In order to make the script work, the <span style=\"font-weight: bold;\">index-#.html<\/span> file with a style switcher should contain these lines of HTML code in order to include the <span style=\"font-weight: bold;\">styleswitch.js<\/span> script and the jQuery framework: <br \/> <p> <span style=\"font-weight: bold;\">HTML<\/span> <br \/>Below you can see the general HTML script representation: <br \/><\/p> <p>Each link (<span style=\"font-weight: bold;\">&lt;a&gt;<\/span> tag) requires <span style=\"font-weight: bold;\">rel<\/span> attribute that defines the name of <span style=\"font-weight: bold;\">.css<\/span> file, which will be opened when the link is clicked. <br \/><\/p> <p> <span style=\"font-weight: bold;\">CSS<\/span> <br \/>First we include the main style.css file using the following construction:<\/p> <p>This is necessary, since alternative style sheets will not duplicate all original style properties. With each new alternative style sheet we are going to redefine certain style values <span style=\"font-weight: bold;\">only<\/span>.<\/p> <p>Next, we\u2019re going to create and include alternative <span style=\"font-weight: bold;\">.css<\/span> files with new values for existing attributes. The <span style=\"font-weight: bold;\">&lt;head&gt;<\/span> section of the <span style=\"font-weight: bold;\">index-#.html<\/span> file contains these lines of code that include alternative style sheets:<\/p>","protected":false},"excerpt":{"rendered":"<p>This script allows you to switch between several .css files by a single click, thus completely changing the design of your site. The main advantage is that all design changes remain when you open the site again. JavaScript In order to make the script work, the index-#.html file with a style switcher should contain these [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[264],"tags":[813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1759"}],"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\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1759"}],"version-history":[{"count":5,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1759\/revisions"}],"predecessor-version":[{"id":85705,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1759\/revisions\/85705"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}