Need help? Check out our Support site, then


Can you widen Pilcrow theme?

  1. gardeninginthelines
    Member

    Is there a way to widen the Pilcrow theme so that there is less space on the right and left hand sides? Can this be done with CSS customization?
    Thank you.

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

  2. To do that with your current setup, you can widen the content area by adding this to your Appearance → Custom Design → CSS editor:

    .two-column #container {
    	max-width:1000px;
    }

    If you change the width, you will also want to manually change out the header image with something wider. To do that, add this:

    #pic a img {
    	display: none;
    }
    #pic a {
    	display: block;
    	background: url(http://gardeninginthelines.files.wordpress.com/2012/06/cropped-0052.jpg) center 45px repeat-x;
    	width: 1000px;
    	height: 245px;
    	border-bottom: 2px solid #222;
    }

    Change the url() value to an image link from your media library. Change the width value to the width of your image. Change the height value to the height of your image plus 45 pixels.

  3. hi
    I am also wanting to increase the width of my blog and have tried the above advice:

    .two-column #container {
    max-width:1000px;
    }

    But perhaps I have misunderstood. Basically I want less of the background picture - so narrower background margins on the right and left:
    http://www.kazjaz.com

    Any advice would be greatly appreciated.
    regards
    Karen

  4. Karen, CSS is theme specific which means the solution for one theme will, in almost all cases, not work for another.

    Since you are using a different theme, please start a new thread in the CSS forum so that it doesn't create confusion for users later on who come to this particular thread. Thanks.

  5. I am really confused - I am using Pilcrow

  6. Whoops, I'm sorry Karen.

    Give this a try. You will have to create a header image that is wide enough to accommodate really wide monitors and then upload that and in the header section, select the "use as is" button and don't crop the image at all. The image will end up getting fuzzy on narrow browsers since the browser will be scaling the image and browsers are very, very bad on that.

    #wrapper, .two-column #container {
    max-width: 100%;
    }

    Remove the existing #wrapper and .two-column #container rules you currently have in your CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic