Community Forums › Forums › Archived Forums › General Discussion › Sample Child Theme Header CSS
Tagged: css, header logo, sample child theme
- This topic has 3 replies, 3 voices, and was last updated 11 years, 1 month ago by selym.
-
AuthorPosts
-
February 20, 2013 at 7:59 pm #21854selymMember
I've had a tough time with this sample child theme header thus far. đ
I'm wondering if someone could help me out with some css. I try to mess around as much as I can, but css truly is my achilles heel of hacking around. I've inspected the element in Chrome and tried firebug in Firefox, trying different changes to no avail.
I'm trying to adjust my header image position to be level with the search widget and make the entire image a home link. Any help or a push in the right direction would be sincerely appreciated.
February 21, 2013 at 8:06 am #21947cehwithamMemberRemove your header image that you've added in.
Then go into your child heme folder under /wp-admin/themes/ and upload your logo into the images folder.
Next edit the functions.php file in your child theme folder and add the following code to the bottom of it:
/** Add Logo to Header */
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
function add_website_logo() { ?>
<a href="" title="Home" id="logo">
<img src="/images/logo.png" alt="Logo" /><?php }
add_action('genesis_site_title','add_website_logo');You'll need to change the filename to whatever your logo is called. This will insert the image into the header as an image rather than a background image and wrap it in a link to the homepage.
Let me know how you get on.
Twitter: cehwitham Web: cehwitham.com
February 21, 2013 at 8:15 am #21950Brad DaltonParticipantReduce the height of the header in your child themes functions.php file
// Add support for custom header add_theme_support( 'genesis-custom-header', array( 'width' => 1152, 'height' => 120 ) );
Make the same height in your Header style.css file under the Header section
Crop the bottom of your header image if needed.
You could also change the padding-bottom properties value using pixels i.e 10px for the widget in your child themes style.css file:
#header { border-bottom: 2px solid #1E1E1E; min-height: 60px; overflow: hidden; padding-bottom: 2rem; }
March 7, 2013 at 11:11 am #24800selymMemberI wanted to thank you both for taking the time to help, and to apologize for the delay in my response.
Unfortunately I still haven't figured this out. On the original site I mentioned in this thread, I still cannot get the logo to show up following cehwitham's directions. However, I tried it on another similar test domain with this sample child theme (http://bit.ly/ZiMEvn) and it worked. I'm still useless trying to figure out css, but I was able to center the logo on the second domain by simply resizing the logo itself multiple times. I also noticed on both domains something now intermittently messes with search in the header widget. (When I type one letter, it just refreshes)
I'll keep plugging away, troubleshooting, testing new things, etc. Thanks again for the earlier replies.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.