Sandbox, can’t get 3 columns to work

  • Unknown's avatar
    pyratus · Member ·

    Heya, this is for my blog fat-nurse.com.
    I can’t seem to get a second side bar up, the CSS I’m using only has this for sidebars; div.sidebar { float:right; overflow:hidden; width:250px; text-align:right; margin:0 80px 0 0; }

    I’ve tried changing it to a three column layout (as I want the second sidebar to be on the left) but I don’t know how to get it over there. At the moment if I enable it, it just adds it at the bottom of the right sidebar.
    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    Please post the URL for the blog in question so when the Volunteer who helps with CSS editing from time to time logs in and finds this thread he will be able to view your blog.

    This is a post I recommend reading > http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  • Unknown's avatar
    devblog · Member ·

    pyratus,

    You’re using an old version of Sandbox. This version has “skins”.

    In the “Manage Theme” page, next to the theme thumbnail, you will see this:

    Options: Widgets | Extras | Sandbox Skins | Typekit Fonts | Edit CSS

    Click the “Sandbox Skins” link and select the layout you want.

    HTH

  • Unknown's avatar
    pyratus · Member ·

    I changed to the new version and changed skins to three column but that didn’t do anything :/

    Also timethief I did say the url, :D http://www.fat-nurse.com but fatnurse.wordpress.com if that makes it better.

  • Unknown's avatar
    devblog · Member ·

    I changed to the new version and changed skins to three column but that didn’t do anything :/

    No, you’re not. You’re using the old one which is version 0.6.1.

    You have some pretty messed up code there… I’m sure there are blocks of code that are not even used… is as though you were pulling bits and pieces from everywhere.

    I really don’t have the time to clean it up, but I managed to identify some of the properties that were messing up your layout. Get rid of whatever you have in your CSS Editor and paste this instead:

    body {
background-color:#ffffff;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
margin:0;
}

div#wrapper {
width:100%;
margin:0;
}

div#nav-above,div#nav-below {
height:1em;
width:100%;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:18px;
letter-spacing:-.04em;
color:#D4076F;
}

div#nav-above {
margin-bottom:1em;
}

div#nav-below {
margin-top:1em;
}

.alignleft,div.nav-previous {
float:left;
margin-left:25px;
}

.alignright,div.nav-next {
float:right;
margin-right:25px;
}

p {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
}

a {
color:#D4076F;
text-decoration:none;
}

h3 {
color:#000000;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:24px;
letter-spacing:-.08em;
}

blockquote {
width:80%;
background-color:#435059;
border-top:2px solid #333;
border-bottom:2px solid #333;
margin:5px auto;
padding:10px;
}

div#header {
background-color:#555;
height:180px;
margin-top:0;
padding-top:0;
text-align:left;
width:100%;
background-image:url('http://fatnurse.files.wordpress.com/2010/01/header_bg2.png');
background-position:left;
background-repeat:no-repeat;
}

h1#blog-title {
color:#FFFFFF;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:54px;
font-weight:700;
padding-left:340px;
padding-top:100px;
margin:10px 0 0;
}

#blog-description {
padding-left:75px;
margin-left:240px;
background-image:url('mini_swatch_lt.png');
background-position:left;
background-repeat:no-repeat;
color:#E0DFE0;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:400;
}

#access .skip-link {
position:absolute;
display:none;
right:1em;
top:1em;
}

.entry-content {
background-color:#BCED91;
border:2px solid #333;
color:#000000;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:.02em;
line-height:19px;
text-decoration:none;
padding:10px;
}

.page-title {
color:#d4076f;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:36px;
font-weight:400;
letter-spacing:-.08em;
text-decoration:none;
margin:0 0 0 25px;
}

.entry-title {
background-image:url('title_swatches.png');
background-position:left;
background-repeat:no-repeat;
color:#D4076F;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:28px;
font-weight:400;
letter-spacing:-.08em;
text-decoration:none;
margin:0 0 0 25px;
}

.entry-title:hover {
background-image:url('title_swatches_hover.png');
background-position:left;
background-repeat:no-repeat;
color:#d4076f;
}

.entry-date {
color:#d4076f;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:16px;
letter-spacing:-.02em;
text-decoration:none;
}

.published {
border:none;
}

.entry-meta {
color:#000000;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:25px;
margin-left:200px;
padding-left:230px;
text-decoration:none;
}

.entry-content img {
border:2px solid #333;
background-color:#ffffff;
margin:0 auto;
padding:15px;
}

.entry-content img:hover {
border:2px solid #333;
background-color:#d4076f;
margin:0 auto;
padding:15px;
}

div.sidebar div,div.sidebar h3,div.sidebar ul,div.sidebar li {
margin:0;
padding:0;
}

.sidebar h3 {
background-image:url('mini_swatch.png');
background-position:right;
background-repeat:no-repeat;
border:none;
color:#D4076F;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:400;
letter-spacing:-.08em;
width:230px;
margin:15px 0 0;
padding:0;
}

.sidebar input#s {
width:7em;
}

.sidebar li {
list-style:none;
margin:0;
}

.sidebar li form {
margin:.2em 0 0;
padding:0;
}

.sidebar ul ul {
margin:0;
}

.sidebar ul ul li {
display:block;
list-style:none;
padding:0;
}

.sidebar ul ul li a {
border-bottom:1px solid #666;
color:#000000;
display:block;
text-decoration:none;
padding:2px;
}

.sidebar ul ul li a:hover {
background:#bced91;
border-bottom:1px solid #08558E;
color:#d4076f;
display:block;
text-decoration:none;
}

.sidebar ul ul ul {
margin:0 0 0 .5em;
}

.sidebar ul ul ul li {
list-style:circle;
}

#comments {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
width:75%;
margin:0 auto;
}

.nopassword {
color:#d4076f;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:36px;
font-weight:700;
}

#comments-list ol {
background-color:#ffffff;
font-family:verdana, Arial, Helvetica, sans-serif;
text-align:right;
margin:0;
padding:0;
}

#comments-list ol li {
list-style:none;
padding:10px;
}

#comments .alt {
background-color:#ffffff;
border-top:2px solid #333;
border-bottom:2px solid #333;
text-align:left;
padding:10px;
}

#commentform {
background-color:#bced91;
border:2px solid #333;
color:#000000;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:14px;
padding:10px;
}

form#commentform .form-label {
margin:1em 0 0;
}

input#author,input#email,input#url {
font-family:verdana, Arial, Helvetica, sans-serif;
font-size:16px;
background-color:#ffffff;
border-bottom:1px solid #333;
border-left:0;
border-right:0;
border-top:0;
color:#000000;
width:95%;
margin:5px;
}

input#author,input#email,input#url,textarea#comment {
padding:.2em;
}

textarea#comment {
font-family:verdana, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#bced91;
border:1px solid #333;
color:#000000;
height:13em;
overflow:auto;
width:95%;
margin:5px;
}

.form-label {
color:#000000;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:400;
letter-spacing:-.08em;
}

p#comment-notes {
font-family:verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.comment-author {
color:#D4076F;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:400;
letter-spacing:-.08em;
text-decoration:none;
padding:2px;
}

.comment-meta {
color:#000000;
font-family:verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
padding:2px;
}

#comments .alt .comment-author {
background-image:url('cs_comments_darkbg_pink20.png');
background-position:left;
height:26px;
padding:0 0 4px 25px;
}

#comments .comment-author {
background-image:url('cs_comments_lightbg_lblue20.png');
background-position:right;
background-repeat:no-repeat;
height:26px;
padding:0 25px 0 0;
}

.comment meta {
padding-right:75px;
}

#footer {
background:#333;
border-top:5px solid #222;
clear:both;
color:#000000;
font-family:"century gothic", Arial, Helvetica, sans-serif;
font-size:24px;
height:35px;
letter-spacing:-.08em;
padding-top:.3em;
position:relative;
right:0;
text-align:center;
text-transform:lowercase;
width:100%;
}

#nav-above a,#nav-below a,.entry-meta a,#commentform a {
color:#000000;
}

h1,#footer a,#blog-title a,.entry-title a:hover {
color:#d4076f;
}

h2,#footer a:hover,.entry-title a,.entry-meta a:hover,.comment-author a,.comment-meta a {
color:#D4076F;
}

    That should make your blog look the way you want it (or at least close to it). You can take it from there.

  • Unknown's avatar
    pyratus · Member ·

    Hey, thanks for the clean up. I’ve now changed to the most recent version of Sandbox but for some reason the skins option isn’t showing on my sidebar under Appearance or next to the thumbnail on the main theme page. :(

  • Unknown's avatar
    devblog · Member ·

    You didn’t need to change to the new version… the changes I gave you are for the “old” version (0.6.1). Change back to it and select the 3 column skin, then the changes I gave you will take effect…

    The new versions do not have the skin options, only the old one.

  • Unknown's avatar
    pyratus · Member ·

    Okay sorry about that, I completely misread something you said earlier, my fault.
    That works wonderfully :) Thank you so much for your help, I really appreciate it.

  • Unknown's avatar
    pyratus · Member ·

    Just one more thing, while I’m here.. How do I make the secondary sidebar wider?
    I want it to be filling up more space towards the left but when I add a width command under #secondary it just disappears off of the edge of the screen, as if it’s growing to the right not left.

  • Unknown's avatar
    hallluke · Member ·

    You need to change the margins as well as the width. Here’s an example:

    div#secondary {width:350px; margin-left:-370px;}
    div#content {margin-right:370px;}

    lh

  • Unknown's avatar
    pyratus · Member ·

    You guys are wonderful, that worked a treat hallluke. Thank you all very much :)

  • The topic ‘Sandbox, can’t get 3 columns to work’ is closed to new replies.