Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Header Problem with Custom CSS (was fine earlier)

  1. sdrane
    Member

    Hi all,

    I noticed a problem with my custom CSS today, which was not there last week. Let me explain (first in words, and then with my CSS code):

    I use K2-lite with custom CSS. Last week, I made the following changes to custom CSS:

    1. Increased blog width to 800 pixels
    2. Decreased header height from 200 to 125 pixels
    3. Increased font-size for readability
    4. Made a new header of size 800 by 125 to fit the above changes.

    Now, the K2-lite custom header page only allows you to put a custom header of size 780 by 125. I got arround this problem by uploading my new header, and including it through custom CSS. The relevant code is as follows:

    body {
    color:#444;
    background:#fff;
    font:72% 'Lucida Grande', Verdana, Arial, Sans-serif;
    }

    * html #page {
    width:800px;
    }

    #page {
    background:#fff;
    border:0;
    width:800px;
    padding:2px 0 10px;
    }

    #header {
    height:125px;
    border-bottom:1px solid #000;
    background:url('http://mirkwood.wordpress.com/files/2006/12/mirkwoodheader_white.jpg');
    font:2em;
    }

    .secondary {
    font-size:1.1em;
    padding-left:20px;
    border-left:1px solid #ddd;
    margin:0 0 20px 70%;
    }

    Now, until last week, all the above changes were working perfectly. Today morning, I noticed that the my customized header is not visible. I would appreciate any help in this. I will, of course, send this in to WP support but they are on a short holiday, so I thought I would pick your brains.

    On a related note, the default K2-lite theme CSS which was easily accessible earlier just by viewing the page source, and finding the appropriate link to the .css file, is no longer directly accessible. (One has to locate the custom CSS file, and then pick the default CSS from its first line.) I wonder if there was some internal reorganization done last week, which resulted in the above header problems. I should note that the other customizations (font sizes, increased blog width, etc) are all running fine.

    Thanks a lot for reading this to the end. Any thoughts are welcome.

  2. sdrane
    Member

    Now, that Matt has posted the News of a change under Custom CSS, I am pretty sure that something fishy happened during the internal reorganization, causing my custom header image to be rejected.

    I checked other blogs with custom headers, but they seem to be working fine. However, those blogs all had header images in the default K2 size (780 x 200) which were probably uploaded in the conventional way, not through custom CSS.

    Anyway, I hope this is resolved.

  3. sdrane
    Member

    I'm not 100% sure but it looks like the problem is caused by this piece of code, which overrides everything that you write in your custom CSS (i.e., wordpress.com overrides my own 15$ overrides ;) ). Basically, it seems to override your custom header image from the custom CSS, and replaces it with the one that it has stored.

    <style type="text/css">
    #header {
    background:#3371a3 url(http://mirkwood.wordpress.com/wp-content/themes/pub/k2/images/k2-header.png) center repeat-y;
    }
    #header h1 a, #header .description {
    display: none;
    }
    </style>

    WP.com Support is on holiday, so I will try some stupid tricks of my own to get around this.

  4. matt
    Staff

    What happens if you turn all custom header stuff off?

  5. 0300video
    Member

    I have the same problem. I use benevolence but i have changed the width to 800px. Now I have this image of 700 px that I cant change (I can change the image but not the width). And the priview doesnt work so well for me.

  6. sdrane
    Member

    Matt, do you mean turning off the Custom Header in the WordPress admin settings for the K2-lite things ? I did that, and it showed the default blue color, with the blog title and subtitle skewed because it assumed that the header was 780 x 200, where in fact it is 800 x 125.

    All other custom CSS settings work correctly. It is just the header that doesn't recognize:
    (1) The size settings
    (2) The custom image that I make for it

    Just to clarify: If you set a custom header image using the "Custom Image Header" tab in the admin panel, everything works fine. But you see, I can't do that because I set my header size to 800 x 125 in my custom CSS. To circumvent this, I used the #header{ background: url('Link to custom image of size 800 x 125'); } line to specify a custom header image which had the right size.

    All this worked perfectly before the new modifications.

  7. matt
    Staff

    This should be fixed.

  8. sdrane
    Member

    Perfect! All is fine now. Thanks for burning the midnight oil on this. Now, go to bed, Matt. It is 3 am in the City by the Bay ;) .

  9. 0300video
    Member

    Thanks, matt! All working now!

  10. fredi
    Member

    I'm having the same problem, but I haven't changed anything from the styles yet! I have just bought the upgrade and the header.. disappeared. Can't change it now, neither with the presentation panel nor with the css.

  11. fredcameron
    Member

    It looks the same for me .. just upgrade custom CSS ... absolutely no edit ... and header disappear!

    Ho can we do?

  12. sdrane
    Member

    fredi and fredcameron. This might be a bug, but see if the following workaround does the job. Just put the following code in your custom CSS.

    #header {
    background:url('URL of your uploaded header image');
    }

    If you uploaded your header using the Custom Image Header tab in the admin panel, then your URL most probably is:

    http://yourblogname.wordpress.com/wp-content/themes/pub/k2/images/k2-header.png

    See if this works.

  13. fredi
    Member

    Nope, I already had that code in the CSS, and tried in millions of different ways but nothing.. it keeps showing the default header. Seems like a bug, yes..

  14. fredi
    Member

    Solved adding !important next to the header url xD

    Anyway.. I guess it should be fixed in a proper way.

  15. nikonblog
    Member

    I have the same problem. My custom header disappeared as soon as I upgraded to Custom CSS (I haven't edited my CSS yet). My blog is nikonblog.wordpress.com. The header that should be showing is at: http://nikonblog.wordpress.com/files/2007/01/header3.jpg

    but it doesn't show up when I add custom header even though it says it s hould be there! Help!

  16. nikonblog
    Member

    Resolved with the !Important declaration as well...

    It should look like this:

    background:url('http://nikonblog.wordpress.com/files/2007/01/header3.jpg') !important;

  17. hitchhiker59
    Member

    Thanks for the !important trick. I was using "Neat!" Theme and had just changed to custom CSS. Same story. This did the trick.

  18. sdrane
    Member

    Alas, my white header has gone missing again :(. It is the exact same problem as before. I notice that my CSS looks slightly different compared to the one that was there when Matt fixed the problem for me the first time.

    I used to think that this is a bug in the system. Now I wonder if I am doing something wrong in my custom CSS.

    I can fix it by adding !important as suggested above, but is that the best way to do it? Also, has anyone reported problems with the Preview function. I notice that I cannot see my changes until I save them, i.e., My preview does not update when I change my CSS code.

  19. wank
    Member

    !important may not be the most elegant piece of code in the world but if you're loading multiple stylesheets it's indispensible. It's better not to use it for stuff like text size, but for purely presentational things like header backgrounds I don't see a problem. I use it on my Sandbox styles like there's no tomorrow :)

  20. andy
    Staff

    A few things. Matt's reorganization of Custom CSS included adding a new feature that lets you exclude your theme's default CSS. I recommend using this if you want to replace some of the rules in your theme's stylesheet. First browse to your stylesheet (there's a handy link) and grab the CSS. Then switch the option and paste the code into the CSS editor. Now you can edit your theme's CSS.

    Second: Custom CSS will sometimes turn off the handy Custom Header Image tool. Sorry if this is confusing (it confused me) but the point of Custom CSS is to give you maximum control.

    Third: I have noticed that !important is most often used when the designer doesn't know the rules of CSS, especially the rules about specificity. Example:
    <br /> ul div.blue { color: brown; }<br /> div.blue { color: green; }<br /> .blue { color: blue; }<br />
    In this set of rules, the .blue selector does not supersede the earlier ones because it is less specific.

  21. teslaroo
    Member

    i've tried the inelegant !important code and many many other things and can't seem to figure out how to override custom image header in benevolence.

    any other suggestions?

  22. teslaroo
    Member

    fixed it. don't ask me how.

    ;)

    also, benevolence preview function never works. just fyi but i can live with it.

  23. pastlifecarthief
    Member

    I have the same problem as of this morning. This is what I tried but it STILL doesn't work. Am I doing something wrong?

    #header {
    background:url('http://i48.photobucket.com/albums/f232/pastlifecarthief/old-cah.jpg');
    }!important;

    http://www.pastlifecarthief.com

  24. wank
    Member

    Second: Custom CSS will sometimes turn off the handy Custom Header Image tool. Sorry if this is confusing (it confused me) but the point of Custom CSS is to give you maximum control.

    It would be a whole lot less confusing if you were able to tell us whether it turns custom headers off for specific themes only (and if so, which ones), or whether it's completely random and unpredictable. If the former, it would help us tremendously. If the latter, we'd be better able to provide information that might help you :)

  25. pastlifecarthief
    Member

    mine actually started working again about an hour ago but it's back to the default theme header now. I'm really hoping this will be solved soon or I'm heading back to blogger.

  26. dailygrumble
    Member

    "I'm really hoping this will be solved soon or I'm heading back to blogger."

    Bit extreme don't you think? This will be sorted eventually, just give them time.

  27. erichicks
    Member

    I'm not using custom CSS and I've tried resetting my header back to the original, then uploading again and it won't show my custom header.

    I'm using the Connections theme. Any ideas? Will this be fixed soon? Thanks.

  28. timethief
    Member

    Staff is well aware of the problem and are frantically working to correct it. There are now 5 forum threads going on it. See Mark's post in this thread http://wordpress.com/forums/topic.php?id=7070&replies=6 and please be patient.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags