91-The current CSS stylesheet

The current version of the stylesheet as of 30 Oct 2009 is 29.

Unfortunately, the WP.com dashboard stylesheet editor quietly removes all commenting and formatting. That’s sort of a drag. Actually it’s a big drag. But one can see why they might do that.

So the approach we’re taking here is to keep a “master” CSS file around with comments for reference. After making changes to the master, the text is highlighted and copied into the CSS Editor gadget on the WordPress Dashboard.

It would be nice if you could nest CSS stylesheets, or if you could enter a command that points to a stylesheet in another URL, like you can with an image, but it’s likely WP.com won’t allow that, for security reasons.

The current stylesheet is stored in the site’s Media Library. However, since you can’t upload a plain text file (?!) it’s in there as an OpenOffice document. Allow me to digress here and recommend OpenOffice for anyone who can’t or doesn’ want to pony up the big $$ for Microsoft’s Office programs (Word, Excel, etc.)

In any case,  here’s the current version of the style sheet (in ODT text format) In case you’re interested. Especially if you use wordpress.com and particularly if you use the Sandbox template…

Using the “shortcode” to put code into a page (see the “support” area if you’re a wp.com subscriber), here’s what a CSS style sheet looks like when embedded into a page (warning; it’s sort of long, almost 600 lines with comments and all):

/*
*	stylesheet-29.odt
*
*	Date 20091030
*
*	This .odt version of the stylesheet has comments in it
*	which are stripped out by wordpress. So make changes in this
*	file and paste it back to the wordpress CSS box. The
*	commented .odt file can be uploaded into the media library
*	and referred to on the CSS Stylesheet page.
*
*     v29:  Since the sidebar on the right is getting too long,
*           for now I'll just use a hack lick .page-item-852
*           {display: none} until I figure out a new design for
*           the site that will allow you to get to everything
*           It dawned on me that there probably ought to be an
*           index page which lists all pages, and the sidebar
*           only a selection of the most popular.
*     v28:  The last version had sidebar height problems; I just
*           forced them both to be 750px for now
*     v27:  I'm trying to get that gray "#footer" shrunk down
*     	vertically somewhat... the problem is that the CSS
*		change looks different in different browsers - again.
*	v26:  The right hand sidebar needs to be shortened—it
*		seems to automatically extend...
*	v25:  just added the “alignright” class style
*	
*	(...still haven't figure out how to make it look exactly the 
*	same on all browsers...)
*/

body {
font-family:Verdana,Tahoma,Georgia,Times,'Times New Roman', 
'Trebuchet MS'sans-serif;
text-align:left;
margin:0;
}

img {
border:solid 1px #999;
margin:5px;
padding:5px;
}

img#wpstats {
position:absolute;
top:-99px;
}

#wrapper {
width:1000px;
height:100%;
background:#966 0 repeat-y;
clear:both;
overflow:hidden;
font-size:11px;
border-left:solid 2px #000;
border-right:solid 2px #000;
margin:auto;
padding:0;
}

div#header {
border-bottom:solid 3px #ffc;
background:url('http://ccmw.files.wordpress.com/2009/01/oval-crow-caw-4.png') no-repeat;
background-position:20px 9px;
background-color:#369;
text-align:center;
height:175px;
width:1000px;
display:block;
overflow:hidden;
margin:0;
}

#blog-title {
font-size:4em;
margin:10px 12px 2px;
}

#blog-title a {
text-decoration:none;
}

#blog-description {
font-weight:bold;
font-size:2em;
margin-right:10px;
}

#blog-title,#blog-title a,#blog-description {
font-family:arial, helvetica, sans-serif;
text-align:right;
color:#cff;
}

div#access {
background:#ccf;
height:40px;
}

#menu {
font-size:1.2em;
width:1000px;
height:40px;
background:#CCF;
clear:both;
border-bottom:solid 3px #ffc;
margin:0;
}

/*	The next clause positions the top level menu boxes.
	Unfortunately, in IE7 this doesn't look right, although
	in Google Chrome, Firefox and IE8 it does,,,
	margin: 0 works the best in IE7
*/

#menu ul {
width:1000px;
margin:0 0 0 -35px;
}

#menu ul li {
color:#966;
display:inline;
float:left;
text-align:center;
background-color:#099;
height:20px;
width:100px;
margin-top:7px;
margin-bottom:0;
margin-left:22px;
}

#menu ul li a {
color:#CFF;
display:inline;
float:left;
border:2px solid #369;
background-color:*ADD8E6;
text-decoration:none;
height:16px;
width:96px;
}

#menu ul li a:hover {
color:#369;
background-color:#FF9;
}

#menu ul li ul li {
display:none;
visibility:hidden;
}

#menu ul li ul li a {
display:none;
visibility:hidden;
}

/*
*     Turn off the Mozart book review page item in the rh
*     sidebar. (I wonder how good of a hack this is. Will
*     that page/post # change from 852 some day? It would
*     be nice if wordpress allowed you to enter a class or
*     id for pages so CSS could pick it up.)
*/

.page-item-852 {
display: none
}

/*	The next clause creates some fancy highlighting of the 
*	current page in the right hand sidebar.
*/
.current_page_item,#menu ul li.current_page_item a {
color:#966;
font-weight:bold;
border:thin solid #369;
background:#FFFF99;
}

.current_page_item ul li a {
border:solid 1px #369;
background:#FFC0CB;
}

.sticky .published {
display:none;
}

#content h2.entry-title {
color:#800080;
background:#ff9;
font-size:1.5em;
line-height:140%;
border:thin solid #369;
margin:0 0 15px;
padding:0 0 5px 10px;
}

div#content h2.entry-title a {
text-decoration:none;
color:#800000;
}


#container {
background-color:#099;
width:100%;
float:left;
clear:both;
overflow:hidden;
}

#content {
background-color:#966;
line-height:150%;
width:572px;
height:750px;
overflow:auto;
color:#ff9;
border-right:3px solid #ffc;
border-left:3px solid #ffc;
margin:0 0 0 202px;
padding:10px;
}

#content h1 {
color:#FF9;
font-size:1.8em;
}

#content h2 {
color:#FF9;
font-size:1.6em;
margin:0 0 15px;
padding:0;
}

#content h3 {
font-size:1.2em;
margin:0 0 15px;
padding:0;
}

#content h4 {
font-size:.9em;
margin:0 0 15px;
padding:0;
}

#content a:link {
color:#FF9;
text-decoration:underline;
}

#content a:hover {
font-weight:bold;
color:#FF9;
text-decoration:underline;
}

#content a:visited {
color:#CFF;
text-decoration:underline;
}

#content pre,#content code {
font:normal 1.2em 'Lucida Console','Courier New', Courier, Fixed, monospace;
color:#CCC;
}

#content pre {
border:solid 1px #000;
font-size:12px;
overflow:auto;
width:520px;
height:200px;
margin:5px 15px;
padding:5px;
}

#nav-above {
display:none;
}

#nav-below {
clear:both;
overflow:hidden;
margin:20px auto;
}

#primary,#secondary {
overflow:hidden;
width:180px;
background:#099;
color:#ff9;
padding:5px 10px;
height: 750px; /* added in v28 and reorganized #primary and #secondary */
}

#primary {
float:left;
margin:0 0 0 -1000px;
}

#secondary {
float:right;
margin:0 0 0 -200px;
}

#primary h3,#secondary h3 {
color:#ff9;
text-align:center;
font-size:1.2em;
margin:10px auto 5px;
padding:0;
}

#primary a,#secondary a {
text-decoration:none;
}

#primary ul,#secondary ul {
margin:0;
padding:0;
}

#primary ul li,#secondary ul li {
list-style-type:none;
}

#secondary ul li a {
border-width:thin;
}

#secondary ul li ul li a {
border:none;
}

#pages,#categories,#archives,#search,#meta,.linkcat,.widget {
border-bottom:dotted 1px #ccc;
padding:0 0 10px;
}

.textwidget {
color:#FF9;
}

/*	“display:none” turns off a bunch of elements we don't care
	about, such as blog comments (which this site does not use)
 	etc.
*/
.meta h3 {
display:none;
}

#rss-links {
display:none;
}

#search {
display:none;
}

.skip-link {
display:none;
}

.cat-links,div.entry-meta > span.meta-sep {
display:none;
}

.comments-link {
display:none;
}

#wp_tag_cloud a:hover,#tag_cloud a:hover {
text-decoration:underline;
}

#wp-calendar {
margin:auto;
}

#archives select {
width:170px;
height:auto;
overflow:hidden;
}

#archives select,#archives option {
border:solid 1px #999;
background:#777;
color:#DDD;
font-size:90%;
}

#footer {
clear:both;
height:35px;
text-align:center;
background:#717171;
border-top:solid 2px #999;
border-bottom:solid 1px #333;
color:#FFF;
margin:0;
padding:10 0 0 0;
}

#footer a {
color:#e9dfc6;
}

.post {
clear:both;
overflow:hidden;
border-bottom:dotted 1px #CCC;
margin:0 0 20px;
padding:0 0 20px;
}

.entry-meta {
font-size:85%;
padding:5px;
}

.entry-date {
margin:-10px 0 15px;
padding:0;
}

.entry-date .published {
border:none;
font-size:95%;
}

.edit-link a {
color:#FFC0CB!important;
}

.wp-smiley {
border:none;
margin:0 4px;
}

.nav-previous {
float:left;
}

.nav-next {
float:right;
}

.nav-previous,.nav-next {
margin:5px 2px 10px;
}

.form-textarea textarea,.form-submit input {
border:solid 1px #999;
background:#777;
color:#ddd;
}

.unapproved {
background:#FFFBCC;
border:solid 1px #E6DB55;
display:block;
margin:5px;
padding:5px;
}

.comment .avatar {
float:left;
margin:0 5px 5px;
}

.comment .fn {
float:left;
display:block;
margin:5px 10px 0;
padding:0;
}

html > body .comment .fn {
margin:20px 10px 0;
}

.bypostauthor {
background:#f2f0ec;
}

.xoxo {
border:none;
overflow:hidden;
}

.xoxo ul {
list-style:square outside!important;
}

.xoxo .children,.xoxo .blogroll {
border:none;
}

.children {
padding:0 2px 5px 5px !important;
}

table {
table-layout:fixed;
}

td {
border:solid 1px #999;
margin:5px;
padding:5px;
}

table.submenu {
text-align:left;
}

/*
	The following are some experimental entries to try
	to create a horizontal menu without using <table>
	Again it doesn't work the same on different browsers and
	the only solution might be to go back to tables for all
	Page menus again.
*/
ul.submenu {
border:solid 1px #999;
float:left;
width:100%;
list-style-type:none;
background-color:purple;
margin:0;
padding:0;
}

ul.submenu a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
border-right:1px solid white;
padding:.2em .6em;
}

/*
	Here are some entries for the cool in-page player widgets
	It gives more control to use them within tables
	(The player seems to have an inherent width of about 265 – 275
	px)
*/
table.player {
border-collapse:collapse;
border:thin solid #CCFFFF;
width:265px;
}

table.player * td {
background-color:#336699;
border:none;
}

object#audioplayer1 {
width:250px;
}

.noborder * td,.noborder * img {
border:none;
}

blockquote {
background:#fcfc;
font:normal 95% Geneva, Verdana, Helvetica, sans-serif;
color:#88;
padding:5px 10px;
}

blockquote p {
margin:0;
}

div#sidebar_list {
color:#90EE90;
list-style-type:decimal!important;
}

/*
	Not sure I ever got this to work the way I wanted.
*/
.square-box-bullets {
list-style-type:square;
}

Page#91/ last modified 20091030