Jul 22, 2012

Remove(Customize) spacing between Columns on blogger

8 comments
New Blogger templates contain a large amount of spacing, far too much for some designers. The source of the spacing isn't seen while editing a templates HTML. Instead a hidden style sheet included at run time by Blogger holds the key. Viewing source on a blog page finds a widget_css_2_bundle.css link inserted just below the <title>. Three key styles contained within control most of the spacing in new Blogger templates.

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(space between red line and black line)?





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.


If you feel this is helpful or you like it, Please share this using share buttons available on page.

8 comments :

  1. سارع بالاستعانة بخدمات شركة مكافحة حشرات بمكة من اجل التخلص الفوري من الحشرات حيث ان مبيدات شركة ابادة حشرات بمكة التابعة لمجموعة شركات العنود ذات مفعول قوي و يستمر مفعوله لفترات طويلة

    ReplyDelete
  2. للحصول علي خدمات افضل شركة عزل اسطح في القصيم تواصل مع شركة البيت السعيد حيث انها تعد افضل شركة عزل خزانات في القصيم و الاسطح و لدي شركة البيت السعيد فريق متخصص في كشف التسربات فهي افضل شركة كشف تسربات المياه في القصيم و لن تقتصر الشركة علي تقديم تلك الخدمات فقط فهي تقدم خدمات القضاء علي الحشرات وهي ايضا افضل شركة مكافحة الحشرات في القصيم و تجد بالشركة الكثير من الخدمت الاخري التي تحتاج اليها باقل الاسعار

    ReplyDelete
  3. باقل التكاليف الان يمكنك الحصول علي خدمات شركة حراسات امنية كبري بمصر التي توفر امن و حراسة لممتلكاتك من الشركات و المنازل و غيرها فهي افضل شركة امنية ولديها اقوي افراد امن و حراسة

    ReplyDelete
  4. يمكنك الان التعرف علي افضل اساليب مكافحة الحشرات المتعددة الزاحفة و الطائرة وجميع الانواع من شركات ابادة الحشرات و لتحصل علي الخدمات المضمونه اطلب الخدمات من افضل شركة مكافحة حشرات بمصر و الوطن العربي

    ReplyDelete
  5. يوجد الان خدمات رعاية مسنين بالمنزل من اكثر الاماكن المتخصصه في مصر مثل دار مسنين بمصر و هي دار مرخصه من قبل وزارة التضامن الاجتماعي و جميع الجهات المختصة و لديهم خدمات رعاية مسنين بتكاليف مناسبه

    ReplyDelete