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:
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?