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] Change new widget area width


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 Feb 9, 2010, 11:38 AM
jaxon
 
27 posts · Jan 2010
Hi again folks!

Still having a blast with this theme. I've been looking around the AT control panel and forum for an answer to this and haven't found it yet.

I've added a new widget area with 3 widget cells to my footer. (I'm trying to create a nice bottom nav area) Now I would like to set the width of the table containing these cells. The default is that the cells fill the container equally, which is fine. But I want to set a specific container width - then center that container.

Thanks in advance!

I'll be posting links to my site soon!
  #2  
Old Feb 9, 2010, 02:37 PM
juggledad's Avatar
juggledad
 
22,267 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
look at the documentation on the 'new widget area' page
Quote:
width_1, width_2, width_3 etc. Width of a particular widget area cell. If not defined, widget area cells get an equal share of the remaining width of the whole widget area table.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 9, 2010, 02:42 PM
jaxon
 
27 posts · Jan 2010
Thanks for the quick response juggledad. Not quite what I'm after though. I want the 3 cells to get their "equal share" of the table they're in... that's fine. The part I want to limit is the overall width of that table. AKA I want the widget area to be 500px wide, and centered in my footer. I'm assuming this is possible because the documentation mentions that these widget areas are actually table cells, so I should be able to set the table width to something other than 100%.
  #4  
Old Feb 10, 2010, 07:35 AM
juggledad's Avatar
juggledad
 
22,267 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
When you add a 'new widget area' it conforms to the area you are inserting it into. For example, let's you have a sidebar that is 400px. You insert a text widget and then add a 'new widget area' with 3 cells to this text widget. The three cells of the new widget area will total 400px in width, the sice of the enclosing area.

If you add them to the header area and your page width is variable, then the width of the new widget area will vary with the resizing of the page.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Feb 10, 2010, 10:07 AM
jaxon
 
27 posts · Jan 2010
Thanks for your continued help! I definitely get the "cells fill all available space" concept. The thing is that these cells are in their own little widget table as per the "new widget areas" documentation:
Quote:
Because these are multiple cells side by side, it will create a table instead of a DIV. Doing this with floating DIV's would not only be very fragile, it would also require more code than the table consists of.
It is this table that fills the available space through a style setting "width:100%;. So if a person wants to limit the width of a new widget area somewhere in the layout, it is as easy as setting the width of that table to a static width such as "width: 500px;"

I've included two screenshots of Firebug + my footer. The first is the relevant part of the code and what it does by default. The second shot, is the result of setting "width: 600px;" and "margin-left: auto;" and "margin-right:auto;" This gives the desired effect. BUT, I only know how to achieve this effect by editing the code directly in firebug.

Optimally, this could be done through html inserts but i have NO idea how. Any help on this end of things would be greatly appreciated. The other option is of course, finding the table in the ATA code and simply editing it, but that seems to be frowned upon (for obvious reasons) around these parts.



.

  #6  
Old Feb 10, 2010, 01:13 PM
jaxon
 
27 posts · Jan 2010
Sorry about the big photos folks
  #7  
Old Feb 10, 2010, 04:45 PM
juggledad's Avatar
juggledad
 
22,267 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
have you tried a CSS Insert like
HTML Code:
table#footer_widget_area { 
width: 600px; 
margin-left: auto;
margin-right: auto;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Feb 10, 2010, 05:13 PM
jaxon
 
27 posts · Jan 2010
Thanks again juggledad! This looks great but isn't changing anything. I tried what you suggested in css inserts and it had no effect. I then tried a bunch of variations and read some articles on w3schools.com and tried some more. Still to no avail.

In your suggestion, what is "table"? is it a class? From what I could tell in the firebug output, the class is bfa_widget_area and the id is footer_widget_area. Based on my quickly developing css knowledge I thought that this would mean something along these lines.... but to no avail again.

HTML Code:
footer_widget_area.bfa_widget_area { 
width: 600px; 
margin-left: auto;
margin-right: auto;
}
Thanks again for your help. This will be really useful for me and the community I imagine.
  #9  
Old Feb 11, 2010, 02:05 PM
juggledad's Avatar
juggledad
 
22,267 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
what is the url - if you don't want it in the post send me a PM
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Feb 14, 2010, 05:11 AM
juggledad's Avatar
juggledad
 
22,267 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
when you use the CSS
HTML Code:
table#footer_widget_area { 
width: 600px; 
margin-left: auto;
margin-right: auto;
}
add a '!important' on the width so you have
HTML Code:
table#footer_widget_area { 
width: 600px !important; 
margin-left: auto;
margin-right: auto;
}
tehn adjust the width to the size you want
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Feb 15, 2010, 01:49 PM
jaxon
 
27 posts · Jan 2010
fantastic juggledad! Absolutely perfect! So for everyone who finds this thread via search keywords. This technique allows you to add a nice three column navigation footer to atahualpa. I also is the basic technique for limiting the dimensions of a widget area table. Have a great day folks! Thanks again juggledad!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] How to change to fixed width develin Atahualpa 3 Wordpress theme 2 Dec 19, 2009 07:23 AM
Can I change the width of the logo area? dieterssv Header configuration & styling 5 Nov 13, 2009 05:33 AM
[SOLVED] Correcting top logo area width Larry Header configuration & styling 8 Sep 28, 2009 06:11 AM
Resize header area width? eggd Header configuration & styling 2 Aug 15, 2009 07:33 AM
[SOLVED] Change the cell width in new widget area duping812 New Versions, & Updating 2 Jul 16, 2009 07:19 PM


All times are GMT -6. The time now is 11:57 AM.


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