WordPress ‘Twenty-Ten’ theme modifications

While the new WordPress 'Twenty-Ten' default theme is really nice with a lot of great customization features built-in, it does lack yet in some areas.  Some of these, however, can be futzed with, and others just aren't obvious.  I'll recount here some of what I've learned. 

On update, Nov 2010:  Please note that the recommended officially supported way to make Twenty-Ten theme changes is through the use of Child theme overrides.  There's lots of information on how to do this at the WordPress site.  When I get a chance, I plan to fold all of my overrides into a new style.css file and implement it as they say it ought to be done.  The problem with doing them as I and others in this comment thread here have outlined is the changes will be overwritten if you ever update the theme to a new version, and could also be messed up by future WordPress updates.

Update 19 Dec 10: I'm closing comments on this thread.  As I mentioned in the comments, the official WordPress recommendation now is to use Child themes to override the Twenty-Ten settings, and the online documentation for doing this is reasonably okay.  Mainly, I didn't want folks to be leaving comments in my pending moderation queue, which I may not get to for weeks at a time.  Thanks for stopping by.

Header photos

While the WP Dashboard controls for picking, uploading, and cropping a photo to put up in the banner are easy, there does not appear to be any way to pick from the header pictures you've already uploaded — not for the main page anyway.  However, on the main WP dashboard, in the lower right corner, is a control labeled "Featured Image."  From there you can set a custom header picture on any given Page or Post.

However, I've noticed that Featured Image only works if the graphic is exactly 940×198 pixels in size.   The good news there is every image you might have used with WP's header function is still there in your Media library.  You can access it by selecting the Media Library tab on the Set Featured Image control, or through the Library function over on the Media controls (left side, just under Posts).

Background images

Alas, you only get one, and by default it tiles.  If you're using a low pixel count picture, it'll look odd — unless the repetition is something you like.  For me, I wanted to use my old Boulder Creek Sunset photo (the one that used to be featured in my blog's template up until a few weeks ago).  Given that all I really wanted was the color, I took the original and recropped to 1600×1200.  If you scroll down on the page, it's pretty obvious when the photo repeats, but it's not as distracting as seeing it 3 or 4 times on a single display page.  If I get creative, I might see if there's a way I can crop and blend to make it totally seamless.

Page color and font size changes

To change the page color from the default white and the displayed text size, I had to go digging deeper, and manually edit the Stylesheet (style.css).  The Editor is located under 'Appearance' in the Dashboard.  Note: If you mess these up beyond recollection or recognition, you may need to reinstall the theme.

To change the general page background color, find the section labeled 'Structure'.  A short way down is this:

#wrapper {
   margin-top: 20px;
   background: #fff;
   padding: 0 20px;
}

Even though it's just three characters, "fff", you can use the full six character HTML color code.  I changed my background value to "faf0e6" — making it a kind of off-white.  There's a great HTML color chart HERE.

Next thing I messed with was my 'site-title,' changing the color from black to dark red and adding the italic font style.

#site-title a {
    color: #990000;
  font-weight: bold;
    font-style: italic;
  text-decoration: none;
}

To alter the font size, as I did (I found it too large and the spaces between paragraphs too big, I found the section labeled "Content".  The code is thus:

#content textarea {
    color: #333;
        font-size: 15px;
        line-height: 22px;
}
#content p {
        margin-bottom:  8px;
}

I believe originally the font size was 16px — I reduced it to 15.  I also took down the line height — the spacing of lines inside a paragraph — to a more reasonable 22px.  You can mess with these if you like, but try to remember what they were.  But this still left spaces between paragraphs too big.  I noticed then that the "content p" parameter had no settings, so I inserted the standard override command "margin-bottom" and set it to what I wanted, which is about half a line between paragraphs.  I also went down to .entry-utility to alter the line spacing between the end of the post and that 'Posted by' summary.

Another change I made was the "Posted On" and "Posted in" lines.  I wanted them spaced better.  So I found the .entry-meta section and decided I wanted my 'meta' information there appearing right aligned, so as not to grab the eye when reading:

.entry-meta {
    color: #888;
    font-size: 12px;
        text-align: right;
}

And found the .entry-utility section and added the right alignment and some padding there, too:

.entry-utility {
    color: #888;
    font-size: 12px;
        text-alignment: right;
       padding: 6px 0 0 0;
    clear: both
}

I've made some other modifications to the CSS and to Loop.php (to get the horizontal line to display between posts — but that's getting pretty deep into the code, plus I didn't like the way the headers were formatted (font, spacing), so I changed those as well.  New header styles:

Header 1

Header 2

Header 3

Header 4

Anyway, thought this might be of help to anyone wandering by…

(BTW, as of 19 Dec 10, I'm closing comments on this thread.  As I mentioned in the comments, the official WordPress recommendation now is to use Child themes to override the Twenty-Ten settings, and the online documentation for doing this is reasonably okay.  Mainly, I didn't want folks to be leaving comments in my pending moderation queue, which I may not get to for weeks at a time.  Thanks for stopping by.)

About Becca

Owner and proprietor of this here establishment
This entry was posted in Just stuff, Technology. Bookmark the permalink.

74 Responses to WordPress ‘Twenty-Ten’ theme modifications