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] Center align dynamic widgets in full width header (http://forum.bytesforall.com/showthread.php?t=24015)

rickpoet Mar 16, 2018 01:03 PM

[SOLVED] Center align dynamic widgets in full width header
 
Howdy!

Having trouble figuring out how to center align the widgets in a dynamic widget area I've added to the header here: http://www.picounionproject.org (the widget is the social media icons.)

I've tried adding div style="align: center;" to the configure header area around where I call the widget which doesn't seem to be working.

Any code or setting I'm missing to center align these widgets (and keep them contained to the 964px width I have established for the main content area below?

Thanks so much!

Rick

juggledad Mar 16, 2018 01:37 PM

So this is going to be a lesson in debugging. Open FireFox and make sure you have the Developer Tools working (Google them and install them if you don't have them.

Next open the site and click the Tools->Web Developer->Inspector
Now find the social icons and find it's parent element and let me know what it is.

rickpoet Mar 16, 2018 03:04 PM

Thanks for the quick reply. Here's a screenshot of the code containing the Social Media icons widget.
https://www.dropbox.com/s/f9w36a5lyo...03.15.png?dl=0

juggledad Mar 16, 2018 03:17 PM

Now if you keeo clicking on the parent elements, what do you notice about the social icons at that point?

rickpoet Mar 16, 2018 03:26 PM

I'm trying to get the entire widget area (which contains all of the social icons in one widget) to be centered, and contained within a specific width)

juggledad Mar 16, 2018 03:42 PM

I know what you are trying to do and I think I know what you did. I could tell you or teach you how to figure it out...so go back to the site and use the inspector and locate the social icons and then in the html, click on the <td..> element that is severan pparent elements above them. Now what do you notice?

rickpoet Mar 16, 2018 03:45 PM

I understand the teach a person to fish concept, but if possible I'd love just the telling. :)

juggledad Mar 16, 2018 03:53 PM

I think when you defined the dynamic widget area you defined it to have two cells. The social icons are in the first halgf and nicely centered in that area.

So...what code did you use the create the dynamic widget area?

rickpoet Mar 16, 2018 03:57 PM

You're right, I has removed the second widget as this issue with trying to center this entire widget area was happening and I thought if I could get it to work with 1 widget I could build from there.

I added a second widget so it's not an issue with 2 widgets being defined.

Here's the code in the configure header area that calls for the widget: <div style="align: center;"><?php bfa_widget_area('name=header&cells=2'); ?></div>

It expands beyond the width of the content area below so I'd like to force it to be able to contain it to a defined width so it fits with the main column below it.

juggledad Mar 16, 2018 04:04 PM

with the cells=2and no width's defined, each widget area gets 1/2 the with of the parent element, in this case, the header area. If you want the icons to be centered you need to have 1 cell so remove the cells from the statement:
HTML Code:

<div style="align: center;"><?php bfa_widget_area('name=header'); ?></div>

rickpoet Mar 16, 2018 04:10 PM

Thank you very much! Solved it.


All times are GMT -6. The time now is 06:23 PM.

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