[Updated Mar 10, 2010] Okay, so we’re really getting technical here. This is a WordPress-powered blog and the theme is “2010.” WordPress allows for child themes, which modify the parent theme. I’ve created a child theme to tweak a few things:
- Put the menu at the top of the masthead
- Decrease the font size and spacing for posts
- Darken the text in the image captions
- Reduce the spacing between paragraphs a bit
- Fix the table on the “Where to Ride” page so the borders are stronger and there’s not so much white space. This allows more info in the table, yet it still looks nice.
- Reduce space between masthead and first post
- Reduce space after captioned images
- Reduce space between posts
How did I do this? Google’s Chrome browser comes with a built-in tool that examines the formatting carefully and tells you exactly where it comes from. Right click on anything on a page and then click “Inspect element.” You get a whole bunch of stuff at the bottom of the page, but a little work shows exactly which element in style.css (or in this case, my child’s style.css) performs the formatting. That makes it easy to find in the parent style.css. From there I copy to the child style.css and make my changes. Really slick!
For those interested, here’s the code in the child theme:
/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme
Author: David Casler
Template: twentyten
Version: 0.1
*/
@import url("../twentyten/style.css");
/* Moves menu to top of the picture rather than at the bottom. The -margin- figure
controls space between blog title and the picture and menu */
#header #access{
top: -240px;
position: relative;
}
#site-title {
margin:0 0 44px;
}
/* tweaks margins -- change padding at top from 40px to zero */
#main {
clear: both;
overflow: hidden;
padding: 0 0 0 0;
}
#content {
margin-bottom: 5px;
}
/* Sets the text color, font size, and line height for text in posts */
#content,
#content input,
#content textarea {
color: #333;
font-size: 14px;
line-height: 20px;
}
/* sets the header styles for content -- not sure this does anything */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
color: #000;
line-height: 1.5em;
margin: 0 0 10px 0;
}
/* attempt to reduce space between posts on main page was
0 0 48px 0 note that zero overachieves bottom set to 30px
seems about right */
.hentry {
margin: 0 0 30px 0;
}
/* attempt to reduce space between post title and the text
was 12px now 6px yep, works */
.entry-content,
.entry-summary {
clear: both;
padding: 6px 0 0 0;
}
/* this is for tables, clarified to make lines darker and less padding on text
in content table the border is the border around the entire table
changed from 1px to 3px, and between lines from 1px to 2px
colors darkened a bit
content tr td is border between rows
changed all padding from 24px to 10px -- ah much better*/
#content table {
border: 3px solid #aaaaaa;
margin: 0 -1px 10px 0;
text-align: left;
width: 100%;
}
#content tr th,
#content thead th {
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 10px;
}
#content tr td {
border-top: 2px solid #bbbbbb;
padding: 6px 10px;
}
#content tr.odd td {
background: #f2f7fc;
}
/* attempt to reduce space after image caption from 24 to 14
also reduces space between paragraphs. 14 seems a good
balance */
#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr {
margin-bottom: 14px;
}
/* reduces margin at bottom of a captioned image from 20 to 0 */
.wp-caption {
background: #f1f1f1;
line-height: 18px;
margin-bottom: 0;
max-width: 632px !important; /* prevent too-wide images from breaking layout */
padding: 4px;
text-align: center;
}
/* image caption text color changed from 888 to 555 -- much
better - can read now */
.wp-caption p.wp-caption-text {
color: #555;
font-size: 12px;
margin: 5px;
}