StudioPress Header Issue

13 replies
  • WEB DESIGN
  • |
This may be the easiest question that someone answers today. I am building a site with the Lifestyle Child Theme, and having an issue (I know Thesis). The Header size is 920X150...I tried to change the style sheet to adjust the header size to 920X200. When I made what I thought was the necessary edits all it did was increase the white space between the header image and the menu below. I am hoping this is as ridiculously easy as I imagine it is, I just haven't been able to find anyway.

Here is the code:



/* Header
------------------------------------------------------------ */

#header {
background: url(images/header.png) no-repeat top left;
height: 200px;
margin: 0 auto;
width: 920px;
}

.page-template-landing-php #header {
margin: 20px auto 0;
}

#title-area {
float: left;
overflow: hidden;
padding: 35px 0 0 30px;
width: 400px;
}

.header-full-width #title-area {
padding: 35px 0 0;
}

#title {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 48px;
font-variant: small-caps;
line-height: 48px;
text-shadow: #666 1px 1px;
}

.header-full-width #title {
text-align: center;
}

#title a,
#title a:hover {
color: #fff;
text-align: center;
text-decoration: none;
}

#description {
color: #fff;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
font-style: italic;
text-shadow: #666 1px 1px;
}

.header-full-width #description {
text-align: center;
}

#header .widget-area {
float: right;
width: 550px;
}

Thanks for the help
#header #issue #studiopress
  • Profile picture of the author RichKent
    Looks fine to me. Can you post a link to the site?
    {{ DiscussionBoard.errors[6712280].message }}
  • Profile picture of the author MammothStrength
    Jessica Larae

    When I changed the 150 height to 200 it did NOT increase the height of the header...just increased the white space. I am ok if I did something really stupid, I am just really hoping this is something that cannot be changed. 150 is just too narrow for what I am trying to do.
    {{ DiscussionBoard.errors[6712378].message }}
  • Profile picture of the author RichKent
    Actually it did. Your current header image is only 150px tall. Try uploading a 200px tall header image in its place and you should be all good.
    {{ DiscussionBoard.errors[6712398].message }}
  • Profile picture of the author MammothStrength
    When I upload the 920x200 banner it asks me to crop it...I cropped it and posted it just so you can see. And the white space between the header and the menu is still there.
    {{ DiscussionBoard.errors[6712412].message }}
  • Profile picture of the author RichKent
    Without seeing the backend of the theme - don't use whatever you're using that automatically crops the image. Upload the full-size image via the media tab, then take the URL of the image and use that in css -

    #header {
    background: url(images/header.png) no-repeat top left;
    height: 200px;
    margin: 0 auto;
    width: 920px;
    }

    Replace images/header.png with the full URL of the image you upload.

    If the image is cropped by 50px then there's going to be a 50px white space. Make sense?
    {{ DiscussionBoard.errors[6712431].message }}
  • Profile picture of the author MammothStrength
    OK...that made sense, and I did exactly what you said and got the same result. And cleared cache to be sure.
    {{ DiscussionBoard.errors[6712463].message }}
    • Profile picture of the author RichKent
      Originally Posted by MammothStrength View Post

      OK...that made sense, and I did exactly what you said and got the same result. And cleared cache to be sure.
      The image that you uploaded and linked to is still the 150px tall cropped image. Upload the original 200px image and use that one instead.
      {{ DiscussionBoard.errors[6712484].message }}
  • Profile picture of the author MammothStrength
    OK...I removed the image from the header via the header tab. I went into the media library and removed all instances of that header. I then saved it with the name STEVE...reuploaded it via media tab, and inserted the link directly into the header code, and it doesnt show anything.

    So then I restored the original color banner and text. I inserted the banner code AGAIN...and when I checked it..the banner was there but the text was over top of it. So I went to setting and turned the text off, and it removed the banner. So then I did all the of that again, and went to the general setting and removed the wordpress title and tagline, and it works. So for some reason (and it may be obvious) the custom banner size only works with the text turned on and removed.

    Is there a better way to do this? Thanks for the help btw.
    {{ DiscussionBoard.errors[6712534].message }}
    • Profile picture of the author RichKent
      Originally Posted by MammothStrength View Post

      OK...I removed the image from the header via the header tab. I went into the media library and removed all instances of that header. I then saved it with the name STEVE...reuploaded it via media tab, and inserted the link directly into the header code, and it doesnt show anything.

      So then I restored the original color banner and text. I inserted the banner code AGAIN...and when I checked it..the banner was there but the text was over top of it. So I went to setting and turned the text off, and it removed the banner. So then I did all the of that again, and went to the general setting and removed the wordpress title and tagline, and it works. So for some reason (and it may be obvious) the custom banner size only works with the text turned on and removed.

      Is there a better way to do this? Thanks for the help btw.
      No problem. I'm sure there is a better and easier way to do it, but I haven't used the theme you're using.

      When you're talking about the theme forcing you to crop the header image, etc..., that's something specific to your theme.

      It looks like you're using Genesis, and generally you should be able to make the changes you want to make easily in a child theme.
      {{ DiscussionBoard.errors[6712547].message }}
  • Profile picture of the author MammothStrength
    That's what I thought too, but I appreciate the help. I might have eventually figured out the "work around" sometime next week...haha.
    {{ DiscussionBoard.errors[6712655].message }}
  • Profile picture of the author Istvan Horvath
    I am not familiar with that theme... however, if it works on the same principle as the default (2011) WP theme, then the cropping size is defined in the functions.php of the theme.

    I was just working the other day on a child theme for 2011 and needed a completely different size of header image with the same functionality: user uploads image; user can select area for cropping etc.

    Actually, I had to change the height & width values in the functions.php.
    I'd say look around in that file...
    Signature

    {{ DiscussionBoard.errors[6715698].message }}
    • Profile picture of the author bbb20
      I'm not sure if you figured out the solution to this post. But its not just the CSS you need to change. You need to edit the Theme functions as well.

      here is what you will need to edit to your requirement.

      // Add support for custom header
      add_theme_support( 'genesis-custom-header', array(
      'flex-height' => true,
      'height' => 87,
      'width' => 1080
      {{ DiscussionBoard.errors[9802987].message }}
  • Profile picture of the author topnichewebsites
    Prob figured it out by now, this post is years old
    Signature
    http://pixelcovers.com/ <- eBook add eCovers

    https://www.unicommercesolutions.com <- WordPress Websites and Maintenance
    {{ DiscussionBoard.errors[9803805].message }}

Trending Topics