From 6951eb85239f386c8a0b6fd4051f5fbc1d8a77e0 Mon Sep 17 00:00:00 2001 From: bnewbold Date: Sat, 30 Jun 2007 03:23:00 -0400 Subject: added hack-ish style tweaking controls TODO: add font selector styles, make it all work, cookies? --- static/style/font-sans.css | 1 + static/style/font-serif.css | 1 + static/style/site-nuts.css | 16 ++++ static/style/site-sane.css | 14 ++++ static/style/styleswitcher.js | 184 ++++++++++++++++++++++++++++++++++++++++++ static/style/width-flexy.css | 20 +++++ static/style/width-full.css | 19 +++++ 7 files changed, 255 insertions(+) create mode 100644 static/style/font-sans.css create mode 100644 static/style/font-serif.css create mode 100644 static/style/site-nuts.css create mode 100644 static/style/site-sane.css create mode 100644 static/style/styleswitcher.js create mode 100644 static/style/width-flexy.css create mode 100644 static/style/width-full.css (limited to 'static') diff --git a/static/style/font-sans.css b/static/style/font-sans.css new file mode 100644 index 0000000..171e507 --- /dev/null +++ b/static/style/font-sans.css @@ -0,0 +1 @@ +body { font-family: sans; } diff --git a/static/style/font-serif.css b/static/style/font-serif.css new file mode 100644 index 0000000..dd3e369 --- /dev/null +++ b/static/style/font-serif.css @@ -0,0 +1 @@ +body { font-family: serif; } diff --git a/static/style/site-nuts.css b/static/style/site-nuts.css new file mode 100644 index 0000000..330a234 --- /dev/null +++ b/static/style/site-nuts.css @@ -0,0 +1,16 @@ +body { + background-image: url("/static/style/fractal.gif"); + background-color: green; } + +a { color: magenta; } +a:visited { color: orange; } +a:hover { color: yellow; } + +.content { background-color: purple; } + +#top_bar { background-color: #FF00FF; } + +#top_bar_content { + background-color: #FF00FF; + border-right: 200px solid #FF00FF; +} diff --git a/static/style/site-sane.css b/static/style/site-sane.css new file mode 100644 index 0000000..053b06d --- /dev/null +++ b/static/style/site-sane.css @@ -0,0 +1,14 @@ +body { + background-image: none; + background-color: #E3E3E3; } + +a { color: blue; } +a:visited { color: blue; } +a:hover { color: blue; } + +.content { background-color: #FFFFFF; } + +#top_bar { background-color: #993333; } +#top_bar_content { + background-color: #993333; + border-right: 200px solid #993333; } diff --git a/static/style/styleswitcher.js b/static/style/styleswitcher.js new file mode 100644 index 0000000..981a6ca --- /dev/null +++ b/static/style/styleswitcher.js @@ -0,0 +1,184 @@ +function setActiveSiteStyleSheet(title) { + var i, a, main; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { + if(a.getAttribute("title").indexOf("site") != 1) a.disabled = true; + if(a.getAttribute("title") == title) a.disabled = false; + } + } +} +function setActiveWidthStyleSheet(title) { + var i, a, main; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { + if(a.getAttribute("title").indexOf("width") != 1) a.disabled = true; + if(a.getAttribute("title") == title) a.disabled = false; + } + } +} +function setActiveFontStyleSheet(title) { + var i, a, main; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { + if(a.getAttribute("title").indexOf("font") != 1) a.disabled = true; + if(a.getAttribute("title") == title) a.disabled = false; + } + } +} + +function getActiveSiteStyleSheet() { + var i, a; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled && a.getAttribute("title").indexOf("site") != -1) return a.getAttribute("title"); + } + return null; +} +function getActiveFontStyleSheet() { + var i, a; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled && a.getAttribute("title").indexOf("font") != -1) return a.getAttribute("title"); + } + return null; +} +function getActiveWidthStyleSheet() { + var i, a; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled && a.getAttribute("title").indexOf("width") != -1) return a.getAttribute("title"); + } + return null; +} + +function getPreferredSiteStyleSheet() { + 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") + && a.getAttribute("title").indexOf("site") != -1 + ) return a.getAttribute("title"); + } + return null; +} +function getPreferredFontStyleSheet() { + 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") + && a.getAttribute("title").indexOf("font") != -1 + ) return a.getAttribute("title"); + } + return null; +} +function getPreferredWidthStyleSheet() { + 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") + && a.getAttribute("title").indexOf("width") != -1 + ) 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("sitestyle"); + var title = cookie ? cookie : getPreferredSiteStyleSheet(); + setActiveSiteStyleSheet(title); + if(title.indexOf('nuts') != -1) { + document.getElementById('style_site').innerHTML = 'nuts' + } + var cookie = readCookie("fontstyle"); + var title = cookie ? cookie : getPreferredFontStyleSheet(); + setActiveFontStyleSheet(title); + if(title.indexOf('sans') != -1) { + document.getElementById('style_font_first').innerHTML = 'A' + document.getElementById('style_font_second').innerHTML = 'a' + } + var cookie = readCookie("widthstyle"); + var title = cookie ? cookie : getPreferredWidthStyleSheet(); + setActiveWidthStyleSheet(title); + if(title.indexOf('flexy') != -1) { + document.getElementById('style_width').innerHTML = 'flexy' + } +} + +window.onunload = function(e) { + if (stuffset == true) { + var title = getActiveSiteStyleSheet(); + createCookie("sitestyle", title, 365); + title = getActiveFontStyleSheet(); + createCookie("fontstyle", title, 365); + title = getActiveWidthStyleSheet(); + createCookie("widthstyle", title, 365); + } +} + +var stuffset = false +var cookie = readCookie("sitestyle"); +var title = cookie ? cookie : getPreferredSiteStyleSheet(); +setActiveSiteStyleSheet(title); +var cookie = readCookie("fontstyle"); +var title = cookie ? cookie : getPreferredFontStyleSheet(); +setActiveFontStyleSheet(title); +var cookie = readCookie("widthstyle"); +var title = cookie ? cookie : getPreferredFontStyleSheet(); +setActiveFontStyleSheet(title); + +function swapstyle(thing) { + stuffset = true; + switch(thing){ + case 'font': + if(document.getElementById('style_font_first').innerHTML == 'a'){ + document.getElementById('style_font_first').innerHTML = 'A' + document.getElementById('style_font_second').innerHTML = 'a' + setActiveFontStyleSheet('font-sans') + } else { + document.getElementById('style_font_first').innerHTML = 'a' + document.getElementById('style_font_second').innerHTML = 'A' + setActiveFontStyleSheet('font-serif') + } + break; + case 'site': + if(document.getElementById('style_site').innerHTML == 'sane'){ + document.getElementById('style_site').innerHTML = 'nuts' + setActiveSiteStyleSheet('site-nuts') + } else { + document.getElementById('style_site').innerHTML = 'sane' + setActiveSiteStyleSheet('site-sane') + } + break; + case 'width': + if(document.getElementById('style_width').innerHTML == 'fixed'){ + document.getElementById('style_width').innerHTML = 'flexy' + setActiveWidthStyleSheet('width-flexy') + } else { + document.getElementById('style_width').innerHTML = 'fixed' + setActiveWidthStyleSheet('width-fixed') + } + break; + + } +} diff --git a/static/style/width-flexy.css b/static/style/width-flexy.css new file mode 100644 index 0000000..84d1a59 --- /dev/null +++ b/static/style/width-flexy.css @@ -0,0 +1,20 @@ +.content { + margin-left: none; + width: 75%; + margin-top: 0px; + margin-bottom: 0px; + margin-right: 250px; + padding-left: 15px; + padding-right: 5px; + padding-bottom: 5px; } +.content_footer { + margin-left: none; + width: 75%; + margin-bottom: 5px; + margin-right: 250px; + margin-top: 0px; + border-top: 2px solid #000000; + padding-top: 6px; + padding-left: 15px; + padding-right: 5px; } + diff --git a/static/style/width-full.css b/static/style/width-full.css new file mode 100644 index 0000000..d6f11cb --- /dev/null +++ b/static/style/width-full.css @@ -0,0 +1,19 @@ +.content { + margin-left: 4%; + width: 680px; + margin-top: 0px; + margin-right: none; + margin-bottom: 0px; + padding-left: 5px; + padding-right: 5px; + padding-bottom: 5px; } +.content_footer { + margin-left: 4%; + width: 680px; + margin-bottom: 5px; + margin-right: none; + margin-top: 0px; + border-top: 2px solid #000000; + padding-top: 6px; + padding-left: 5px; + padding-right: 5px; } -- cgit v1.2.3