WordPress.com

1. adashdaniel
   Member
   Jun 2, 2012, 10:27 PM

   There are four widgets I want to have at the bottom of my blog, but Vertigo only has two footer areas and it stacks the widgets vertically. I would like the widgets to be spaced horizontally across with the content of each floated to the left. Seems like this would be easy if I could place each widget in its own footer area. But can I add two footer areas to Vertigo?

   The blog I need help with is preoccupiedbetablog.wordpress.com.

2. thesacredpath
   Member
   Jun 2, 2012, 11:33 PM

   CSS is for styling (cascading style sheet) and cannot be used to add functionality (such as adding sidebars).

   It might be that you could make the two widget areas span horizontally instead of vertically and then adjust the size, margins and padding and stuff to make it appear they were designed horizontally. With the way the CSS/XHTML is done in this theme, this could be a good bit of work and looks like it would require you to hack the CSS anytime you changed or added widgets. In other words, this become a very manual thing.

3. adashdaniel
   Member
   Jun 2, 2012, 11:35 PM

   Ahhhh.... good to know. I will put that dream to rest.

   Thanks!

4. thesacredpath
   Member
   Jun 3, 2012, 12:14 AM

   You are welcome.

5. designsimply
   Staff
   Jun 7, 2012, 2:38 PM

   I think this is doable without a ton of trouble. Try putting all the widgets in the first footer area and hide the other one. Here's some CSS you can try out:

   #supplementary.two .widget-area {
   	width: 100%;
   }
   .widget {
   	float: left;
   	width: 25%;
   }
   #second {
   	display: none;
   }

6. adashdaniel
   Member
   Jun 7, 2012, 2:54 PM

   That worked really well! Thanks for coming back to that one... I made some adjustments:

   .widget {
   float: left;
   width: 24%;
   padding-left:1%;
   text-align:left;
   }

   but in playing around with the #supplementary.two .widget-area { I cannot seem to center it or push it to the right with padding on the left. Any ideas?

7. designsimply
   Staff
   Jun 16, 2012, 6:23 AM

   Try changing the width value to 33%.

8. adashdaniel
   Member
   Jun 16, 2012, 12:38 PM

   Hey designsimply,

   Thanks for digging up this old one! I decided to pick out a theme that I like and mess with it as little as possible (since when I toy around with CSS it usually has consequences I don't foresee - looks great on my browser, terrible on others, etc). So I'm marking this one "resolved" because I've moved on from vertigo.

   Cheers,

   Adash

Topic Closed

This topic has been closed to new replies.