Header Fun

  • Author
    Posts
  • #250270

    kevnetik
    Member

    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.

    #250501

    kevnetik
    Member

    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.

    #250510

    boblets
    Member

    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.

    #250527

    kevnetik
    Member

    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.

    #250528

    boblets
    Member

    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.

    #250534

    boblets
    Member

    ..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');

    #250546

    kevnetik
    Member

    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’); ?

    #250548

    boblets
    Member

    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..?

    #250549

    boblets
    Member

    ..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.

    #250552

    vivianpaige
    Member

    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.

    #250553

    kevnetik
    Member

    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.

    #250556

    boblets
    Member

    No problem, and good schtuff!

    #250559

    justjennifer
    Moderator

    @vivian-do you mean Firebug?

    #250561

    boblets
    Member

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

The topic ‘Header Fun’ is closed to new replies.