Increase height of header image and center it

Tagged: header image height

This topic has 11 replies, 2 voices, and was last updated 10 years, 3 months ago by dono2081.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
September 5, 2013 at 5:03 pm #7132
dono2081
Customer
Hi there – My header image is 600 x 600, and of course I’d like to center it across the theme, and maintain responsiveness. So here are my questions:

* where in the css do I modify line height & width so the header image height is increased? After reading thru numerous posts, I’m confused b/c I can see that there’s recommendations to change ‘min-height’ from a higher to a lower #, but that’s usually to shrink the header space. I have the opposite issue, and need to enlarge it.

* Do I need to add something to functions.php to accommodate this customization? I read about a custom-header adjustment, not sure this applies to me.

Thanks, really appreciate your help.
-DonO
September 5, 2013 at 5:05 pm #7133
dono2081
Customer
Sorry, forgot to ask:
* I assume I need to upload proportionately smaller versions of this image, and then reference them in css, in order to maintain responsiveness for tablets and phone screens. Could you walk me thru the x’s and o’s on this a little bit? Specifically, where in css do I control the choice of which image is used for each media width?

Thanks!
September 6, 2013 at 12:25 am #7146
Eric
Customer
Do you have a link to a live site (not the code) so I can see what needs to be done.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 6, 2013 at 12:45 am #7154
dono2081
Customer
Hi Eric, yes it’s here at http://www.coffeeuniversity.org.
-DonO
September 7, 2013 at 11:16 am #7213
Eric
Customer
You control whats shown by adding it in the responsive css. Specifically the iPhone section. You could add a smaller image up to or around 480px for the iPhone. Then add it to the css and let me see how it looks, because there may need to be an additional step depending on how it shows up.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 7, 2013 at 11:31 am #7215
dono2081
Customer
OK great, thanks! Now here’s the next piece of this:
1. I have a logo for the regular site; it’s 600×600 pixels.
2. What parts of the css do I modify so that the whole logo shows up in the header? I’m not worried about responsive, yet, just the regular / main part of the site.

what values (lines numbers in styles.css would be helpful) do I modify in order to change the image height to 600 in the header?

Thanks.

-DonO
September 8, 2013 at 8:16 pm #7250
Eric
Customer
You can add a height to the #header section of your css….or even the #header title area around line 685 –
```
.header-image #title, 
.header-image #title a, 
.header-image #title-area {
    display: block;
    float: left;
    min-height: 120px;
    overflow: hidden;
    text-indent: -9999px;
    width: 50%;
}
```
Notice its currently set at min-height: 120px

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 9, 2013 at 12:44 pm #7271
dono2081
Customer
Hi Eric — Thanks! So …. I think I’m figuring this out. The reason why my 600px high logo isn’t showing at full height isn’t because of min-height, I think. Is it because ‘overflow’ is set to ‘hidden’?
That could be very interesting.

Also, why is text-indent sent to such a large negative #. What does this achieve?

Thanks!

DonO
September 9, 2013 at 10:43 pm #7280
Eric
Customer
No, min-height is the minimum height, you’re thinking of “maximum”. The overflow could be whats preventing things from showing up outside of the div, but if you add in your logo at the right size that should be an issue.

Text indent moves the text out of the way – https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 9, 2013 at 11:54 pm #7289
dono2081
Customer
THanks, Eric. Just out of curiosity, do you have any involvement with Cobaltapps?
D
September 10, 2013 at 10:29 am #7293
Eric
Customer
No, haven’t used them.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
September 10, 2013 at 5:13 pm #7301
dono2081
Customer
In case anyone else reads thru this, here’s what I found:

1. Adjust width and height in functions.php at lines 33-35, genesis-custom-header
2. Adjust min-height in style.css at line 690 for class .header-image and id #title-area

Bam! Your logo will now fit. Be sure that your logo’s background (even if it’s transparent) is set to 1152 pixels wide*, or the cropping tool inside of Genesis / WordPress will kick on and try to fill up the width with a cropped version of your logo.

*I have not yet tackled the responsive aspect of the header image, so this will break responsive design, I believe.
-DonO
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.