resizing header in ChaoticSoul Theme

  • Author
    Posts
  • #434973

    adfinemhac
    Member

    Hello,
    I am quite new here and I need some help with header resizing in the ChaoticSoul theme. In the original theme powered by WP is the header divided into two selection, but in the original CSS by Bryan Veloso is just one whole picture and I dont know how to resize the header to 900x and still have this separated pictures. I made my own header using that original picture (in Photoshop) so I have one image which looks like that separated one by WP. But… when I used it and correct some things in CSS, it looks similar, but in the background I still have that WP small-sized picture…
    So, could anybody help me with writing the right CSS sheet, which looks like WP powered theme, but is much more wider (I want 900px) ?

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

    #435201

    timethief
    Member

    This is just to let you know that only two wordpress.com members choose to assist those who have purchased the CSS upgrade. One of them has just moved and will not be available as frequently as he was in the past. There is no Staff support for learning CSS and neither of those two members appear to be signed into wordpress.COM at this time. Consequently, you will have to patiently wait until they locate this thread and responde to it.

    #435252

    devblog
    Member

    Well, you changed theme, so I can’t help you anymore.

    #435258

    adfinemhac
    Member

    I am sorry, I was trying something else. Its back now.
    I was trying some things, and now I know how to move the header-overlay, which make this partition of the picture… but unfortunately, I cannot make this overlay wider, only move it little bit in the centre. also the original picture stay where it was. please, take a look once again…thanks a lot

    #435261

    devblog
    Member

    I’ll take a look at it on my break. I’ll post as soon as I have something.

    #435262

    adfinemhac
    Member

    thanks a lot. I already put the original image in the center, but I am not satisfied, because it is still not in the width I want (950px).

    #435288

    devblog
    Member

    Okay, it seems you’re uploading your header through the theme’s custom header option. Since you have the CSS upgrade, you don’t need to do this.

    What happens is that because the original width of the theme is 760px width, the custom header function will resize your images to fit said width giving you undesired results.

    What you need to do is put your custom header image background in your CSS and that should take care of things.

    #435293

    adfinemhac
    Member

    well, I tried, but it doesnt work very well. I have my picture in the backrground, in the width of 950px, but the original picture of the theme stays in the front, in the width of 750px and I cannot get rid of it…

    I used
    #headerimg{
    background: url(adfinemhac.wordpress.com/files/2010/01/cropped-headerimg3.jpg);
    width:100%;
    height:151px;
    text-align:center;
    }

    what else can I do? and thanks for your help.

    #435295

    devblog
    Member

    I’ll check it out as soon as I can

    #435296

    adfinemhac
    Member

    ok, thanks. take your time ;-)

    #435305

    devblog
    Member

    adfinemhac,

    Sorry for the delay in getting back to you; it’s been a really hectic week for me.

    I see that you managed to put your background image but the “default” one appears on top of yours. The following code should remove it making your image fully visible.

    #header-image img {display: none;}

    HTH

    #435307

    adfinemhac
    Member

    devblog, you dont need to apologize:-) youre genius:-D its perfectly working. thanks a lot. just a little thing. if you take a look at my web page, you can see, that the overlapping of the image is in the middle as I wish, but still in the size of 750px, so the lines are going through the picture. in the CSS I have the width of 950px, but it apparently doesnt work… this is the last thing I have to resolve (of course with your help).
    and sorry for bothering:-) when you have time, please, look at it.

    #435308

    devblog
    Member

    Thanks, adfinemhac.

    The reason why the overlapping image is not being stretched is because it’s part of the background property of the element you’re styling: header-overlay. If you wanted it to be stretched, then you’d have to style it directly (this means its code would have to be in the markup); for instance, if the markup had this:

    <div id="header-overlay"><img src="/images/header_overlay.gif" /></div>

    Then, you’d stretch it like this:

    #header-overlay img {width: 950px;}

    Since this is not the case, you’d have to modify the “header_overlay.gif” image so that it’s 950px width, upload it to your account, then modify the CSS selector so that it points to the new image.

    If you need help modifying the overlaying img, let me know.

The topic ‘resizing header in ChaoticSoul Theme’ is closed to new replies.