Need help? Check out our Support site, then


How can I make content column wider & remove column on the right side of page

  1. ulovphotography
    Member

    Hi guys,

    Before purchasing the upgrade I would like to find out if and how I would be able to change some things in this style:
    1. I'd like to take out the extra sidebar on the right ( the one that is currently showing archives,pages etc.) and make the content column wider so I can post larger images. Here is the CSS for it:

    Thanks in advance!

    /*
    Theme Name: MistyLook
    Theme URI: http://wpthemes.info
    Description: A two-column white theme with top-level page navigation and large custom header.
    Version: 3.1-wpcom
    Author: Sadish
    Author URI: http://simpleinside.com/
    Tags: custom header, two columns, fixed width, rtl
    */
    * {
    padding: 0;
    margin:0;
    }
    p {
    margin: 0.7em 0;
    line-height:1.6em;
    }
    dl {
    margin:1em 0;
    }
    dt
    {
    font-weight:bold;
    }
    dd
    {
    margin:0.5em;
    padding:0;
    }
    .entry img
    {
    background:url(img/shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;
    border:none;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    }
    .entry a img {
    border:none;
    background:none;
    padding:none;
    background:url(img/shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    }
    .entry .wp-smiley, #wpstats {
    background: none;
    border: 0;
    padding: 0;
    }
    .clear {
    clear:both;
    height:20px;
    }

    blockquote
    {
    color:#666;
    margin: 1em;
    padding: 0 0 10px 50px;
    background: url(img/blockquote.gif) no-repeat left top;
    }
    fieldset
    {
    border:none;
    }
    body
    {
    background: #f9f9f0;
    margin: 0;
    font: 76%/1.6em verdana, tahoma, arial, sans-serif;
    color: #333;
    text-align: center;
    }
    a
    {
    text-decoration:none;
    }
    a:link, a:visited {
    color: #265e15;
    }
    a:hover, a:active {
    border-bottom:#963 1px solid;
    }
    h1, h2, h3, h4, h5, h6
    {
    font-family:Georgia, Verdana, Arial, Serif;
    }

    #container {
    border: #ccc 1px solid;
    background: #fff;
    margin: 0 auto;
    width: 780px;
    position: relative;
    text-align: left;
    }
    #navigation {
    background: transparent;
    margin: 20px auto 0;
    overflow: hidden;
    width: 760px;
    position: relative;
    text-align: left;
    font-family: Trebuchet MS,Tahoma, Verdana, Arial, Serif;
    letter-spacing:1px;
    }
    html #navigation {
    height: 1%;
    }
    #navigation ul li {
    float: left;
    margin: 0 5px 0 0;
    list-style-type: none;
    }
    #navigation ul li a {
    border: #dedede 1px solid;
    border-bottom:none;
    padding: 2px 10px;
    display: block;
    font-weight:bold;
    color:#666;
    text-decoration: none;
    background:#ededed;
    }
    #navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a {
    background: #fff;
    color: #333;
    border: #ccc 1px solid;
    border-bottom:none;
    }
    #navigation ul li.search {
    font-size: 0.9em;
    right: 0;
    position: absolute;
    top: 0;
    }
    #navigation ul li.search input#searchsubmit {
    border: #999 1px solid;
    font-size: 0.9em;
    background: #ddd;
    margin: 0 0 0 2px;
    color: #265e15;
    padding: 2px;
    }
    #header {
    clear: both;
    float: left;
    margin: 10px 5px;
    width: 450px;
    }
    #header h1
    {
    font-size:1.8em;
    margin:10px 0 0 10px;
    font-variant:small-caps;
    letter-spacing:1px;
    }
    #header h1 a {

    text-decoration:none;
    border:none;
    }
    #header h2
    {
    margin:5px 0 0 10px;
    font-size:1em;
    font-weight:normal;
    font-family:Tahoma, Verdana, Arial, Serif;
    letter-spacing:1px;
    }
    #feedarea {
    padding:10px 10px 0 0;
    float: right;
    text-align: right;
    }
    html #feedarea {
    padding-top: 10px;
    }
    #feedarea dl dt {
    display: inline;
    margin-right: 5px;
    height: 45px;
    }
    #feedarea dl dd {
    display: inline;
    margin-right: 5px;
    height: 45px;
    background:url(img/icon_feed.gif) no-repeat left center;
    padding-left:16px;
    }
    #headerimage {
    clear: both;
    background: #fff url(img/misty.jpg) no-repeat 0 0;
    margin: 10px;
    color: #fff;
    height: 200px;
    }
    html #headerimage {
    margin-top: 0;
    }
    #content {
    margin: 10px 10px 10px 30px;
    }
    html #content {
    height: 1%;
    }
    #content h3 {
    font-size: 1.4em;
    font-weight:normal;
    margin: 1em 0 0;
    color: #265e15;
    }
    #content h4 {
    font-size: 1.1em;
    margin: 1em 0 0 0;
    }
    #content h5 {
    font-size: 1em;
    margin: 1em 0;
    }
    #content-main ul
    {
    margin:1em;
    padding:0 1em;
    list-style-image:url(img/bullet.png);
    }
    #content-main ul.asides
    {
    margin:0;
    padding:2em;
    border-bottom:#ddd 1px dashed;
    }
    #content ol
    {
    list-style-type:decimal;
    margin:2em;
    padding:0 2em;
    }
    #content-main {
    float: left;
    width: 520px;
    margin-right: 20px;
    overflow: hidden;
    }
    html #section-index #content-main {
    margin-right: 20px;
    }
    #content .post
    {
    padding:0 0 2em 0;
    border-bottom:#ddd 1px dashed;
    }
    #content p img.right {
    float: right;
    margin:10px 0 0 10px;
    }
    #content p img.left {
    float: left;
    margin:0 10px 10px 0;
    }
    #content .post h2
    {
    font-size: 1.4em;
    margin: 1em 0 0;
    letter-spacing:1px;
    font-weight:normal;
    }
    #content .entry
    {
    margin:1em 0;
    padding-right:1em;
    }

    #content .sticky {
    background: #f7f7f7;
    padding: 0 10px 10px 10px;
    }
    #content .sticky .posttitle h2 {
    padding-top: 10px;
    }
    #content .entry a:link, #content .entry a:visited
    {
    border-bottom:#963 1px dashed;
    }
    #content .entry a:hover, #content .entry a:active
    {
    border-bottom:#963 1px solid;
    }
    #content .post-info , #content .postmetadata
    {
    font-size:0.9em;
    color:#999;
    margin:0;
    padding:0;
    }
    #content .post-info
    {
    background:url(img/underline1.jpg) no-repeat left bottom;
    padding-bottom:12px;
    }
    #sidebar {
    float: left;
    width: 200px;
    font-size:0.9em;
    overflow: hidden;
    }
    #sidebar ul
    {
    list-style:none;
    margin:0;
    padding:0;
    }
    #sidebar ul ul
    {
    list-style:none;
    margin:0.5em 0 0 1em;
    }
    #sidebar ul ul ul
    {
    margin:0 0 0 1em;
    }
    .sidebox ul li {
    overflow: hidden;
    }
    li.sidebox {
    padding:10px;
    background: url(img/sideheadtop.gif) #ededed no-repeat left top;
    margin-bottom: 10px;
    }
    html li.sidebox {
    padding-bottom: 10px;
    }
    li.sidebox h2 {
    font-weight: normal;
    font-size: 1.6em;
    text-align: left;
    color: #242;
    font-variant:small-caps;
    }
    #sidebar li.sidebox p img {
    margin:0;
    padding:3px;
    border:#ccc 1px solid;
    background:none;
    }

    #footer {
    clear: both;
    background: transparent;
    margin: 0 auto;
    width: 760px;
    text-align: left;
    }
    html #footer {
    height: 1%;
    }
    #footer p {
    float: left;
    width: 50%;
    line-height: 1.2em;
    }
    #footer p.right {
    float: right;
    margin: 1em 0;
    width: 50%;
    text-align: right;
    font-size: 0.9em;
    color:#999;
    }
    #comments, #respond{
    margin: 2em 0 10px 5px;
    }
    #commentform
    {
    margin:10px 0;
    padding:10px;
    background:#f9fcfc;
    border-top: #ddd 1px solid;
    border-bottom: #ddd 1px solid;
    }
    .commentnum
    {
    font-size:1.5em;
    font-weight:bold;
    margin:0 5px 0 0;
    }
    #container .commentlist {
    margin: 0;
    padding: 0;
    border-top: #ddd 1px solid;
    }
    .commentlist li
    {
    list-style:none;
    margin: 0;
    padding: 0.5em;
    border-bottom: #ddd 1px solid;

    }
    .commentlist li.thread-alt
    {
    background:#f9f9f9;
    }
    .commentlist li .cmtinfo
    {
    font-size:1em;
    }
    .commentlist li cite
    {
    font-style:normal;
    font-weight:bold;
    }
    .commentlist li .cmtinfo em
    {
    float:right;
    margin:0;
    padding:0;
    font-style:normal;
    font-size:0.9em;
    color:#999;
    }
    /* threaded comments */
    .commentlist .children li {
    border-bottom: 0px;

    }
    #content-main .commentlist .children {
    margin: 10px 0 10px 10px;
    padding: 0;
    border-left: 1px solid #ddd;
    }

    #content .commentsfeed
    {
    background:url(img/icon_feed.gif) no-repeat left center;
    padding-left:16px;
    }
    #content .trackback
    {
    background:url(img/link.gif) no-repeat left center;
    padding-left:20px;
    }
    input.textbox
    {
    border:#ccc 1px solid;
    background:#fff url(img/shadow_top.gif) repeat-x top;
    font:1em Verdana, Arial, Serif;
    padding:2px;
    width:150px;
    }
    textarea{
    width: 80%;
    padding:10px;
    line-height:2em;
    height: 20em;
    border: 1px solid #ccc;
    background:#fff url(img/shadow_top.gif) repeat-x top;
    font:1em Verdana, Arial, Serif;
    }
    .textbox:focus, textarea:focus
    {
    background:#fff url(img/shadow_top.gif) repeat-x top;
    border:#999 1px solid;
    }
    .post h4
    {
    font-size:1em;
    font-weight:normal;
    font-family:Verdana, Tahoma, Arial, Serif;
    }
    .post h4 em
    {
    font-style:normal;
    float:right;
    font-weight:normal;
    }
    #header, #content, #sidebar, #footer, .widget, .entry {
    overflow: hidden;
    }

    .avatar { clear: both; float: right; margin-left: 5px; }

    .navigation { clear: both; }

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

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

    img.alignleft {
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }
    .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, .wp-caption a img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    #content .wp-caption a:hover,
    #content .wp-caption a:active,
    #content .wp-caption a:link,
    #content .wp-caption a:visited {
    border: none;
    }

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

    The blog I need help with is ulovphotography.com.

  2. 1. under #sidebar add display:none;

    2. change the width in #content-main as desired.

  3. ulovphotography
    Member

    Thank you, I tried that but now the text of the content column gets hidden beyond the boundary on the right and photos are centred so parts of them are hidden behind the boundary as well. How can this be fixed? I changed the main content column width to 1200px. Thank you so much for your reply!!

  4. OK, then you are trying to wider than the container width which is 780px.

    First I'll offer this for your consideration: A good portion of people are still on dial up or slower DSL connections so very large photos, even if heavily optimized are going to be a drag on them. Secondly, a good portion of people are still on monitors with 1024 x 768 resolution. You can also not forget that netbooks have become quite popular and the most prevelent resolution on those are 1024×600 and 800×480 (5.6 million netbooks sold in Q3 2008 alone).

    OK, now that I've said that, to go wider than the current container area (white space where the post are) you are going to want to change the width of several things by exactly the same amount. The current post area, content-main is 520px wide (takes about a 500px wide image because right-margin is set to 20px). Determine what width you want, subtract the 520px from that and then add that amount to the following widths:

    #sidebar add display: none;
    #container (white area) change width as desired.
    #content-main adjust width to get visually equal white space on the right
    #headerimage create a new header image that is about 20px less than the width of the width declared in #container, upload it to the media library, get the URL of that image and insert it into the background declaration for #headerimage

  5. My third paragraph I forgot to edit when I changed direction. It should read:

    OK, now that I've said that, to go wider than the current container area (white space where the post are) you are going to want to change the width of several things in addition to doing the display none on #sidebar. (Forget the stuff about "same amounts" and just adjust and preview until you get the space and white space you want.)

  6. ulovphotography
    Member

    Thank you so much!

  7. You're welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic