This is the CSS style sheet used for Appropedia's 13 theme for WordPress,
The current edition has lots of commented out colors and other bits of code, which need to be cleaned out.
/* THEME INFO AT BOTTOM */ /* Basics and Typography */ body {
margin: 0;
padding: 0;
/* background: #4E5706 *//*url(images/bg.gif)*/;
color: #000;
font-size: x-small;
font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
text-align: center;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body {
font-size: small;
}
p {
margin: 1.2em 0;
padding: 0;
font-size: 1em;
line-height: 1.5em;
}
ol, ul {
margin: 1.2em 0 1.2em 2.4em;
padding: 0;
font-size: 1em;
line-height: 1.5em;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
margin: 1.2em 0 1.2em 0;
padding: 0;
color: #1E674E;/*#4E5706; */
font-family: Georgia, serif;
}
h1, h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.3em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1.1em;
}
a {
text-decoration: none;
}
a:link {
color: #1E674E;/* #3DCE9C is reference color (based on logo?). 1E674E = half; try 2/3,=#298968 */
}
a:visited, a:active {
color: #48707A; /*#727A7A is too like normal body text...; #487064 stands out a bit but is very pale ; try starting from the standard link color of #1E674E, and trying half as bright/intense: #0F3427 Too dark? and 2/3 as bright: #144534. too similar? So try: #3DCE9C Or just go more blue? */
/* the reference color with R & G at 2/3 the intensity, B at full: 29899C. R & G at half B at full: 1E679C. R & G at half, B at 2/3: 1E6734 */
}
a:hover {
background-color: #ADABAB;/*#4E5706;*/
color: #FFF;
}
.left {
float: left;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
.right {
float: right;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#sidebar a:link, #footer a:link {
color: #141112 /*#C79A65*/;
}
#sidebar a:visited, #sidebar a:active, #footer a:visited, #footer a:active {
color: #596C69;/*#C0996C;*/
}
#sidebar a:hover, #footer a:hover {
background-color: #ADABAB;
color: #000;
}
blockquote {
margin: 0 20px;
padding: 0 20px;
border-left: 4px solid #1E674E;/*#4E5706;*/
font-size: 0.92em;
}
code {
color: #333;
font-family: monospace;
}
input, textarea, select {
background-color: #FFF;
border: 1px solid #1E674E;/*#4E5706;*/
color: #000;
font: 1em "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
}
input.submit, input[type=submit] {
border: 1px solid #000;
background-color: #1E674E;/*#4E5706;*/
color: #FFF;
}
form, img {
border: 0;
padding="0 10px 0 10px"
margin: 10;
}
/* The Layout */
#headwrapper {
height: 350px;
/* background: url(images/bg2.gif) repeat-x;*/
}
#header {
margin: 0 auto;
width: 765px;
height: 85px;
/* background: url(images/header.gif) no-repeat;*/
text-align: left;
overflow: hidden;
}
/* Header Styles */
#title {
margin: 0;
padding: 10px 0 0 237px;
font-size: 2.6em;
font-variant: small-caps;
}
#title a {
display: block;
float: left;
padding: 10px 25px 0 25px;
height: 55px;
/* background: #A79E45 url(images/title.gif) repeat-x;*/
color: #2C3101;
voice-family: "\"}\"";
voice-family: inherit;
height: 45px;
}
html>body #title a {
height: 45px;
}
#wrapper {
margin: -265px auto 0 auto;
width: 765px;
/* background: #eeffff url(images/wrapper.gif) repeat-y; */
text-align: left;
font-size: 0.92em;
}
#content {
float: right;
padding: 0 38px 0 23px;
width: 538px;
/* background: url(images/content.gif) no-repeat 100% 0; */
voice-family: "\"}\"";
voice-family: inherit;
width: 477px;
}
html>body #content {
width: 477px;
}
#sidebar {
float: right;
padding: 265px 15px 0 27px;
width: 227px;
background: url(images/sidebar.gif) no-repeat;
color: #445555 ;
font-size: 0.92em;
voice-family: "\"}\"";
voice-family: inherit;
width: 185px;
}
html>body #sidebar {
width: 185px;
}
* html #content, * html #sidebar {
overflow: hidden; /* For IE */
}
#footer {
clear: both;
/* background: url(images/bg.gif);*/
color: #000;
font-size: 0.92em;
position: relative; /* IE disappearing background fix */
}
/* Footer Styles */
#footer p {
margin: 0;
padding: 2em 0 1.8em 242px;
/* background: url(images/footer.gif) no-repeat;*/
}
* html #footer p {
padding-top: 1em; /* IE doubles top padding, reason unknown */
}
/* Sidebar Styles */
#sidebar ul {
margin: 0;
list-style-type: none;
}
#sidebar h2 {
margin: 0 -15px;
padding: 5px 0 0 15px;
height: 28px;
/* background: url(images/sidebarheader.gif) no-repeat; */
color: #212503;
font-size: 1.2em;
voice-family: "\"}\"";
voice-family: inherit;
height: 23px;
}
html>body #sidebar h2 {
height: 23px;
}
#sidebar h2 a, #sidebar h2 a:link, #sidebar h2 a:visited, #sidebar h2 a:active {
color: #212503;
}
#sidebar ul ul, #sidebar p {
margin: 0.6em 0;
}
#sidebar ul ul ul {
margin: 0;
}
#sidebar ul ul li {
padding: 0 0 0 15px;
• /*background: url(images/bullet.gif) no-repeat 0 0.55em;*/
}
/* Blog and Comments */
.post {
margin: 0 0 1em 0;
padding: 0.1em 0 18px 0;
/* background: url(images/divider.gif) no-repeat 50% 100%; */
}
.posttitle {
margin: 0.6em 0 0 0;
padding: 0 0 0.1em 0;
background: url(images/underline.gif) no-repeat 0 100%;
}
.postdate {
margin: 0.1em 0 1.2em 0;
color: #7C7D66;
font-size: 0.92em;
}
.postmeta {
}
.commentlist {
margin: 0 0 0 1.2em;
padding: 0 0 0.4em 0;
}
.commentauthor {
margin: 0;
padding: 0 0 0.1em 0;
background: url(images/underline.gif) no-repeat 0 100%;
font-size: 1.1em;
}
.commentauthor a {
text-decoration: none;
}
.commentdate {
margin-top: 0.2em;
color: #7C7D66;
font-size: 0.92em;
}
#comment {
width: 98%;
}
/* Widgets and Etc */
.widget_search div {
margin: 0.6em 0;
}
#sidebar #s {
margin-bottom: 2px;
width: 180px;
}
/* Calendar */
#wp-calendar {
margin: 0 0 1.2em 0;
width: 185px;
border: 1px solid #000;
background: #1E674E;/*#4E5706;*/
line-height: 1.2em;
text-align: center;
voice-family: "\"}\"";
voice-family: inherit;
width: 183px;
}
html>body #wp-calendar {
width: 183px;
}
#wp-calendar caption {
margin: 1.2em 0 0 0;
padding: 0.4em 0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
/* background: url(images/sidebarheader.gif) no-repeat 50% -2px;*/ /* This is what gave the calendar header its color */
color: #141112;
font-weight: bold;
}
#wp-calendar td {
border: 0;
border-collapse: collapse;
/* background: url(images/sidebarheader.gif) no-repeat 100% 0;*/
}
#wp-calendar td a {
display: block;
width: 100%;
}
#wp-calendar td.pad {
background: transparent;
}
#wp-calendar td#next, #wp-calendar td#prev {
padding: 0.1em 2px;
background: transparent;
}
#wp-calendar td#next a, #wp-calendar td#prev a {
display: inline;
}
#wp-calendar td#next {
text-align: right;
}
#wp-calendar td#prev {
text-align: left;
}
/* Added by Zak Greant for language menu in header */
ul.compact {
display: inline;
list-style: none;
padding: 0;
}
ul.compact * {
display: inline;
}
ul.compact li:before {
content: " | ";
}
ul.compact li:first-child:before {
content: "";
}
/* Theme Name: Appropedia's 13
Theme URI: https://www.appropedia.org/Appropedia%27s_13_theme_for_WordPress
Description: A fast-loading theme (lean code, low bandwidth) with a stylish, clean look. Two columns.
Version: 1.0
Author: Chris Watkins
Author URI: https://www.appropedia.org/User:Chriswaterguy
based on "Thirteen" by Becca Wei, http://beccary.com
*/
The following comments (added during the early hacking) have been removed:
/* Optimized for low bandwidth. Some elements moved to end. CWG -- Temporary notes (while editing the theme):
- Need to remove background gifs - will comment them out for now, but may be worth replacing with very lightweight gifs in suitable colors). Search for "background" and "gif"
Loband work:
- remove unnecessary commenting later. Blog on this as our "Loband Thirteen" theme, a contribution for the slow web.
Worked out:
- I think we want to replace sidebar.gif with our logo. I've changed it to logo.png
- The wrapper gif is the background just of the content. We want the whole blog background light or white.
- removing the sidebar.gif experimentally causes what's left of sidebar to disappear to bottom.
- #444444 is too dark gray for text links; #99bbbb grey-blue nice but too pale;
- bright blue-green #3DCE9C too light? so made it half as bright: #1E674E. Now doesn't stand out too much, but it's ok. use for visited links?
- bright one still too weak, so make unvisited #1E674E; and visited a mix of this and light grey - ie average of #1E674E and #727A7A = #48 70.8 64 ~= #487064. Difference not clear, so use more of a straight gray: #727A7A
- so now #3DCE9C is only used for hover on headers.
- #sidebar a:visited sidebar visited is paler, duller, than other visited links. So: #B3D9D3 with halved intensity becomes #596C69. But this is much like the unvisited links, so #596C69 is used instead. #E5E6C2. Hover background is made to one of the lighter grays, to be more readable.
- Same for footer, previously non-link text a super-pale #E5E6C2, changed to #596C69 and then to black #000 - as a non-link is greater contrast.
- sidebarheader.gif is a nice graduating color, left to right.
- will attempt to replace bullet.gif with a • - hasn't worked, so bullet points are just hanging.
- bright blue-green #3DCE9C too light? so made it half as bright: #1E674E. Now doesn't stand out too much, but it's ok. use for visited links?
Style questions:
- Do we want repeating gif in sidebar? behind sidebar content and/or below it?
Done so far:
- commented background gifs noticed no difference
- moved:
- theme info to end
- commented header (as test). Only removed very top image. Where's the other one?
- changed backgrounds:
- wrapper background #FFFFE3 to #eeffff - no noticable difference. Or is this just the
- text colors:
- after this code "#sidebar a:link, #footer a:link {"... I commented out old color #C79A65... and changed color to #000 (too dark) then to #445555 (still don't like it),
- changed #4E5706; to #99bbbb;/*#4E5706;*/ in several places. Only notices on search text box, calendar background.
- commented out divider.gif
- /
