Selecting A Web Page Look And Feel Without Reloading, With One Css
Solution 1:
I do this way:
HTML
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8" /><title>Themed Website</title></head><body><divclass="wrap"><divclass="side"><ul><li><ahref="#">Link 1</a></li><li><ahref="#">Link 2</a></li><li><ahref="#"class="active">Link 3</a></li><li><ahref="#">Link 4</a></li><li><ahref="#">Link 5</a></li></ul></div><divclass="main"><h1>Welcome</h1><h2>A Paragraph</h2><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</p><h2>A List</h2><ul><li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li><li><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li><li><p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p></li></ul></div></div></body></html>CSS
body {font-family: segoe ui; background: #fff;}
body.wrap {width: 90%; margin: auto; overflow: hidden;}
body.wrap.side {width: 25%; float: left;}
body.wrap.sideul {margin: 0; padding: 0; list-style: none;}
body.wrap.sideulli {margin: 0; padding: 0; list-style: none;}
body.wrap.sideullia {text-decoration: none; padding: 5px; display: block;}
body.wrap.sideullia:hover {background: #ccc; color: #0ff;}
body.wrap.sideullia.active {background: #0fc; color: #000;}
body.wrap.main {width: 75%; float: right; background: #0fc;}
body.wrap.mainh1 {margin: 0; padding: 010px10px;}
body.wrap.mainh2 {margin: 0; padding: 10px;}
body.wrap.mainp {margin: 010px5px; text-align: justify;}
body.wrap.mainul {margin: 010px10px;}
Theming
Now our work would be identifying the themable components. Here, with the base layout, we can theme only the colours and list styles of the unordered list. Lets get those styles alone first. Being a beginner's tutorial, lets concentrate only on the foreground and background colours and not layouts.
Lets name the first class as .light and the CSS for the same would be:
.light {color: #333; background: #f5f5f5;}
.light.wrap.sideullia {color: #666; background: #eee;}
.light.wrap.sideullia:hover {color: #333; background: #ddd;}
.light.wrap.sideullia.active {color: #333; background: #0ff;}
.light.wrap.main {background: #0ff;}
.light.wrap.mainh1 {color: #333;}
.light.wrap.mainh2 {color: #666; background: #0fc;}
.light.wrap.mainp {color: #093;}
.light.wrap.mainullip {color: #09c;}
JavaScript
And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, let's add these three links:
HTML
<divclass="wrap themelinks"><h4>Change Themes:</h4><ahref=""class="theme">No Theme</a><ahref="light"class="theme">Light</a><ahref="grayscale"class="theme">Grayscale</a></div>CSS
.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinksh4 {margin: 0; padding: 10px;}
.wrap.themelinks.theme {margin: 010px10px; padding: 3px5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks.theme:hover {background: #f90; color: #fff;}
jQuery
$(document).ready(function(){
$(".theme").click(function(){
var theClass = $(this).attr("href");
$("body").removeAttr("class").addClass(theClass);
returnfalse;
});
});
Demo
You can check out the working demo in jsBin.
Solution 2:
Create a single, unbranded stylesheet, that defines the general layout of the page, then define brand-specific rules that vary depending on the class of the <body> element, for example:
/* Layout area */#header {
height: 50px;
margin: 0.2em; }
etc...
/* Brand A rules */.brandA#header {
background-image: url("brandALogo.png"); }
.brandA#footer {
background-color: purple; }
/* Brand B rules */.brandB#header {
background-image: url("brandBLogo.png"); }
.brandB#footer {
background-color: orange; }
...so you don't need to redefine anything.
Then with a simple script client change the class attribute of <body> to "brandA" or "brandB" as appropriate.
I advise against using the id attribute because as the identity attribute it should be static and unchanging in the document.
Solution 3:
Define layout independently, then define all the stuff that has same, let's say shape and overall UX... and then for the final touch use deeper selectors, like this:
Each brand's page's styling should have one more outer selector, for instance id that is connected to outer wrapper of the page, so for starting thing outer wrapper (or the body, altoho I do not recommend this) should be id="default"... default should have no reference in css whatsoever, then every other brand should be selected in css for body to have id="brand1" or "brand2" etc.
On Interaction whic changes the brand you just do this:
$(wrapper selector).attr('id', 'brandX');
What happends is - css rerenders the page accommodating other selectors that are deeper due added one more outer DOM container and thus more important then default ones.
Changing selectors this way gives you the ability to fine tune your page how ever you like, assuming that css3 and any DOM manipulation js engine is in your full expertise :D
Solution 4:
you can also load the css dynamically (if you want to generate it based on some parameters, for example). do it with this line of code:
$('head').append('<link rel="stylesheet" href="style2.css"type="text/css" />');
another advantage is that the user doesn't need to download all the style sheets of all the brands he doesn't want
Post a Comment for "Selecting A Web Page Look And Feel Without Reloading, With One Css"