Blogger Beta - Fluid 3 column template
I'm forging ahead with Blogger Beta experiments. I put in three columns...fluid no less! Once again, thanks to my expertise and incredible knowledge of coding Hans and his post Adding a Second Sidebar to Your Template.
Here are the steps I took:
- I read Hans post :-)
- I removed the #sidebar-wrapper
- I added a #leftsidebar-wrapper and a #rightsidebar-wrapper
- I made these changes to the #outer-wrapper, #main-wrapper, #leftsidebar-wrapper and #rightsidebar-wrapper
#outer-wrapper {
margin-left: 5%;
margin-right: 2%;
width: 93%;
padding:0px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 50%;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#leftsidebar-wrapper {
width: 22%;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#rightsidebar-wrapper {
width: 22%;
float: left;
margin:0 0 0 25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
Labels:
Blogger Beta,
Design,
Fluid,
Hacks,
Sidebars
24 Comments:
Hi Annie,
I had success converting my Beta blog to 3-column too. If you are planning to switch to Beta, check out the Beta hacks that I have in my blog.
-Ramani
hi again annie!
i just pimped my blog further into 3 cols, but it is fixed right now.
every time i come to your blog i find something cooler to play with.
Michael
Hi Annie, great work! It looks that you are ready to switch over completely!
Just add html page elements to your sidebars (the blogrolls, counter, etc), your tagcloud and licensing stuff to the footer-section and there you go!
You might have to add some css for blockquotes etc, but for the Dean of our Blogger University that will be a piece of cake, I think!
By the way, I added a new tutorial on colors and fonts, and how to interact with them from your Layout Editor.
Hans
@Michael, Welcome back! Your blog is looking great. It seems you took yet another approach...I like it.
@Hans, that was going to be my next step. Time is my limiting factor. Seems I don't have enough of it in a day!
Annie, before I give this a go (on this, my millionth test blog lol, just wondering about this:
Your code includes:
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
Hans only has:
word-wrap: break-word;
overflow: hidden;
And my brand new, not messed about with template has:
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
...
I'm guessing I keep all of this part of my code and just do the changes you've outlined, and that yours is different because it's a tweak for your blog (dunno why Han's so different).
Thanks.
Ooops, that Copy That is terence.
@terence (aka copy that) I would leave your template as is in that aspect. If it gives you a problem, you can always change it. Each template builder has different little codes they like. Not saying one is better than another...just a different style.
BTW, I have a gazillion test blogs myself. I think I'm slowly getting a test blog for each blogger template. Plus others from out there someplace.
Well, I gave it a go and made such a hash of it, I had to revert my template back to the original and lost any sidebar widgets I had put up for a look see. Anyways, I'll give it another go later. Kinda peeved, now... booo, hehe.
@terence, it does get frustrating. I always try major renovations on a test blog first because I know disaster is right around the corner. But, I know you have test blogs also. Look at it as a learning experience! I have learned so much by trial and error.
Hi Annie,
A question regarding your template's stylesheet for the Header.
My template for this test blog includes the following for the Header:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ffffff;
}
... but your template doesn't have this at all. Instead, all that code (plus some extras) is under #header.
I'm just wondering, why? Is this just different default settings for different templates?
Thanks.
@terence, I think that is a pretty close assessment.
Your blog has the layout I've been looking for for ages! I followed your instructions for adding a third column, except my sidebars wound up on the left, not the right. What gives? Where did I go wrong?
Never mind. I figured it out!
Hi Annie, every one of you guys--Ramani, Hoctro, you, all give your 3-column templates, and they all have the same problem, without any relation to posts or pictures or images or videos. There is a drop flaot in I.E. when Feeds are enabled in Blogger. This is universal. I've seen this problem reported all over the Web. Don't you guys check in I.E.? I don't mean to be critical after all your hard work, but since I.E. is still used by 80% of users, we must take this into account.
Thanks.
Rock.
@rock, I'm sorry you are having a problem. As for myself, and I'm sure the others you mentioned, I test my blog hacks on Firefox and IE (since my husband is a die-hard IE user).
I have feeds enabled and have a 3 column blog. There is no problem with IE. I think you are experiencing float-drop which is an entirely different problem.
Annie, thanks for your response. Yes, float-drop. That's what I have, using all the new Blogger beta templates. I'd love to use these, yours included, but again, I.E. is too important for me to ignore.
Again, it has nothing to do with my posts, pictures, videos, images. The problem shows up even with one post with text only and just using the clean templates, without any widgets.
I've had to resort to absolute positioning for my right sidebar, which has its own problems.
Thanks.
Rock
@rock, I guess I don't understand exactly what you mean when you say "The problem shows up even with one post with text only and just using the clean templates, without any widgets.". Could you tell me exactly what you do mean by problems?
Annie, the right sidebar sinks all the way to the bottom in Internet Explorer--drop float, or float drop, whichever it is called.
Thanks.
Rock
Hi Annie!
Thank you (and Hans also) for your tricks!!!!
It works!!!!!
Is there a way to add a 2nd sidebar to the template I'm currently using?
@Gerry, Take a look at
Blogcrowds. He has a nice 3 column Scribe template to download!
Thank you for responding so quickly. Unfortunately I was hoping I could add a 2nd sidebar to my CURRENT template:
my blog.
Thanks anyway!
@Gerry, I saw you had 2 Scribes and one Dots. So I went with the majority! Take a look here:
Blogcrowds
Tips For New Bloggers. Between the 2 you should be able to figure out how to convert yours. My suggestion would be to start a test blog, download your template and install it in the test blog. Then work with these 2 sites to put the 3rd column in. When it is done the way you like, move it to your real blog.
This post will definitely help readers like me. I am interested very much in the subject matter of your blog. Keep blogging.