Need help? Check out our Support site, then


Changing Custom Header Size

  1. I just purchased the CSS upgrade, and I'm using the Mystique Theme.

    The reason I purchased it was to be able to make my custom header larger than the 920 x 200 pixels the default allows for. I'm not sure exactly how much bigger I'll want it, but essentially I just want to give it more height.

    Anyone know how I can do that? And after, do I just change the image in the normal header upload page or do I need to add it through the CSS edit as well?

    Any help would be much appreciated

    The blog I need help with is stephenbabcockmusic.com.

  2. I am very much interested in this as well. I have been trying to make these changes myself with no success thus far.

  3. @pslavish
    Please read this for more information before you start any CSS editing:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ Another Volunteer will help you when he can.

    @pets3501
    The volunteer who helps with CSS will need to know the theme you are using as CSS editing at wordpress.com is theme specific. Are you also using the Mystique Theme?

  4. yes I am, but after I posted this I realized that this thread was on wordpress.com and I'm on wordpress.org (was searching for this issue on google and didn't even look once I found that someone else was having the same issue). so sorry!

  5. The version we have here is not the same as the self-hosted version so I'm glad I popped into this thread. No problem and happy blogging. :)

  6. @pslavish, your site has two issues. First off you are displaying far too many posts on your main page given you are posting about 40,000 vids in each post. Go to settings > reading and reduce the number of posts to show on a page to perhaps 3. The search engines will discount your page rank big time since they include page loading times when calculating page/search ranking.

    Secondly, your site has twice completely killed Firefox and caused it to crash on my system. That means I'm highly unlikely to even attempt to help you till you set your site back to perhaps showing two or three posts. If it again kills my browser because of some other issue, you are then completely on your own.

  7. @thesacredpath: thanks for the tips, I cut it down to 3 posts displayed at a time. Is there some way to give the posts a "drop down" like effect. Because a majority of our posts aren't going to have 10 youtube videos in each one, but for those it'd at least be nice where you don't need to scroll down through 10 videos to see the next post.

    But the main issue is just giving greater height to the custom header. As you can tell, it's a musician's website and I'm going to be getting new press photos/album art that I'll be incorporating into the header design and I feel very limited by the current header size, based on what I'd like to design.

    Thanks for the help, and sorry it was making your browser crash. Would that only happen because of the amount of posts on the home page?

  8. @pslavish
    I'm not sure if this will be helpful or not but you can split content in any post by using one of these methods to create an excerpt followed by a read more link your readers can click. http://en.support.wordpress.com/splitting-content/
    In posts with multiple videos you may want to use the more tag, page jump links or pagination (next page).

  9. Ah yes, it loads much faster. Not sure what was killing Firefox, but that issue seems to be gone as well.

    This is where you will be working to change the height of the header, and at that point you will not be able to use the custom header uploader since it will always want to crop it to the original size.

    #branding {
    background: url("http://stephenbabcockmusic.files.wordpress.com/2011/04/banner-920x200.jpg") no-repeat scroll 0 0 transparent;
    height: 148px;
    }

    The existing header is 200px tall, and note that the height shown is 148px. That is so that the social icons will overlap the bottom edge of the header image and the top of the nav bar will be at the bottom of the image with no gap. So, if you want a 300px tall header image, the height you would set would be 300px - 52px = 248px. The 52 of course being the original 200 - 148.

    The new header image will have to be uploaded to the media library, then you get the URL of that image and replace the URL between the double quote marks in the background declaration.

  10. this is nice i saw it realy it is very good

  11. @thesacredpath: Awesome, thanks so much. I just played with the editing and "preview" button for it, looks like it'll work great. I didn't make a new custom banner/header to upload yet, but based on the amount of blank space left below in the preview, I understand it'll be filled out once I resize my design. I probably won't put it into effect for a week or so, as I'm waiting on some new press/ photos that I'm going to incorporate into the new banner. But it's great to know how everything works now, so I can make a seamless change when it's ready.

    I'll be sure to post up again once I change it to show the finished product and the appreciation of your assistance.

    Any other feedback on the site/pages/functionality from anyone else is welcome as well.

    Thanks

  12. You are welcome and I look forward to seeing the new header.

Topic Closed

This topic has been closed to new replies.

About this Topic