September 10, 2013 at 6:53 pm #61820
A designer created a custom header for me to use with my site but I realize I don't know how to install it or even whether I should since the header is 1000x300. It looks great at this size but my questions are:
1. Can I install a header of this size given the default size seems to be 940x150?
2. Should I install it or will it cause problems because it is larger? I am especially worried about mobile devices.
3. Can I make different parts of the banner clickable to different places? There is a photo of a book I'm selling and I'd love to make that part clickable to Amazon but make my site's logo clickable to the home page.
I'm using Prose as my child theme.
Thank you for any advice.http://www.vocationvillage.comSeptember 10, 2013 at 9:53 pm #61829
nunotmpParticipantSeptember 11, 2013 at 11:32 am #61974
I don't think the header will look as nice if I ask the designer to re-size it to make it smaller. Don't people routinely use larger headers than 940?—150 or am I imagining that?September 11, 2013 at 1:10 pm #61989
I was going to ask the same thing. Seems as if one could add a wider header if coded (somewhere) correctly.
Does the wrapper have to be re-sized at the same width as the header? I tried that with the wider header in place, but the entire header did not show. I re-sized the dimensions in the Prose/Genesis design settings and it didn't seem to help either, although then when I looked at the Appearance -->Header - WP would now 'allow' me to use a header image at that wider width.
Hope that makes sense. Bottom line, I really don't know where else to find any info.
You can get an idea of the look I'm trying to achieve by visiting the static pages of the developing site -
Thanks so much!
~KittySeptember 11, 2013 at 1:39 pm #61994
(1 & 2) You would need to make some changes to your code to avoid it being cropped when you upload it.
The value for the width on Line 36 of your prose > lib > init.php file is 940px.
add_theme_support( 'genesis-custom-header', array( 'width' => 940, 'height' => genesis_get_option( 'header_image_height', PROSE_SETTINGS_FIELD ) ) );
You may also need to modify the CSS code as well and add CSS media queries for responsive design of your header.
3. You can add a widget or hook in an image and make the image clickable, yes.
Brad Dalton has written 1000 + Genesis tutorials & 4000+ Code Snippets .September 11, 2013 at 1:43 pm #61995
I found the setting under Genesis > Design Settings where I was able to change the header size. I made it 950 x 290 as I found via experimentation that this looked best and avoided anything being cut off.
The header is automatically clickable to my home page, which is fine for now. Eventually I would like to figure out how to make the book image clickable to Amazon.
The header is still updating on my pages but in the meantime, I checked it out on an iPhone and as I predicted, it doesn't look good there as it doesn't re-size well for a mobile device that small.
I am not sure what to do next...still researching...September 11, 2013 at 3:06 pm #62011
Perhaps something like this would work for fixing the problems on mobile sites?September 11, 2013 at 4:43 pm #62019
Janet, I did that but it didn't work for me. Maybe because the header image is larger than my wrapper (?).
Thanks Brad! I never would have figured that out. Question - do I replace that line 36 in the init.php file with the code that you wrote above? Only make the width wider, 1275px, the size of the header?
The responsive design part I'm not worried about at this stage... one thing at a time. I'm a newbie with Genesis.
Thanks again Brad.September 11, 2013 at 4:46 pm #62020
Was Brad writing to mkatty or to me? Maybe a moderator should separate this thread to avoid confusion?September 11, 2013 at 5:06 pm #62021
Janet, I didn't start a new thread because ultimately, we're both trying to achieve the same thing - a wider header image. Answers could be helpful to both of us.
~KittySeptember 11, 2013 at 5:09 pm #62024
OK, Kitty - makes sense. I think Brad might have been talking to me since he numbered his answers.
I've made progress. I like the way my header looks on desktops and iPads. I just have to figure out how to fix it on smart phones. I will research "CSS media queries."
And I need to make the book image clickable.
But I'm farther ahead than I was this morning!September 11, 2013 at 6:30 pm #62034
Ahh, I see what you mean... but actually, his code could possibly work for me too.
Progress is a good thing!September 11, 2013 at 8:21 pm #62039
Alright, I hunted & experimented and I came up with a solution. Taa-daa!
Thanks guys, done deal for now.
~KSeptember 11, 2013 at 8:23 pm #62040
mkatty, are you going to share your solution with us?September 11, 2013 at 10:18 pm #62046
Quite honestly, I went through all style sheets and tested things in Firebug... over and over (do you use Firebug? very helpful to experiment with css on your site without messing anything up - if something works, then I copy and paste it into my custom css). Anyway, that's what I did. Like a dog on a bone, I can't give up until I find it!
I looked for and changed all width instances of the previous, narrower header to the new, wider one. That also required me to change some code for the nav menu... a lot of little things. I also pasted that line of code that Brad posted above. Figured I'd never know unless I tried it.
That's why I frequently can't share many solutions because I just hunt around and change this and that, and if it works I'm happy. Of course I ALWAYS have backups of the original CSS and for every decent change that I've made. It's a must.
You must be logged in to reply to this topic.