Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Widget Area Under Header Homepage
- This topic has 5 replies, 3 voices, and was last updated 10 years, 3 months ago by petomm.
-
AuthorPosts
-
January 13, 2014 at 12:47 pm #85004petommMember
I'm using the Magazine theme. What I would like to do is add some type of call to action widget that would appear right below the header and only appear on the homepage where I can place an optin form. I would like it to look similar to the black top area as seen below the header on the Modern theme demo homepage: http://my.studiopress.com/themes/modern-portfolio/#demo-full
I added this code to functions.php:
// Register Call To Action Widget Area
genesis_register_sidebar( array(
'id' => 'call-to-action',
'name' => __( 'Call To Action', 'ppp' ),
'description' => __( 'Displays Content After Header Home Page Only', 'ppp' ),
) );// Add a call to action widget area after the navigation bar
add_action( 'genesis_after_header', 'ppp_call_to_action_widget' );
function ppp_call_to_action_widget() {
genesis_widget_area( 'call-to-action', array(
'before' => '<div id="call-to-action">',
'after' => '</div>',
) );
}I then placed the following code into the css:
/*
Call To Action
------------------------------------------------------------ */.call-to-action {
padding: 40px;
padding: 2rem;
text-align:center;
background-color: #333;
border-top: 5px solid #eaeaea;
margin: 0;
margin: 0;
}The call to action widget that I registered appears in the widget area. However, it appears I am not styling it correctly. I am trying to get the background widget area to appear black with a white text. And also the text is appearing way over to the left, would like it more center to the page.
January 13, 2014 at 1:21 pm #85024Ben SiegfriedMemberHere you go, this should help you get started.
#text-25 { background-color: #222; color: #fff; text-align: center; height: 100px; padding: 30px; }
And to remove the black line above that text widget add this:
.site-header .wrap { border-bottom: 0px; padding: 30px 0; padding: 3rem 0; }
January 13, 2014 at 2:35 pm #85034petommMemberThanks for the reply. However, that didn't quite work for me. What I am basically trying to do is add some type of widget that appears under the header of the homepage and style it to something similar to the Modern Theme: https://www.dropbox.com/s/azhdr3sg6gyf3ed/screenshot.jpg
January 13, 2014 at 3:08 pm #85043RobbyMembertry using
genesis_before_content
instead ofgenesis_after_header
looks like your outside the wrap and in the header which is 100%
or try this http://www.carriedils.com/add-widget-area-below-nav/edit:
or maybe this is it, I'm not a professional coder but thought a divide ID used '#' and Divide class used '.'
change this
‘before’ => ‘<div id=”call-to-action”>’,
to this?
‘before’ => ‘<div class=”call-to-action”>’,
January 13, 2014 at 3:17 pm #85048RobbyMemberJanuary 14, 2014 at 12:49 pm #85186petommMemberThanks for the tips. I made some of those changes and some of it did help. However, I still can't get that widget area looking like this: https://www.dropbox.com/s/azhdr3sg6gyf3ed/screenshot.jpg
Guess I'll go back to the drawing board.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.