WordPress.com

1. providencecommunityacupuncture
   Member
   Mar 6, 2013, 7:30 PM

   I am kind of new to CSS but I am trying to change the column widths at providencecommunityacupuncture.wordpress.com. I would like the right column to be narrower, the left column to be slightly wider, and the middle column of posts to be about the same and more centered.
   Any suggestions? Thank you so!

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

2. providencecommunityacupuncture
   Member
   Mar 6, 2013, 7:44 PM

   Oh and also...is there a way to remove the right-hand column but only on posts pages?

3. designsimply
   Happiness Engineer
   Mar 6, 2013, 10:03 PM

   Here is an example you can start with that will adjust the widths of the main content area and the left and right sidebars in the Oxygen theme:

   #page {
   	max-width: 1040px;
   }
   
   #content {
   	margin: 0 21% 0 24%;
   }
   
   #secondary {
   	width: 23%;
   }
   
   #tertiary {
   	margin: 0 0 0 -20%;
   	width: 18%;
   }

   Note that since this approach updates the overall width, you won't be able to use Appearance → Header page to set a full-width header image any more. You can add one manually though, here's how:

   #masthead a img {
   	display: none;
   }
   #masthead > a {
   	background: url('http://providencecommunityacupuncture.files.wordpress.com/2013/02/newnewnewnewnew.jpg') center;
   	display: block;
   	width: 1040px;
   	height: 294px;
   }

   Note that the width value should match the #page width from the example above. Also, the image repeats, but it looks pretty good with your current image. If you didn't want the image to repeat, you could add "no-repeat" just before ";" in the background property line or you could use an image that is at least 1040px (or whatever width you set) for the url() value.

4. designsimply
   Happiness Engineer
   Mar 6, 2013, 10:11 PM

   is there a way to remove the right-hand column but only on posts pages?

   So remove it pretty much everywhere except the home page? To do that, remove the #content and #tertiary blocks from the example above, and replace them with this:

   #tertiary {
   	display: none;
   }
   
   .home #tertiary {
   	display: block;
   	margin: 0 0 0 -20%;
   	width: 18%;
   }
   
   #content {
   	margin: 0 0 0 24%;
   }
   
   .home #content {
   	margin: 0 21% 0 24%;
   }

   Notice how I used ".home" to target just the home page for changes.

5. providencecommunityacupuncture
   Member
   Mar 7, 2013, 10:07 PM

   Thanks so much! This is very helpful.

Topic Closed

This topic has been closed to new replies.