Larger header w/ Prose theme?

Community Forums Forums Design Tips and Tricks Larger header w/ Prose theme?

This topic is: not resolved

Tagged: ,

This topic contains 16 replies, has 4 voices, and was last updated by  jsctx 1 year, 1 month ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #61820

    jsctx
    Participant
    Post count: 8

    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 1000×300. 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 940×150?

    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.com
    #61829

    nunotmp
    Participant
    Post count: 164

    You can upload it but WordPress will prompt you to crop the header. You can give it a shot and see if it looks right to you. If not, just remove it and have the designer or someone else to re-size it for you.


    #61974

    jsctx
    Participant
    Post count: 8

    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?

    #61989

    mkatty
    Participant
    Post count: 58

    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.
    Thanks!

    http://www.dorothymandrakos.com/blog/

    You can get an idea of the look I’m trying to achieve by visiting the static pages of the developing site -

    http://ink2art.com/client/dm/

    Thanks so much! :)
    ~Kitty

    #61994

    braddalton
    Participant
    Post count: 10217

    (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.
    [php]
    add_theme_support( ‘genesis-custom-header’, array( ‘width’ => 940, ‘height’ => genesis_get_option( ‘header_image_height’, PROSE_SETTINGS_FIELD ) ) );
    [/php]

    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.


    #61995

    jsctx
    Participant
    Post count: 8

    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…

    #62011

    jsctx
    Participant
    Post count: 8

    Perhaps something like this would work for fixing the problems on mobile sites?

    http://designsbynickthegeek.com/plugins/genesis-responsive-header

    #62019

    mkatty
    Participant
    Post count: 58

    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.

    #62020

    jsctx
    Participant
    Post count: 8

    Was Brad writing to mkatty or to me? Maybe a moderator should separate this thread to avoid confusion?

    #62021

    mkatty
    Participant
    Post count: 58

    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. :)
    ~Kitty

    #62024

    jsctx
    Participant
    Post count: 8

    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!

    #62034

    mkatty
    Participant
    Post count: 58

    Ahh, I see what you mean… but actually, his code could possibly work for me too. :)
    Progress is a good thing!

    #62039

    mkatty
    Participant
    Post count: 58

    Alright, I hunted & experimented and I came up with a solution. Taa-daa!

    Thanks guys, done deal for now.
    ~K

    #62040

    jsctx
    Participant
    Post count: 8

    mkatty, are you going to share your solution with us?

    #62046

    mkatty
    Participant
    Post count: 58

    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. :)

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.