How to place a custom widget area below another
 

Hello.

Firstly, I love atahualpa, brilliant theme!

I have 2 custom widget areas on my homepage. The first contains my image slider. The second has been split into 3 cells, each 390px wide. I have added a 4th (and once I've solved this issue I'd like to add a 5th) cell but it positions itself to the right of the 3rd and increases the width of the whole page. I would like to reduce the height of the 3rd one and have the 4th sit below it, rather than next to it. I have tried to limit the width of the entire widget area and I have used the table align parameters explained on the "Add Dynamic Widget Areas" page, to try to place the 3rd widget cell in "table position 3" and the 4th widget cell in "table position 5", but nothing seems to work.
The height of the widget cells is also dependant on the height of the widgets inside them and they always stay the same height as each other. So for example if I extend the height of the widget in the 1st cell it will increase the height of all of the other widget cells within the widget area.

Is there a way to, A) determine the height of each individual cell within the widget area and B) make the 4th widget cell display below the 3rd. I'm still a novice with css but and html but I'm learning bit by bit. Any help would be much appreciated.

My website is www.velocitycycling.co.uk

Thanks in advanced! :)

No because it depends on the type and number of widgets you add to that widget area. While you might be able to code a jscript to compute it, it is not part of the theme.

why not add another widget area under the second widget area just like your second widget areas? even though you say you only want two cells, give it 3 cells so the alignment will mimic that of the 3-celled second widget area

i.e

1111111111111 <- this is widget area 1 - a one cell widger area
2222 3333 4444 <- this is widget area two just duplicate it so you get
5555 6666 bbbb <- this where bbbb has no widgets in it

Hi Juggledad,

Thanks for your quick reply.

I haven't got a clue about jscript, any suggestions in where I could open a thread to find out if/how it's possible?

I thought of adding another widget area below however I wanted it to display like this:

1111111111111
2222 3333 4444
2222 3333 5555
2222 3333 6666

And without determining the height of widget area cells I don't think I can achieve this.

How you are going to control the height of the various widgets?

I can adjust the heights of the widgets individually within the html. Most are just text widgets with the html pasted in. The twitter feed one is Twitter's own widget but this also allows you to adjust the height of it

If you added your second widget area using the 'cell=3' option, in your widget area you should have three widget areas. Just add more than one widget to the third widget ares.

The reason I wanted them to be separate widget areas was so I could style them to have their own individual borders. Your idea of using the Exec-PHP app sounds ideal however I have installed and activated the plugin, checked the settings are allowing the plugin to work in text widgets, added <?php bfa_widget_area('name=my centre widget 2 3 1'); ?> but no new widget areas are displaying to add widgets to. Any ideas why?

Yeah the exec-php idea doesn't work,

But if you add three widget cells to the third widget area, each should cafe a id or class that could be used to style it

But I think if I remove the 3rd cell of the 2nd widget area and add a third widget area with 3 cells, won't the widget areas just position themselves as follows:
1111111111
222 333 444 555 666
222 333 444 555 666
222 333 444 555 666

Is there the possibility of adding custom css to style each individual widget, that way I could remove the styling applied to the current 4th widget area and style the widgets themselves instead?

define your widget areas like this
and if you add three text areas to the third cell the HTML will look like this
and you can use .text-5 etc to style each of the widgets

so you will end up with 4 widget areas
'header slider area'
'header widget area2 1'
'header widget area2 2'
'header widget area2 3'

you will put one widget in 'header widget area2 1'
one widget in 'header widget area2 2'
and three widgets in 'header widget area2 3'

each of the widgets in 'header widget area2 3' should give you a unique id=.... in the generated page and you can use that as teh CSS selector fot that widget.

Amazing, worked like a charm! Only thing I can't seem to do is add border spacing to the borders around the widgets in header widget area 2_3. They are flush against each other at the moment and I'd like them to have the same 12px gap between them. I will then add the 3rd widget to that widget area, style it the same way and hopefully add the border spacing to that too.

Many thanks again and if you can solve this last little issue I will be eternally grateful! :-D

What is the ultimate?

Sorry I'm sure I'm being dumb here, after googling for a good twenty mins to see if that's a standard coding phrase I still can't find what it means?? 🙈😂 Ultimate??

argh...auto correct!@#@! that should have been URL

Haha ahh I know that one. It's www.velocitycycling.co.uk On the homepage you'll see the 3 widget areas at the bottom all have 12px between them. The widgets in the 3rd cell now have their own borders as requested but they're flush together. I tried to add border-spacing to #header_widget_area2_3 but this didn't work?

try using margin: 5px

Embarrassed that I didn't come up with that myself but yes it worked great. Many thanks for all your help!

looks ok in firefox and chrome, but the bottom widget's black background is messed up in Safari in OS X