Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Change new widget area width (http://forum.bytesforall.com/showthread.php?t=5798)

jaxon Feb 9, 2010 11:38 AM

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

juggledad Feb 9, 2010 02:37 PM

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.

jaxon Feb 9, 2010 02:42 PM

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%.

juggledad Feb 10, 2010 07:35 AM

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.

jaxon Feb 10, 2010 10:07 AM

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.

http://i45.tinypic.com/11wg5uc.png

.

http://i49.tinypic.com/66c381.png

jaxon Feb 10, 2010 01:13 PM

Sorry about the big photos folks :o

juggledad Feb 10, 2010 04:45 PM

have you tried a CSS Insert like
HTML Code:

table#footer_widget_area {
width: 600px;
margin-left: auto;
margin-right: auto;
}


jaxon Feb 10, 2010 05:13 PM

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.

juggledad Feb 11, 2010 02:05 PM

what is the url - if you don't want it in the post send me a PM

juggledad Feb 14, 2010 05:11 AM

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

jaxon Feb 15, 2010 01:49 PM

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!


All times are GMT -6. The time now is 03:07 PM.

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