Community Forums › Forums › Archived Forums › Design Tips and Tricks › Full Width Header Beautiful Pro
Tagged: beautiful pro, full width, header
- This topic has 8 replies, 3 voices, and was last updated 9 years, 4 months ago by rocketgirl.
-
AuthorPosts
-
November 11, 2014 at 6:35 am #131174pdblizzardMember
I'm working with Beautiful Pro, and I'd like to set the Header at the top to be full width, responsive.
I changed the functions.php header custom header dimensions to that of the image I want to use, 1192 x 240.I changed the css to reflect:
.header-image .site-title a { min-height: 240px; width: 100%; }
However, my image is still getting cropped. I want to duplicate the current site's header at http://www.insightfulastrology.com, but this is what I'm ending up with:
http://pdblizzard.staging.wpengine.com/The other issue, is in the dashboard> Appearance>Header, the "Crop" section doesn't cover the whole image, I cannot drag the edges to include the entire image (even though I changed the functions.php.)
Thank you in advance for any and all assistance 🙂
http://pdblizzard.staging.wpengine.com/November 11, 2014 at 6:54 am #131177Brad DaltonParticipantLooks like you've added the image using CSS and the Custom Header function which uses PHP
You will also need to change this CSS to match your images height:
.header-image .site-title a { float: none; min-height: 240px; width: 100%; }
At the moment its 120px.
Change the default CSS rather than add more CSS
If you crop your image first before uploading and change the values in the PHP to match, it will work.
You may need to find all instances for the height and change them to 240px under the Site Header section in your style sheet.
November 11, 2014 at 7:24 am #131179pdblizzardMemberYou're right, I added it (following a tutorial elsewhere) so I found the original declaration and changed it. WPEngine must be caching my staging server, because I do indeed have min-height set to 240, verified by ftp'ing in and looking at the style.css, but wpengine is serving a version of the file with 120. No way to dump the cache on the staging server....Alrighty then!
My images are 1192, I don't want to crop them - that's my problem. The menu based header upload is cropping them, not letting me extend the edges of the crop tool to the entire width of the image.
November 11, 2014 at 7:43 am #131181Brad DaltonParticipantNovember 11, 2014 at 8:50 am #131190pdblizzardMemberIt was my Amazons3 plugin, my apologies. I disabled it.
And thank you so much for your assistance, I appreciate it.
So now I have my height - I'm having trouble identifying the container/class that is constraining the width. On the other site, I was able to use background-size: cover; to stretch the image across the container.
November 11, 2014 at 2:30 pm #131212Brad DaltonParticipantAll the CSS is in the Site Header section however i think your problem is the PHP otherwise you need to crop the image to the exact size which matches the values in the custom header function.
November 11, 2014 at 2:46 pm #131213pdblizzardMemberIt is, already the exact size already. I don't want to crop it, I want to use my header banner at full size.
If I didn't change the php, I wouldn't be allowed to enter my graphic of that size, it would only allow me the teeny default size that comes with the theme.
November 11, 2014 at 2:52 pm #131214pdblizzardMemberI'm trying to wean myself off of Ithemes, and see if I can convert her site:
http://www.insightfulastrology.com/To Genesis, and I need to be able to duplicate that header, all the way across the top.
November 16, 2014 at 6:54 am #131721rocketgirlMemberHi pdblizzard, did you ever resolve this? I have the exact issue - even after reading this thread, i'm still scratching my head.
Thanks for any insight. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.