CSS Themes

I'm going to seriously cheat with this entry... below are some ready to go CSS themes... Simply Copy and Paste them into your CSS Theme editor on your blog and Voila! Your blog has a brand new face on it!

Below is a Dark Blue/Black Theme, with bright high-contrast accents in white and cyan. /* These three tags here to fix some IE rendering glitches... */ form { padding: 0; margin: 0; } table { border: none; padding: 0; } input { padding: 0; margin: 0; } /* Done fixing glitches... */ /* WELCOME TO THE .CSS FILE TEMPLATE All elements of the blog should be well documented as to what they all do below. Please keep in mind that not all css tags show up in this file, and others yet can be omitted from your modifications. This is meant as a general guide file so that you can familiarise yourself with the tags, and what they do. */ /* the 'body' tag defines global items for the page. here you can define page background, margin, default colours and a few other things. */ body { color: white; background: black; margin: 0; padding: 0; } /* this is the main frame that encircles the whole page generally you would only set border here -- if you don't need a border, you can deleted this whole tag. */ table.main { border: none; border-width: thin; border-color: white; } /* this generic 'div' definition sets the default colours, borders, margins, etc. for all <div> tags. Most <div> elements used in page rendering will be overwritten below, so you don't need to worry much about this one... */ div { color: white; background: black; } /* this sets the appearance of the paragraphs or <p> tags, which are often used extensively inside blog entries. Any other special <p> tags are redefined below. */ p { color: white; background: #003366; } /* basic table cell definition. used as default colouration for tables embedded in blog entries, and also as the fallback for the larger page-layout tables. */ td { color: white; background: #003366; } /* FINISHED BASIC DEFINITIONS, moving on to very specific definitions for very specific elements. */ /* Here we define tw elements pertaining SOLELY to the rendering of the page title... They all do roughly the same thing, but there is some flexibility if all three are configurable... First is defined for everything where class=pageheader, the second only applies to <p class=pageheader> */ .pageheader { margin: 0; padding: 0; border: none; text-align: center; } p.pageheader { color: cyan; margin: 0; padding: 0; border-bottom: solid; border-width: thin; border-color: white; text-indent: 0; font-size: 120%; } /* this tag is the internal box where all the blog contents are rendered... recommend you set some internal padding here, and perhaps a bg colour. */ td.blogentries { background: black; color: white; margin: 1em; padding: 1em; } /* the definition below affects the signature block at bottom of the page */ .signature { margin: 0; padding: 0; } p.signature { font-size: 90%; text-align: center; border-top: solid; border-width: thin; border-color: white; margin: 0; padding: 0; } /* these three affect the layout of most everything that's rendered on the blog... */ div.title { background: #003366; color: cyan; border: solid; border-color: white; border-width: thin; border-bottom: none; margin-top: 1em; margin-bottom: 0em; text-align: center; font-size: 110%; } div.contents { background: black; color: white; border: solid; border-width: thin; border-color: white; margin-top: 0em; margin-bottom: 0em; padding: 1em; padding-left: 2em; padding-right: 2em; } div.timestamp { background: #003366; color: white; border: solid; border-color: white; border-width: thin; border-top: none; margin-top: 0em; margin-bottom: 1em; text-align: center; } /* we also occassionally insert admin or comments lines, so lets pretty them up a bit... */ div.contents-admin, div.contents-comments { color: white; border-left: solid; border-right: solid; border-width: thin; border-color: white; text-align: center; font-size: 90%; } /* these two control the formatting of comments: the header and the actual contents... */ div.commenttop { background: white; color: black; padding: 0em; border: solid; border-width: thin; border-color: white; margin-top: 0em; margin-bottom:0em; } div.commentbody { background: black; color: white; padding: 0.5em; border: solid; border-width: thin; border-color: white; margin-top: 0em; margin-bottom:1em; } /* this last <div> class is a one size fits all rendering container that, among other things, is the box around the page no's, hit counter, MOTD, etc... */ div.pagens { background: #003366; color: white; padding: 0.5em; border: solid; border-width: thin; border-color: white; margin-top: 1em; margin-bottom: 1em; } /* special class that affects only links inside the menu-bar */ .menuentry { padding: 0; margin: 0; text-align: center; } /* the next four affect the way links appear on the page... */ a { text-decoration: none ; } a:link { color: blue ; } /* for unvisited links */ a:visited { color: blue ; } /* for visited links */ a:active { color: cyan; text-decoration: underline ; } /* when link is clicked */ a:hover { color:cyan; text-decoration: underline ; } /* when mouse is over link */

Below is an orange theme designed to look like an OLD computer interface. Two tone. This theme was contributed by Michael Doerksen.
/* These three tags here to fix some IE rendering glitches... */ form { padding: 0; margin: 0; } table { border: none; padding: 0; } /* Done fixing glitches... */ /* WELCOME TO THE .CSS FILE TEMPLATE All elements of the blog should be well documented as to what they all do below. Please keep in mind that not all css tags show up in this file, and others yet can be omitted from your modifications. This is meant as a general guide file so that you can familiarise yourself with the tags, and what they do. */ /* the 'body' tag defines global items for the page. here you can define page background, margin, default colours and a few other things. */ body { color: orange; background: black; margin: 0; padding: 1; font-family: arial; font-size: 10pt; } /* this is the main frame that encircles the whole page generally you would only set border here -- if you don't need a border, you can deleted this whole tag. */ table.main { border: none; border-width: thin; border-color: orange; } /* this generic 'div' definition sets the default colours, borders, margins, etc. for all <div> tags. Most <div> elements used in page rendering will be overwritten below, so you don't need to worry much about this one... */ div { color: orange; background: black; } td { color: orange; background: black; } /* FINISHED BASIC DEFINITIONS, moving on to very specific definitions for very specific elements. */ /* Here we define two elements pertaining SOLELY to the rendering of the page title... They all do roughly the same thing, but there is some flexibility if all three are configurable... First is defined for everything where class=pageheader, the second only applies to <p class=pageheader> */ .pageheader { margin: 5pt; padding: 0; border: none; text-align: center; font-weight: none; } p.pageheader { color: orange; background: black; margin: 5pt; padding-top: 2pt; padding-bottom: 2pt; border: solid; border-width: thin; border-color: orange; text-indent: 0; font-size: 14pt; font-weight: none; text-align: center; } /* this tag is the internal box where all the blog contents are rendered... recommend you set some internal padding here, and perhaps a bg colour. */ td.blogentries { background: black; color: orange; margin: 1em; font-family: arial; padding-left: 50pt; padding-right: 50pt; } /* the definition below affects the signature block at bottom of the page */ .signature { margin: 5pt; padding: 0; } p.signature { font-size: 8pt; text-align: center; border: none; border-width: thin; border-color: orange; margin: 5pt; padding: 0; } /* these three affect the layout of most everything that's rendered on the blog... */ div.title { background: black; color: orange; border: none; border-color: orange; border-width: thin; border-bottom: none; margin-top: 1em; margin-bottom: 0em; text-align: left; font-size: 14pt; font-family: arial; font-style: italic; } div.contents { background: black; color: orange; border: solid; border-width: thin; border-color: orange; margin-top: 0em; margin-bottom: 0em; padding-top: 5pt; padding-bottom: 5pt; padding-left: 50pt; padding-right: 50pt; font-family: courier new; } div.timestamp { background: black; color: orange; border: none; border-color: orange; border-width: thin; border-top: none; margin-top: 0em; margin-bottom: 1em; text-align: right; font-family: arial; font-size: 13pt; } /* we also occassionally insert admin or comments lines, so lets pretty them up a bit... */ div.contents-admin, div.contents-comments { color: orange; border: none; border-width: thin; border-color: orange; text-align: right; } /* these two control the formatting of comments: the header and the actual contents... */ div.commenttop { background: black; color: orange; padding: 0em; font-family: arial; border: none; border-width: thin; border-color: orange; margin-top: 0em; margin-bottom:0em; font-weight: none; padding-left: 10pt; padding-right: 10pt; } div.commentbody { background: black; color: orange; border: none; border-width: thin; border-color: orange; margin-top: 0em; margin-bottom:1em; padding-left: 50pt; padding-right: 50pt; padding-top: 5pt; } /* this last <div> class is a one size fits all rendering container that, among other things, is the box around the page no's, hit counter, MOTD, etc... */ div.pagens { background: black; color: orange; padding: 0.5em; border: none; border-width: thin; border-color: orange; margin-top: 1em; margin-bottom: 1em; font-family: arial; } /* special class that affects only links inside the menu-bar */ .menuentry { padding: 0; margin: 0; text-align: left; } /* the next four affect the way links appear on the page... */ a:link { color: orange ; } a:visited { color: orange ; } /* for visited links */ a:active { color: orange; } /* when link is clicked */ a:hover { color: orange; text-decoration: none; } /* when mouse is over link */ /* a few odds and ends... */ th { color: orange; } em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; } pre { font-family: arial; font-size: 12pt; } textarea { font-size : 12px ; font-family : arial ; color : orange; border : 1px solid orange ; background-color : black ; scrollbar-face-color: black; scrollbar-highlight-color: orange; scrollbar-3dlight-color: black; scrollbar-darkshadow-color: black; scrollbar-shadow-color: black; scrollbar-arrow-color: orange; scrollbar-track-color: black; } input { font-size : 12px ; font-family: arial ; color : orange; border : 1px solid orange ; background-color : black ; padding: 0; margin: 0; }

Below is a nice marble theme using white, gray and black marble. /* These three tags here to fix some IE rendering glitches... */ form { padding: 0; margin: 0; } table { border: none; padding: 0; } input { padding: 0; margin: 0; } /* Done fixing glitches... */ /* WELCOME TO THE .CSS FILE TEMPLATE All elements of the blog should be well documented as to what they all do below. Please keep in mind that not all css tags show up in this file, and others yet can be omitted from your modifications. This is meant as a general guide file so that you can familiarise yourself with the tags, and what they do. */ /* the 'body' tag defines global items for the page. here you can define page background, margin, default colours and a few other things. */ body { color: white; background: url(../default/blkmarble.png); margin: 0; padding: 2em; } /* this is the main frame that encircles the whole page generally you would only set border here -- if you don't need a border, you can deleted this whole tag. */ table.main { border: solid; border-width: thin; border-color: black; } /* this generic 'div' definition sets the default colours, borders, margins, etc. for all <div> tags. Most <div> elements used in page rendering will be overwritten below, so you don't need to worry much about this one... */ div { color: black; background: url(../default/graymarble.png); } /* this sets the appearance of the paragraphs or <p> tags, which are often used extensively inside blog entries. Any other special <p> tags are redefined below. */ p { color: black; background: url(../default/whitemarble.png); } /* basic table cell definition. used as default colouration for tables embedded in blog entries, and also as the fallback for the larger page-layout tables. */ td { color: black; background: url(../default/graymarble.png); } /* FINISHED BASIC DEFINITIONS, moving on to very specific definitions for very specific elements. */ /* Here we define tw elements pertaining SOLELY to the rendering of the page title... They all do roughly the same thing, but there is some flexibility if all three are configurable... First is defined for everything where class=pageheader, the second only applies to <p class=pageheader> */ .pageheader { color: black; background: url(../default/whitemarble.png); margin: 0; padding: 0em; border: none; text-align: center; } div.pageheader { padding: 1em; } p.pageheader { color: white; background: url(../default/graymarble_dark.png); margin: 0; padding: 0; border-bottom: solid; border-width: thin; border-color: white; text-indent: 0; font-size: 120%; } /* this tag is the internal box where all the blog contents are rendered... recommend you set some internal padding here, and perhaps a bg colour. */ td.blogentries { background: url(../default/blkmarble.png); color: white; margin: 1em; padding: 1em; } /* the definition below affects the signature block at bottom of the page */ .signature { margin: 0; padding: 0; } p.signature { font-size: 90%; text-align: center; border-top: solid; border-width: thin; border-color: white; margin: 0; padding: 0; } /* these three affect the layout of most everything that's rendered on the blog... */ div.title { background: url(../default/graymarble_dark.png); color: white; border: solid; border-color: white; border-width: thin; border-bottom: none; margin-top: 1em; margin-bottom: 0em; text-align: center; font-size: 110%; } div.contents { background: url(../default/whitemarble.png); color: black; border: solid; border-top: none; border-bottom: none; border-width: thin; border-color: white; margin-top: 0em; margin-bottom: 0em; padding: 1em; padding-left: 2em; padding-right: 2em; } div.timestamp { background: url(../default/graymarble_dark.png); color: white; border: solid; border-color: white; border-width: thin; border-top: none; margin-top: 0em; margin-bottom: 1em; text-align: center; } /* we also occassionally insert admin or comments lines, so lets pretty them up a bit... */ div.contents-admin, div.contents-comments { color: url(../default/graymarble.png); border-left: solid; border-right: solid; border-width: thin; border-color: white; text-align: center; font-size: 90%; } /* these two control the formatting of comments: the header and the actual contents... */ div.commenttop { background: url(../default/graymarble_dark.png); color: white; padding: 0em; border: solid; border-bottom: none; border-width: thin; border-color: black; margin-top: 0em; margin-bottom:0em; } div.commentbody { background: url(../default/graymarble.png); color: black; padding: 0.5em; border: solid; border-top: none; border-width: thin; border-color: black; margin-top: 0em; margin-bottom:1em; } /* this last <div> class is a one size fits all rendering container that, among other things, is the box around the page no's, hit counter, MOTD, etc... */ div.pagens { background: url(../default/whitemarble.png); color: black; padding: 0.5em; border: solid; border-width: thin; border-color: white; margin-top: 1em; margin-bottom: 1em; } /* special class that affects only links inside the menu-bar */ .menuentry { background: url(../default/graymarble.png); color: white; padding: 0; margin: 0; text-align: center; } /* the next four affect the way links appear on the page... */ a { text-decoration: none ; } a:link { color: black ; } /* for unvisited links */ a:visited { color: black ; } /* for visited links */ a:active { color: blue; text-decoration: underline ; } /* when link is clicked */ a:hover { color: blue; text-decoration: underline ; } /* when mouse is over link */ /* a few odds and ends... */ th { color: black; } em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; color: blue; } pre { font-family: monospace; font-size: 80%; }

Below is a minimalist black-on-white theme that is intended to take the appearance of a typewriter print-out. /* These three tags here to fix some IE rendering glitches... */ form { padding: 0; margin: 0; } table { border: none; padding: 0; } input { padding: 0; margin: 0; } /* Done fixing glitches... */ /* WELCOME TO THE .CSS FILE TEMPLATE All elements of the blog should be well documented as to what they all do below. Please keep in mind that not all css tags show up in this file, and others yet can be omitted from your modifications. This is meant as a general guide file so that you can familiarise yourself with the tags, and what they do. */ /* the 'body' tag defines global items for the page. here you can define page background, margin, default colours and a few other things. */ body { color: black; background: white; margin: 0; padding: 1em; font-family: Courier New, monospace; } /* this is the main frame that encircles the whole page generally you would only set border here -- if you don't need a border, you can deleted this whole tag. */ table.main { border: none; border-width: thin; border-color: white; } /* this generic 'div' definition sets the default colours, borders, margins, etc. for all <div> tags. Most <div> elements used in page rendering will be overwritten below, so you don't need to worry much about this one... */ div { color: black; background: white; font-family: Courier New, monospace; } /* this sets the appearance of the paragraphs or <p> tags, which are often used extensively inside blog entries. Any other special <p> tags are redefined below. */ p { color: black; background: white; font-family: Courier New, monospace; } /* basic table cell definition. used as default colouration for tables embedded in blog entries, and also as the fallback for the larger page-layout tables. */ td { color: black; background: white; font-family: Courier New, monospace; } /* FINISHED BASIC DEFINITIONS, moving on to very specific definitions for very specific elements. */ /* Here we define tw elements pertaining SOLELY to the rendering of the page title... They all do roughly the same thing, but there is some flexibility if all three are configurable... First is defined for everything where class=pageheader, the second only applies to <p class=pageheader> */ .pageheader { margin: 0; padding: 0; border: none; text-align: center; } p.pageheader { color: black; background: white; margin: 0; padding: 0; border: solid; border-width: thin; border-color: black; text-indent: 0; font-size: 150%; } div.adminmenu { color: black; background: white; margin: 0; padding: 0; border: solid; border-width: thin; border-color: black; border-top: none; } /* this tag is the internal box where all the blog contents are rendered... recommend you set some internal padding here, and perhaps a bg colour. */ td.blogentries { background: white; color: black; margin: 1em; padding: 1em; } /* the definition below affects the signature block at bottom of the page */ .signature { margin: 0; padding: 0; } p.signature { font-size: 90%; text-align: center; border: solid; border-width: thin; border-color: white; margin: 0; padding: 0; } /* this class allows us to make a border around the menu entries as a group */ td.menu { border: solid; border-width: thin; border-color: black; border-top: none; margin: 0; padding: 0.5em; } /* these three affect the layout of most everything that's rendered on the blog... */ div.title { background: white; color: black; border: solid; border-color: black; border-width: thin; border-bottom: none; margin-top: 1em; margin-bottom: 0em; text-align: center; font-weight: bold; } div.contents { background: white; color: black; border: solid; border-width: thin; border-color: black; margin-top: 0em; margin-bottom: 0em; padding: 1em; padding-left: 2em; padding-right: 2em; } div.timestamp { background: white; color: black; border: solid; border-color: black; border-width: thin; border-top: none; margin-top: 0em; margin-bottom: 1em; text-align: center; } /* we also occassionally insert admin or comments lines, so lets pretty them up a bit... */ div.contents-admin, div.contents-comments { color: black; border-left: solid; border-right: solid; border-width: thin; border-color: black; text-align: center; } /* these two control the formatting of comments: the header and the actual contents... */ div.commenttop { background: white; color: black; padding: 0em; border: solid; border-width: thin; border-color: black; margin-top: 0em; margin-bottom:0em; } div.commentbody { background: white; color: black; padding: 0.5em; border: solid; border-width: thin; border-color: black; border-top: none; margin-top: 0em; margin-bottom:1em; } /* this last <div> class is a one size fits all rendering container that, among other things, is the box around the page no's, hit counter, MOTD, etc... */ div.pagens { background: white; color: black; padding: 0.5em; border: solid; border-width: thin; border-color: black; margin-top: 1em; margin-bottom: 1em; } /* special class that affects only links inside the menu-bar */ .menuentry { padding: 0; margin: 0; text-align: center; } /* the next four affect the way links appear on the page... */ a { text-decoration: none ; } a:link { color: blue ; } /* for unvisited links */ a:visited { color: blue ; } /* for visited links */ a:active { color: black; text-decoration: underline ; } /* when link is clicked */ a:hover { color:black; text-decoration: underline ; } /* when mouse is over link */

This theme below is the theme currently powering this site /* These three tags here to fix some IE rendering glitches... */ form { padding: 0; margin: 0; } table { border: none; padding: 0; } input { padding: 0; margin: 0; } /* Done fixing glitches... */ /* WELCOME TO THE .CSS FILE TEMPLATE All elements of the blog should be well documented as to what they all do below. Please keep in mind that not all css tags show up in this file, and others yet can be omitted from your modifications. This is meant as a general guide file so that you can familiarise yourself with the tags, and what they do. */ /* the 'body' tag defines global items for the page. here you can define page background, margin, default colours and a few other things. */ body { color: black; background: white; margin: 0; padding: 1em; font-family: Arial, sans; } /* this is the main frame that encircles the whole page generally you would only set border here -- if you don't need a border, you can deleted this whole tag. */ table.main { border: none; border-width: thin; border-color: white; } /* this generic 'div' definition sets the default colours, borders, margins, etc. for all <div> tags. Most <div> elements used in page rendering will be overwritten below, so you don't need to worry much about this one... */ div { color: black; background: white; font-family: Arial, sans; padding: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em; } /* this sets the appearance of the paragraphs or <p> tags, which are often used extensively inside blog entries. Any other special <p> tags are redefined below. */ p { color: black; background: white; font-family: Arial, sans; margin: 0.5em; } /* basic table cell definition. used as default colouration for tables embedded in blog entries, and also as the fallback for the larger page-layout tables. */ td { color: black; font-family: Arial, sans; } /* FINISHED BASIC DEFINITIONS, moving on to very specific definitions for very specific elements. */ /* Here we define tw elements pertaining SOLELY to the rendering of the page title... They all do roughly the same thing, but there is some flexibility if all three are configurable... First is defined for everything where class=pageheader, the second only applies to <p class=pageheader> */ .pageheader { margin: 0; padding: 0; border: none; text-align: right; } p.pageheader { background:white; color: silver; font-size: 150%; font-weight: bold; margin: 0em; padding-right: 1.5em; text-align: right; padding: 0em; padding-top: 1em; padding-bottom: 1em; border: none; } div.pageheader { background: #3E91EB; padding-top: 1em; padding-bottom: 1em; } div.adminmenu { color: black; background: white; margin: 0; padding: 0; } /* this tag is the internal box where all the blog contents are rendered... recommend you set some internal padding here, and perhaps a bg colour. */ td.blogentries { background: white; color: black; margin: 1em; padding: 1em; } /* the definition below affects the signature block at bottom of the page */ p.signature { font-size: 90%; text-align: center; border: solid; border-width: thin; border-color: white; margin: 0; padding: 0; } td.signature { background: #3E91EB; padding-top: 1em; } /* this class allows us to make a border around the menu entries as a group */ td.menu, td.logos, td.topofpage { background: #EEEEFF; margin: 0; padding: 0.5em; padding-top: 4em; } /* these three affect the layout of most everything that's rendered on the blog... */ div.title { background: white; color: silver; border-left: solid; border-top: solid; border-width: thin; margin-top: 1em; margin-bottom: 0em; margin-right: 20%; text-align: left; font-weight: bold; font-size: 150%; } div.contents { background: white; color: black; margin-top: 0em; margin-bottom: 0em; margin-left: 2em; padding: 1em; padding-left: 0; padding-right: 2em; border-right: solid; border-bottom: solid; border-color: silver; border-width: thin; } div.timestamp { background: white; color: silver; border-bottom: solid; border-right: solid; border-left: solid; border-color: silver; border-width: thin; margin-top: 0em; margin-bottom: 1em; padding: 0.5em; padding-top: 0em; text-align: right; } /* we also occassionally insert admin or comments lines, so lets pretty them up a bit... */ div.contents-admin { color: black; text-align: center; border-left: solid; border-color: silver; border-width: thin; padding: 0; margin: 0; } div.contents-comments { color: black; text-align: center; border-right: solid; border-color: silver; border-width: thin; padding: 0; margin: 0; } /* these two control the formatting of comments: the header and the actual contents... */ div.commenttop { background: silver; color: black; padding: 0em; border: solid; border-width: thin; border-color: silver; margin-top: 0em; margin-bottom:0em; } div.commentbody { background: white; color: black; padding: 0.5em; border: solid; border-width: thin; border-color: silver; border-top: none; border-left: none; margin-top: 0em; margin-bottom:1em; } /* this last <div> class is a one size fits all rendering container that, among other things, is the box around the page no's, hit counter, MOTD, etc... */ div.pagens { background: white; color: black; margin-top: 1em; } /* special class that affects only links inside the menu-bar */ .menuentry { background: #EEEEFF; padding: 0; padding-left: 1em; margin: 0; text-align: right; } /* the next four affect the way links appear on the page... */ a { text-decoration: none ; } a:link { color: blue ; } /* for unvisited links */ a:visited { color: blue ; } /* for visited links */ a:active { color: black; text-decoration: underline ; } /* when link is clicked */ a:hover { color:black; text-decoration: underline ; } /* when mouse is over link */ pre { font-size: 80%; } em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; color: blue;}

More to come as they are designed... might even set up a drop-down menu where you can choose from these predefined themes...