Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

resizing header in ChaoticSoul Theme

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

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

  3. devblog
    Member

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

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

  5. devblog
    Member

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

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

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

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

  9. devblog
    Member

    I'll check it out as soon as I can

  10. adfinemhac
    Member

    ok, thanks. take your time ;-)

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

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags