Jump to content

Css Style Switcher


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 :).

Edited by Sacred
Link to post
Share on other sites

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>

Edited by dsonesuk
Link to post
Share on other sites

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

Edited by dsonesuk
Link to post
Share on other sites

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 post
Share on other sites

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" />

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...