Playing with WP rubric theme

postpic_20090116_rubric2In which I take a first crack at selecting a WordPress theme, briefly try out “Silver is the new black”, move on to Rubric, conclude that the CSS upgrade is probably essential, and start fiddling.  And also save my Rubric CSS additions, for future reference.

As a first crack at gaining control of the layout of a WordPress blog (as fielded at wordpress.com), I followed this line of reasoning:

1. I think I need a flexible-width theme, because I’ll be wanting to post content that may be wide, and thus need to be viewed in as wide a window as possible. That already trims down the theme offerings from 64 to 9.  And of those only 4 have a single sidebar (total 2 columns).  I’m making the working assumption that fixed-vs-flexible is the first choice to make, because I’m assuming that this is the choice that most drives the logic that the theme happens to have, and least overridable by CSS.  (However, I do note on the “Edit CSS” page there’s a Limit content width to [ ] pixels option where flex themes have that set to zero: I wonder if zero causes the theme to be non-fixed-width, in which case maybe there’s some hope for the nominally fixed themes). Commence prodding and poking…

2. I thought I should try the less committed-to-particular-look themes first, so I tried “Silver is the new black”, but found that the font (ie: the CSS) for the “Recent Comments” widget is broken: ugly all caps that makes no sense in that widget.  [I later discovered that several themes have hosed up text styles when displaying  the “recent comments” widget, in general because the overall sidebar unordered list has some unwieldy style in the theme’s CSS that most widgets overrride, but not “recent comments”].   In any case, I wanted a picture in the header, sooo…

3. I arrived at rubric. The pen in the default picture looks nicely positioned, but sadly the overall position of the picture is visually not very satisfactory if you substitute a different picture, especially if it doesn’t have white background. Arrrg.

Tentative conclusion… I needed to pony up for the CSS upgrade. Which I did.

4. Now to fiddle with rubric. So far I’ve made numerous adjustments to spacing of text displayed by widgets, revised the comments, and given it an across-the-top background image (replacing the pen).

5. But after all that I discover that the theme doesn’t spit out html for the tagline anywhere.  This appears to be a show stopper for this theme.  I have seen in the Forums that one can fake a tagline by adding a Text Widget, and then by some combination of cooperating html and css you can get the widget to position where you want the tagline. But that relies on positioning that not all browsers implement consistently, and which may in any case not be consistently suited to each kind of page that WP can produce (as others have discovered).

Bottom line:  rubric is probably not sufficiently general to go where I want.

But, for my future reference, here’s my rubric CSS additions so far:

[Edit 2009-02-20]

p,td,th,li {
font-size:11px;
line-height:1.5em;
}

#header {
width:100%;
height:125px;
top:1px;
padding-top:40px;
padding-left:45px;
padding-right:20px;
background:url('https://grahamwideman.files.wordpress.com/2009/01/header_clouds_012.jpg') no-repeat left top;
}

#header a {
border-style:none;
}

#menu h2 {
line-height:1em;
margin-bottom:.3em;
margin-top:1em;
}

table.recentcommentsavatar {
font-weight:normal;
font-size:.8em;
}

#commentlist {
font-size:.8em;
}

#commentlist li {
border-top:thin solid #CCCCCC;
}

#content h1 {
font-size:2em;
font-style:bold;
color:#666;
margin-bottom:0;
margin-top:0;
}

#content h2 {
font-size:1.5em;
font-style:bold;
color:#666;
margin-bottom:0;
margin-top:3pt;
}

#content h3 {
font-size:1.2em;
font-weight:bold;
color:#666;
margin-bottom:0;
margin-top:3pt;
}

#content > h2 {
font-size:1.5em;
font-style:bold;
margin-bottom:0;
margin-top:0;
color:#b0b0b0;
}

.storytitle a {
font-size:1.5em;
font-style:bold;
margin-bottom:0;
margin-top:0;
}

.possibly-related {
color:#00FF00;
display:none;
}

.possibly-related ul {
display:none;
}

.possibly-related a:link {
color:#00FFFF;
visibility:hidden;
}

.possibly-related a:visited {
color:#00FFFF;
visibility:hidden;
}

.gwcell {
font-family:sans-serif;
font-size:8pt;
}

.bogus01 {
font-family:sans-serif;
}

pre {
font-size:9pt;
}

#content img {
border-color:#CCCCCC;
border-style:solid;
border-width:5px;
margin:3px;
padding:4px;
}
================
Advertisements

2 Comments

  1. Posted 2009-01-16 at 10:51 am | Permalink | Reply

    Just a test to see what the commenting procedure is.

  2. Posted 2009-01-16 at 10:53 am | Permalink | Reply

    A second comment, again with no apparent spam blockage…

Post a Comment

Required fields are marked *

*
*

%d bloggers like this: