Special Styling Posts Through "Class" Styling

Special Style Your Wordpress Theme Like a Tumblelog

If you're new here, you may want to subscribe via -or-

I’ve tweaked my theme from this:

Simplr by Scott Wallick

To this:

Simplr as tweaked by Riley

This is getting to be a familiar ritual. When I change themes I have to extend the name character limit to accomodate my good friend’s long name: Jessica the Rock Chick. Most themes come out of the box with 20 charcater limit so I have to go in and make it 30. I hope she knows I am not bothered by this in the slightest. It serves as a great example though of how much is really invloved when you see me change a theme.

Every time I change themes I have to adjust many other things beside name character limits in comments. things. I’ve tried and tried but there is absolutely no theme out there that does what I want and need without a good amount of tweaking. A friend Nick Mercer asked me once, “Have you considered making your own theme?” The answer is yes and I have made several themes. I don’t offer them for download because frankly, they aren’t that innovative. You can get the same out there far more styled and strongly built. That’s why I work with simple themes and tweak them to “make them my own.” For example: The latest theme here at my blog is called Simplr, here are the credits directly from the CSS stylesheet:

/*
THEME NAME: Simplr
THEME URI: plaintxt.org/themes/simplr/
DESCRIPTION: Single column and content-centered. A different type of theme. For WordPress 2.3+.
VERSION: 4.0
AUTHOR: Scott Allan Wallick
AUTHOR URI: http://scottwallick.com/
*/

Here’s just some of what I’ve done to it so far:

Added background img url to via css
Used a container DIV to separate the header.php from the index.php template files.
Added Adsense Ads to the header.php template file
Created a custom css DIV to make the sidebars (at bottom) have a white background.
Added blogrolling.com javascript to the primary sidebar with a li id. (Blogrolling.com javascript allows me to add my blogroll to all my blogs the same and as I edit with one click, the add or deletion shows across all my blogs through the script. I’m a big fan of tossing the “link” php within Wordpress in favor of Blogrolling.com)
Added a li id for ‘Credits’ where I post image button links to my various”condos” online where I hang out. I also posted a typewriter image button to ‘Cheese Enchiladas’ my Best of Weekly Writing blog.
Added the Gravatar code (my hope is that many more of my readers down the road will join the free avatar generator Gravatar.com.

At this stage in my blog career, special styling is a must. Therefore, with a new blog, I paste in the many class elements I’ve created into the style.css file - I am posting them below for you to tweak and/or borrow as much as you want (giving back ya know). When I migrate themes, I post this (or parts of it) at the footer and it usually works. Because CSS is “cascading” you can have overlaps/etc so some styles need to be put right under the element they are modifying. Usually I don’t have to do this though. These all worked pasted at the bottom of the Simplr stylesheet. They allow me to make postcards, post-it type posts, specially framed photos, and anything else I can dream up.

/*[[ --- Special Class Styling created by Damien Riley ---]]*/
/*[[ --- DIV: styling a background image and style for entire posts or chunks of posts) ---]]*/

DIV.journal {
padding-top: 100px;
height: auto;
background: url(’images/journal.jpg’) 0% 6px no-repeat;
}

DIV.aside {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#ffffcc;
background-position:bottom right;
background-repeat:no-repeat;
}

DIV.thought {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#eee;
background-position:bottom right;
background-repeat:no-repeat;
}

DIV.code {
background:#F2F2F2 url(images/code.gif) top left no-repeat;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
font-family:”Courier New”, Courier, monospace;
padding:5px 10px 5px 30px;
margin-bottom: 15px;
}

DIV.conversation {
margin-top: 1.5em;
margin-bottom: 50px;
border-top: 2px solid #CCE5FF;
border-left: 2px solid #CCE5FF;
border-right: 2px solid #CCE5FF;
width: 496px;
padding: 1px 5px;
margin-bottom: 0px;
font-family: Courier New, Courier, monospace;
font-size: 11px;
background: #E7F3FF;
border-bottom: 2px solid #CCE5ff;
}

DIV.photo {
margin-bottom: 5px;
width: 510px;
height: auto; padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background: url(’images/photo_bg.gif’);
}

DIV.postcard {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 70px;
font-family: Courier New, Courier, monospace;
background: url(’images/postcards/postcard.jpg’) 0% 6px no-repeat;
padding-bottom:15px;
margin-bottom:15px;
}

DIV.twitterpost {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 10px;
font-family: Courier New, Courier, monospace;
background: url(’images/twitterpost.jpg’) 0% 6px no-repeat;
padding-bottom:5px;
margin-bottom:15px;
}

DIV.video {
background: url(images/spool.gif) top left no-repeat;
padding-left: 45px;
margin-top: 5px;
margin-bottom: 15px;
}

/*[[ --- p and span class styling (for styling lines or paragraphs inside of division styles) ---]]*/

.notepad {
height: auto; padding-left: 10px;
padding-top: 60px;
padding-right: 80px;
font-family: Lucida Console, Fixedsys, monospace;
background: url(’images/notepad.jpg’) 0% 6px no-repeat;
padding-bottom:0px;
margin-bottom:5px;
}

.aside {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#ffffcc;
background-position:bottom right;
background-repeat:no-repeat;
}

.thought {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#eee;
background-position:bottom right;
background-repeat:no-repeat;
}

.code {
background:#F2F2F2 url(images/code.gif) top left no-repeat;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
font-family:”Courier New”, Courier, monospace;
padding:5px 10px 5px 30px;
margin-bottom: 15px;
}

.url {
padding-left: 10px; background: url(’images/url_bg.gif’) 0% 6px no-repeat;
}

.conversation {
margin-top: 1.5em; margin-bottom: 50px; border-top: 2px solid #CCE5FF; border-left: 2px solid #CCE5FF; border-right: 2px solid #CCE5FF; width: 496px; padding: 1px 5px; margin-bottom: 0px; font-family: Courier New, Courier, monospace; font-size: 11px; background: #E7F3FF; border-bottom: 2px solid #CCE5ff;
}

.photo {
margin-bottom: 5px; width: 510px; padding-top: 15px; padding-bottom: 15px; background: url(’images/photo_bg.gif’);
}

.postcard {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 70px;
font-family: Courier New, Courier, monospace;
background: url(’images/postcards/postcard.jpg’) 0% 6px no-repeat;
padding-bottom:15px;
margin-bottom:15px;
}

img.center {
display: block;
margin: 5px auto;
border: 5px solid #000;
max-width: 480px;
}

/*[[ --- Archive.php and other special page templates ---]]*/

DIV.pagecontent {
padding-left: 15px;
padding-right: 15px;
}

What kinds of tweaks do you make to your blog? How’s your css hangin’? I help people for free, so if you have questions or want to do something feel free to ask. Are you happy with your current theme? Would you like me to post the best ways to find and tweak themes in future posts?

Tags: blog, Code, css, hack, php, templates, themes, Tumblelog, tweak, Wordpress

This entry was posted on Monday, December 31st, 2007 at 9:12 am and is filed under Blogging. So far it has had 212 views. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

RSS feed | Trackback URI