Need help? Check out our Support site, then


Header Fun

  1. Ok, I'm new to this - I understand the concept of CSS, and I can tweak it a bit. All I want to do is double the size of my header from 180px to 360px. How do I get an image to show in the header? I tried fiddling with the "background" part of the CSS, but it just comes out black.

    #header_content {
    background:url('/2008/07/cropped-kidszoo_2007.jpg');
    border-left:10px solid #600;
    border-right:10px solid #600;
    color:#fff;
    height:360px;
    position:relative;
    margin:0 !important;
    }

    #header_middle {
    height:360px;
    margin:0 0 0 10px;

    My blog is at http://kevnetik.wordpress.com.

  2. Note - I am able to get an image in the header, but I have to stick to 180px. I want to learn how to make this 360px, or whatever I want.

  3. I don't quite understand your question. Is it the width only you want to increase?
    width:360px
    you might get in trouble with the sidebar doing that, so then you need to adjust that too.

  4. No, it's the height. To 360. Then, how do I get an image to show in the header that is 360 in height? Where do I upload it to, and how do I write that I want that image to show in the header using CSS?

    If you look at the blog now (http://kevnetik.wordpress.com), the header is 180px in height, and there is an image. I can only get it to work through the dashboard.

    I just want to show more of the image.

  5. hmm...you have a large amount of selectors for the header, and a div class "top" I cannot find in your stylesheet.
    I get lost in your css I am afraid, and don't think all of those diffrent selectors are needed. But I am not sure, and it is hard to tell as long as I cannot fiddle with it.

    First, I'd try changing this height.

    #header {
    	background:#111;
    	height:180px;
    	width:750px;
    }

    If it was my blog, though, I'd remove most of those selectors one by one, and see what was essential.

    I am guessing that all those settings, there are some selector values overriding each other.

    Might be a good idea to copy your current css to your computer for backup, though.

  6. ..and how to upload another image (the one you have now is fitted to the header). Upload the image to your media library, but instead of putting it in a post, copy the url and paste into the css.
    background:url('URLforImageHere.jpg');

  7. thanks - I'll have to toy with the code like you said. The header code is in several places - when I changed the height to 360px, I had to do it in about 5 places. (And this CSS was ganked right off of the theme, I only changed the px in the header and the name of one of the fonts)

    BTW - when I put the URL in CSS - do I leave off the http://?

    Let me give you an example to work with - say I used this URL:
    http://kevnetik.wordpress.com/2008/07/pictureforexample.jpg.
    (that's not real)

    would it be:
    background:url ('/2008/07/pictureforexample.jpg'); ?

  8. I would put in the complete url.

    background: url(http://kevnetik.wordpress.com/2008/07/pictureforexample.jpg);

    When you upload an image to your media library it gives you an url as an alternative to "insert into post". Of course, if you already have the picture in your libary, click on it and get the url.

    You said you had to change the height in five places - but did you get it to work..?

  9. ..And here is a suggestion for getting to grips with css:
    Set a border in all selectors that obviously are boxes of some sort. Then set the border colour to be all diffrent, so that you can easily see what is what. Basically, insert this, but change colours for each:
    border: 1px solid yellow;

    It is a little fiddly, but you will suddenly learn a lot about the structure of your site and the css behind it.

  10. Let me jump in here for a sec - if you are using Firefox, install the developer's toolbar. It is absolutely invaluable in trying to figure out what's going on with your blog.

  11. THANK YOU ALL! It worked! I used the full URL, and it has to be in two places. I just kept fiddling with it, changing colors and such to see what controlled what, and I figured it out.

    I appreciate all your help. I'm on my way to some major overhaul hacking, I know. I'm not the type to let things stay "one way" very long. Which is why I did the CSS upgrade in the first place.

  12. No problem, and good schtuff!

  13. @vivian-do you mean Firebug?

  14. No, she means the developers toolbar ..I am not too fond of it, but I am maybe a little too fond of fiddling directly.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags