Customize Header Image Height

Homepage › Community Forums › Epik Theme Support › Customize Header Image Height

Tagged: , ,

  • This topic has 11 replies, 3 voices, and was last updated 11 years ago by Wes.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 9, 2013 at 8:23 pm #3108
    manyspears
    Customer

      I’m trying to upload a logo that I’d like to display at 190 pixels tall. I see a couple places to edit to perhaps make this possible, but no matter what I do, the header image crop tool still requires a cropping to 120px tall.

      Can you post a quick tutorial to customizing the Title Area height (or better put, logo area) to allow logos bigger than 120px tall?

      My site is elliottrand.wpengine.com though I don’t think there’s anything there that helps.

      March 10, 2013 at 1:25 pm #3110
      Wes
      Moderator

        Yes I’ll add a quick tutorial on this in the near future and will add it to the Tutorial section of the site.

        Until then, all you would need to do is go into your functions.php file and adjust this –

        // Add support for custom header
        add_theme_support( 'genesis-custom-header', array(
        'width' => 1152,
        'height' => 120
        ) );

        Make sure and find out the exact size of your image first and add it to your functions file. Then after you do this the header uploader will automatically upload your image without the need to crop.

        March 10, 2013 at 2:36 pm #3114
        manyspears
        Customer

          Thanks for the Sunday support! Unfortunately it wasn’t that easy. See:

          http://elliottrand.wpengine.com/

          My logo file is 210 wide by 150 tall… but the bottom 20 pixels or so are cut off. (There’s actually a tagline in that logo, below the line.)

          Direct link to the logo file (with transparent background, so hard to see on white):

          http://elliottrand.wpengine.com/wp-content/uploads/ERLogowhite150x210.png

          Relatedly- there are two places to edit the header text and/or image, including:

          – Customize link from the Themes Page (wp-admin/customize.php)

          – Header link from Theme Page (wp-admin/themes.php?page=custom-header)

          Which is the primary place to do it?

           

           

          March 10, 2013 at 2:43 pm #3115
          Wes
          Moderator

            Now you’ll just need to edit the height in your css. It’s currently set at 120px. If you look around line 681 in your style.css file you’ll see this –

            .header-image #title,
            .header-image #title a,
            .header-image #title-area {
            display: block;
            float: left;
            min-height: 140px;
            overflow: hidden;
            text-indent: -9999px;
            width: 50%;
            }

            I’ve changed the height to 140px. If you do this then them bottom part will show. It’s cut off because the height was too small for your image. You can change it to 150px if you need to as well.

            Let me know if that works.

            March 10, 2013 at 2:58 pm #3116
            manyspears
            Customer

              That did work, thank you.

              For other newbies, can you address the “two places to edit the header” confusion? Should we avoid the “customize” option in the theme?

              March 10, 2013 at 3:13 pm #3117
              Wes
              Moderator

                Yes I’ll be adding how to do this in the tutorial soon.

                I usually just edit the header image by using the header uploader directly instead of the customize option. I’ve actually never used the customize option but I don’t think it would make much of a difference.

                March 10, 2013 at 4:31 pm #3118
                manyspears
                Customer

                  While we’re at it- can you explain how to make the hotspot (clickable) area for the home page link in the logo the same size as the image itself?

                  You’ll notice on my site that only about 1/2 of the logo is clickable.

                  See: http://elliottrand.wpengine.com

                  March 10, 2013 at 9:19 pm #3122
                  Wes
                  Moderator

                    Take a look around line 683 in your css for this –

                    .header-image #title,
                    .header-image #title a,
                    .header-image #title-area {
                    display: block;
                    float: left;
                    min-height: 140px;
                    overflow: hidden;
                    text-indent: -9999px;
                    width: 50%;
                    }

                    You can change the width to around 67% or so and that should cover it.

                    March 23, 2013 at 12:46 pm #3323
                    elenabrz
                    Customer

                      Hi Wes

                      Following your steps here I managed to show my logo聽http://www.testinglabs.es/elenabenitoruiz/

                      However:

                      where can I edit the size of the main menu nav fonts? (bigger)
                      how can I add some little margin above the logo?

                      I’m trying/testing this with Stylebot but I can’t make it

                      Thanks a lot for your help,

                      Elena

                      March 23, 2013 at 10:05 pm #3344
                      Wes
                      Moderator

                        For the nav fonts, take a look around line 1042 for – “.genesis-nav-menu a” in your css file.

                        To add space at the top of the header, you can add padding-top to the #head-wrap on line 630 in your css.

                        Since these are off topic questions, please create a new thread for each question in the future. We have a “One Question Per Thread” policy. This is so we can keep all of the threads organized, and on topic, which also makes it easy for users to search for questions/issues.

                        Thanks!

                        March 24, 2013 at 5:21 am #3354
                        elenabrz
                        Customer

                          Hi Wes

                          Thanks, sorry for the off-topic, you’re right!

                          E.

                          March 24, 2013 at 2:10 pm #3361
                          Wes
                          Moderator

                            No problem 馃檪

                            You’re Welcome!

                          • Author
                            Posts
                          Viewing 12 posts - 1 through 12 (of 12 total)
                          • The topic ‘Customize Header Image Height’ is closed to new replies.