Our Current CSS Sheet

If you have any recommendations to enhance readability, and know your CSS, we’d appreciate your help! The current sheet is below the line:

body {
position:relative;
background:#333;
height:100%;
font-family:georgia;
color:#000;
font-size:9.5pt;
text-align:center;
margin:0;
padding:0;
}

#wrapper {
position:relative;
height:100%;
width:700px;
border-left:10px solid black;
border-right:10px solid black;
background-color:#000;
margin:0 auto;
}

#insideWrapper {
position:relative;
top:0;
height:100%;
width:700px;
background-color:#fff;
text-align:left;
margin:0;
}

#insideWrapper:after {
content:”.”;
display:block;
line-height:1px;
font-size:1px;
clear:both;
}

.post,.page {
position:relative;
top:0;
width:420px;
left:0;
background-color:#fff;
text-align:left;
overflow:hidden;
margin:0;
}

.sticky {
border:2px solid #333;
padding:10px;
}

#content {
width:420px;
margin-left:250px;
background-color:#fff;
text-align:left;
}

#sidebar {
position:relative;
float:left;
width:180px;
left:40px;
background-color:#fff;
text-align:left;
font-family:Arial;
color:#000;
font-size:7.5pt;
line-height:11pt;
text-transform:none;
padding:0;
}

#sidebar p {
text-transform:none;
margin:4px 0;
}

.left {
float:left;
margin:0 10px;
}

.right {
float:right;
margin:0 10px;
}

#masthead {
position:relative;
top:0;
background:url(‘https://acandidworld.files.wordpress.com/2009/06/republicrestoredbenevolencenew.jpg’);
width:700px;
height:225px;
margin:0;
}

.centeredImage {
text-align:center;
margin-top:10px;
margin-bottom:0;
padding:0;
}

#footer {
font-size:7pt;
position:relative;
color:#fff;
top:5px;
width:700px;
text-align:center;
margin:5px 0 0;
}

#footer a {
color:#fff;
}

#footer a:visited {
color:#fff;
}

#footer a:hover {
color:#ff3333;
border:0;
}

.sep {
position:relative;
background:url(‘images/sep.jpg’);
width:162px;
height:14px;
left:132px;
text-align:center;
margin:0;
padding:0;
}

#sidebar a {
color:#000;
}

#sidebar a:visited {
color:#000;
}

#sidebar a:hover {
color:#999;
}

.commentBox {
position:relative;
width:90%;
background-color:#f5f5f5;
text-align:left;
border:1px solid #999;
margin:0 auto;
padding:5px;
}

.commentBox .avatar {
border:1px solid #ccc;
float:right;
margin:0;
padding:2px;
}

#respond textarea {
width:99%;
}

.cite {
font-size:7pt;
color:#666;
}

code {
font-family:Courier New, Verdana;
text-align:left;
color:#666;
font-size:8pt;
}

input {
border:1px solid #333333;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#000000;
padding:0;
}

h2 {
color:#666;
font-size:14px;
text-align:left;
}

#sidebar ul {
margin-top:0;
margin-left:0;
margin-bottom:0;
padding-left:0;
}

#sidebar li {
margin-left:0;
}

#sidebar .widget_categories li ul li {
margin-left:15px;
}

blockquote,blockquote p {
text-indent:0;
margin-bottom:7px;
color:#666;
}

.footerLink {
color:#666;
text-decoration:underline;
}

a.footerLink {
color:#666;
text-decoration:underline;
}

a.footerLink:visited {
color:#666;
text-decoration:underline;
}

a.footerLink:hover {
color:#999;
text-decoration:underline;
}

.title,#sidebar h2 {
font-family:’Arial Black’;
color:#333;
font-size:7.5pt;
text-transform:uppercase;
font-weight:normal;
margin:14px 0 0;
}

a.title {
color:#333;
font-size:12pt;
}

a.title:visited {
color:#333;
}

a.title:hover {
color:#999;
border:0;
}

#blogTitle {
position:relative;
top:50px;
left:20px;
font-family:’Arial Black’;
font-size:7.5pt;
text-transform:uppercase;
text-align:right;
}

#blogTitle a {
color:#333;
}

#blogTitle a:visited {
color:#333;
}

#blogTitle a:hover {
color:#ff3333;
border:0;
}

.commentPos {
font-family:’Arial Black’;
font-size:7pt;
position:relative;
text-align:center;
text-transform:uppercase;
clear:both;
margin:0;
padding:0;
}

a.commentPos {
font-family:’Arial Black’;
color:#ff3333;
}

a.commentPos:visited {
color:#ff3333;
}

a.commentPos:hover {
color:#000;
border:0;
}

a {
color:#ff3333;
text-decoration:none;
}

a:visited {
color:#ff3300;
text-decoration:none;
}

a:hover {
color:#394651;
text-decoration:none;
border-bottom:1px dashed #394651;
}

#sidebar a img {
border:0;
}

img.centered,img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

img.alignright {
display:inline;
margin:0 0 2px 7px;
padding:4px;
}

img.alignleft {
display:inline;
margin:0 7px 2px 0;
padding:4px;
}

.alignright {
float:right;
}

.alignleft {
float:left;
}

.aligncenter,div.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

.wp-caption {
border:1px solid #ddd;
text-align:center;
background-color:#f3f3f3;
padding-top:4px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:10px;
}

.wp-caption img {
border:0 none;
margin:0;
padding:0;
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

Advertisements

11 comments

  1. i’ve made the executive decision to revert back to georgia (the font from the old site) 9.5 pt.

    (feel free to override.)

  2. Gotchaye · ·

    I’m just starting to dig in to CSS (got drafted to put together a website for my lab), but it seems to me that the site is unusually narrow. If I maximize the window, well more than half of my screen (laptop widescreen) is just gray. It looks to be about 3/4 the width of the NYT’s front page, for example. I’m also very glad that you moved away from the three-column style (Marie expressed gratitude too).

  3. Gotchaye · ·

    Oh, also I would find it helpful if you could get color-coding on the sidebar. Particularly in the Marketplace, there’s just a lot of black text. I’d like it if I could pick out comment authors and comment threads at a glance.

    Clearer authorship in general would be nice. This post doesn’t have an author at all, and the post above it announces ‘Author – ACG’ as something like a tag. Likewise for the comments – I’d like more emphasis on the name of the commenter and, if possible, for the name of the commenter to be above the body of the comment rather than below.

    Perhaps something more like:

    Gotchaye [weird little blue and white icon]

    body
    of
    comment

    June 6, 2009 @ 9:20 pm
    Reply

  4. To answer Gotchaye’s comment, a lot of WordPress themes have fixed widths. That may be the case with this one.

    As for colors, the code looks a little weird. Usually web colors are 4 digits.

    1. Mike, may I ask why your icon was changed to Snidely Whiplash? I just don’t see the connection between “Mike of Progressive Conservative” and “evil person with villainous mustache”.

      1. Sure ya do… evil conservatives are evil? Also I have to say I like the icon. Very funny and tongue-in-cheek.

      2. Thanks for the compliment RA! Ames is correct. I just figured since everyone thinks us conservatives are evil, why not just play to the sterotype? (Plus I always loved him on Dudley Do-Right.)

    2. I meant 6 digits.

  5. the color codes are abbreviations. when the codes are simply six of the same characters, like white is #ffffff, the code truncates to #fff. similarly, the grays are #333 and #ccc rather than #333333 and #cccccc.

  6. First and foremost, pump your content up to 1.5 line spacing. That makes it easier to read (and since the content is the focus of the site, it benefits most from this).

    #content {

    line-height: 1.5;
    }

    Second, put a margin on the bottom of each list item in the sidebar, separating each link inside the Marketplace and the archives, etc.

    #sidebar li {

    margin-bottom: 0.5em;
    }

    Finally, your tag cloud is almost illegible. Try adding some space.

    #wp_tag_cloud {
    line-height: 15pt;
    }

    #wp_tag_cloud a {
    margin: 0 0.2em;
    }

    If you’re feeling daring, you can try and make the tag cloud not so garish until you actually want to use it…

    #wp_tag_cloud a:link, #wp_tag_cloud a:visited {
    color: #999;
    }

    #wp_tag_cloud a:hover, #wp_tag_cloud a:active {
    color: #333;
    }

    1. Jack, you’re awesome. I think I may have to do that.

%d bloggers like this: