Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Theme Header
- This topic has 13 replies, 4 voices, and was last updated 11 years, 3 months ago by
Brad Dalton.
-
AuthorPosts
-
October 12, 2013 at 3:12 pm #66446
denissemarie
ParticipantHi, the new Lifestyle theme only gives you the ability to change the header with a size of 320x110 but how can I edit the entire header? I can't seem to find the size of the entire header. I want to add a custom one - not just change the image in the center.
Also, where would I add the header in the code?
Thank you in advance.
http://www.artkidstic.netOctober 12, 2013 at 8:45 pm #66464Brad Dalton
ParticipantYou can change the size for the Custom Header uploader.
//* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 110, 'width' => 320, ) );
You can change these values and also the values for the height and width in the CSS code under the Header section.
October 12, 2013 at 10:06 pm #66471denissemarie
ParticipantHi thank you for your response. I did this and changed it to 920x110 but it still shows a frame around the header I upload. I can't seem to find the size for the entire header. What is the entire width and height?
Thanks again!
October 13, 2013 at 4:41 am #66484Brad Dalton
ParticipantOctober 13, 2013 at 3:54 pm #66540denissemarie
ParticipantHi the link is http://www.artkidstic.net
October 13, 2013 at 10:13 pm #66575Brad Dalton
ParticipantPlease add this code at the end of your child themes style.css file:
.site-header { background-color: #FFFFFF; overflow: hidden; padding: 4.8rem; }
I found this code by inspecting the header using Firebug
October 14, 2013 at 4:18 am #66600matthewende
MemberHi, I am having the same issue with the header. Trying to make it the same size as the original panel but no matter what size I try it won't work. (currently 1068x206)
October 14, 2013 at 6:42 am #66622Brad Dalton
ParticipantYou do need to modify the CSS code for the header to make this work because there is a fair amount of padding.
I am in the middle of writing a tutorial on this topic and will publish it within a few hours.
October 14, 2013 at 8:36 am #66632denissemarie
ParticipantThank you again for your help.
Is there any way to find out what the size is of the entire header area? Because what you are saying works but only if the background of the header is white. But if I change the background of the header to another color there is still a border. The reason this matters to me is because I am having a new header designed and the background will not be white.
Please see screenshot where you see border even with the change you listed before:
http://screencast.com/t/2iinSJwt61ma
(this shows the gray border - I would like my header to cover the entire gray area)I think I found another section where it said a width of 1140 - is this accurate?
Thanks again.
October 14, 2013 at 8:53 am #66639Brad Dalton
ParticipantIts not a problem and easily fixed http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/
1140px is correct.
October 14, 2013 at 9:08 am #66649denissemarie
ParticipantAwesome! Thank you so much.
October 14, 2013 at 4:34 pm #66718matthewende
MemberThanks so much Brad, great tutorial!
October 20, 2013 at 8:35 pm #67923dc50093
MemberThe css changes in the tutorial are not working for me and I have a few questions. First, do we drop the code in at the very bottom of Lifestyle's style.css or do we override the pre existing rules that are found a short way up from the bottom? Either way it's not working me and there is a frame around my 1140 x 200 image. I'm building the site locally on a WAMP so I can't provide a link.
October 20, 2013 at 10:14 pm #67934Brad Dalton
ParticipantIts hard to say without inspecting your site with Firebug.
You can change the existing CSS rules and add the code at the end of the style sheet.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.