Again we're working with your blog template, so you want to make sure you have it backed up first. The instructions for doing that are here - just make sure if you added a navigation bar after backing up that template that you go ahead and do it again so that your backup includes the nav bar code.
You need to adjust the width of this outer wrapper to be wide enough to hold the other elements. Most computer monitors are at least 1024 px wide. I made my outer wrapper slightly wider than that:
#outer-wrapper { width:1040px; margin:0px; text-align:$startSide; }
Its also important to note that while my blog has 'wrappers' for every element yours may not.That's OK. Just know that instead of looking for #sidebar-wrapper, you'll look for #sidebar, etc.
The column you have existing may be on either the right or left sides. Find the styles for that. Mine looked like this:
#sidebar-wrapper { width:220px; float: $startSide; }
So let's do a little math. If my sidebar (which was on the left to begin with) is 220px, the right-side one should be 220px also. That's 440. If the width of my outer wrapper is set to 1040, then my "main" or body section can be 600. Simple, right?
If you adjust these numbers and the preview of your blog is still off, it could be margins that are throwing you off. The margin is an area around the outside of the element. I made sure mine were set to zero. If you have 'margin' defined anywhere in the styles for each element, you can either delete it or set it to 0px.
I wanted to create a column on the right side that was exactly the same as that on the left. I basically did a copy and then paste of the #sidebar-wrapper and renamed it. So
You can call this element anything you'd like, but you'll have to stay consistent throughout your code. Obviously if your pre-existing column is on the right, you could name this left-wrapper, etc.
(At the same time, if the column widths + main section width is greater than the outer wrapper width, this could cause your 3rd column to be bumped down much in the same way.)
If your blog's template does use wrappers, you'll also need to create a style for the sidebar itself. Again, I just did a copy/paste of the existing style for my left-hand sidebar.
So
#sidebar { padding:15px 15px 15px 10px; width:215px; background: #453531; color:#ffffff;
}
becomes
#right { padding:15px 15px 15px 10px; width:215px; background: #453531; color:#ffffff;
}
Next, scroll down until you find an area where the styles for the content of your sidebars is defined. You'll see things such as .main and .sidebar. (Preceded with a . instead of a #.)
Again, because I want them to be the same, I found the .sidebar code, did a copy/paste and renamed it.
.sidebar ul li { margin:0; padding-top: 0; padding-bottom:5px; padding-$startSide:15px; padding-$endSide:0;}
.sidebar p { margin:0 0 .6em; }
became
.right ul li { margin:0; padding-top: 0; padding-bottom:5px; padding-$startSide:15px; padding-$endSide:0;}
.right p { margin:0 0 .6em; }
Don't change anything else about this -- you may or may not have some of the code I show above. That's OK. We just need to add exactly the code that's already there for your new sidebar.
Alright - you still with me? We're almost done, I promise!
Scroll down some more and look for a section like this:
body#layout #sidebar, body#layout #sidebar-wrapper { padding: 0; width: 220px; }
This will appear further toward the bottom of your template. Again, we're just going to do a copy/paste and substitute the name we gave our new column. So in my case, this becomes
body#layout #right, body#layout #right-wrapper { padding: 0; width: 220px; }
(The section bolded is what I changed.)
OK, last thing folks. Next we'll look for the tag. This is the section that actually tells your blog what to look like; what appears where.
Again, you'll see something like this
You'll need to add an entry similar to what's there for the sidebar you're creating. Put this immediately below the other tags, inside the /div tag if there is one.
Further down from there, you'll see things like
You'll probably have a lot more rows that contain 'widget id'. These represent each of the items you have in your sidebar.
Again, we're going to copy/paste this sidebar-wrapper code (or similar if yours doesn't use wrappers) and change it from sidebar-wrapper and sidebar to right-wrapper and right.
You may find that you don't want whatever widget #6 is in your new column, but once you've completed these steps, your new column will show up on Page Elements screen under Layout and you can drag and drop elements back and forth.
That's it.
When you copy and paste your new blog template code into the 'Edit HTML' box, you'll want to preview it first to make sure it looks right. Code is tricky, in that if you have one small letter or character off the whole thing may not work. (Trust me - I know its infuriating!)
Once it looks good, click 'Save template'. You'll now see your new column under the Page Elements screen under Layout.
If this was helpful to you, please Stumble this post so that others may find it as well! You may want to subscribe to my feed so you don't miss other weekly 'wins'!
5 comments:
Thanks for the tips! I've bookmarked this for future reference!
Can't you just do it for me? Just kidding planning on working on it this weekend since we have 5 days off! Talk soon!
You are clever! I am bookmarking this.
This was actually something I did by myself once. I am quite proud. Haven't been able to do a darn thing sine then though.... sigh!
i tried it, and i think i screwed it up so i will call you
Post a Comment