How to widen the page

  • Author
    Posts
  • #299923

    devblog
    Member

    Mistylook displays the header image in an odd way… I would’ve done it differently.

    Anyway, try replacing the current declaration with this one:

    #header-overlay {
    background: #161410 url('url-path/to/new-header.file') no-repeat top left;
    width:995px;
    height:151px;
    z-index:5;
    position:absolute;
    top:0;
    left:0;
    }

    That should do the trick.

    #299924

    rosclarke
    Member

    Okay, so what you should have is:

    #header-overlay {
    background:url('http://fairegarden.wordpress.com/files/2008/12/december-4-2008-029-4.jpg') no-repeat top left;
    width:995px;
    height:351px;
    z-index:5;
    position:absolute;
    top:0;
    left:0;
    }

    And for this:

    #wrapper {
    background:url('images/content_bkg.gif') repeat-y top left;
    }

    You shouldn’t need to have that in your editing window at all, since you’re not making any changes to the stylesheet there. Your editor should only contain the code that you want to overwrite the stylesheet, not the whole stylesheet. Make sure you have ‘Add to Existing Stylesheet’ checked, obviously.

    #299925

    devblog
    Member

    Nice, Rose. Let me point out some differences in our code.

    In my suggestion I’m limiting the height to 151px because you don’t really need to have that much empty space underneath it.

    Also, I’m adding a background color so that if for some reason the image fails to appear, the bg will cover the smaller image (which would make the blog look weird).

    HTH

    #299926

    fairegarden
    Member

    I replaced that bit but it didn’t change the size allowed. In fact it erased my header and it had to be reuploaded. I am using chaotic soul, not mistylook, if that makes a difference.

    #299927

    devblog
    Member

    I’m sorry, I was helping someone with his mistylook theme so I got the names crossed. Don’t mind me.

    The code shouldn’t have erased the header, just covered it. Did you put the correct URL path in the background attribute?

    #299928

    fairegarden
    Member

    I have added Rose’s code, it was what I had tried before, and also the #wrapper code, but it didn’t let me make it larger. With devblog, or HTH’s code, about the 151 pixels, I have adjusted the size of that photo to 995×348 so it would look allright. At this point I would be happy with just a 995px wide shot, but it won’t let me do it still. Is something over riding that change?

    #299929

    devblog
    Member

    Well, in my code I made it 151px, because as I explained to Rose, there’s no need for the element to be of 348px height. Besides, in Firefox, doesn’t look good… it covers the text.

    My original code, should’ve worked just fine. It worked for me.

    Anyway, since you already uploaded a new image, just modify the “#header-overlay” code with this:

    #header-overlay {
    background:#161410 url('http://fairegarden.files.wordpress.com/2008/12/december-4-2008-029-4.jpg') no-repeat top left;
    width:995px;
    height:151px;
    z-index:5;
    position:absolute;
    overflow: hidden;
    top:0;
    left:0;
    }

    That should work.

    BTW, HTH means “Hope That Helps”.

    #299930

    fairegarden
    Member

    Okay! It is now working. Until the whole page loads, it shows the 760 wide header. With the 351px length, it came down into the body and sidebar, behind it but looking silly. It is the photo code inserted into that url spot. To change the header photo, will I know have to insert whatever the code for the new photo, or url for the photo, into that position? Resizing the photo to 995×151?

    Many thanks to you both for helping so much too.

    Frances

    #299931

    fairegarden
    Member

    HA, learned lots of new things today.

    HTH, I will remember that from now on.

    Frances

    #299932

    rosclarke
    Member

    Who’s Rose? ;)

    #299933

    fairegarden
    Member

    Sorry if I stepped out of line there, LOL With you and HTH giving me so much help, I was overcome.

    #299934

    rosclarke
    Member

    Actually, I think it was devblog (henceforth to be known as HTH)’s mistake first. My name is Ros.

    #299935

    fairegarden
    Member

    HA, on many levels

    #299936

    devblog
    Member

    my bad, sorry for misspelling your name, Ros.

    #299945

    loveinspired
    Member

    My address is http://loveinspired.wordpress.com

    I tried using the CSS posted by Devblog, but it was apparently built for another template. =/

    #299951

    loveinspired
    Member

    So I am still needing help. One hundred thousand million billion trillion jelly doughnuts for the person who can solve my problem. ;-) Just kidding… please help.

    #299952

    devblog
    Member

    You’re using Kubrik, loveinspired. The code I gave to fairegarden was indeed for another theme.

    You want something as wide as fairegarden’s theme?

    #299956

    loveinspired
    Member

    Sure that would be great!!

The topic ‘How to widen the page’ is closed to new replies.