Sacred Posted October 12, 2009 Share Posted October 12, 2009 I have looked all over and found some good tutorials, but none seem to work for me. Can someone show me how to make a simple CSS Style Switcher? A full tutorial would be recommended; the other sites never showed it fully, like on a real page. It would help me learn better to see it in action. And, if possible, can it be placed in a dropdownbox? Anyway, please help me if you have the time. Link to comment Share on other sites More sharing options...
jeffman Posted October 12, 2009 Share Posted October 12, 2009 I'm not saying I have what you want or the time to write it up . . .BUTIt would help if your intent were clarified.1. This will probably done with JavaScript. Is that okay?2. Do you just want to switch the look of a single, specific element -- like the text color of <div> -- or the :hover color of all links?3. Or did you want to change an entire style sheet.I'm guessing it's the last one, but better to clear it up now. Link to comment Share on other sites More sharing options...
Sacred Posted October 12, 2009 Author Share Posted October 12, 2009 Yes, the entire stylesheet. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2009 Share Posted October 13, 2009 dropdown list style changerstyle sheet1 bluetheme.cssbody{background-color:#3300CC; color:#FFFFFF;}style sheet2 greentheme.cssbody{background-color:#66FF66; color:#000;}style sheet3 redtheme.cssbody{background-color:#CC0033; color:#fff;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><link rel="stylesheet" href="bluetheme.css" type="text/css" id="cssstyle" /><script type="text/javascript">/*<![CDATA[*//*---->*/function changecss(styleref){document.getElementById("cssstyle").href=styleref.value+"theme.css";}/*--*//*]]>*/</script> <style type="text/css"></style></head><body><select name="css_selector" id="css_selector"><option value="blue" selected="selected" onclick="changecss(this)">Blue Theme</option><option value="green" onclick="changecss(this)">Green Theme</option><option value="red" onclick="changecss(this)">Red Theme</option></select><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html> Link to comment Share on other sites More sharing options...
Sacred Posted October 13, 2009 Author Share Posted October 13, 2009 Thank you . I'll see if I can get it working. EDIT: It works great, but can there be a way to add a button to it? Instead of choosing straight out of a dropdownbox? And can a cookie be created so that when you visit it again, it will stay on your preference? All help is greatly appreciated . Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2009 Share Posted October 13, 2009 had problems with IE (did not change whole screen, until you moved away, then back) so came up with this it quickly hides the screen using display:, then show it again by removing the styling completely.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><link rel="stylesheet" href="bluetheme.css" type="text/css" id="cssstyle" /><script type="text/javascript">/*<![CDATA[*//*---->*/function changecss(styleref){document.getElementById("cssstyle").href=styleref.value+"theme.css";document.body.style.display="none"; //for IEdocument.body.removeAttribute("style"); //for IE}/*--*//*]]>*/</script> <style type="text/css"></style></head><body><select name="css_selector" id="css_selector" onchange="changecss(this)"><option value="blue" selected="selected">Blue Theme</option><option value="green">Green Theme</option><option value="red">Red Theme</option></select><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2009 Share Posted October 13, 2009 with cookie feature <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" href="bluetheme.css" type="text/css" id="cssstyle" /> <script type="text/javascript"> /*<![CDATA[*//*---->*/ function set_cookie(name, value, days) { var cookie_string = name + "=" + escape(value); if (days) { var expires = new Date(); expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); cookie_string += "; expires=" + expires.toGMTString(); } document.cookie = cookie_string; } function get_cookie(cookie_name) { var results = document.cookie.match('(^| ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; } function getcsscookie() { var csscookie = get_cookie("styleref"); if (csscookie != null) { if (document.getElementById("cssstyle").href != csscookie + "theme.css") { document.getElementById("cssstyle").href = csscookie + "theme.css"; } } } function changecss(styleref) { if (styleref.value != -1) { document.getElementById("cssstyle").href = styleref.value + "theme.css"; set_cookie("styleref", styleref.value, 7); //set cookie ref name, value, amount of days to keep cookie } } function changecsslink(styleref) { document.getElementById("cssstyle").href = styleref + "theme.css"; set_cookie("styleref", styleref, 7); //set cookie ref name, value, amount of days to keep cookie } window.onload = getcsscookie; /*--*//*]]>*/ </script> <style type="text/css"> </style> </head> <body> <a href="javascript:void(0);" onclick="changecsslink('blue')">Blue theme</a><br /> <a href="javascript:void(0);" onclick="changecsslink('green')">Green theme</a><br /> <a href="javascript:void(0);" onclick="changecsslink('red')">Red theme</a><br /> <select name="css_selector" id="css_selector" onchange="changecss(this)"> <option value="-1">--Select Page Theme---</option> <option value="blue">Blue Theme</option> <option value="green">Green Theme</option> <option value="red">Red Theme</option> </select> <p> Lorem <span style="border-left: 1px solid #FFF;">**Box**</span> ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. </p> <a href="stylesheetchange.htm">stylesheetchange.htm</a><br /> <a href="stylesheetchangecopy01.htm">stylesheetchangecopy01.htm</a><br /> <a href="stylesheetchangecopy02.htm">stylesheetchangecopy02.htm</a><br /> <a href="stylesheetchangecopy03.htm">stylesheetchangecopy03.htm</a><br /> </body></html> EDIT: because update showed encoded characters for '<>()' etc Link to comment Share on other sites More sharing options...
Sacred Posted October 13, 2009 Author Share Posted October 13, 2009 I have just a couple more questions, can you have it to where I could add any amount of stylesheets with different endings? Like not just theme having to be at the end. Can it have a button too? Or is that a whole different deal? And, if you can, can you show me a tutorial of how to do this? I'm greatful you gave me a working one, but I'd also like to know how to do it myself so I won't have to ask people on here all the time. And thanks again . Link to comment Share on other sites More sharing options...
dsonesuk Posted October 13, 2009 Share Posted October 13, 2009 just create style sheets with the first part of the name matching the value set in the option value.<link rel="stylesheet" href="bluetheme.css" type="text/css" title="style1"/><link rel="stylesheet" href="greentheme.css" type="text/css" title="style2" /><link rel="stylesheet" href="redtheme.css" type="text/css" title="style3" /><option value="blue" selected="selected">Blue Theme</option><option value="green">Green Theme</option><option value="red">Red Theme</option>where it states +"theme.css" relates to the end bit of the css file name.might be better to remove 'theme' part completely, and just use +".css" only, and make option value equal file name without '.css'.its important to add all style sheets links WITH title ( mainly for IE 6)the button is not necessary.When the page is loaded, it checks to see if there is a cookie present using 'window.onload=getcsscookie;'if present, it compares the cookie value (example blue) with the href link ref of the style sheets listed in the page.cookie value blue + text string of "theme.css" to give you "bluetheme.css" when it finds the match it sets its disabled value as 'false', and the others as disabled 'true' as it loops through all the style sheets listed within the page.The use of the option list, basically goes throught the same process, but it also creates a cookie, that stores the option value you had selected for a period of 7 days ('set_cookie("styleref", styleref.value, 7);').<link rel="stylesheet" href="bluetheme.css" type="text/css" title="style1"/><link rel="stylesheet" href="greentheme.css" type="text/css" title="style2" /><link rel="stylesheet" href="redtheme.css" type="text/css" title="style3" /> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.