Need help? Check out our Support site, then


Custom CSS - but can't widen the header

  1. You helped me so nicely with the tabs.

    Now, I have widened my blog with custom CSS. But I can't manage to widen my header. Can you help me?

    The blog I need help with is choveveitzion.wordpress.com.

  2. Your blog url and the blog theme you're using?

  3. Sorry about that.

    Blog:
    http://choveveitzion.wordpress.com/

    Theme:
    Digg 3 Column

    Thank you.

  4. Have you tried #header {width:[n]px;}
    or maybe all you need is to use a wider picture for the header?

  5. when i widened my theme, the wordpress-upload for the header-picture was limited to the original smaller page-width.

    In this case, you might have to create a wide enough header picture with irfan, paint etc, upload it to the media-library, and then add it as background image into the style sheet.

    for my theme i added:
    #mainpic {<br /> ...<br /> background:url('http://scrafen.files.wordpress.com/2009/09/terror_main_0606_43885a_res_01.jpg') no-repeat;<br /> ...<br />

    there is no ID 'mainpic' in your style sheet, maybe you could try here:
    #header-image {<br /> ...insert background for new wider header image...<br /> }

  6. Yellaojrak - thank you for your suggestion. I had tried that without success.

    And thank you to scrafen! Your ideas do seem to be helpful. First I tried:

    #header-image

    like you suggested -- but got nothing from that.

    But when I tried your suggestion with just:

    #header

    then I see we have made some progess! I still see my old header, and I see part of a new header to the right of the old header. But a few problems:

    1. Now I have a mixture of two photos for my header -- which doesn't look nice.

    2. For some reason, this piece in the back doesn't change. I have tried a few different photos for this "background" header -- but I keep seeing the original header I put in there!

    Help!

  7. And yes, I adjusted my CSS each time to reflect my new upload -- but I don't see it changing!

  8. thesacredpath
    Staff

    @avrohomd, first off, remove everything you have in your CSS edit window, make sure that "add to existing..." is selected and click "save."

    Next, paste the following into your CSS edit window, click preview and have a look at it, and then if everything looks OK, press "save."

    #container {
    width: 1200px;
    }
    
    #page {
    background: #FFFFFF;
    width: 1190px;
    }
    
    #header {
    width: 1200px;
    }
    
    #header-box {
    width: 1200px;
    
    #header-image {
    display: none;
    }
    
    #header-overlay {
    display: none;
    }
    
    #pagetitle {
    background: transparent url(http://choveveitzion.files.wordpress.com/2009/10/chovevei-header-5.jpg) no-repeat scroll 0 0;
    height: 207px;
    width: 1200px;
    }
    
    #syndication {
    color: #FFFFFF;
    position: relative;
    top: -50px;
    }
    
    #syndication a {
    color:#999999;
    }
    
    #searchbox {
    position:relative;
    top:-50px;
    }
    
    .content {
    background: none;
    width: 796px;
    }
    
    .narrowcolumn {
    background: none;
    width: 796px;
    }
    
    .narrowcolumnwrapper {
    background: none;
    width: 796px;
    }
    
    .entry {
    max-width:771px;
    }
  9. avrohomd,

    Before you go ahead with this, stop for a moment and think about web usability, in particular the screen resolution of your visitors. According to my own stats 30% of my visitors have a screen resolution that is 1024px or less wide, and there's nothing more annoying than having to scroll vertically AND horizontally to see the content of a website.

    See also
    http://www.hobo-web.co.uk/tips/25.htm
    for further reference

  10. Thank you Sacred Path. I entered this code as you said, and tried preview. First it loaded the old header, and then put in the nice new one that I have been trying for days to load!

    Now, Husdal, thank you also very much for your advice. These 30 % with 1024px screeens or less -- are these regular computers or mobile devices?

    Are some of these even 900px or less?

    What width should I aim for?

  11. avrohomd

    The reference resolution for computer screen used to be 800x600. Currently it is 1024x768, which is why I would not go beyond 1024px width. 1280x1024 is likely to be the next step up, but I think it's still some time into the future.

    Only 3% of my visitors use 800x600 or less, so in my case it makes no sense to cater for these visitors. and set my max width to 800px. They'll just have to scroll. And I only have 0.5% visitors using mobile devices. So I'll just forget about those, but I most certainly do not wish to annoy the 30% using 1024px, which is why I would never think of going wider than 1024px.

    Just a sidenote: Some of the themes on wordpress.com are fluid, meaning they will adjust to the viewers screen width. So if you are using a fluid theme on a 1280px screen and it looks just the way you want on your<Iem> screen. If I come along with my 1024px screen, the theme will be squashed. Or, if I come with a 1600px screen, the theme will be stretched. In both cases it may (or may not) look awful, which is why I recommend a fixed layout, especially if you are using a header photo. There's nothing worse than seeing a fluid theme that is stretched with a header image that's too narrow (or that repeats itself).

    Anyway, back to your question. Considering that you want to cater to the majority of your viewers, I would say that 1024px is the max width you should aim for. Just my $0.02.

  12. Sounds like sage advice.

    Thanks to both of you for your very helpful advice!

  13. thesacredpath
    Staff

    @avrohomd, you are welcome.

    If you decide to go with 1024, what you need to do is account for the browser scroll bar and the borders, so my suggestion would be 980px. To make the change from where you are now, subtract 980 from 1200 (220) and then subtract that number from the all widths in the CSS I gave you and use the result.

    Digg is a strange theme in that all the images used for the theme's background are declared in the underlying theme files rather than in the CSS. The white border image for the original header I was not able to get rid of for some reason. It simply stumped me with everything I tried, so it is hidden behind the new header image (except for a sliver at the bottom.

    You can hide that sliver by making a new header image that is say 10px or so taller and then substitute that URL for the one in the CSS and also increase the height in the #pagetitle section to match the height of the header.

  14. thesacredpath
    Staff

    Also, I mentioned the width concerns husdal offered in the other thread you had been posting in on this issue: http://en.forums.wordpress.com/topic/after-customization-tabs-have-lost-their-color?replies=17#post-386870 .

Topic Closed

This topic has been closed to new replies.

About this Topic