[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! |
look at the documentation on the 'new widget area' page
Quote:
|
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%.
|
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. |
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:
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 |
Sorry about the big photos folks :o
|
have you tried a CSS Insert like
HTML Code:
table#footer_widget_area { |
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 { |
what is the url - if you don't want it in the post send me a PM
|
when you use the CSS
HTML Code:
table#footer_widget_area { HTML Code:
table#footer_widget_area { |
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:35 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.