Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] problem stacking custom widgets in header area


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jul 5, 2010, 10:53 AM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
I have successfully created 2 custom widget areas in my header for a logo (left) and a login widget (right). The statement for that is:

<?php bfa_widget_area('name=logoLogin&cells=2&align_1=9& align_2=4&width_1=500&width_2=190&before_widget=<d iv id="%1$s" class="header-widget%2$s">&after_widget=</div>'); ?>

I now decided that I need another row under this to hold 2 other widgets. When complete, the top row is logo image and to the right, a text area. Under this is to the left, a larger text area and to the right of that, the login widget.

The problem is that the new widget areas (for the second row) appear to the right of my layout - and in line with the bottom of my top row widget areas. The problem seems it may be a vertical sizing issue whereby the new widget areas don't have room underneath the first 2 (the first row) so they are being pushed out to the right.

The statement I'm using is the following (and I've tried using areas 7 and 5 as well as these, 8 & 4)

<?php bfa_widget_area('name=logoLogin&cells=4&align_1=9& align_2=3&align_3=8&align_4=4&width_1=500&width_2= 300&width_3=610&width_4=190&before_widget=<div id="%1$s"class="header-widget %2$s">&after_widget=</div>'); ?>

Has anyone run into this? I guess I need to override the height property? I also expanded my layout width way out as a test and no change so that's not the problem..

Thanks
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #2  
Old Jul 5, 2010, 01:45 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
The align property is the text alignment in the cells and not the positioning of the cells. For instance if you wanted to have the text in all the cells aligned in the center at the top you would just use &align=1 but if you wanted to have a particular cell's text aligned differently then you would also use &align_1=9 for example if you wanted to align the first cell's text on the top left.

I your case I would try creating two separate two cell widget areas. I have done this with success.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jul 5, 2010, 05:22 PM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
Larry - Thanks..worked like a charm. In reading over the examples, I do see how "align" refers to what is inside the cell but it seems to indicate that align_1, align_2, etc. up to to align_9 dictates the position of the cell as a whole in relation to the other cells (and not the position of the text or whatever is inside the cells as "align" does). That's why I thought that choosing 9 & 3 for the first row and then 8 & 4 for the second (row) would work (using "align_").

Anyway, it's totally working now but do I have the concept of align_(1-9) correct? I think I'm missing something..

Thanks!
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #4  
Old Jul 5, 2010, 06:58 PM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Remember, each new widget area can contain more than one widget. It is an area.
If you use align it sets all areas that way, if you only have two cells, you can only use align_1 and align_2
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jul 5, 2010, 08:55 PM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
OK - Thanks all - The next related issue though is one that is always cropping up and I'm not quite getting it and I'm really frustrated that I can't seem to find the answer with some basic searches. This could be a new thread..In fact I think there needs to be a sticky on this. I don't know where to put it so as it relates to the next issue I'm facing with regard to this post, I'll put it here.

Once you graduate from the basic menus in ATA and forage onward to do more customization, this is a ubiquitous issue with regard to ATA - that is "fireflying" CSS on pages and converting that code to CSS Inserts in ATA. I'm seriously frustrated because I know these are simple rules that exist somewhere but after the many accumulated hours of hunting for them - I just don't have any more time to waste. I don't have a full day to devote to reading through w3schools, every related ATA post, etc. - I'm really baffled that there isn't more on this somewhere - could be me though - I may be missing something.

Example:
I would like to add a border on one or more of the new custom widgets in the previous posts. Here is the info on one of the widget areas (and thanks Juggledad - you helped me realize that in fact it is an area that can hold multiple widgets so that helped)

td id = "headertop_2"
textwidget div id = text-6
class = header-widgetwidget_text

I realize the table data encompasses the widget and I have this great snippet from a Juggledad post:

"when you create a CSS Selector and use a class (ie 'div.widget') you assign the styling to ALL div's with that class. if you want to isolate the style to one element, you need to be more specific. You can use the id (ie 'div#execphp-3') - note the use of teh '#'? that indicates the ID vers the class that uses a period."

I have tried:

td#headertop_2 {
border: 2px #cccccc;
}

#headertop_2 {
border: 2px #cccccc;
}

div#text-6 {
border: 2px #cccccc;
}

#text-6 {
border: 2px #cccccc;
}


div#headertop {
border 2px: #000000;
}

div#textwidget {
border 2px: #cccccc;
}

and others

nothing..

I can't tell you how great my life would be if someone could provide me with the basic rules to translate found code to inserts - I would be a very happy camper.

Thanks
Thomas
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews
  #6  
Old Jul 5, 2010, 09:03 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
What is the URL for your site? That would help figure this out.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Jul 6, 2010, 04:32 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you should specify the style. Try
HTML Code:
td#headertop_2 div#text-6 {
border: 2px solid #cccccc;
}
CSS is tricky, there is no one solution, just like any other language, the more you use it, but better you become and more you know how to use it.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jul 6, 2010, 12:01 PM
Thomas
 
87 posts · Dec 2009
Send a message via Skype™ to Thomas
Larry - Thanks. I was getting ready to send you a link when I saw Juggledad's post which of course worked! I had tried a statement that was so close to that..

Thanks JD!
__________________
Hotels-Onsale.com - The Latest Breaking Discounted Hotel Rates on Over 118,000 Hotels Along With Thousands of Traveler Reviews

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Widgets - Widget Area Problem annsworld Sidebars & Widgets 4 Mar 21, 2010 01:54 PM
Problem with adding a pic to custom post template in center area frankhamm Center area post/pages 2 Mar 15, 2010 06:38 AM
[SOLVED] Stacking Widgets Sideways... ChrisPanimation Header configuration & styling 12 Dec 16, 2009 10:08 PM
Added Widgets to Header area and now Widgets won't go away from Widgets page kippiper Header configuration & styling 5 Nov 12, 2009 04:33 PM
Having a problem with my custom header displaying using FireFox als_lespaul Header configuration & styling 2 Jan 26, 2009 08:21 PM


All times are GMT -6. The time now is 05:02 PM.


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