Please help me increase the width of my Pilcrow design blog

  • Unknown's avatar

    I would like to make the default width of my Pilcrow blog wider to accommodate my large photos while keeping my columns straight. I know this can be done because there is at least one blog shown on the Pilcrow Theme page with wide columns. It would seem that my columns used to be wider, as my blog now has a weird cut-off look to it. I have paid for the $99 customization fee. Please tell me exactly how to do this, step by step, as I’ve combed through all the options.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi there, I took a look at your site and see you are inserting images at “large” size. At Settings > Media, large is set for a maximum height and width of 900px. On landscape oriented images (wider than they are high), the width of the image will determine the size, and on portrait oriented images (height greater than width) the height will determine the size. In other words, large size images have a 900px by 900px bounding box.

    If you insert your images at full size instead of large, the theme and WordPress software will insert the image as large as it can for the width of your content area. Open one of your posts, delete one of the smaller appearing images and insert it at full size and then preview and you will see an image that spans the full width of the content area.

  • Unknown's avatar

    Thank you so much for your help. I just changed my format to one column only until I get this straightened out. Normally, I like to have the main column plus the second one for some necessary widgets. I have experimented a lot with the photo sizes. When I insert the largest photos, they make the margins of my blog uneven. I would like to have default margins with plenty of space. Here is an example of a nice blog using the Pilcrow theme, like mine, and the spacing is so lovely:

    http://myhandsmadeit.com/

  • Unknown's avatar

    The top set of images you are seeing on the site you referenced are a single image created by inserting all the images into a single image in an image editing program such as Photoshop. This is the URL of the top image for your reference: http://myhandsmadeit.files.wordpress.com/2013/12/stephanie-izard-wedding-gown-by-veronica-sheaffer.jpg . That is how they are getting all of them aligned as you see them, and they are inserting the image as a “full-sized” image. That image I gave the link to is 700px wide.

  • Unknown's avatar

    I tried inserting the photos at the largest size. The Theme (it would seem) is keeping the photos lined up with the margin. I went to the page that allowed me to increase my maximum size to 1200 x 1200 and I inserted a photo of that size, but the photo stayed small enough to line up with my margin.

    Because there are so many photos that are the same size (including the grouped photos), it looks like the photos may be setting the margins, but if you go to these entries with smaller photos, the margins are still wide.

    http://myhandsmadeit.com/2013/10/16/brooklyn-trunk-show-oct-25-27/ or http://myhandsmadeit.com/2013/06/25/ugh/

    These photos are small, but the margin remains wide, and so do the header lines. Is there a way to increase the default size of the margin? Thanks.

  • Unknown's avatar

    The main column width on Pilcrow, with a single sidebar, is 500px, so you cannot insert images wider than 500px without first widening the theme. On http://myhandsmadeit.com/ the owner has widened the overall width of the theme from 770px to 1000px and then narrowed the sidebar and widened the content area.

    To mimic what they have done, add the following CSS:

    .two-column #container {
        max-width: 1000px;
    }
    
    .two-column #sidebar, .two-column #secondary-sidebar {
        float: right;
        width: 25%;
    }
    
    .two-column #content {
        overflow: hidden;
        width: 70%;
    }

    After doing so, you will have to reinsert your images into the posts at full-size, not “large”. Also, if any of your images are less than 700px in width, they will not be enlarged by the WordPress software. They will be inserted at the full width of the uploaded image. If any of your images are less than 700px in width, you will have to enlarge them in an image editing program and then upload the new image and use that one.

  • Unknown's avatar

    Hi, if we can get this to work, you will be saving me a lot of time. I tend to get sidetracked with the looks of my blog, instead of working on the content.

    I have HTML experience. Lots of experience setting up blogs at various places. Lots of experience with sizing and editing photos. It’s usually very easy for me.

    No CSS experience. I see the CSS page and I’ve copied and pasted your instructions or code. Nothing happens. Do I need to insert it between the “*” that are on the page? Also, what should I check at the bottom boxes. Should I write anything in that width box?

    I see that the widget column of myhandsmadeit.com is also larger than my current one. I hope everything gets wider this way.

    Thanks again.

  • Unknown's avatar

    Sorry, I forgot to tell you to delete all the informational text, including the /* and */ stuff and then paste the code into the CSS edit window. I went into your CSS and removed the informational text and saved it for you.

  • Unknown's avatar

    I should mention that I also revised the first rule in the CSS above and added another selector that the other site did not have. See what you think of your site right now.

  • Unknown's avatar

    OMGosh. This is great. My columns are indeed bigger. I’m comparing my page with myhandsmadeit.com and those columns are still bigger than mine. I will gladly accept the look of the blog as it is, but I’m wondering if I can get a tiny more space with one more little tweak. It looks like her full width is the same as mine but she has no outside margins. Therefore, both columns are bigger than mine.

    I like Pilcrow. In spite of its imperfections, the design makes it easy for readers to find things, like the comments section, for one thing.

    Thank you so much. Today is my WordPress one-year anniversary. :-)

  • Unknown's avatar

    You don’t have to tweak it again. I must sound ungrateful. My page looks so much better. I’m happy. And I appreciate your help. It looks awesome. My widget column has room that I’d needed as well.

  • Unknown's avatar

    I was able to get “Measure It” to measure the pixels of anything on the screen and my current blog measures 900px

    myhandsmadeit.com measures 1000px

  • Unknown's avatar

    I thought my header size would automatically change. I’m only able to upload a header that is 770px. It is too short for the page. It would be nice to have a page that is 1000px and a header that is 1000px

  • Unknown's avatar

    I am unable to upload a new header and get it the right size. I know how to create a new header but when I upload it, the program automatically shrinks it. I’ve tried doing this a couple different ways, but the last instruction I see on the screen says to “crop and update.” Usually, I see crop lines that are cutting off part of the header. When the crop lines don’t cut into my image, the program shrinks the whole thing so that it’s too small on one side. The header I’m using now is an old one that is too short but at least it’s centered.

  • Unknown's avatar

    I changed to another theme, one that would let me use a header that is wide enough. I still have the CSS that you wrote, in case I decide to go back to Pilcrow. I was unable to finish my pages with Pilcrow. Thx.

  • Unknown's avatar

    You are welcome, and if you have any questions or problems please let us know.

  • The topic ‘Please help me increase the width of my Pilcrow design blog’ is closed to new replies.