Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to Extend Metro's Header Image Size Limit?
- This topic has 11 replies, 2 voices, and was last updated 9 years, 8 months ago by Tom.
-
AuthorPosts
-
July 18, 2014 at 12:07 am #114772gabrielgmouraMember
Hello StudioPress team and community,
I am in need of your help and expertise. As you may know, Metro comes out of the box with the possibility to add a logo to the header with the following dimensions: 270 ?— 80 pixels. Anything bigger than that will be cropped.
My question to you is: How can I extend these dimensions and add an image beyond those parameters? For instance, say I want to insert a header image that is 720 px wide by 170 px high. How would I go about doing that?
Thank you very much for your time and consideration. I appreciate any pointers in the right direction! Thank you in advance.
Best,
GabrielJuly 18, 2014 at 11:28 pm #114893TomParticipantMetro Pro uses this code in functions.php to control the image size:
//* Add support for custom header add_theme_support( 'custom-header', array( 'width' => 270, 'height' => 80, 'header-selector' => '.site-title a', 'header-text' => false ) );
You can change the width and height to suit your requirements. Depending on your site design, you may have to modify some or several CSS rules to accommodate this new image size.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 21, 2014 at 10:39 pm #115319gabrielgmouraMemberThank you very much for taking the time to explain it. I truly appreciate it.
Best,
GabrielJuly 21, 2014 at 11:45 pm #115328gabrielgmouraMemberHi Tom,
I changed the code as per your instruction.
This is what looks like on the backend:
However, on the frontend, it appears as cropped:
In addition to the fuctions.php
I also edited the css:
}
.header-image .site-title a {
background-color: none;
max-width: 1080px;
min-height: 120px;
padding: 0;
}Basically, all I am trying to is have a full-width header of 1080px by 120px. Can you please let me know what I am doing wrong? It seems like it should be a simple mission but it has been a huge struggle.
Thank you in advance.
Gabriel
July 22, 2014 at 12:44 am #115335TomParticipantHi Gabriel,
It looks like you should be off to a good start. Changing that CSS (around line 984) as you have is the next step and should make the full image visible (as it does on my test site). Can you provide a link to you site to troubleshoot this? This method requires multiple images at different sizes for different screen sizes, so there's more CSS to tweak.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 22, 2014 at 1:03 pm #115436gabrielgmouraMemberHi Tom,
Thank you so much for holding my hard through this,
Here is my website: http://www.elementsofcinema.com/
I have reverted to the site name because the header image was cropped as per my previous post. But my intention is to replace the current name for the banner image I am working on. How can I "make the full image visible" as you said?
Again, thank you so much. I really appreciate your expertise,
Best,
GabrielJuly 23, 2014 at 12:36 am #115480TomParticipantGabriel,
Instead of reinventing the wheel here, you should follow this excellent tutorial by Sridhar Katakam. It's a proven method that Sridhar updated for use with Metro Pro. Scroll down the page to get to "Method 2 – Using a real image". It's easy to follow and simply works. I'm not sure if Sridhar is 100% back to action after a recent move, so if you have questions you can post them in this thread.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 23, 2014 at 2:40 pm #115583TomParticipantFor those that are following this thread, or may find it later, I've put up a post covering seven ways to deal with header content/images using Metro Pro: Getting Your Head Around Header Images
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 23, 2014 at 11:34 pm #115657gabrielgmouraMemberHi Tom,
Thank you so much for your assistance. And a special thanks for the thorough post on your blog. No doubt this will make tons of lives easier.
Though Sridhar's method 2 and your method 6 were super clear and easy to follow, it does eliminate the Header function from the Appearances menu. I was really looking forward to uploading multiple header images and utilizing the randomization/rotation feature to switch among the different designs I was going to upload. A small thing that I really wanted to do.
The other issue (perhaps more important for now) is that there's a red box/border around the header image:
Is that what you call "HTML around the logo"? Or could it be residue from my many failed attempts at editing the functions and stylesheet files? I don't think so as I was very careful but maybe.
Sadly, I am not doing this full time, which means I can only work on this website for a couple of hours every night. I will come back here tomorrow to maybe try your Method 5 and sacrifice the image responsiveness. I really wanna keep the Header function because it facilitates a few things on my end.
I will keep looking for the ideal solution (keeping the Header function intact, preserving logo image responsiveness, and still extending the header size). I love a good challenge, and this one seems like it will be worth it. Why does StudioPress only allow such a small logo (270 ?— 80 pixels) out of the box? I would like to understand why. In any way, beggars can't be choosers. I'm not a coder, and I understand my place in the universe.
Many thanks for people like you who extend a helping hand.
Best,
GabrielJuly 24, 2014 at 12:24 pm #115729TomParticipantuploading multiple header images and utilizing the randomization/rotation feature to switch among the different designs
Whatever header setup you choose is simply a design choice. I've not heard of this randomization feature, but assume it's from a 3rd party plugin (and my or may not be responsive).
To remove the brighter red border you'll need to edit the CSS to remove some padding or margin around the header image if/when you choose to use that image again.
I think that StudioPress' use of a 'small' logo is a purposeful design choice: it provides a reasonable area for a logo or site title text without overwhelming the top of the page. This follows the concept that content and relevance is more important than a single image and the whole site becomes a branding opportunity. Many sites for organizations big and small are designed with logo space of 270x80 or smaller. It's just a choice (that can be modified by the site designer/builder.)
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 24, 2014 at 12:51 pm #115737gabrielgmouraMemberThank you very much, Tom. I am definitely in better shape now than when I started. You have given me many choices, and I expect I will find something that I can work with.
Would you happen to know what line of code I should remove/edit to eliminate the bright red box around the banner? (I temporarily removed the banner because it wasn't ready yet, but odds are I will use some version of it, so removing the bright red box will be an obstacle in the future.)
I get your point about the logo size, and you are absolutely right. Sometimes less is more. I will reconsider my choices and see what works best.
Thank you so much!
Gabriel
July 24, 2014 at 1:48 pm #115750TomParticipantWould you happen to know what line of code I should remove/edit to eliminate the bright red box around the banner?
From here I would be guessing. If you put up the header image for a short time I could find it quickly.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ] -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.