How do you use full size header Lifestyle Pro??

Community Forums Forums Design Tips and Tricks How do you use full size header Lifestyle Pro??

This topic is: not resolved

This topic contains 33 replies, has 6 voices, and was last updated by  Bargnchk 3 months ago.

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #65841

    SteveDub
    Participant
    Post count: 18

    Hi,

    Lifestyle PRO:

    Have tried searching but can’t seem to find an answer. How do you change the header image so it is full size?? i.e. replace the big block of colour? It seems to only let you upload an image of 320×110. Is this because it re-sizes and you can’t put a fixed size image in it’s place?

    Thanks for your help,
    Steve

    #65938

    braddalton
    Participant
    Post count: 10577

    Try this http://wpsites.net/web-design/custom-header-image-genesis/

    You can change the width in the PHP code located in your child themes functions.php file and also the values under your header section in your child themes style.css file.


    #66532

    Sam Angel
    Participant
    Post count: 12

    I followed the directions from http://wpsites.net/web-design/changing-custom-header-image-sizes-in-different-themes to resize the header in a Lifestyle Pro theme I’m working on.

    I set the widget width to 0.

    Everything worked fine except for there are blocks of color on each side the the header image that I can’t find how to get rid of.

    Header with Unwanted Color Blocks

    I would like the header to extend out across the color blocks so that the green doesn’t show at all.

    How can I get this to work?

    #66574

    braddalton
    Participant
    Post count: 10577
    #66612

    SteveDub
    Participant
    Post count: 18

    Thank you for your help guys, I will try and have a look at this today as haven’t had chance yet.

    #66651

    braddalton
    Participant
    Post count: 10577

    Here’s the solution you can paste at the end of your child themes style.css file before the Media Queries.
    [css]
    .site-header {
    background-color: #fff;
    }
    [/css]

    Source http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/


    #66683

    Sam Angel
    Participant
    Post count: 12

    Here’s the link: http://members.staceymyers.com/sara/

    I’m not sure why the header isn’t taking up all of the space inside the header area either. I would like it to extend as far out as the menu bars. When I looked the dimensions were 320 width for the header and 600 width for the header widget so I made my header image 920 width. I would have thought it would take up the entire space by making it that wide. Why didn’t it?

    #66684

    Sam Angel
    Participant
    Post count: 12

    If this info:

    .site-header {
    background-color: #fff;
    }

    was for me. I tried it and it didn’t do anything that I could see after inserting it so I took it back out.

    #66748

    braddalton
    Participant
    Post count: 10577

    Try this:
    [css]
    .site-header {
    background-color: #ffffff!important;
    }
    [/css]

    The reason the other code didn’t work was because its being over-ridden by the class for the color style options.

    Actually, this code is better because it uses the color style class:
    [css]
    .lifestyle-pro-green .site-header {
    background-color: #fff;
    }
    [/css]

    As far as the padding and width etc, you’ll find the solution in the tutorial i linked too above.


    #66885

    Sam Angel
    Participant
    Post count: 12

    Thank you so much! Everything is working now and looks great!

    #66964

    SteveDub
    Participant
    Post count: 18

    Thanks for all your help guys, glad you got your site sorted Sam looks good now! Exactly what I’m trying to do, although still with no success, I am going to re-read through these posts and look at the links again!

    Is there a specific size you have made your Header Image Sam?? OR does this not matter once the new code is implemented and will this rezise anything to full width??

    Thanks for your patience people :)
    Steve

    #66982

    Sam Angel
    Participant
    Post count: 12

    Steve,

    I originally made it to 920×150 but after following the directions from http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area I made it to be 1140×200 and it worked.

    Sam

    #67010

    SteveDub
    Participant
    Post count: 18

    Yep that’s done the trick awesome :)

    Thank You very much everyone,
    Steve

    #67994

    SteveDub
    Participant
    Post count: 18

    Have just checked this change on an iPad and it doesn’t render the header image correctly, it cuts off part of it and doesn’t reveal the full size banner. Although seems to look ok on a couple of different PC screen sizes.. any ideas??? This does concern me as obviously the usage of tablet/mobile devices is huge now! I’m wondering whether I need to update to a newer Child Theme that supports this better?

    Advice appreciated as usual :)

    Thanks,
    Steve

    #68011

    braddalton
    Participant
    Post count: 10577

    You will need to modify the CSS code in the Media Queries for the header elements to fix that.

    Its a pretty basic modification.

    Just reduce the padding and margins for the site header and other header elements if needed.


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

You must be logged in to reply to this topic.