93-Styles reference

The intention of this page is to have a handy reference of the colors, fonts, audio player appearance, and other components of the site so I can keep it looking more or less consistent.

At the moment I’m getting sort of bored with the default text font style which is like Times Roman or something. I’m about ready to plunge into some other fonts to see if they’ll work with the site and not screw up formatting everywhere.

This is the nice thing about CSS: I can make a change, have it affect the whole site, and if I don’t like it simply change it back.

At the moment, here are the simple header styles:

This is the “h2” header style

This is “h3” style

This is “h4” style (I don’t know what’s going to use any header this small!

Here’s what a link should look like in the main text:

Here’s a link to “http://crow-caw.com”

Here’s a table listing the colors for the main sections:

#header text color=#FFFF99 bg color= #336699
text color=#FFFF99
#menu text color=#336699 bg color= #CCCCFF
text color=#336699
#content text color=#CCCCFF bg color= #996666
text color=#CCCCFF
#sidebar text color=#ffff999 bg color= #336699
text color=#FFFF99

I’m still tinkering with the appearance of the sidebars. I probably will make it so links that have already been visited are in a somewhat darker color, but unvisited links will still be in “yellow” (color #FFFF99).

Audio players

These are changing all the time. I have a separate page for discussions about that. Briefly, WordPress supplies a very nice and usable one with their product. But there have been some new ones created; such as odeo, which have a certain amount of usefulness.

Here’s an example of what the default WordPress audio player should look like. The simple default flash player has a width of 290 pixels.

“The Horse You Rode In On” (har)
from “Songs in Work”
©2008 tim p scott
https://ccmw.files.wordpress.com/2009/01/tim_p_scott-5703-thyrio_160k.mp3%20
(click (triangle) to play)

Here’s what the HTML of the player alone looks like, so it can look consistent over all the pages. (NOTE: the box below is created with the wordpress “sourcecode” tag. Depending on your browser, it will probably look pretty crummy.

Choose “view plain” and it should display in another window that does wrap decently.)

<!-- This is what the wordpress.com audioplayer looks like -->

<!-- Replace "song_file_name" with the name of the file from the WordPress library for this blog.
(I presume you can replace everything from "http:" to "mp3" with the URL of a .mp3 file to play -->

<!-- "*** title ***" with the song title in double quotes -->
<!-- "*** album name ***" can be entered if desired -->
<table class="player" style="display:inline;" border="0">
<tbody>
<tr>
<td><strong>"***title***"</strong> "*** album name (if any) ***" ©2004 tim p scott</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>(click (triangle) to play)</td>
</tr>
</tbody></table>

Page#93 / last modified 20100201

Advertisements