FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

20 December 2011

Tuesday's Tips - Lowerbar

For the longest time I wanted to add gadgets at the bottom of my blog, so that my sidebar wouldn't be so full, but I didn't want to have to switch templates. Here is a simple tutorial for how to add a three columns of gadgets at the bottom of your blog.
Feel free to customize the styling to your needs. (html basics for text, backgrounds, borders, padding & margins)

1) Find:
#sidebar-wrapper {

2) Underneath that section of code paste:
#lower-wrapper {
       margin:auto;
       padding: 0px 0px 0px 0px;
       width: 1100px;
}
#lowerbar-wrapper {
     border:1px solid #e6e6e6;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 0px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 10px 0px 10px;}

3) Find:
]]></b:skin>

4) Above that paste:
 /* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:none;
}

.lowerbar h2 {
      margin: 0px 0px 0px 0px;
      padding: 3px 0px 3px 0px;
      text-align: center;
      color:#000000;
      text-transform:none;
      font: 14px Century Gothic, Arial, Tahoma, Verdana;
      border-bottom:1px solid #e6e6e6;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #e6e6e6;
}

5) Find:
<!-- end outer-wrapper -->

6) Above that paste:

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Now when you go to add gadgets to your blog there will be three columns at the bottom for you to place them. =)

In Him,

8 comments:

mary ann

ooh, thanks for the tutorial! I've actually tried to do something like this before but couldn't figure it out :P i'm going to go try it out on my test blog!

Emily Grace

You're so very welcome! Let me know if it works for you. :)

Ashlyn Nicole

thanks for this! I wanted to do this before too! ;)

Grace

Oh, thank you so much! I <3 your blog designs and really appreciate your tutorials...I did wonder, how did you make your 'pages' scrolling pages? I'm sure 'tis a long procedure, but I am very curious to see how you did that. :)

blessings,
Grace
gracesgardenwalk.blogspot.com

Emily Grace

Ashlyn - You're so welcome!

Grace - You're welcome! I'm not sure what 'scrolling pages' you're talking about. If you mean the scrolling button widget at the bottom of my page you can go here. If you mean the pages at the top of my blog that drop-down when clicked on you can go to here for how to make an Accordion Menu.

marcia

hey, Emily! I am wondering if you know how to adjust this, so there is only one long column instead of three. I hope that makes some sense.
thanks so much for all these tutorials... you have absolutely no idea how much they helped me!

Emily Grace

Marcia - Sure, you just need to make two changes to the code.

In the first section of code find #lowerbar-wrapper { and scroll down until you find width: 32%; Change that to width: 100%;

Next, in the last section of code find and delete the following: [div id='lowerbar-wrapper'>
[b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
[/div>
[div id='lowerbar-wrapper'>
[b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
[/div>

understand that [ is <

Let me know if you have any other questions! =)

marcia

Ahh.. thank you so much!!! It worked perfectly!

Post a Comment

Leave your thought...