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)
-   -   Problems with aligning footer widget (http://forum.bytesforall.com/showthread.php?t=17216)

Hody Apr 5, 2012 04:31 AM

Problems with aligning footer widget
 
Atahualpa 3.7.3
Wordpress Version 3.3.1
newlayout.tribe-online.de (test url)

I am trying to create 3 Footer widget areas similar to the ones on stadtkometen.de - each of the same width and with space between each of them while all 3 widgets should only consume the width of the body without the sidebar. my tag is

PHP Code:

<?php bfa_widget_area('name=Fusszeile&cells=3&align=7&width=300'); ?>

What am I doing wrong?

P.S.: Tried to figure settings with FireFly/Dragonfly in Opera but canīt get behind them

juggledad Apr 5, 2012 04:45 AM

If you have put the new widget code in the ato->Style & edit FOOTER->Footer: Content then it will spread the width of the container since the footer is the width of the container.

You could add a margin-left and margin-right and adjust the width of the table that holds the widget area,

Hody Apr 5, 2012 05:06 AM

My footer spans over the same area that the header - so over the area of the main body plus the sidebar.

The other point is that I dont seem to get to 3 widgets having distance from each other and only taking the same space - have a look at the site pls

P.S.: You just got a donation

juggledad Apr 5, 2012 05:46 AM

Try this out the following to your CSS inserts
HTML Code:

#fusszeile {width: 75%;}
#fusszeile td {border: solid 1px red;}

the 2nd part is just put in so you can see the area that each of the widgets actually takes up

Hody Apr 5, 2012 05:56 AM

Did, check the result online please

juggledad Apr 5, 2012 06:00 AM

change
HTML Code:

#fusszeile {width: 75%;}
to
HTML Code:

#fusszeile {width: 75% !important;}

Hody Apr 5, 2012 06:04 AM

Very good - Impressive!

Last thing is to get them all in the same size of about 325px with a little space in between.

Current entries:
PHP Code:

<?php bfa_widget_area('name=Fusszeile&cells=3&align=9&width=325&before_widget=<div id="%1$s" class="footer-widget %2$s">&after_widget=</div>'); ?>

HTML Code:

#fusszeile {width: 75% !important;}
#fusszeile td {border: solid 1px red;}

Is it possible that I have to create 3 seperate tablesin order to achieve space between them?

juggledad Apr 5, 2012 06:51 AM

there are several alternatives
- add border-spacing (#fusszeile {width: 75%; border-spacing: 10px;}) though this will add teh spacing aroune all sides
- make the widget area a 5 cell widget area, specify cell 2 and 4 the width of the space you want and don't put anythng in them
- use padding in the <td>

Hody Apr 5, 2012 07:04 AM

Tried border spacing - fine but also moves the widget further from the buttom of the body.

Padding - very good to leave some space from the borders.

But I think option 3 with the 5 cells might work best - though I still have not figured how to assign each cell its own size - which you recommend.

Hody Apr 5, 2012 07:14 AM

Ok, thanks to your help I think I got this figured as well - check the site.

Last but not least, is it later possible to style each single widget, so for example the the 2 spaceholder widgets dont have borders, while the others do? Used "empty-cells:hide; - works fine

So any chance to individually stlye the remaing three cells with or without border?

juggledad Apr 5, 2012 08:44 AM

You can style any thing al long as you can create a css selector for it. each widget area has a unique ID that you can use for the styling. Just use firebug to look at the code and find the ID. Remember to use a '#' before the ID name In the CSS selector.

Hody Apr 5, 2012 08:53 AM

Thanks once more - itīs like "fusszeile_1" to "fusszeile_5" in my case, no?

#fusszeile_1 {color: #FFFFFF;} for example only colors the heading what, but not the tags in the cloud? (I assume because there is a CSS behind the cloud already).

And another question, how do I accomplish this with the rss-box in the header zone, I tried #rss-box, #logoarea but nothing seems to work. I need to overwrite the colors for LINK and HOVER as we want it to be white and the body is white as well - so the regular link color would be Black (but we need white for the RSS Section).

juggledad Apr 5, 2012 09:03 AM

All of the tags in the tag cloud widget are actually links (<a>) so you would have to write a CSS selector that would apply to that element.

This is where firebug becomes so important to learn. Once you want to start styling
a things outside of the theme options you must learn how to find the element involved determine the CSS selector that will be applied and then code the rule you want to use.


All times are GMT -6. The time now is 12:45 AM.

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