Increase height of header image and center it

Tagged: header image height

This topic has 11 replies, 2 voices, and was last updated 9 years, 2 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.