Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

How to place a custom widget area below another


  #1  
Old Mar 25, 2016, 11:01 AM
3m3rr1ngt0n
 
9 posts · Mar 2016
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!
  #2  
Old Mar 25, 2016, 12:43 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
A) determine the height of each individual cell within the widget area and
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.

Quote:
B) make the 4th widget cell display below the 3rd.
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 25, 2016, 01:38 PM
3m3rr1ngt0n
 
9 posts · Mar 2016
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.
  #4  
Old Mar 25, 2016, 04:50 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
How you are going to control the height of the various widgets?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 26, 2016, 10:43 AM
3m3rr1ngt0n
 
9 posts · Mar 2016
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
  #6  
Old Mar 26, 2016, 04:37 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 26, 2016 at 04:55 PM.
  #7  
Old Mar 27, 2016, 12:16 PM
3m3rr1ngt0n
 
9 posts · Mar 2016
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?
  #8  
Old Mar 27, 2016, 12:24 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 27, 2016, 01:54 PM
3m3rr1ngt0n
 
9 posts · Mar 2016
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?
  #10  
Old Mar 27, 2016, 06:00 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
define your widget areas like this
HTML Code:
<?php bfa_widget_area('name=header slider area'); ?>
<?php bfa_widget_area('name=header widget area2&cells=3&width_1=300&width_2=300&width_3=300&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>
and if you add three text areas to the third cell the HTML will look like this
HTML Code:
<div id="header_slider_area" class="bfa_widget_area">
<table id="header_widget_area2" class="bfa_widget_area" cellspacing="0" cellpadding="0" border="0" style="table-layout:fixed;width:100%">
<colgroup>
<tbody>
<tr>
<td id="header_widget_area2_1" valign="top" align="center">
<td id="header_widget_area2_2" valign="top" align="center">
<td id="header_widget_area2_3" valign="top" align="center">
<div id="text-5" class="header-widget widget_text">
<div id="text-4" class="header-widget widget_text">
<div id="text-3" class="header-widget widget_text">
</td>
</tr>
</tbody>
</table>
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Mar 27, 2016, 08:11 PM
3m3rr1ngt0n
 
9 posts · Mar 2016
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
  #12  
Old Mar 28, 2016, 03:21 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What is the ultimate?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Mar 28, 2016, 04:04 AM
3m3rr1ngt0n
 
9 posts · Mar 2016
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??
  #14  
Old Mar 28, 2016, 04:23 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
argh...auto correct!@#@! that should have been URL
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Mar 28, 2016, 05:04 AM
3m3rr1ngt0n
 
9 posts · Mar 2016
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?
  #16  
Old Mar 28, 2016, 06:36 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try using margin: 5px
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old Mar 28, 2016, 08:51 AM
3m3rr1ngt0n
 
9 posts · Mar 2016
Embarrassed that I didn't come up with that myself but yes it worked great. Many thanks for all your help!
  #18  
Old Mar 28, 2016, 09:05 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
looks ok in firefox and chrome, but the bottom widget's black background is messed up in Safari in OS X
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
atahuala, custom widget areas, height, positioning widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Custom widget area widths gr870sfunk Sidebars & Widgets 4 Aug 16, 2014 06:28 AM
Styling Custom Widget Area bigwavedesign Sidebars & Widgets 5 Nov 12, 2010 03:47 PM
UGH Errant custom widget area horsemansarts Sidebars & Widgets 0 Mar 2, 2010 09:24 AM


All times are GMT -6. The time now is 06:37 PM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.