Sans-serif Racer — WordPress Theme
Updates
Customization
Added information about how to make this a two column theme with a wider main content and only one sidebar column.
Download & Demo
Version: 0.4 (Changelog)
Released: January 15, 2008
Author: Kaspars Dambis
Downloaded 975 times
Requirements
A version of WordPress 2.2 or higher which supports widgets and tags.
Suggested Plugins
Note: The following plugins are not obligatory, but they increase usability and functionality of your blog.
- Filosofo Comments Preview. Requires no configuration and uses the default comment style when previewing a comment.
Installation
- Unzip the file you downloaded.
- Upload it to your themes folder
wp-content/themes/ - Enable Sans-serif Racer theme under
Presentation > Themesin your Wordpress administration panel. - Put the widgets into appropriate sidebar fragments, go to
Presentation > Widgets. Each panel has different visibility and optimal use - view the suggested widget placement). - Save your widget placement.
- Thats all, now take a look at your new design.
Features
Page title different from the corresponding menu item
For example, you want the title of your About page to be About the author while still having About in the main menu.
- Open your about page for editing. Put About in the title field - it will be used for menu item.
- Add a custom field with key equal to
title, and value equal to the title you want to see on the page, in this case About the author.
Placing images inside blog posts and pages
All images are floated to the right by default. This can be changed by adding different CSS classnames to the image.
Simple image placement
First, remember the simple notion: a, b, c, where a = left, b = center, c = right.
- For aligning left add
class="img-a"to<img src="" />, and you get<img src="..." class="img-a" />. - For aligning right add
class="img-c".
More advanced image placement
- If you want to place the image in a center of a blog post, put it into additional
<div>tag, like this:<div class="image wide"><img src="..." /></div>. Classimageis required for all images (for captions and additional styling to work). Classwideplaces the image in a center. - If you want to add a caption, simply put it into
<p>tag just under the image but before the closing</div>tag, like this:<div class="image wide"><img src="..." /><p>Caption of an image</p></div>. - If you want to align the image with caption to the right or left, simply use additional classnames to the image wrapper
<div class="image restofclassnames">. - For aligning left use
<div class="image img-a" style="width:200px;"><img src="..." /><p>Image caption</p></div>where200pxis the width of your image plus a few additional pixels, for example 20px. - For aligning right use
<div class="image img-c" style="width:200px;"><img src="..." /><p>Image caption</p></div>
All of the available CSS classes for image placement
These classnames should be applied to the image wrapper <div>, like this: <div class="image restofclasses"><img src="..." /><p>Caption of an image</p></div>.
margin:0.5em 0 1em 0;
}
div.image p {
width:90%; clear:both;
font-size:0.88em; margin:0;
}
div.image img {
margin:1em 0;
}
div.img-c {
float:right;
margin-left:1em;
}
div.img-c p {
text-align:right;
float:right;
}
div.img-c img {
float:right;
}
div.img-a {
float:left;
margin-right:1em;
}
div.img-a p {
text-align:left; float:left;
}
div.img-a img {
float:none;
}
div.wide {
margin:1em auto 1.5em; clear:both;
width:100%; text-align:center;
overflow:hidden;
}
div.wide p {
width:70%;
margin-left:auto; margin-right:auto;
}
div.wide img { float:none; padding:0; }
div.wide a:hover img {
border-color:#ddd; background:#fff;
}
div.withframe img {
border:0.7em solid #eee;
}
div.type1 img {
padding:0.5em; border:1px solid #ccc;
}
div.type2 img {
padding:0.5em; border:3px double #ccc;
}