« Bloggers and Site Owners – - Get Organized! | BLOG HOME | Creative Writing – - Another Blow for Writer’s Block »
Bloggers Be Brave – - You can change your sidebar’s width!
By Deb Gallardo
This post may seem a tad off-topic, but only if you’re not a blogger on Word Press. The reason for today’s article is a hot issue at BlogRush.com, because the BlogRush widget is too wide for some sidebars.
Months ago when I changed my WordPress theme, the one I chose came with a sidebar that, upon reflection, was too narrow for my liking: I didn’t care for the way my post titles wrapped in that narrow space. They looked all jumbled, since I tend to write long, descriptive titles.
So I did something about it. I <gulp> edited my style.css file.
Understand, I did so with fear and trepidation, since I don’t know the first thing about CSS! Well, okay, I knew it stood for Cascading Style Sheet. I hate not knowing what abbreviations and acronyms stand for.
My point is, that I’m just a pretty typical 58-year-old, gray-haired Baby Boomer. True, I’m not afraid of technology, but I’m certainly not adventurous when it comes to messing with something that’s already working, even if it’s not exactly to my liking.
I understand a teeny-tiny bit of html – barely – so I was able to figure out the logic behind style.css by just studying the file (pouring over it, actually).
CSS tells your blog software how to display everything, including fonts, colors, padding, and graphics. And lots more, too, but this is enough information for now. If you want more details, WordPress’ documentation can teach you a lot more than I can here.
After figuring out the basic logic behind CSS, I decided to try my hand at expanding the width of my sidebar. Yes, it’s a easier said than done, but stick with me here. It’s not that hard, either. Believe me.
HERE’S WHAT YOU NEED TO DO
1)
Copy the style.css file to your hard drive (it’s located on the server, so open your ftp program and log in. Navigate to your wp-content/themes/[whatever- your-theme-is-called]/ folder. Put it someplace you’ll remember. (I have a WordPress folder on my desktop specifically for ftp-ing files back and forth.)
This is so that if, at the very end of this process, you feel like you’ve totally destroyed your blog (trust me, you didn’t if all you changed were a few numbers, but it may LOOK broken…), and you’re afraid to just switch those numbers back to their defaults, you can ftp the original style.css from your hard drive back to your theme’s folder above.
2)
Print out your style.css .(Don’t skip these two steps!
That said, I feel compelled to offer the following disclaimers. It’s not how I normally operate, but I don’t want anyone coming back to me screaming that I wrecked their blog and it’s all my fault.
DISCLAIMER 1: I am not an expert. If you want to know all the why’s and wherefore’s of editing CSS, you’ll need to do a web search on the topic. There is an abundance of excellent information on everything under the sun out there, including how to understand all the in’s and out’s of CSS.
DISCLAIMER 2: This may only work with 2-column themes. Those with more experience (or time) than I will have to tell you, or you will have to examine for yourself the CSS file to determine if this will work in 1-column or 3-column or more themes.
If you look at the numbers (you’ll get what I mean in a minute) you should be able to determine if you can expand your sidebar without nuking everything else. Should be able to. There are no guarantees here, since I can’t possibly know what your theme’s style sheet contains.
DISCLAIMER 3: A lot of the success of this procedure depends on how you already have your blog set up, e.g. – Adsense, other ads, etc. You MUST think this through and not just start changing a bunch of numbers. Otherwise you won’t know what works, what doesn’t and why. Then you WILL break your blog’s appearance.
DISCLAIMER 4: If you didn’t print out the css.style document and save a copy of it to your hard drive, and you hate the way your blog looks, please don’t blame me. If all else fails, you can re-download the file or copy it from your hard drive from where you originally downloaded it. (Unless you’re one of those tidy people who delete everything and make your bed every morning…)
DISCLAIMER 5: If you choose to make changes to your CSS file, be aware that you have just made a choice. And just like any choice, you must take responsibility for actions YOU take relating to that choice.
Now a word of caution: When you make changes, make only one at a time. Write down WHAT change you made and WHERE you made it, so that if you don’t like the new look, you can revert right away.
Okay, that’s out of the way.
Did you already save a copy of style.css to your hard drive and print it out? If so, let’s move on. Otherwise, do those things NOW. While style.css is printing, you can continue reading here.
3)
Read through these steps. Make changes on your printout (in pencil!) first. Make notes to yourself. Do the math. Only when you’ve finished reading through this whole article, AND have made your calculations AND decided where to make your changes AND decided precisely what those change will be, should you start altering the code.
Following along in your printout as you read this article will allow you to become familiar with the layout and logic of style.css — don’t skip this step, either!
To understand the “WHY” behind what we’re doing here, you need to realize that the extra space for your sidebar has to come from somewhere. So unless you change the size of the “container” (code for the framework of your blog) you must “Rob Peter to pay Paul.”. Even with the container size maximized, you still may have to adjust the width of your columns.
You could edit your CSS in notepad, but then you must upload the new version to the server each time you want to test a change. Fortunately there’s a better, faster solution. WordPress has a theme editor built into your blog to allow you change not only your style.css file, but many of the php files/templates.
4)
Check your printout against what I have below. Make notes, highlight, whatever you need to do to really “get” this.
In your DASHBOARD, go to Presentation===>Theme Editor, and find style.css in the list. In my theme it’s the first one.
5)
Inside the editing box, scroll down to where it first says “container.” Here’s mine..
Note: Your code won’t have the string of hyphens and the “less than” sign —–> or numbers in parentheses off to the right. Those are just so you can see what number changes I made on which line. If you start putting those kinds of things in your CSS, your blog will look broken. LOL
#container {
background: #ffffff;
width: 1000px;—————–>(860)
text-align: left;
margin: 0px 0px 0px 0px; ——->(20 0 20 0)
border: 1px solid #cccccc;
overflow: hidden;
}
As you can see, the first change I made was to increase my container width to 1000 pixels because I wanted to use the whole page, not squeeze everything into the center. I know some people like LOTS of white space, but I don’t care for quite so much idle “real estate.” I also made all the margins zero That increased the usable space within the container. If my calculations were correct — and I admit they may not be since I wasn’t all that sure of what I was doing (!) — I now had 140 px + 20 px = 160px more width.
6)
Next, scroll down to where it first says “header”: It should be just below the container.
#header {
width: 1000px;——————>(860)
height: 150px;
background: #282828 url(images/header.jpg) center no-repeat;
padding: 0px;
margin: 0px;
text-align: left;
}
Since I’d increased the container, I felt, after testing the look of it, that IMHO my header needed to fit the whole width of the container.
7)
Okay, now scroll down to the first instance of “content. ” Here’s mine:
#content {
display: block;
background: #ffffff;
width: 600px; ————————->(500px)
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;———————>(30px)
margin-right: 5px;———————>(30px)
float: left;
position:relative;
padding: 0px;
}
When I did my calculations, I found out that I could not only increase my sidebar width, but also my content area, since my container was now wider. Remember that I had 160 more pixels to work with, so I took 100 px of the 160 and added them to my content. That left 60 pixels in the container. But since I had also reduced the margins by 30 px, that bumped the container space back up to 90 px.
Still with me? Hope so. I subtracted what I added and then added the other things I subtracted. Sorry. I couldn’t resisit.
Now scroll waaaaaay down to where it says “sidebar.” Here’s what mine looks like:
#sidebar {
display: block;
color: #000000;
width: 285px;————————->(205)
float: right;
position:relative;
margin: 5px 10px 5px 0px;————–>(20 30 20 0)
padding: 5px 10px 5px 10px;————>(20 30 20 30)
text-align: left;
border: 1px solid #cccccc;
}
After my first changes, I had 90 px of space to work with. So I took 80 of those pixels and added them to my sidebar. I felt that was a wide as I wanted to go with the sidebar. This left 10 px extra with no place to go. Not only that, but since I had reduced the sidebar’s margins and padding by 35 px, that brought the total extra space in the container back up to 45 px.
I’m sure that a programmer would probably just shake his/her head and say, “You didn’t need to reduce your margins that much.”
Or, “You could have just changed this or that.”
And no doubt s/he would be right. Even I know that if I wanted to expend the time, I could increase some of the margins or increase the sidebar or content area. But I’m pleased with the way everything looks (except the fonts in my blog posts and the fact that my richtext editor buttons are invisible in my theme — but that’s for another day), so for the moment I’m leaving my CSS right where it is..
Okay, it’s time to take a good long look at your printout. Do the math. If you don’t want to mess with margins, you don’t have to. If you’ve got more than 2 columns, your content area may be completely different than mine. Don’t despair immediately, unless it all looks like goobledy-gook to you.
I suggest these baby steps:
Change your container size, click the Update File button to the right of the editing box. View your site to see if you like the changes. They may not be perceptible.
I don’t recommend you change your header size unless you like fooling around in your favorite art program.. It was my personal preference to do so. If you want to know how I did it, leave a comment and I’ll get back to you.
If you’re happy so far, change either your content area or just your sidebar. Change only the width at first, to see if you have the space you need, especially if you’re looking to fit the BlogRush widget up higher on the page.
When you’re done with that, click the Update File button to the right of the editing box and view the changes. Everything still look okay? See if your BlogRush widget fits now.
If it’s not big enough, go back to the theme editor. Change ONE MARGIN. You’ll need to experiment with this, as I’m not positive the horizontal order of margins for the sidebar is the same as the vertical list in “content” that is explicit about which margin is what size. SAVE.
Test the widget’s new placement.
Tweak another margin if needed. SAVE.
If after all that you’re not satisfied, you can always upload the original style.css file via ftp. At the very least, you’ll be a LOT more knowledgeable about style.css, and perhaps you can impress your friends. Of course that depends on whether or not you “broke” your blog. <grin>
If you succeeded in your task, then BRAVO! I’d love to hear your success stories, so feel free to post a comment.
If you liked this site, consider sharing on your favorite social bookmarking and blogging sites about “The Story Ideas Virtuoso” site.
If you blog about this post, please include a link back. Every little bit of traffic helps — hence the BlogRush tool, which I love. John Reese is the best. (And no, he didn’t pay me to say that. He doesn’t even know me other than as a statistic.)
May you have blessings aplenty today and always.
Copyright © 2007 Deborah K. Gallardo, All Rights Reserved
Related Posts
- Site Owners – - Don’t Fall Into These Web Traps
- First Book – Internet Marketer Yanik Silver Publishes First “Real” Book
- Story Ideas – - Back on Track
- Online Promotion – Get This Right to Succeed
- Calling All Bloggers – - BlogRush Tool Rocks!
No Comments »