This is the code I am using
<link rel="alternate stylesheet" type="text/css" href="<?php echo $baseurl; ?>../stylesheets/siteassistpro_css/style4.css" title="B/W Contrast" />
This sits in the header area, which is linked to this
<li><a title="B/W contrast" href="#" onclick="setActiveStyleSheet('B/W Contrast'); return false;"><img src="../imageuploads/Image/a8.png" alt="View this website in B/W contrast" width="20" height="20" /></a></li>
The css for the style sheet is this
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
background-color: #fff;
border: double thick #000;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
line-height: 1.25em;
margin: 1em 0 0 0;
padding: 0 0 0 0;
text-align: center; }
h1 {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.50em;
font-weight: bold;
line-height: 1.15em;
}
h2 {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.35em;
font-weight: bold;
line-height: 1.15em;
}
a, a:link {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
font-weight: bold;
line-height: 1.25em;
text-decoration: none;
}
a:visited {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
font-weight: bold;
line-height: 1.25em;
text-decoration: none;
}
a:hover {
color: #999999;
font-size: 0.95em;
font-weight: bold;
line-height: 1.25em;
text-decoration: underline;
}
a:focus {
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
font-weight: bold;
line-height: 1.25em;
}
a:active {
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
font-weight: bold;
line-height: 1.25em;
text-decoration: underline;
}
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto;
text-align: left;
width: 100%;
}
#outerWrapper #access {
background-color: #fff;
padding: 10px 10px 10px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85em;
text-align: left;
}
#outerWrapper #access li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
text-align: left;
font-size: 0.85em;
}
#outerWrapper #access li a {
padding: 3px;
margin: 0;
font-size: 0.85em;
border: 1px solid #000;
text-decoration: none;
}
#outerWrapper #access li a:link {
color: #000;
font-size: 0.85em;
border-bottom: 1px solid #000;
}
#outerWrapper #access li a:visited {
color: #666666;
font-size: 0.85em;
border: 1px solid #4A5A76;
}
#outerWrapper #access li a:hover {
color: #333333;
font-size: 0.85em;
text-decoration: underline;
}
#header {
position: relative;
margin: 0 auto 0 auto;
padding: 0;
width: 780px;
height: 184px;
overflow: hidden;
background-color: #fff;
border-bottom: solid thick #000;
}
#header span {
display: block;
position: absolute;
left:0;
top: 0;
z-index: 1;
width: 780px;
height: 184px;
margin: 0;
background-image: url(../../imageuploads/Image/weblogo3.jpg);
background-repeat: no-repeat;
font-size: 1.50em;
font-weight: bold;
line-height: 1.25em;
padding: 0px 0px 10px 0px;
margin:0 auto 0 auto;
background-color: #fff;
border-bottom: solid thick #000;
}
#outerWrapper #topNavigation {
background-color: #fff;
border-bottom: solid thick #000;
height: 25px;
padding: 10px 2px 10px 2px;
}
#outerWrapper #contentWrapper {
overflow: hidden;
background-color: #FFF;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #FFF;
border-right-style: none;
float: left;
padding: 10px 20px 10px 10px;
width: 15em;
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #FFF;
border-left-style: none;
float: right;
padding: 10px 10px 10px 20px;
width: 15em;
}
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em;
padding: 10px 10px 10px 10px;
}
#outerWrapper #footer {
background-color: #fff;
border-top: solid thick #000;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.80em;
line-height: 1.0em;
padding: 10px 10px 10px 10px;
}
#outerWrapper #footer a, #outerWrapper #footer a:link {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
line-height: 1em;
}
#outerWrapper #footer a:visited {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
line-height: 1em;
}
#outerWrapper #footer a:hover {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
line-height: 1.0em;
text-decoration: underline;
}
#outerWrapper #footer a:focus {
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.80em;
font-weight: bold;
line-height: 1.0em;
}
#outerWrapper #footer a:active {
color: #ccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
line-height: 1.0em;
text-decoration: underline;
}
#searchbox {
float:right;
position:absolute;
top:30px;
width:300px;
height:25px;
z-index:1;
margin: 5px 15px 10px 550px;
color: #000;
padding: 0 15px 25px 15px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
border:1px;
border-color:#4A5A76;
}
#searchbox fieldset{
padding: 0;
margin: 0;
border: 0;
}
#searchbox input {
font-size: 90%;
color: #ccc;
padding:3px;
background-color: #fff;
width:120px;
display: inline;
float: left;
margin-right: 0.5em;
}
#searchbox button {
background-color: #CCCCCC;
font-size: x-small;
padding:1px;
color: #fff;
margin: 0;
font-weight: bold;
display: inline;
}
#searchbox label
{
font-weight: bold;
color: #fff;
display: none;
}
ul.a
{
list-style-image: url(../../imageuploads/Image/list.gif);
}
#categories {
background-color: #fff;
margin: 10px auto 0 auto;
text-align: center;
width: 100%;
font-size: 0.90em;
}
#categories ul.b
{
list-style-image: url(../../imageuploads/Image/list1.gif);
}
#categories1 {
float: left;
background-color: #fff;
margin: 0 5px 0 5px;
padding: 0 5px 0 5px;
text-align: left;
width: 160px;
font-size: 0.9em;
}
#categories2 {
float: left;
background-color: #fff;
margin: 0 auto 0 5px;
padding: 0 5px 0 5px;
text-align: left;
width: 160px;
font-size: 0.9em;
}
#categories3 {
float: left;
margin: 0 auto 0 5px;
background-color: #fff;
padding: 0 5px 0 5px;
text-align: left;
width: 240px;
font-size: 0.9em;
}
.important {
color: #FF0000;
font-weight: bold;
}
#admincontainer
{
margin-top: 1em;
}
h3.editorheader
{
font-size: 0.75em;
color: #CCC;
padding-top: 1.5em;
}
#admincontainer ul
{
padding: 0 0 0 1.5em;
margin: 0 0 1em 0;
list-style-image: url(../imageuploads/bullet-2341.gif);
float: left;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none
}
#admincontainer ul li {
display: inline;
padding-left: .2em;
padding-right: .5em;
border-right: solid 1px #4A5A76;
}
#admincontainer ul li a
{
padding: 0.2em .2em;
color: #666;
text-decoration: none;
font-size: x-small;
background-color: #FFFFFF;
}
#admincontainer ul li a:hover
{
background-color: #BFE4FF;
color: #000;
}
.adminnavtitle
{
padding: 0;
margin: 0;
}
#admincontainer h4
{
font-size: x-small;
margin-top: 1em;
color: #99ccff;
padding-bottom: .2em;
}
a.pageeditlinks
{
padding: 4px;
text-decoration: none;
color: #FFFFFF;
background-color: #4A5A76;
border: 2px #4A5A76 solid;
font-weight: bold;
}
I use the following link to the js
<script type="text/javascript" src="<?php echo $baseurl; ?>/styleswitcher.js"></script>
The actual JavaScript is this
// JavaScript Document swap size of font//
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);
I have successfully used this in other non php sites, but I can not get it to work with the CMS, that this site runs on.
I have found these two php codes but am not sure how to get this to work with the css style sheet and link it to the image that can be clicked to make it work.
The 1st code is called Switcher.php
<?php
$set=$_GET['set'];
if ($set!="highcontrast" && $set!="standardcontrast")
{ echo "invalid resize value"; exit; }
setcookie ('sitestyle', $set, time()+31536000);
$pagecamefrom= $_SERVER['HTTP_REFERER'];
header("Location: $pagecamefrom");
?>
The 2nd is called colourswitcher.php
<?php
$set=$_GET['set'];
if ($set!="yellowblack" && $set!="orangeblack" && $set!="whiteblack" && $set!="blackyellow" && $set!="default")
{ echo "invalid value"; exit; }
setcookie ('sitestyle', $set, time()+31536000);
$pagecamefrom= $_SERVER['HTTP_REFERER'];
header("Location: $pagecamefrom");
?>