Need help? Check out our Support site, then


Sidebar width issues

  1. freedomrunministries
    Member

    Hi, I've been working on editing the CSS for our blog. I'm not sure if someone can help me, as I've not yet paid for the upgrade. I want to get it right and make sure that what I've done will work before spending the money to upgrade.

    That said, I'm using the Dusk Theme and have worked off the code of that and tweaked it to make the blog look the way I want it. When editing CSS, I click the radio button that says start from scratch and use this code (or something like that). I've got everything looking exactly how I want it, all except for my sidebar.

    For one, even though I have the repeat-y function on, it's not repeating after the image on the bottom of the sidebar.

    Secondly, I have tried adjusting the margins and padding to get the text to fit on the black area. Nothing seems to be working. The only thing that does work, is if I add padding or a margin to the left edge (which doesn't help since it's the right edge I want to stop from going off the black).

    Here's my code and a link to the temporary css page (although I'm not sure if the link will work). I usually design sites using html and some css, but I'm really an amateur css styler. I can tweak others stuff but can't write my own. So any help would be great, just try to dumb it down for me =)

    -----

    body {
    background:url('http://www.freedomrunministries.org/blog/themes/images/bkgdsquare.png') repeat;
    font-family:Arial, sans-serif;
    text-align:center;
    voice-family:inherit;
    font-size:small;
    margin:0;
    padding:0;
    }

    html>body {
    font-size:small;
    }

    p {
    font-size:1em;
    line-height:1.5em;
    margin:0 10px 0 0;
    padding:0 0 0 100px;
    }

    ol,ul {
    font-size:1em;
    line-height:1.5em;
    margin:0 0 0 220px;
    padding:0 0 0 100px;
    }

    h1,h2,h3,h4,h5,h6 {
    font-family:Verdana, serif;
    margin:0;
    padding:0 0 0 100px;
    }

    h1,h2 {
    font-size:1.5em;
    }

    h3 {
    font-size:1.4em;
    }

    h4 {
    font-size:1.3em;
    }

    h5 {
    font-size:1.2em;
    }

    h6 {
    font-size:1.1em;
    }

    a:link {
    color:#497CA7;
    }

    a:visited,a:active {
    color:#6E7CA7;
    }

    a:hover {
    color:#7599B7;
    text-decoration:none;
    }

    input,textarea,select {
    background-color:#FFF;
    color:#D5D5E5;
    font-size:1em;
    font-family:Arial, sans-serif;
    }

    blockquote {
    margin:0 10px;
    padding:0 10px;
    }

    code {
    font-family:monospace;
    color:#666666;
    }

    form {
    border:0;
    margin:0;
    padding:0;
    }

    #header {
    width:850px;
    height:253px;
    background:url('http://www.freedomrunministries.org/blog/themes/images/header.png') no-repeat;
    }

    #title {
    float:left;
    }

    #title h1 {
    border:0;
    color:#FFFFFF;
    font-family:TrajanPro-Bold, "Times New Roman", Times, serif;
    font-size:2em;
    line-height:32px;
    letter-spacing:1px;
    margin:0;
    }

    #content {
    float:left;
    text-align:left;
    overflow:hidden;
    background:url('http://www.freedomrunministries.org/blog/themes/images/content.png') repeat-y;
    voice-family:inherit;
    width:538px;
    margin:0;
    padding:0;
    }

    html>body #content {
    width:538px;
    }

    #sidebar {
    float:left;
    text-align:left;
    background:url('http://www.freedomrunministries.org/blog/themes/images/sidebar.png') repeat-y;
    font-size:.92em;
    color:#497CA7;
    voice-family:inherit;
    width:312px;
    margin:0 100px 0 0;
    padding:0 0 0 10px;
    }

    html>body #sidebar {
    background:url('http://www.freedomrunministries.org/blog/themes/images/sidebar.png') repeat-y;
    width:312px;
    }

    #respond,#comments {
    clear:both;
    }

    .navigation {
    padding-bottom:2em;
    }

    #sidebar h2 {
    font-size:1.1em;
    margin:0 0 .6em;
    }

    #sidebar a:link {
    color:#7599B7;
    }

    #sidebar a:visited,#sidebar a:active {
    color:#8B99B7;
    }

    #sidebar a:hover {
    color:#497CA7;
    text-decoration:none;
    }

    #sidebar ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }

    #sidebar ul ul,#sidebar ol {
    margin:1.2em 0 1.2em 1.3em;
    }

    #sidebar ul ul {
    list-style-type:disc;
    }

    #sidebar ul ul ul {
    margin-top:0;
    margin-bottom:0;
    }

    * html #content,* html #sidebar {
    overflow:hidden;
    }

    #footer {
    clear:both;
    padding:1.2em 230px 1.2em 35px;
    }

    #footer p {
    font-size:.92em;
    margin:0;
    padding:.6em 0;
    }

    .sticky {
    background:url('//www.freedomrunministries.org/blog/themes/bkgdsquare.png') repeat-x repeat-y;
    margin-bottom:10px;
    padding:10px;
    }

    .posttitle {
    border-bottom:1px dotted #888685;
    margin:0 0 0 100px;
    padding:0;
    }

    .posttitle a {
    text-decoration:none;
    }

    .postmeta {
    margin:0 10px 0 0;
    padding:0 0 0 100px;
    }

    .postmeta,.postfeedback {
    font-size:.92em;
    text-align:right;
    clear:both;
    }

    .pagetitle {
    margin:.6em 0 1.2em;
    }

    .commentauthor {
    border-bottom:1px dotted #888685;
    font-size:1.1em;
    margin:0;
    padding:0 0 0 100px;
    }

    .commentauthor a {
    text-decoration:none;
    }

    .commentmeta {
    font-size:.92em;
    margin:0;
    padding:0 0 0 100px;
    }

    #comment {
    width:98%;
    }

    #commentlist h4 {
    margin:0;
    padding:0;
    }

    ol#commentlist li {
    padding:5px 0 0;
    }

    ol#commentlist li .children {
    list-style-type:none;
    }

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

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

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

    .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:url('http://www.freedomrunministries.org/blog/themes/images/bkgdsquare.png') repeat-x repeat-y;
    padding-top:4px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin:10px;
    }

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

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

    div.avatar {
    float:right;
    margin:0;
    padding:0;
    }

    ------

    http://freedomrunministries.wordpress.com/?csspreview=true

    Thanks!!

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

  2. Unfortunately only you can see your previewed CSS changes. However the problem is quite simple. The sidebar div element only expands vertically enough to fit everything in, it won't automatically stretch to the bottom of the page. The way to get around this is to create a background image (like you have done for the main content area) but one that is wide enough to cover the sidebar too, with the colours set in the right places. If you search for "css faux columns" using your favourite search engine you'll find lots of helpful articles online that will explain it in much greater detail than I have done here. You might have to reposition the sidebar with its background set to be transparent but the hard work will be done in photoshop or whichever image editor you are using.

  3. freedomrunministries
    Member

    Thanks hallluke. That solves one problem. But the other problem is the fact that I can't get the sidebar text margins or padding squish in on the right. Any suggestions for that?

    If it were html I was coding, this would be a quick solve. I'd just give that td a background img. I haven't found it yet, but is there a way to adjust the html for the blog? That would be the quickest solution for me.

  4. freedomrunministries
    Member

    I still need help on this please!!

  5. G'day to you. There are only 2 Volunteers who choose to devote their time to creating CSS solutions to the questions being posted. Please be patient knowing they will help you when they are available to do so.

  6. freedomrunministries
    Member

    Oh I didn't realize... sorry... Hanging on and trying some other things atm to see if I can resolve a different way. Thanks timethief!! =)

  7. This is the code I would use to achieve something similar to your design. It does not include the header image as you might need to edit it a bit to fit. Try it out by copying it all into the CSS edit box and making sure you are selecting the "Start from scratch and just use this" option.

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
    body {line-height:1;}
    ol, ul {list-style:none;}
    blockquote, q {quotes:none;}
    blockquote:before, blockquote:after, q:before, q:after {content:""; content:none;}
    :focus {outline:0;}
    ins {text-decoration:none;}
    del {text-decoration:line-through;}
    table {border-collapse:collapse; border-spacing:0;}
    
    body {font-family:Arial,Verdana,sans-serif; font-size:62.5%; color:#000; background:url("http://www.freedomrunministries.org/blog/themes/images/bkgdsquare.png") repeat scroll 0 0 transparent; position:relative;}
    #wrapper {font-size:1.3em; line-height:1.4em; position:relative; background:#000; width:760px; margin:45px 0 0 45px; border-left:10px solid #000; }
    a {color:#497CA7; text-decoration:none;}
    a:hover {color:#7599B7;}
    
    #wrapper {
    -moz-box-shadow: 5px 5px 30px #000;
    -webkit-box-shadow: 5px 5px 5px #000;
    box-shadow: 5px 5px 5px #000;
    border-top-right-radius:70px;
    -moz-border-radius-topright:70px;
    border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    }
    
    #header {font-size:1.8em; padding:10px 0; font-family:verdana,arial,serif;}
    #content {padding:10px; background:#D5D5E5; width:445px; float:left;}
    #sidebar {width:275px; float:left; padding:10px; color:#497CA7;}
    #footer {clear:both; color:#D5D5E5; padding:10px 0;}
    
    #content p, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content ul, #content ol, #content pre {margin:10px 0;}
    #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {font-weight:normal;}
    #content h1 {font-size:1.5em;}
    #content h2 {font-size:1.333em;}
    #content h3 {font-size:1.166em;}
    #content h4 {font-size:1.083em;}
    #content h5 {font-size:0.916em;}
    #content h6 {font-size:0.833em;}
    #content ul, #content ol {padding-left:20px;}
    #content ul ul, #content ol ul, #content ul ul, #content ol ol {margin:0;}
    #content ul {list-style:disc outside;}
    #content ol {list-style:decimal outside;}
    #content code, #content pre {font-size:1.2em;}
    #content sup {vertical-align:top; font-size:0.8em;}
    #content sub {vertical-align:bottom; font-size:0.8em;}
    #content img {max-width:475px;}
    
    #sidebar li {margin-bottom:30px;}
    #sidebar li li {margin-bottom:0;}
    #sidebar h2 {font-weight:bold; font-size:1.2em; margin-bottom:8px;}
    #sidebar a {color:#7599B7;}
    #sidebar a:hover {color:#497CA7;}
    #sidebar li ul {list-style:disc inside;}
    #sidebar .wp_widget_tag_cloud a {font-size:1em!important; display:block;}
    
    #content .post {margin-bottom:30px;}
    #content h2.posttitle {font-family:verdana,arial,serif; font-size:1.6em; line-height:1em; font-weight:bold; padding-bottom:5px; border-bottom:1px dotted #888685;}
    #content a[href$="/#respond"], #content a[href$="/#comments"] {float:right;}
    
    #commentform textarea {width:440px;}
    
    .alignright {float:right; margin:10px 0 0 10px;}
    .alignleft {float:left; margin:10px 10px 0 0;}
    .aligncenter {display:block; margin:10px auto; text-align:center;}
    .wp-caption-text {font-style:italic; margin:5px 0 10px;}
  8. freedomrunministries
    Member

    Hi Hallluke,

    Thanks for the code. The only thing is I have a specific artistic design I wanted to use to make our blog reflect our branding. I tried to add the header image to the code you gave me, but it wasn't showing up.

    Here's the images so you can see what I mean about the design:

    Header: http://www.freedomrunministries.org/blog/themes/images/header.png
    Content: http://www.freedomrunministries.org/blog/themes/images/content.png
    Sidebar: http://www.freedomrunministries.org/blog/themes/images/sidebar.png

    Thanks again for your gracious help.

    - Wendy

  9. freedomrunministries
    Member

    Can anyone help me with this please?

  10. That code is quite messy and would take a while to clear up and fix. You might be better off looking to hire someone to do the work for you rather than asking on a free forum like this one, we are only volunteers.

  11. Make adjustments to the width, height and margin in the following three to match what I have.

    html > body #content {width: 519px; }
    #header {height:236px; }
    #sidebar {margin:0; }

    Add the following to give some padding on the right of the content.

    #content p {padding-right: 30px; }

    On the sidebar thing, the background color or image for the sidebar will only extend down to the bottom of the last widget. To have it extend down further, the black area would have to be incorporated into #wrapper so that it would extend to the bottom of the blog, wherever that happens to be.

  12. And I agree with Luke, but try the above changes. It will at least get you part of the way there. It certainly doesn't straighten up all of the issues by a long shot.

Topic Closed

This topic has been closed to new replies.

About this Topic