Lifestyle Theme Header

Community Forums Forums Design Tips and Tricks Lifestyle Theme Header

This topic is: not resolved

This topic contains 13 replies, has 4 voices, and was last updated by  braddalton 10 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #66446

    denissemarie
    Participant
    Post count: 16

    Hi, the new Lifestyle theme only gives you the ability to change the header with a size of 320×110 but how can I edit the entire header? I can’t seem to find the size of the entire header. I want to add a custom one – not just change the image in the center.

    Also, where would I add the header in the code?

    Thank you in advance.

    http://www.artkidstic.net
    #66464

    braddalton
    Participant
    Post count: 9445

    You can change the size for the Custom Header uploader.
    [php]
    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 110,
    ‘width’ => 320,
    ) );
    [/php]

    You can change these values and also the values for the height and width in the CSS code under the Header section.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66471

    denissemarie
    Participant
    Post count: 16

    Hi thank you for your response. I did this and changed it to 920×110 but it still shows a frame around the header I upload. I can’t seem to find the size for the entire header. What is the entire width and height?

    Thanks again!

    #66484

    braddalton
    Participant
    Post count: 9445

    Link to it please so i can inspect the code and help you.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66540

    denissemarie
    Participant
    Post count: 16

    Hi the link is http://www.artkidstic.net

    #66575

    braddalton
    Participant
    Post count: 9445

    Please add this code at the end of your child themes style.css file:
    [css]
    .site-header {
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 4.8rem;
    }
    [/css]

    I found this code by inspecting the header using Firebug


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66600

    matthewende
    Participant
    Post count: 2

    Hi, I am having the same issue with the header. Trying to make it the same size as the original panel but no matter what size I try it won’t work. (currently 1068×206)

    http://www.mattende.com/mattende

    #66622

    braddalton
    Participant
    Post count: 9445

    You do need to modify the CSS code for the header to make this work because there is a fair amount of padding.

    I am in the middle of writing a tutorial on this topic and will publish it within a few hours.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66632

    denissemarie
    Participant
    Post count: 16

    Thank you again for your help.

    Is there any way to find out what the size is of the entire header area? Because what you are saying works but only if the background of the header is white. But if I change the background of the header to another color there is still a border. The reason this matters to me is because I am having a new header designed and the background will not be white.

    Please see screenshot where you see border even with the change you listed before:

    http://screencast.com/t/2iinSJwt61ma

    (this shows the gray border – I would like my header to cover the entire gray area)

    I think I found another section where it said a width of 1140 – is this accurate?

    Thanks again.

    #66639

    braddalton
    Participant
    Post count: 9445

    Its not a problem and easily fixed http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/

    1140px is correct.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #66649

    denissemarie
    Participant
    Post count: 16

    Awesome! Thank you so much.

    #66718

    matthewende
    Participant
    Post count: 2

    Thanks so much Brad, great tutorial!

    #67923

    dc50093
    Member
    Post count: 7

    The css changes in the tutorial are not working for me and I have a few questions. First, do we drop the code in at the very bottom of Lifestyle’s style.css or do we override the pre existing rules that are found a short way up from the bottom? Either way it’s not working me and there is a frame around my 1140 x 200 image. I’m building the site locally on a WAMP so I can’t provide a link.

    #67934

    braddalton
    Participant
    Post count: 9445

    Its hard to say without inspecting your site with Firebug.

    You can change the existing CSS rules and add the code at the end of the style sheet.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

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

You must be logged in to reply to this topic.