Need help? Check out our Support site, then


How to widen the page

  1. I paid for the upgrade. I am a photographer and I am not happy with the 450px width limit on images. I would like a larger view of about 800px wide for my images. Can this be done?

  2. Link to your wordpress.COM blog?

  3. I would also like to post larger photos on my chaotic soul with the custom upgrade. I would actually like to widen the whole main column. Can this be done?

  4. fairegarden,

    It would be possible if you had the CSS upgrade.

  5. ...and knew how to use it. Best to try it out with the free preview feature before spending hard cash on it.

  6. I do have the css upgrade and have made several changes in font size and color. I would like to know which bit of code contains the column size so I can experiment with changing it for the main text body. It seems that all of the code has several different parts that all control the same thing. Like when I change the font size and color of the main text, I have to change it is two places. Or is it the home page for one and the post page, the same for my blog, that is the reason it has to be changed in two places. That was easy to find, looking for color numbers. I don't know what to look for for column width. Any help?

  7. The best thing (since all the themes use different class ids so I can't give you a one-size-fits-all answer) is to use Firefox and install the Web Developer's toolbar and Firebug plugins. That way, you'll be able to identify any element you want.

  8. A plugin that I'd recommend too is Aardvark.

  9. Thanks rosclarke, but my system is not compatible with Firefox, for some reason. It had to be uninstalled. Any other way I can get that info?

  10. BTW, how wide do you want your contents column to be?

  11. but my system is not compatible with Firefox

    That's a first... Maybe you had a plugin that wasn't playing nice?

    Anyway, tell me how wide would you like your contents part to be and I'll see if I can be of assistance. You will need to change other element attributes as well.

  12. What browser do you use?

  13. I would like to have a photo that is 750 pixels wide, just a little smaller than the header photo.

    I use Windows vista, it came on the computer.

    MSN and A T and T provide our service. That's all I know.

    I can change anything you tell me too, as long as you give me the beginning code, I don't know much of that.

    Thanks so much.

  14. OK, gimme some time, I'll post as soon as I have something.

  15. Thanks, devblog, I will keep checking back. I really appreciate your help.

  16. Okay,

    Replace the current definitions in your CSS with the following ones:

    .hr {
    background-color:#22201d;
    border:1px solid #363430;
    height:10px;
    width:993px;
    margin:10px 0;
    }
    
    #page {
    width:995px;
    margin:50px auto 25px;
    padding:0;
    }
    
    #wrapper,#headerimg {
    width:995px;
    position:relative;
    }
    
    #header-overlay {
    background:url('images/header_overlay.gif') no-repeat top left;
    width:995px;
    height:151px;
    z-index:5;
    position:absolute;
    top:0;
    left:0;
    }
    
    #content {
    float:left;
    font-size:1.1em;
    width:750px;
    }

    Also, remember to create a new header image. The new image should have a width of 995 pixels.

    Try that. HTH

  17. Great, I was fooling around with it and was only going to 900 px and knew there were other things that needed changing that I woudn't know about. I really appreciate your work. Thanks so much.

  18. Hope you are still out there devblog, for I cannot get the header image to be accepted in the new size. I have tried inserting the url for the newly sized image into the css in the #header-overlay, although the url for the photo has more code than the example given when I clicked on the more info link after the *limit content width to ( I made it 995 pixels) space. I tried to make it look like the example by eliminating some of it, but neither the whole code or the shorter one worked. When I go to the custom header image tab, it still limits the size to 760 x 151, although I tried to change that css code on the stylesheet. Any ideas how to work around this?

  19. Using the CSS will overwrite any custom header that you've inserted. You should be putting it in the CSS. I'm not sure what you mean by: the url for the photo has more code than the example given when I clicked on the more info link after the *limit content width to ( I made it 995 pixels) space.

    Could you post the header CSS code you've been using here, so we can have a look at it?

  20. Here is what is on the css sheet: (I changed the size to 995x351, what I would like the header size to be, also I tried to insert the code for the photo I would like to use, which is: <img src="http://fairegarden.wordpress.com/files/2008/12/december-4-2008-029-4.jpg" alt="december-4-2008-029-4" title="december-4-2008-029-4" width="995" height="347" class="aligncenter size-full wp-image-1513" />

    in the #header-overlay parenthesis.

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

    #header-overlay {
    background:url('images/header_overlay.gif') no-repeat top left;
    width:995px;
    height:351px;
    z-index:5;
    position:absolute;
    top:0;
    left:0;
    }

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

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

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

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

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

  26. 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 995x348 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?

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

  28. 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 995x151?

    Many thanks to you both for helping so much too.

    Frances

  29. HA, learned lots of new things today.

    HTH, I will remember that from now on.

    Frances

  30. Who's Rose? ;)

Topic Closed

This topic has been closed to new replies.

About this Topic