Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can do something like this, HTML:</p> <pre><code>&lt;body class="red"&gt; &lt;p&gt;Some text&lt;/p&gt; &lt;a href="#" id="paint-blue"&gt;paint blue&lt;/a&gt; &lt;a href="#" id="paint-red"&gt;paint red&lt;/a&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>body.red { background-color: red; } body.red p { color: yellow; } body.blue { background-color: blue; } body.blue p { color: white; } /* Some more stuff */ </code></pre> <p>JS:</p> <pre><code>$("#paint-blue").click(function(event) { event.preventDefault(); $("body").removeClass("red").addClass("blue"); } $("#paint-red").click(function(event) { event.preventDefault(); $("body").removeClass("blue").addClass("red"); } </code></pre> <p>The idea is that depending on the class of the top level <code>body</code> element some elements on page will be styled differently.</p> <p>EDIT: The example page that you linked to uses cookies to store the chosen theme and from the looks of it, it always loads the yellow theme and then some <code>onload</code> JS checks the value in the cookie and changes the colours. <a href="http://www.tutorialspoint.com/javascript/javascript_cookies.htm" rel="nofollow">Here</a> is some random tutorial for setting and reading cookies using JS. And the <code>onload</code> thing would look something like:</p> <pre><code>$(document).ready(function() { // Should be easy to write if you look at the tutorial var colour = getColourFromCookie(); if (colour == 'blue') { $("#paint-blue").click(); } // red is default, no need to do anything }); </code></pre> <p>One thing that you could do better than the example site is that you could render a different page (different body class) depending on the cookie value instead of always rendering one version and then changing it on client side — at least on my computer there is a clear delay before JS kicks in and changes the colours.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload