Community Forums › Forums › Archived Forums › Design Tips and Tricks › Sample Theme Left Header Widet
- This topic has 5 replies, 2 voices, and was last updated 9 years, 4 months ago by kgshultz.
-
AuthorPosts
-
December 1, 2014 at 12:05 pm #133355kgshultzMember
Hi,
I'm trying to add a left header widget area into the sample theme. I want the left widget to be floated left, the logo to be in the center, and the right widget to be floated right. Then, on a smaller screen, I'd like the logo to stay at the top and the two widget areas to go below the logo.
I've registered the left widget area, but I don't know how to make it appear to the left of the site title/logo. Right now it's showing up as Title/logo -> Left Widget -> Right Widget instead of Left Widget -> Title/logo -> Right Widget.
Here is the code I used to register the left header widget area:
genesis_register_sidebar( array( 'id' => 'header-left', 'name' => __( 'Header Left', 'wpsitesdotnet' ), 'description' => __( 'Header left widget area', 'wpsitesdotnet' ), ) ); add_action( 'genesis_header', 'left_header_widget', 11 ); function left_header_widget() { if (is_active_sidebar( 'header-left' ) ) { genesis_widget_area( 'header-left', array( 'before' => '<div class="header-left widget-area">', 'after' => '</div>', ) ); } }
Any help would be greatly appreciated.
http://fp.kgshultz.comDecember 1, 2014 at 12:09 pm #133356Genesis DeveloperMemberreplace
add_action( 'genesis_header', 'left_header_widget', 11 );
by
add_action( 'genesis_header', 'left_header_widget', 6 );
December 1, 2014 at 12:13 pm #133357Genesis DeveloperMemberreplace current CSS by
(line no 888)
.header-image .site-header .wrap { background: url("images/logo.png") no-repeat scroll center center; padding: 0; }
December 2, 2014 at 11:20 am #133426kgshultzMemberThanks so much!
I do have one new question now. The widgets are not horizontally lined up with each other. How would I go about doing that? The left one is all the way at the top, lined up with the top of the logo, and the right one is centered vertically on the logo. I would prefer if they were both centered vertically on the logo.
Thanks again!
December 2, 2014 at 1:47 pm #133442Genesis DeveloperMemberReplace current CSS by my code
line no 827
.site-header .wrap { display: table; padding: 40px 0; padding: 4rem 0; width: 100%; }
line no 835
.title-area { display: table-cell; font-family: Lato,sans-serif; font-weight: 700; margin: 25px 0; padding: 16px 0; padding: 1.6rem 0; width: 52%; }
line no 905
.site-header .widget-area { display: table-cell; float: none; text-align: right; vertical-align: middle; width: 23%; }
line no 922
.site-header .header-left { display: table-cell; overflow: hidden; text-align: left; vertical-align: middle; width: 22%; }
December 2, 2014 at 2:22 pm #133444kgshultzMemberWill making them display as a table mean that they won't rearrange when looking at it on a smaller screen? I want the widgets to be below the logo when looking at it on a phone.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.