LifeStyle Theme Header

Community Forums Forums Design Tips and Tricks LifeStyle Theme Header

This topic is: not resolved

This topic contains 10 replies, has 5 voices, and was last updated by  AC 9 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #78275

    Kathleen87
    Member
    Post count: 3

    Hi:

    The LifeStyle Theme header is only 320 x 110 pixels. You put in an image and then the background color that is comes with – blue, green, mustard, etc. that it comes with is left behind it.

    We have a larger image we want to use as our header. We don’t want any background colors and we want our image to be most of the width of our site. It looks like the width of the header section above the menu in the demo is 1068 x 175 pixels. Is there a way we can get the theme to take an image of 1068 x 175 pixels instead of the 320 x 110 pixels which it only allows for?

    Is there a code I can put into the editor or can you direct me where to go into the editor to make the changes?

    Thank you,
    Kathleen

    #78495

    AC
    Blocked
    Post count: 7712

    Check out Brad’s instructions here.

    #78569

    Kathleen87
    Member
    Post count: 3

    Hi:

    The answer he gave does not work.

    He says to go to the end of the theme and do this:

    @media only screen and (max-width: 767px) {
    .site-header {
    background-image: url(images/second-header.png);
    }
    }

    My images are not located at images. They are at uploads. wp-content/uploads/2013/12/HeaderCurrentSite1.png

    What do I put for the URL part?

    @media only screen and (max-width: 767px) {
    .site-header {
    background-image: url(wp-content/uploads/2013/12/HeaderCurrentSite1.png);
    }
    }

    I tried all scenarios and they do not work. What do I put?

    Thanks

    #78581

    genwrock
    Member
    Post count: 678
    /** Add support for custom header */
    add_theme_support( 'genesis-custom-header', array( 'width' => 'YOUR NEW LOGO WIDTH', 'height' => 'YOUR NEW LOGO HEIGHt' ) );

    Update the above code in your functions.php file


    #78719

    Kathleen87
    Member
    Post count: 3

    Please clarify. You are asking me to go to the functions portion. If you don’t put in the correct code you can have the whole site disappear.

    I want to have a header that takes up the whole width.

    This is the code I was told to use on that site that I was sent to

    @media only screen and (max-width: 960px) {
    .site-header {
    background-image: url(‘http://www.yourmarketingassistant.com/testthesis/wp-content/uploads/2013/12/HeaderCurrentSite1.png’);
    }

    It does not work.

    Now to make it work I go to the functions section and put in this section – this is what is there now –

    /** Add support for custom header */
    add_theme_support( ‘genesis-custom-header’, array( ‘width’ => ’175′, ‘height’ => ’960′ ) );

    Can you confirm that this is the code that I put in the functions section that will make it work?

    #78727

    nutsandbolts
    Moderator
    Post count: 3141

    Okay, if you’re going to alter your functions, file, I would roll back all the changes you made with Brad’s tutorial, otherwise things will look kind of strange.

    In functions.php, find the current custom header function. Remove it and replace it with this:

    /** Add support for custom header */
    add_theme_support( ‘genesis-custom-header’, array( ‘width’ => ’1068′, ‘height’ => ’178′ ) );

    That will allow you to upload a header image that is 1068×178 in Appearance > Header, which is the exact size of the header area.

    Once you upload it, you’ll need to make a number changes to your stylesheet to get it to display correctly. If you can post a link to the site you’re working on, I’ll try to help you get it sorted.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78836

    Kathleen87
    Member
    Post count: 3

    Thank you so much for your help. It is becoming more clear now for how to fix.

    The site is:

    http://www.yourmarketingassistant.com/testthesis/

    The header full image is http://www.yourmarketingassistant.com/testthesis/wp-content/uploads/2013/12/SSandAlogo.jpg

    1102 width
    350 height

    If we cannot get the full height to show and I have to resize the header a bit to show that is fine. If you can just give me the CSS code to get me to show the max of what we can do that will be great.

    Thanks so much for your help,
    Heather

    #78838

    nutsandbolts
    Moderator
    Post count: 3141

    Find this in your stylesheet:

    .header-image .site-title a {
    float: left;
    min-height: 110px;
    width: 100%;
    }

    and change it to this:

    .header-image .site-title a {
    float: left;
    min-height: 350px;
    width: 100%;
    }

    That gets most of the header image showing. Then find this one:

    .site-header {
    background-color: #76d2c5;
    padding: 48px;
    padding: 4.8rem;
    overflow: hidden;
    }

    and remove all the rules, leaving this:

    .site-header {
    }

    That should fix the header on full size screens, though it will still need considerable work for mobile.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #86286

    TraceyR
    Participant
    Post count: 16

    Hi Andrea,

    I have the same requirement as Kathleen, to have a full-width header – 1068px wide, 275 px high.
    (When purchasing this version of Lifestyle PRO it says “custom header” … but it doesn’t say it’s so tiny!)

    I followed your instructions to
    a) modify the functions.php file
    b) modify the CSS “.header-image .site-title a” – min height
    c) modify the CSS under .site-header (I didn’t remove all the rules, only added in the background image & a min-height statement

    It works beautifully on my PC (see client’s test site at http://thesimplewebinarcompany.com/lulu/ ) but looks bad on mobile – you mentioned above that “extensive work” would be needed to sort out the mobile side … is there a tutorial anywhere that could point us in the right direction to sort out the CSS etc. for mobiles, please?

    I presume the reason the original header is small, is that it’s to make it responsive – can we have 2 separate headers to cater for different devices?

    thanks
    Tracey

    • This reply was modified 9 months ago by  TraceyR.
    • This reply was modified 9 months ago by  TraceyR.
    #86308

    TraceyR
    Participant
    Post count: 16

    I’ve just discovered a link to a tutorial in another post on the forum that helps with making the header mobile-friendly :

    http://wpsites.net/web-design/customize-mobile-responsiveness-of-lifestyle-pro-theme-header/

    I created a small version of my header, used this tutorial & added in an extra “background-image” statement & it’s looking good on mobile too

    all the best
    Tracey

    #86314

    AC
    Blocked
    Post count: 7712

    Ohhhh, I apologize for my link blunder! I must not have copied the correct one. Thanks Andrea for jumping in there.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.