Need help? Check out our Support site, then


Changing column widths in Oxygen theme

  1. providencecommunityacupuncture
    Member

    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

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

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

    Thanks so much! This is very helpful.

Topic Closed

This topic has been closed to new replies.

About this Topic

  • Started 1 year ago by providencecommunityacupuncture
  • This topic has 5 posts
  • 2 posters
  • Latest reply from providencecommunityacupuncture
  • This topic is resolved
  • RSS feed for this topic