Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Center align dynamic widgets in full width header


  #1  
Old Mar 16, 2018, 12:03 PM
rickpoet
 
76 posts · Jan 2010
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
  #2  
Old Mar 16, 2018, 12:37 PM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 16, 2018, 02:04 PM
rickpoet
 
76 posts · Jan 2010
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
  #4  
Old Mar 16, 2018, 02:17 PM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Now if you keeo clicking on the parent elements, what do you notice about the social icons at that point?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 16, 2018, 02:26 PM
rickpoet
 
76 posts · Jan 2010
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)
  #6  
Old Mar 16, 2018, 02:42 PM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 16, 2018, 02:45 PM
rickpoet
 
76 posts · Jan 2010
I understand the teach a person to fish concept, but if possible I'd love just the telling.
  #8  
Old Mar 16, 2018, 02:53 PM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 16, 2018, 02:57 PM
rickpoet
 
76 posts · Jan 2010
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.
  #10  
Old Mar 16, 2018, 03:04 PM
juggledad's Avatar
juggledad
 
23,648 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Mar 16, 2018, 03:10 PM
rickpoet
 
76 posts · Jan 2010
Thank you very much! Solved it.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center SigWS Header configuration & styling 20 Mar 14, 2014 03:30 PM
I want a full width header, fixed width content and a background image tsheridan Header configuration & styling 5 Jan 29, 2013 02:46 PM
[SOLVED] Full width header with fixed width image and background color WilliamNavidson Header configuration & styling 4 Jun 10, 2011 02:13 AM
[SOLVED] how to align footer widgets to left from default center ajinkya Sidebars & Widgets 2 Sep 30, 2010 09:58 AM


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


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