Roy766 Posted May 18, 2008 Share Posted May 18, 2008 How would I make it so that when you click a link, the page switches to a different style sheet? Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/ Share on other sites More sharing options...
LooieENG Posted May 18, 2008 Share Posted May 18, 2008 Make a folder called styles with style1.css, style2.css, etc. Then, say the page is index.php, do index.php?style=(number of style) And before the HTML tags <?php if ( isset($_COOKIE['style']) ) { $s = 'styles/style' . $_COOKIE['style'] . '.css'; } elseif ( isset($_GET['style'] && ctype_digit($_GET['style']) ) { $s = 'styles/style' . $_GET['style'] . '.css'; setcookie('style', $s, time()+(99999*99999), '/'); } else { // Default style $s = 'styles/style1.css'; } ?> And in the <head> tags of the HTML <link rel="stylesheet" type="text/css" href="<?php echo $s?>" /> Try that, it SHOULD work. Make sure the page ends in .php, not .html You can also probably do it with JavaScript, but I don't really know any, so you'll have to wait for someone who does post Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/#findComment-544418 Share on other sites More sharing options...
Roy766 Posted May 18, 2008 Author Share Posted May 18, 2008 No, that doesn;t work . Plus "href" in a stylesheet link is the filename, not the displayed text :-\. Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/#findComment-544436 Share on other sites More sharing options...
ZaksHQ Posted May 18, 2008 Share Posted May 18, 2008 My site has that. so I'll help out. Save this JS as 'styleswitcher.js' in your site's directory. Here is the JS code that the file 'styleswitcher.js' should have: function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; } function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); Don't ask about that code above, I didn't write it. Then... Make sure your CSS files are saved separately, and are not part of the HTML page. You should have something like this at the head of your HTML page. <link rel="stylesheet" type="text/css" href="style1.css"> That code will make 'style1.css' the starting CSS when you enter the page. Add these after the code above, also, in the head of the HTML. <link rel="alternate stylesheet" type="text/css" href="style1.css" title="style1title"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2title"> To add more than 2, just follow the same pattern. And to top of the head code for this, add the code below after the code above. <script type="text/javascript" src="styleswitcher.js"></script> Now for the link that will change the CSS files. Put something like this to change the CSS files around. <a href="#" onclick="setActiveStyleSheet('style1title'); return false;" > Click here to change the CSS to style1.</a> <a href="#" onclick="setActiveStyleSheet('style2title'); return false;" > Click here to change the CSS to style2.</a> [hr] That should work... Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/#findComment-544447 Share on other sites More sharing options...
Roy766 Posted May 19, 2008 Author Share Posted May 19, 2008 Okay But how do I make it so that the others pages load the predefined CSS template? Like, say I set my style to Green/Black on the index page, how would it make it so that a different page automatically load the same template? Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/#findComment-545026 Share on other sites More sharing options...
ZaksHQ Posted May 19, 2008 Share Posted May 19, 2008 It should already happen. The JS creates a cookie I think. Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/#findComment-545074 Share on other sites More sharing options...
Roy766 Posted May 20, 2008 Author Share Posted May 20, 2008 You're right. Link to comment https://forums.phpfreaks.com/topic/106212-solved-clicking-a-link-to-change-style-sheets/#findComment-545330 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.