Sandbox Kubrick

  • Unknown's avatar

    body {
    background:#d5d6d7 url(‘/wp-content/themes/default/images/kubrickbgcolor.jpg’);
    color:#333;
    font-family:”lucida grande”, verdana, arial, sans-serif;
    font-size:62.5%;
    text-align:center;
    margin:0 0 20px;
    padding:0;
    }

    div#globalnav ul#menu {
    margin:-20px 0 0 30px;
    padding:0;
    }

    * html div#globalnav {
    margin-bottom:20px;
    }

    div#globalnav ul#menu li {
    display:inline;
    margin:0;
    padding:0;
    }

    div#globalnav ul#menu a,div#globalnav ul#menu a:visited {
    display:block;
    float:left;
    height:18px;
    text-decoration:none;
    color:white;
    font-size:1.2em;
    margin:0 5px;
    padding:2px 5px 0;
    }

    div#globalnav ul#menu li a:hover,div#globalnav ul#menu li.current_page_item a,div#globalnav ul#menu li.current_page_item a:visited {
    background:#fff;
    color:#06c;
    }

    div#wrapper {
    background:#dfdfff url(‘/wp-content/themes/default/images/kubrickbg.jpg’) repeat-y top left;
    text-align:left;
    width:760px;
    margin:20px auto;
    padding:0;
    }

    body.single #wrapper {
    background:#fff url(‘/wp-content/themes/default/images/kubrickbgwide.jpg’) repeat-y top left;
    }

    div#header {
    background:#73a0c5 url(‘/wp-content/themes/default/images/kubrickheader.jpg’) no-repeat bottom center;
    height:200px;
    width:760px;
    margin:0;
    padding:0;
    }

    div#container {
    clear:left;
    }

    div#content {
    float:left;
    font-size:1.2em;
    line-height:1.4em;
    width:450px;
    margin:0;
    padding:0 0 20px 45px;
    }

    body.single div#content {
    float:none;
    line-height:1.6em;
    margin:5px 0 0 150px;
    padding:10px 0 20px;
    }

    div.entry-content p {
    line-height:1.4em;
    }

    div.entry-meta {
    clear:left;
    font-size:85%;
    line-height:1.4em;
    padding-top:5px;
    text-align:center;
    }

    body.single .entry-meta {
    text-align:justify;
    margin:30px 0;
    }

    body.archive .entry-meta {
    text-align:left;
    }

    div.comments li.alt,body.single .entry-meta {
    background:#f8f8f8;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
    margin:0;
    padding:10px;
    }

    div#footer {
    background:#eee url(‘/wp-content/themes/default/images/kubrickfooter.jpg’) no-repeat top;
    border:none;
    clear:both;
    height:63px;
    width:760px;
    margin:0 auto;
    padding:0;
    }

    small,abbr.published {
    border:none;
    color:#777;
    font-family:arial, helvetica, sans-serif;
    font-size:0.9em;
    line-height:1.5em;
    }

    h1,h2,h3 {
    font-family:”trebuchet ms”, “lucida grande”, verdana, sans-serif;
    font-weight:bold;
    }

    h1 {
    font-size:4em;
    padding-top:75px;
    text-align:center;
    margin:0;
    }

    div#blog-description {
    font-size:1.2em;
    text-align:center;
    }

    h2 {
    font-size:1.6em;
    margin:30px 0 0;
    }

    body.page h2.entry-title {
    margin-top:30px;
    text-align:center;
    }

    h3 {
    font-size:1.3em;
    margin:30px 0 0;
    padding:0;
    }

    div.sidebar h3 {
    font-family:”lucida grande”, verdana, arial, sans-serif;
    font-size:1.2em;
    margin:5px 0 0;
    padding:0;
    }

    h1,h1 a,h1 a:hover,h1 a:visited,div#blog-description {
    color:#fff;
    text-decoration:none;
    }

    h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited {
    color:#333;
    line-height:110%;
    }

    h2,h2 a,h2 a:hover,h2 a:visited,h3,h3 a,h3 a:hover,h3 a:visited,.sidebar h3,#wp-calendar caption,cite {
    text-decoration:none;
    }

    div.entry-content p a:visited {
    color:#b85b5a;
    }

    ol.commentlist li,form#commentform input,form#commentform textarea {
    font:0.9em “lucida grande”, verdana, arial, sans-serif;
    }

    ol.commentlist .comment-author {
    font-weight:bold;
    }

    ol.commentlist li,ol.commentslist li.alt {
    list-style:none;
    margin:0;
    padding:15px 10px 6px;
    }

    ol.commentlist li.bypostauthor {
    background:#dbe8f2;
    margin:0;
    padding:15px 10px 6px;
    }

    ol.commentlist cite,ol.commentlist cite a {
    font-weight:bold;
    font-style:normal;
    font-size:1.1em;
    }

    ol.commentlist p {
    line-height:1.5em;
    text-transform:none;
    margin:10px 5px 10px 0;
    }

    form#commentform p {
    font-family:”lucida grande”, verdana, arial, sans-serif;
    margin:5px 0;
    }

    .comment-metadata {
    display:block;
    font-weight:normal;
    margin:0;
    }

    div.sidebar {
    font:1em “lucida grande”, verdana, arial, sans-serif;
    margin-left:545px;
    width:190px;
    padding:0;
    }

    div#primary {
    margin-top:40px;
    }

    small,div.sidebar ul ul li,div.sidebar ul ol li,.nocomments,.entry-meta,blockquote,strike {
    color:#777;
    }

    code,pre {
    font:1em/140% “courier new”, courier, monospace;
    }

    acronym,abbr,span.caps {
    cursor:help;
    font-size:0.9em;
    letter-spacing:.07em;
    }

    a,h2 a:hover,h3 a:hover {
    color:#06c;
    text-decoration:none;
    }

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

    #wp-calendar #prev a {
    font-size:9pt;
    padding-left:10px;
    text-align:left;
    }

    #wp-calendar a {
    text-decoration:none;
    display:block;
    }

    #wp-calendar caption {
    font:bold 1.3em “lucida grande”, verdana, arial, sans-serif;
    text-align:center;
    width:100%;
    }

    #wp-calendar th {
    font-style:normal;
    text-transform:capitalize;
    }

    div.post {
    text-align:justify;
    margin:0 0 40px;
    }

    body.attachment .smallattachment {
    float:left;
    text-align:center;
    width:128px;
    margin:5px 5px 5px 0;
    }

    body.attachment .attachment {
    text-align:center;
    margin:5px 0;
    }

    div#footer p {
    text-align:center;
    margin:0;
    padding:20px 0;
    }

    h3.comment-header {
    margin:40px auto 20px;
    padding:0;
    }

    p img {
    max-width:100%;
    padding:0;
    }

    img.centered {
    display:block;
    margin:0 auto;
    }

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

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

    html>body div.entry-content ul {
    list-style:none;
    margin-left:0;
    text-indent:-10px;
    padding:0 0 0 10px;
    }

    html>body div.entry-content li {
    margin:7px 0 8px 10px;
    }

    div.entry-content ol {
    margin:0;
    padding:0 0 0 35px;
    }

    div.entry-meta ul,div.entry-meta li {
    display:inline;
    list-style:none;
    }

    div.sidebar ul li {
    list-style:none;
    margin-bottom:15px;
    }

    div.sidebar ul p,div.sidebar ul select {
    margin:5px 0 8px;
    }

    div.sidebar ul ul,div.sidebar ul ol {
    margin:5px 0 0 10px;
    }

    div.sidebar ul ul ul,div.sidebar ul ol {
    margin:0 0 0 10px;
    }

    ol li,div.sidebar ul ol li {
    list-style:decimal outside;
    }

    div.sidebar ul ul li,div.sidebar ul ol li {
    margin:3px 0 0;
    padding:0;
    }

    form#searchform {
    text-align:center;
    margin:0 0 10px;
    padding:5px 3px;
    }

    div.sidebar form#searchform #s {
    width:108px;
    padding:2px;
    }

    div.sidebar form#searchsubmit {
    padding:1px;
    }

    select {
    width:130px;
    }

    form#commentform input {
    width:170px;
    margin:5px 5px 1px 0;
    padding:2px;
    }

    form#commentform textarea {
    width:98%;
    padding:2px;
    }

    form#commentform #submit {
    float:right;
    margin:0;
    }

    ol.commentlist {
    text-align:justify;
    padding:0;
    }

    .nocomments {
    text-align:center;
    margin:0;
    padding:0;
    }

    #wp-calendar {
    empty-cells:show;
    width:155px;
    margin:10px auto 0;
    }

    #wp-calendar #next a {
    padding-right:10px;
    text-align:right;
    }

    #wp-calendar td {
    text-align:center;
    padding:3px 0;
    }

    #wp-calendar td.pad:hover {
    background:#fff;
    }

    acronym,abbr {
    border-bottom:1px dashed #999;
    }

    blockquote {
    border-left:5px solid #ddd;
    padding-left:20px;
    margin:15px 30px 0 10px;
    }

    blockquote cite {
    display:block;
    margin:5px 0 0;
    }

    a img {
    border:none;
    }

    div.navigation {
    display:block;
    text-align:center;
    margin:50px 0 10px;
    }

    body.single div.navigation {
    margin:10px 0 60px;
    }

    body.single .post,div.sidebar form {
    margin:0;
    }

    div.entry-content ol li,div.sidebar ul,div.sidebar ul ol {
    margin:0;
    padding:0;
    }

    div.entry-content form,.center {
    text-align:center;
    }

    div#globalnav ul ul,p.access,body.single div.sidebar,hr {
    display:none;
    }

    div.content-column {
    width:48%;
    }

    #linkcats>li:before {
    content:””;
    }

    div.clearer,body.single h2.entry-title {
    clear:both;
    }

    .alignright,.nav-next,div#archives-by-month {
    float:right;
    }

    .alignleft,.nav-previous,div#archives-by-category {
    float:left;
    }

    div.entry-content ul li:before,div.sidebar ul ul li:before {
    content:”0BB 020″;
    }

    span.post-commentlink a:after {
    content:”020 0BB”;
    }

  • Unknown's avatar

    To use this, select the Sandbox theme with the No CSS skin. Then paste this code into the CSS Editor and save it.

  • Unknown's avatar

    Coolness. I’m going to give this a try.

    Earlier, I just selected Kubrick as my theme and posted some minor overides in the CSS editor. But your code might be a better way to customize Kubrick.

  • Unknown's avatar

    Can I be the first to ask what the advantages would be in paying $15 and copying and pasting this into the custom CSS box rather than just, um, selecting Kubrick from the presentation panel?

  • Unknown's avatar

    Wank, the advantages would be that, once you have access to the CSS from Kubrick, you can change it suit your own requirements. For instance, the code that Andy has posted allows for the inclusion of a menubar for the pages, which isn’t part of the original Kubrick. Check out a preliminary version here.

    You could change font sizes, layout, add a sidebar, etc.

    Andy: The template seems to work well. I just need to get the bullets working in the sidebar like the original Kubrick. Then I can go crazy on other things ;).

  • Unknown's avatar

    Actually, the beauty of this is that the Sandbox is flexible enough to be a lot of things, including Kubrick. Why couldn’t it also be Connections, etc? It’s an example of the theme’s flexibility. It also is a terrific example of how to make a stylesheet for the Sandbox.

  • Unknown's avatar

    advantage:

    .category-asides h2 {
    display: none;
    }
    .category-noteworthy h2 {
    background: url(heart.gif) no-repeat top right;
    }

  • Unknown's avatar

    sunburntkamel: That’s exactly the kind of thing I was hoping to see :-)

  • Unknown's avatar
  • Unknown's avatar

    meonlly
    You haven’t asked a question and you haven’t clarified what you think is “useless”. Do you have a question to ask or a problem that you need to resolve?

  • Unknown's avatar

    meonlly, wasn’t it useless to leave your useless comment?

  • Unknown's avatar

    Is the only way to change the header image to replace what’s between the single quotes below with the link to my image?

    url(‘/wp-content/themes/default/images/kubrickheader.jpg’)

    Would a URL like this work:
    url(‘wh.com/images/myheaderimg.jpg’)

  • Unknown's avatar

    Is the only way to change the header image to replace what’s between the single quotes below with the link to my image?

    If you’re using Sandbox, yes, since that theme doesn’t have a separate custom header uploader.

    Would a URL like this work:

    Yes. There’s no reason why you can’t link to an external image if that image is on your own server space (if it’s from a third-party site, however, they may not appreciate you hotlinking and could disable the image.) Most people, though, would upload the image to their wordpress.com account and host it locally.

  • Unknown's avatar

    I’m using this for my site, but how do i get rid of the huge amount of whitespace between the header and the content?

    http://petsupplies4less.wordpress.com

  • Unknown's avatar

    Depends. Do you want to keep the ‘About’ link where it is or move it into the sidebar?

    By the way, I’d advise you to cut down on the number of links to your main site and start posting original material on your blog rather than just reproducing stuff from petsupplies4less. WordPress.com is quite strict about accounts being used purely to boost traffic and PR of external sites, and it would suck to have your blog deleted after having invested in custom CSS.

  • Unknown's avatar

    I’d rather move it to the sidebar.

  • Unknown's avatar

    OK, try

    #access {display:none}
    #container {margin-top:-40px}

    and add a Pages widget to your sidebar so the about link shows up there.

  • Unknown's avatar

    Works perfectly! Thanks!

  • Unknown's avatar

    Anyone have some advice for a novice for working with the following qualities in “sand box kubric”?

    While previewing the code I noticed:

    1. The header does not float – I would like it to float, I think… at least for the image to stay centered with the page/body background.

    2. The body text and background image do not stay aligned with each other while changing browser window width: must I get rid of the background image?

    3. The sidebar text is variable width, I’d prefer it to be fixed width.

    4. The body text is fixed width, I’d prefer it to be variable width…

    5. I’d like to add the sidebar to a kubric styleposts template! –the big reason I am investigating this CSS stuff, besides fun…

    Any thoughts would be appreciated,

    WordPress Rocks

  • Unknown's avatar

    O.k. so like I said I was a novice, I hadn’t switched over to sandbox before adding the css code…

    Now I have other questions. I’ll ask later, if they still exist, aftert some experimenting…

  • The topic ‘Sandbox Kubrick’ is closed to new replies.