Need help? Check out our Support site, then


Can you change a 3 column blog to 2 using CSS?

  1. Just wondering if that can be done.
    Thanks,
    Doug

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

  2. Yes and no. It is possible to change the width of the columns and make the sidebar not display in some themes, but it is very theme-dependent how much you can play around with it.

  3. Yes, you can but you need to have a strong knowledge of CSS to do something like that. In fact, you can hide the sidebar in ALL themes (that have them) but then again, your CSS should not be in the beginners level.

  4. I'm using Garland. I wish I could get rid of one column on either the right or left and make the main blog column wider. I'm putting the blog in an iframe on a web page. I guess I don't want to spend the money on CSS editing if it's not an easy fix. So is changing the column widths not too difficult (I assume you need custom CSS for that....).

  5. for customizing wordpress.com theme you need to have paid CSS upgrade which $14.99 per year

  6. Yes I do see that. I played around with the CSS (I know I can't save, but I can preview), and I just can't get it to make the center column larger and the right one smaller. If anyone has Garland and has played around with CSS to adjust the column sizes to make it work, I would consider paying the fee. I pasted the CSS below. Sorry if I wasn't supposed to do that (newby!!). I played around with the sidebars, centers, squeezes, the only thing I could get it to do was to make the center column wider, but it ran over the other columns.

    /*
    Theme Name: Garland
    Theme URI: http://wordpress.com/
    Description: A flexible, three-column theme with customizable colors. Design based on Themetastic for Drupal by Stefan Nagtegaal and Steven Wittens.
    Version: 1.0-wpcom
    Author: Stefan Nagtegaal and Steven Wittens
    Tags: three-columns, custom-colors, flexible-width, rtl-language-support, left-sidebar, right-sidebar, widgets, sticky-post
    */

    /**
    * Generic elements
    */

    a:link, a:visited {
    color: #027ac6;
    text-decoration: none;
    }

    a:hover {
    color: #0062a0;
    text-decoration: underline;
    }

    a:active, a.active {
    color: #5895be;
    }

    .sticky h2 a {
    background: #027AC6;
    padding: 10px;
    display: block;
    color: white;
    }

    .sticky h2 a:hover {
    background: transparent;
    padding: 10px;
    display: block;
    color: #027ac6;
    }

    body {
    background: #edf5fa;
    color: #494949;
    font: 12px/170% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    }

    body.sidebar-left #footer {
    margin-left: -210px;
    }

    /* So we move the #center container over the sidebars to compensate */
    body.sidebar-left #center {
    margin-left: -210px;
    }

    /* And add blanks left and right for the sidebars to fill */
    body.sidebar-left #squeeze {
    margin-left: 210px;
    }

    body.sidebar-right #center {
    margin-right: -210px;
    }

    body.sidebar-right #footer {
    margin-right: -210px;
    }

    body.sidebar-right #squeeze {
    margin-right: 210px;
    }

    body.sidebars #center {
    margin: 0 -210px;
    }

    body.sidebars #footer {
    margin: 0 -210px;
    }

    body.sidebars #squeeze {
    margin: 0 210px;
    }

    dl {
    margin: 0.5em 0 1em 1.5em;
    }

    dl.gallery-item {
    margin: 0;
    }

    dl dd {
    margin: 0 0 .5em 1.5em;
    }

    dl dt {
    }

    h1 {
    font-size: 170%;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
    }

    h2 {
    font-size: 160%;
    line-height: 130%;
    }

    h3 {
    font-size: 140%;
    }

    h4 {
    font-size: 130%;
    }

    h5 {
    font-size: 120%;
    }

    h6 {
    font-size: 110%;
    }

    hr {
    background: #5294c1;
    border: none;
    height: 1px;
    margin: 0;
    padding: 0;
    }

    img, a img {
    border: none;
    }

    input {
    color: #494949;
    font: 12px/100% Verdana, Arial, Helvetica, sans-serif;
    }

    p {
    margin: 0.6em 0 1.2em;
    padding: 0;
    }

    textarea, select {
    color: #494949;
    font: 12px/160% Verdana, Arial, Helvetica, sans-serif;
    }

    .content ul {
    margin: 0.5em 0 1em;
    padding: 0;
    }

    .content ul li {
    margin: 0.4em 0 0.4em 1.5em;
    }

    ul, quote, code, fieldset {
    margin: .5em 0;
    }

    /**
    * Primary navigation
    */
    ul.primary-links {
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 4;
    }

    ul.primary-links li {
    background: none;
    float: left;
    margin: 0;
    padding: 0;
    }

    ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
    background: transparent url("images/bg-navigation-item.png") no-repeat 50% 0;
    color: #fff;
    display: block;
    margin: 0 1em;
    padding: .75em 0 0;
    }

    ul.primary-links li a:hover, ul.primary-links li a.active {
    background: transparent url("images/bg-navigation-item-hover.png") no-repeat 50% 0;
    color: #fff;
    }

    .nextprev {
    margin-bottom: 60px;
    margin-top: 10px;
    display:block !important;
    display: inline-block; /*bloody ie6! */
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    clear: both;
    }
    .image-navigation .alignright {
    float: right;
    clear: none;
    }

    .commentlist {
    list-style: none;
    margin: 1em 0 3em;
    padding: 0;
    }

    .commentlist .thread-alt {
    background: #edf5fa;
    }

    .commentlist .avatar {
    border: 1px dotted #ccc;
    float: right;
    margin-right: 25px;
    padding: 2px;
    }

    .commentlist cite {
    font-weight: bold;
    }

    .commentlist li {
    list-style: none;
    padding: 1em 2em;
    }

    .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    .menu li li, .item-list ul li, li.leaf, .links li {
    background: transparent url("images/menu-leaf.gif") no-repeat 0 .35em;
    list-style-image: none;
    list-style-type: none;
    padding: 0 0 .3em 13px;
    }

    .post {
    margin-bottom: 2em;
    overflow: hidden;
    }

    #header h1, #header h1 a {
    color: #fff;
    font-size: 1.5em;
    font-weight: normal;
    text-decoration: none;
    text-shadow: #1659ac 0px 1px 3px;
    }

    #navigation {
    background: url("images/bg-navigation.png") repeat-x 50% 100%;
    height: 1em;
    }

    #s {
    margin-bottom: 5px;
    }

    /* Layout and images */
    #wrapper {
    background: url("images/body.png") #edf5fa repeat-x 50% 0;
    height: 600px;
    }

    #wrapper #container {
    margin: 0 auto;
    max-width: 1270px;
    padding: 0 20px;
    }

    /* We must define 100% width to avoid the body being too narrow for near-empty pages */
    #wrapper #container #center {
    float: left;
    width: 100%;
    }

    /* Now we add the backgrounds for the main content shading */
    #wrapper #container #center #squeeze {
    background: url("images/bg-content.png") #fff repeat-x 50% 0;
    }

    #wrapper #container #center .right-corner {
    background: transparent url("images/bg-content-right.png") no-repeat 100% 0;
    left: 10px;
    position: relative;
    }

    #wrapper #container #center .right-corner .left-corner {
    background: transparent url("images/bg-content-left.png") no-repeat 0 0;
    left: -10px;
    margin-left: -10px;
    min-height: 400px;
    padding: 60px 25px 5em 35px;
    position: relative;
    }

    #wrapper #container #footer {
    clear: both;
    color: #898989;
    float: none;
    margin: 4em 0 -3em;
    text-align: center;
    }

    #wrapper #container #header {
    height: 80px;
    }

    #wrapper #container #header #logo-floater {
    position: absolute;
    }

    #wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {
    font-weight: bold;
    line-height: 120px;
    position: relative;
    white-space: nowrap;
    z-index: 2;
    }

    /* We ensure the sidebars are still clickable using z-index */
    #wrapper #container .sidebar {
    float: left;
    margin: 60px 0 5em;
    width: 208px;
    z-index: 2;
    }

    body > #wrapper #container .sidebar {
    position: relative;
    }

    #sidebar-left li {
    margin-right: 10px;
    }

    #sidebar-right ul {
    margin-left: 20px;
    }

    #sidebar-right li ul {
    margin-left: 0;
    }

    .sidebar ul {
    margin-left: 0;
    padding: 0;
    }

    .content img {
    margin-left: 10px;
    }

    #comment {
    width: 400px;
    }

    img.centered, img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }
    .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }
    .meta {
    clear: both;
    }

  7. Hi masoncityschools,
    You've given a rather general description of what you're looking to do, but for example to hide the right sidebar and expand the middle column you can change the existing css as follows:

    div#sidebar-right {
    display:none;
    }
    
    body.sidebars #squeeze {
    margin:0 0 0 210px;
    }

    If you haven't tried it yet, by far the quickest way to tinker with this further is to use the firebug addon for firefox. This allows you to play with the CSS dynamically and see the effect immediately, no need to edit and upload. You might take a look at this for a quick intro:
    http://grahamwideman.wordpress.com/2009/01/23/firebug-essential-for-cssing-wordpress/

    Hope that helps,
    -- Graham

  8. FYI, adding the elements to the selectors is just an overkill. Writing your definitions like this will suffice.

    #sidebar-right{...}
  9. devblog --

    Yes of course you're right. Ids like sidebar-right identify an element that's unique within the document so don't need further qualification.

    However sometimes I write it like this to remind myself or document that it this particular kind of element (in this case div) that's being selected.

    -- Graham

Topic Closed

This topic has been closed to new replies.

About this Topic