• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Increase height of header image and center it

Home › Community Forums › Epik Theme Support › Increase height of header image and center it

Tagged: header image height

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

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework