How do I put a custom graphic .jpg logo image in the Legacy header

Homepage › Community Forums › Legacy Theme Support › How do I put a custom graphic .jpg logo image in the Legacy header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 2, 2013 at 1:53 pm #3516
    dev77
    Customer

      This should be easy but I can’t figure out how to get a logo-graphic (small .jpg file) in the header. Do I do it via the WordPress “Header” facility? Do I use the Genesis “logo.png” method? Or does Legacy have it’s own way though code?

      This should be in your basic tutorial. Maybe it is and I just didn’t find it?

      I know how to re-size an area via CSS… but I don’t know how to get my .jpg there in the first place!!

      Thanks.

      April 2, 2013 at 8:01 pm #3520
      Wes
      Moderator

        Yes you would upload it with the standard WordPress Header option.

        This is a standard WordPress feature and not a child theme feature…..which is why I didn’t have a tutorial on it since it’s pretty straightforward. However, I will be adding a tutorial on how to do this anyways, plus I’ll be showing how to make the logo responsive, adjust the size, etc.

        Have you already tried the WP Header uploader? If so, where you having any issues with it?

        April 2, 2013 at 10:14 pm #3522
        dev77
        Customer

          I don’t think I explained it correctly. I wanted a small logo to be in the header. In order to do that I had to follow the code in this post:

          https://appfinite.com/topic/customize-header-image-height/#post-3323

          Without the code in function.php, WP will want you to crop to some small size. The standard WP Header option is designed more for a background image than a logo.

          What I don’t understand is that if Legacy is a “standard” Genesis theme, why can’t we simply name our graphic logo.png, upload it to the theme’s image directory, set the image option in the Genesis settings and it would auto-load without any code. That is the Genesis “way” from what I understand. My guess is that Legacy came out before Genesis adopted this procedure? No matter what, you need to a brief tutorial on how to add a logo to your theme. It should not take more than 10 minutes to write and post. This is a premium theme vetted by Studio Press and it should have this documented. It took me half an hour to find the answer when it should have taken me half a minute.

           

          April 2, 2013 at 11:01 pm #3523
          selfpowerment
          Customer

            Actually, StudioPress has plenty of tutorials and documentation (including videos) on how to setup all of the basics. There is no reason for him to add the exact same tutorials and code snippets if they already exist on StudioPress. If you’ve bought the Genesis Framework, then obviously you came from StudioPress. Especially if you’re using Legacy since you need Genesis to use any of Appfinite’s themes. My guess is, you didn’t look or search for it….or maybe you missed it 馃槈

            Wes adds the tutorials that are specific to his themes, anything beyond that can easily be found on StudioPress (the way it should be). That is the reason you don’t see a ton of documentation on Genesis here, it’s simply not needed. This is a third party site that makes extensions for StudioPress……this is not StudioPress. If theres something you can’t find in a tutorial, or a forum, then search Google before you post. There are plenty of places that you can easily get your questions answered as there are tons of people using Genesis. I’ve found nearly everything I needed by searching.

            I’m writing this to help you since you are new (I was not too long ago as well 馃檪 ) and hopefully it will help anyone else that sees this or makes the same mistake. The point I’m making is that people should search StudioPress for documentation for the Genesis framework since they are the people who created it. This isn’t Wes’ responsibility since he didn’t create the framework.

            I hope this was helpful 馃檪

            April 2, 2013 at 11:16 pm #3524
            Wes
            Moderator

              @dev77 All Genesis themes function in the same way, including Legacy. This theme isn’t any different than the others. You use the WordPress Uploader to upload an image just like a regular WP theme.

              The standard size is 960 x 100, you can easily change this. Simply find out the exact size of your image, then go into your functions file and change the header size to the size of your image. Then upload your image and no cropping will be needed.

              This is the code you will be looking for in your functions file –

              /** Add support for custom header */
              add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );

              Thats it! It definitely won’t take 10 minutes….

              As @selfpowerment mentioned, I add tutorials that are specific to my themes. All of the main documentation can be found on the StudioPress site. Everything is already covered, and yes we do assume that you are aware of this since you have to purchase Genesis before using our themes.

              Resources – http://www.studiopress.com/resources

              Tutorials – http://my.studiopress.com/tutorials/

              Code Snippets – http://my.studiopress.com/snippets/

              FAQ – http://www.studiopress.com/faqs

              Community Forum – http://www.studiopress.com/tutorials/community

              Video Tutorials – http://www.studiopress.tv/

              Old SP Forum (very valuable) – http://www.studiopress.com/support

              That should cover way more than the basics! Let me know if you have any other questions or if you still need assistance with your logo.

              January 24, 2014 at 2:46 pm #10180
              MayDay
              Customer

                On the same subject, how do I make the logo graphic I have uploaded using WP Appearance/Header/upload image responsive? This is not set by css rather coded into WP. I would appreciate any help!

                January 24, 2014 at 9:46 pm #10185
                selfpowerment
                Customer

                  There are a lot of posts here in the forums that explain how to do it. Check out this one – https://appfinite.com/topic/responsive-header/ and that should point you in the right direction. If you need more, just do a search on the main forum page.

                  January 24, 2014 at 10:27 pm #10187
                  dev77
                  Customer

                    One of the major flaws of WordPress is that it is a PITA to make a header responsive. I’ve never figured out why WP has never fixed this to make it easier.

                    First of all there are two ways to get the logo graphic in the header… use the WP way where you have to make sure the logo is the exact size, OR disable the custom header in functions.php and use CSS via the background-image attribute to load your header. Google for Carrie Dill’s site as she has a good tutorial on all of this.

                    Now to make it responsive, the proper way is to use what is called an @media query. There are tons of tutorials on this as well. For the Legacy theme with HTML5 enabled I put the header in this way:

                    /*===========HEADER====================*/

                    .site-header {
                    height: 180px;
                    }

                    /* put the banner in the title-area instead of in the header class*/
                    .header-image .title-area {
                    background: url(http://www.xxxxx.com/wp-content/uploads/banner-logo.jpg) no-repeat;
                    height: 180px;
                    }

                    I then make another copy of my logo but this time only 380 px side and whatever height I want. I use a media query to make it responsive:

                    @media only screen and (max-width: 480px) {

                    .header-image .title-area {
                    background-image: url(http://www.xxxxx.com/wp-content/uploads/new-banner-320.jpg) !important;
                    background-repeat: no-repeat;
                    height: 51px;
                    min-height: 0px;
                    }
                    .site-header {
                    height: 51px;
                    }
                    }

                    There might be plugins available to to all of this. At one time Nick The Geek had a nice Genesis Responsive Header plugin but when HTML5 was rolled out he never updated it.

                    My guess is that you can use the media query when using the WordPress method of putting in a header so that may be easier for you. But I’ve found that disabling the WP header logic in functions.php and using my own CSS is less prone to problems.

                    Hope this helps a little bit. Yeah, it really IS a PITA to do a responsive header. Maybe use Chrome’s “inspect element” on this site and look at the custom.css I coded to maybe help you. http://www.sweetdreamsfactory.net/ Note, this may not be the best way to do it, but it works for me. Since Genesis rolled out HTML5 everything has gotten progressively harder. If you don’t have a good understanding of CSS and some of the stuff in functions.php, you are best advised to hire someone to do all of this for you.

                    Dev
                    NewMedia Website Design

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • You must be logged in to reply to this topic.