The Three Columns in new Blogger supplied templates include padding to the right and left. Two column designs hide a column by setting width to zero. In any case, override this style to either widen the gap or tighten things up.
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner{padding:0 15px}
Sections represented by <b:section> tags in design HTML are replaced by <div class='sidebar section'> at run time with a margin to both the left and right.
.section{margin:0 15px}
All widgets are given top and bottom margins with an IE hack for the bottom as well. .widget{margin:30px 0;_margin:0 0 10px}What's so Important about these 3 Styles?
Most significant content in a new Blogger template ends up with all three styles affecting it. The example below shows all three styles applied comparably to Blogger supplied templates. Notice how significant spacing between each content containing widget is?
Customizing a Template
Although some templates override aspects themselves and include additional spacing, these three styles have the most significant spacing impact on a Blogger site with a new template. The Template Designer -> Advanced -> Add CSS option is a good place to insert an override or play around with spacing. Copy/paste the Key style elements and alter the spacing to find the right look. These are the big three when it comes to customizing a new Blogger template's spacing, nothing else comes close.
5 comments :
Hi - I think this is exactly what I need to fix the huge vertical padding in my left sidebar.(SIMPLE template) Can you be more specific on what padding values to add?
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner{padding:0 15px
Do I add {padding: 0 15px after each one, or is the third one the only one that needs it added as in your example?
http://www.mccormickmadness.com
@Debbie, the styles I listed are the ones applied by default from Blogger css files. To change the look these need to be overridden. The style you quoted applies it to all three columns at once by comma separating column names. You may change this by styling each column individually without the commas and the {} portion applied to each. Although due to the template structure I suggest simply copying the style as above, then alter the 15 down to 0 and work your way up to get the desired look.
I hope that makes sense to you.
James
Ok yes that makes sense. I'm going to try it. I am having issues here recently where any CSS I put in is not noticed. In other words, nothing changes in my viewscreen.
Have you heard of that happening? I've already coverted all my widgets to default, hoping that would help but it hasn't. Do you know what could cause a good CSS code to not work?
ok just tried it
this is exactly what I put in:
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner{padding:0 5px}
I pressed a enter a few times to get it to "kick" in, but nothing changed.
@Debbie, I've seen the problem you're talking about before and it's usually caused by another style taking precedence. This can be overridden in many cases by using a !important tag on each style line. Although, other styles using the same notation may still take precedence. Another common cause is a CSS error in the Add CSS box, such as a missing brace. It cannot hurt to also include a semi-colon at the end of each style either. I'm not such as ...{padding: 0px 5px;}
In this case that shouldn't be a problem. Looking at your blog it is not. Chrome developer tools show me that you've added a line for each column set to 0 0px and that those styles are active. Currently, the aforementioned .section{margin:0 15px} is responsible for existing vertical space.
James
Post a Comment