Lifestyle Theme – Full size header image

Community Forums Forums Design Tips and Tricks Lifestyle Theme – Full size header image

This topic is: not resolved

This topic contains 23 replies, has 3 voices, and was last updated by  braddalton 9 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #71919

    tikvah73
    Participant
    Post count: 21

    My blog is homeschoolencouragement.com, and I am using the Lifestyle theme.
    I want my header image to take up the full header box. I have tried multiple things to no avail. Is there a code overriding the coding changes I have been making?

    Please advise.

    http://homeschoolencouragement.com
    #71933

    braddalton
    Participant
    Post count: 9210

    On line 829 of your child themes style.css file you’ll see this CSS code:
    [css]
    .site-header {
    background-color: #76d2c5;
    padding: 48px;
    padding: 4.8rem;
    overflow: hidden;
    }
    [/css]

    Remove the padding from this code and your header image will extend full width of the site header.

    Note: It won’t extend full width of the site container.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #71937

    tikvah73
    Participant
    Post count: 21

    Thank you for responding Brad,

    I have already changed that code. That is one of the reasons we are so confused.

    #71943

    braddalton
    Participant
    Post count: 9210

    That covers the entire site header width or header box as you referred to.

    To extend beyond that, you will need to remove the padding for the site container next to the site header.

    Your original image width of 960px will need to be changed to 1140px as this is the entire width of the site container.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #71947

    tikvah73
    Participant
    Post count: 21

    Okay thank you again for your fast reply. I changed the image size, and it is not making any difference.

    #71950

    tikvah73
    Participant
    Post count: 21

    And I also removed the padding off of the site container. :)

    #71960

    braddalton
    Participant
    Post count: 9210

    You will also need to change the values for the width in your style sheet.

    If you added the header image using the custom header uploader, you will also need to change the values for the width as well in the PHP code.

    Or you can remove the PHP for the custom header and use CSS to add your new image:
    [css]
    .site-header {
    background-image: url(images/logo.png);
    height: 168px;
    width: 100%;
    }
    [/css]

    Upload your image to your child themes images folder and change the file name to match the code:

    [html]
    logo.png
    [/html]

    Removing the padding for the site-container removes the padding for the entire page site wide.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #71964

    tikvah73
    Participant
    Post count: 21

    I’m sorry I didn’t give enough information in my first post.

    I did already change the width and height in the .php file using the tutorial here:

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

    I went through your tutorial very carefully and made sure I did everything you said first. It didn’t work.

    Then, my header designer tried adding some custom code which did not work.

    At this point, we are inserting the header image using Genesis Simple Hooks. This is the closest we have gotten it after going through all of these steps.

    So I want to make sure I understand what you are saying, because I am truly a “code hack” and not a programmer (sorry!)

    I need to remove this completely from the .php file:

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 200,
    ‘width’ => 1140,
    ) );

    and add this

    .site-header {
    background-image: url(images/logo.png);
    height: 200px;
    width: 100%;
    }

    Is that right?

    Honestly, I love everything else about Lifestyle or I would be switching to a different theme.

    #71966

    tikvah73
    Participant
    Post count: 21

    Oh, and does that mean I should put the padding on the site-container back? I honestly couldn’t see that it made any difference.

    #71971

    braddalton
    Participant
    Post count: 9210

    Clear your browser cache and check because it normally does.

    I don’t think you can extend the site header to the site container without recoding some of the default code.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #71974

    tikvah73
    Participant
    Post count: 21

    I have cleared my browser cache, and emptied my page cache.

    I’m repeating this because I want to make sure it is correct before I try it.

    So I want to make sure I understand what you are saying, because I am truly a “code hack” and not a programmer (sorry!)

    I need to remove this completely from the .php file:

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 200,
    ‘width’ => 1140,
    ) );

    and add this

    .site-header {
    background-image: url(images/logo.png);
    height: 200px;
    width: 100%;
    }

    Is that right?

    #71976

    braddalton
    Participant
    Post count: 9210

    Thats right however it will not extend your header image full width outside the site-header container.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #71977

    tikvah73
    Participant
    Post count: 21

    Okay thanks! I will give it a try.

    I don’t think I want to extend if full-width so that is okay. Inside the container, but without the green background will be awesome!

    #71978

    tikvah73
    Participant
    Post count: 21

    Okay thanks! I will give it a try.

    I don’t think I want to extend if full-width so that is okay. Inside the container, but without the green background will be awesome!

    #71980

    tikvah73
    Participant
    Post count: 21

    I’m not sure you really want or need to keep helping me with this, but that did not work either.

    Here are the steps I took:

    1. inserted the code to my css

    site-header {
    background-image: url(images/logo.png);
    height: 200px;
    width: 100%;
    }

    2. uploaded my image – renamed to logo.png to my child theme’s image file using my cPanel login.

    3. removed this from the .php code

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 200,
    ‘width’ => 1140,
    ) );

    4. Removed the Genesis Simple Hooks code I had placed earlier to put the image in my header.

    Now, I have no image, just a green box, and no site title either.

    http://homeschoolencouragement.com

    • This reply was modified 9 months, 2 weeks ago by  tikvah73.
    • This reply was modified 9 months, 2 weeks ago by  tikvah73.
Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.