Need help? Check out our Support site, then


Bus Full of Hippies - Sandbox Edition

  1. I've ported the famous Joshuaink design, recently released as a Creative Commons licensed template. to use this design under that license, you should first paste the following into a text widget:

    <a href="#header">top</a> | Original design by <a href="http://johnoxton.co.uk" title="visit John's site">John Oxton</a> | Illustration by <a href="http://www.38one.com/">Denis Radenkovic</a> | This design is released under a <a href="http://creativecommons.org/licenses/by-nc/2.5/" title="view the licence for this design">Creative Commons licence</a>

    You will probably want to also make your own logo using this template: Sandbox Logo PSD.

    after changing the logo, you can change the address of the image in the first line of the CSS. here it is:
    Copy Everything below to your Edit CSS panel:

    #header h1 a {
        background: url(http://archgfx.net/wordpress/wp-content/themes/sandbox/skins/joshuaink/logo_sandbox.png) no-repeat;
        }
    /*
    copyright + credits {
    	joshuaink.com: bus full of hippies edition;
    	many-thanks: denis radenkovic for the flowers illustration:  http://38one.com/ and graham bancroft for the
    	updates made for the Creative Commons release of these templates;
    }
    */
    /*
    ===== CONTENTS =====
    	last-updated: 20 Nov 2006;
    	1: universal reset
    	2: accessibility features
    	3: html and body
    	4: typography
    		: the side bar
    		: linkypoos
    		: general params
    		: acronyms, abbreviations and del styles
    		: tables
    		: main content headings
    		: lists
    	5: layout
    	6: main navigation
    	7: images and gravatars
    	8: comments
    	9: forms
    	10: Bloglines and Rojo
    ====================
    */
    /*
    ===== 1: universal reset =====
    */
    * {
    /* set the fonts to a uniform size, including form fields as well as all headings etc. */
    	font-size:100%;
    	margin:0;
    	padding:0;
    }
    /*
    ===== 2: accessibility features =====
    */
    .hidden-elements,
    #header p,
    #blog-description,
    #globalnav h2,
    #globalnav p,
    #footer h2 {
    	position:absolute;
    	left:-9999px;
    	width:0px;
    	overflow:hidden;
    	}
    /*
    ===== 3: html and body =====
    */
    html {
    	min-width:770px;
    	}
    body {
    	font:75%/150% "Trebuchet MS", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
    	color:#666;
    /* align ie5 center screen */
    	text-align:center;
    /* Using the !important method over all else because although there _is_ JavaScript to force IE to support PNG transparency
    it causes the links 'above' the background image to become unusable */
    	background:#FFF url(http://sunburntkamel.wordpress.com/files/2007/01/body_back.jpg) 50% 0 no-repeat !important;
    	background:#FFF url(http://sunburntkamel.wordpress.com/files/2007/01/ie_back.jpg) 50% 0 no-repeat;
    	}
    body.loggedin
    {
    	background:#FFF url(http://sunburntkamel.wordpress.com/files/2007/01/body_back.jpg) 50% 28px no-repeat !important;
    	background:#FFF url(http://sunburntkamel.wordpress.com/files/2007/01/ie_back.jpg) 50% 28px no-repeat;
    }
    /*
    ===== 4: typography =====
    */
    /* the side bar */
    #primary {
    	font-size:93%;
    	line-height:130%;
    	color:#7C7C7C;
    	min-height:300px;
    	}
    #primary a.more-link {
    	margin-left:12px;
    	}
    /* linkypoos */
    a,
    #footer:hover a, #secondary:hover a, body.single .entry-meta:hover a {
    	color:#60761B;
    	}
    #footer a, #secondary a, body.single .entry-meta a {
    	color:#CCC;
    	}
    #container h2 a {
    	color:#59600E;
    	text-decoration:none;
    	background:transparent;
    	}
    #primary a {
    	color:#8CAE26;
    	}
    a:hover,
    #primary a:hover,
    #container h2 a:hover,
    #footer a:hover, #secondary a:hover, body.single .entry-meta a:hover {
    	color:#C84A26;
    	background:#F0F3B1;
    	}
    a .more-link, .entry-commentlink a, #nav-below a {
    	color:#59600E;
    	font-size:100%;
    	}
    a .more-link, .entry-commentlink a, #nav-below a {
    	text-decoration:none !important;
    	text-transform:lowercase;
    	padding-left:16px;
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/invite.gif) 0 60% no-repeat;
    	}
    a:hover .more-link, .entry-commentlink a:hover, #nav-below a:hover {
    	background:#F0F3B1 url(http://sunburntkamel.wordpress.com/files/2007/01/invite.gif) -288px 60% no-repeat !important;
    	}
    body.home .entry-meta .metasep, body.home .entry-meta .entry-author, body.home .entry-meta .entry-category, body.archive .entry-meta .metasep, body.archive .entry-meta .entry-author, body.archive .entry-meta .entry-category, body.search .entry-meta .metasep, body.search .entry-meta .entry-author, body.search .entry-meta .entry-category {
        display: none;
        }
    body.home .entry-meta .entry-editlink, body.archive .entry-meta .entry-edit, body.search .entry-meta .entry-edit {
        display: block;
        float: right;
    }
    .entry-meta {
        border-bottom: 1px dotted #F0F3B1;
        padding-bottom: 10px;
    }
    #primary h3 a {
    	margin:0.8em 0;
    	color:#59600E !important;
    	font-weight:bold;
    	text-decoration:none;
    	text-transform:capitalize;
    	}
    /* general params */
    h2,
    #primary h2 a,
    h3,
    h4,
    h5 {
    	margin:0.8em 0;
    	color:#59600E;
    	}
    p {
    	margin:0.6em 0;
    	}
    cite {
    	font-style:normal;
    	}
    .entry-content blockquote {
    	margin-left:10px;
    	padding-left:10px;
    	border-left:1px solid #F0F3B1;
    	}
    .comment-datetime, .entry-date {
    	font-size:88%;
    	margin:0;
    	padding:0;
    	color:#999;
    	}
    
    hr {
        border: 1px dotted #F0F3B1;
        padding: 0;
        margin-bottom: 10px;
        background: #F0F3B1;
        }
    .entry-content {
        margin-bottom: 20px;
        }
    /* acronyms and abbreviations styles */
    acronym,
    abbr {
    	cursor:help;
    	}
    acronym:hover,
    abbr:hover {
    	border:0;
    	border-top:1px dotted #666;
    	}
    a acronym,
    a abbr {
    	border:0 !important;
    	}
    #footer, #secondary, body.single .entry-meta {
    	font-size:88%;
    	color:#CCC !important;
    	}
    #footer:hover, #secondary:hover, body.single .entry-meta:hover {
    	color:#666 !important;
    	}
    /* tables */
    caption {
    	margin:0.8em 0;
    	font-weight:bold;
    	text-align:left;
    	color:#59600E;
    	}
    table {
    	margin:0.8em 0;
    	border:1px solid #F8F9DB;
    	padding:2px;
    	width:90%;
    	background:#F8F9DB;
    	}
    td {
    	padding:2px;
    	border:1px solid #F8F9DB;
    	background:#FFF;
    	}
    /* main content headings */
    #container h2,
    #container h3,
    #container h4,
    #container h5,
    .rssCcat {
    	font-family:"Trebuchet MS", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
    	margin:1em 0;
    	}
    #container h2 {
    	font-size:125%
    	}
    #container h3 {
    	font-size:110%
    	}
    #container h4 {
    	font-size:105%
    	}
    /* lists, oh my, where would we be without joyous lists */
    ol,
    #container ul {
    	margin:1em 0 1.3em 30px;
    	}
    ul {
    	list-style-type:none;
    	}
    #container li,
    #primary .widget li,
    #primary .linkcat li {
    	margin:0.3em 0;
    	}
    dt {
    	margin:0.4em 0 0 0;
    	}
    #container dt {
    	font-weight:bold;
    	}
    #primary dt,
    #container li,
    .widget li,
    #primary .linkcat li {
    	padding-left:12px;
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/bullet.gif) 0 5px no-repeat;
    	}
    dd {
    	margin:0.3em 0 0.8em 0;
    	}
    .content-column ul, .linkcat ul {
    	margin-bottom:0;
    	background:transparent;
    	}
    #primary dd {
    	margin:0.2em 0 0.8em 12px;
    	}
    .content-column ul, .linkcat ul {
    	margin-left:12px;
    	}
    #secondary li {
        display: inline;
        }
    #rsslinks li {
        background:transparent url(http://sunburntkamel.archgfx.net/wp-includes/images/rss.png) 0 0 no-repeat;
        padding-left: 16px;
        }
    
    /* specifically for code samples */
    .codesample {
    	border:1px solid #F8F9DB;
    	border-width:1px 1px 1px 0px;
    	margin:1.6em 5px 1.6em 10px;
    	padding:5px 5px 5px 30px;
    	color:#333;
    	-moz-border-radius-topleft:30px;
    	-moz-border-radius-bottomleft:30px;
    	}
    .codesample li, code {
    	background:#F8F9DB !important;
    	margin:1px 0 1px 0 !important;
    	padding:4px 5px 4px 10px;
    	line-height:100%;
    	font-family: "Courier New", Courier, mono, sans-serif;
    	}
    .codesample li:hover {
    	color:#C84A26;
    	}
    pre {
    	background:#F8F9DB !important;
    	margin:1px 0 1px 0 !important;
    	padding:4px 5px 4px 10px;
    	color:#333;
    	font-family: "Courier New", Courier, mono, sans-serif;
    	width: 390px;
    	overflow: auto;
        }
    /*
    ===== 5: layout =====
    */
    /* Specifically for the home page excerpts and search results*/
    #default #container a.more-link,
    #blog #container .invite,
    #search #container dd {
    	padding-bottom:10px;
    	border-bottom:1px dotted #F0F3B1;
    	}
    .message .invite {
    	margin-top:20px;
    	border-bottom:0 !important;
    	padding-bottom:0 !important;
    	}
    #search #container .small {
    	padding-bottom:0;
    	border:0;
    	}
    #wrapper {
    	width:770px;
    	margin:74px auto 0 auto;
    /* recover from ie5 work around on the body*/
    	text-align:left;
    	position:relative;
    	}
    /* #header 'home' link image replacement */
    #header h1 {
    	position:absolute;
    	left:225px;
    	top:40px;
    	}
    #header h1 a {
    	display:block;
    	width:200px;
    	height:60px;
    	float:left; /* fix IE5 */
    	overflow:hidden;
    	border: 1px solid #F4F6ED;
    	text-indent: -999em;
    	}
    #header h1 a:hover,
    #default #header h1 a {
    	background-position:-200px 0;
    	}
    #container {
    	width:454px;
    	float:left;
    	min-height:430px;
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/main_content.png) 0 0 no-repeat !important;
    	background:transparent;
    	}
    #content {
    	width:395px;
    	margin:125px 0 40px 32px;
    	overflow: hidden;
    	}
    #primary {
    /* width creates a natural margin between the two floated divs _essential_ else the mighty ie6 peek-a-boo bug will strike! */
    	width:310px;
    	float:right;
        }
    #primary {
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/sub_content.png) 0 0 no-repeat !important;
    	background:transparent;
    	padding-top: 70px;
    	}
    #primary .widget, #primary .linkcat {
    	width:247px;
    	margin:0 0 40px 25px;
    	}
    #nav-above, .access {
        display: none;
        }
    #globalnav {
    	width:300px;
    	height:60px;
    	position:absolute !important;
    	left:465px;
    	top:5px;
    	overflow:hidden;
    	z-index: 100;
    	}
    #nav-below {
        margin: 10px auto;
        padding-bottom: 10px;
        border-bottom: 1px dotted #F0F3B1;
        }
    #secondary {
        width: 100%;
        }
    #secondary h3 {
        display: none;
        }
    #footer, #secondary {
    	clear:both;
    	margin:0px 0 25px 25px;
    	}
    #secondary {
        padding-top:10px;
        margin-top: 40px;
        margin-bottom: 0;
        }
    .alertbox, .alert, .formcontainer #loggedin, #comment-notes {
    	margin:1.6em 0;
    	padding:0 0 0 35px;
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/alert.gif) 0 0 no-repeat;
    	min-height:30px;
    	line-height:130%;
    	}
    #current {
    	margin:1.6em 0;
    	padding:0 35px;
    	min-height:30px;
    	line-height:130%;
    	font-size:90%;
    	}
    #current h3 {
    	margin-bottom:0;
    	}
    /*
    ===== 6: main navigation =====
    */
    #globalnav ul {
    	margin: 15px 15px 0;
    	font: bold 96% "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
    	}
    #globalnav ul ul {
        display: none;
        }
    #globalnav li {
    	list-style:none;
    	float:left;
    	}
    #globalnav li.list-item-last a {
    	border: none;
    	}
    #globalnav li a {
    	display:block;
    	overflow:hidden;
    	float:left;
    	text-decoration: none;
    	color: #8A9F47;
    	padding: .5em 10px 2em;
    	border-right: 1px solid #F4F6ED;
    	}
    
    #globalnav li a:hover {
    	background: none;
    	}
    
    /* #globalnav a,
    #archives-nav a {
    	width:65px;
    	} */
    /* image replacement */
    /* Rollovers and active states */
    #globalnav a:hover,
    #archives-nav a:hover {
    	background-position:-65px 0;
    	}
    #about-nav a:hover,
    #about #about-nav a {
    	background-position:-105px 0;
    	}
    /*
    ===== 7: images and gravatars =====
    */
    #container .excerpt img,
    #container .excerpt .floatleft {
    /* don't display article images on the front page */
    	display:none;
    	}
    #container img {
    	padding:5px;
    	border:1px solid #F8F9DB;
    	background:white;
    	max-width: 375px;
        width: expression(this.width > 375 ? 375: true);
    	}
    .floatleft {
    	float:left;
    	margin:10px 15px 0 5px;
    	}
    #comments h3 img {
    	width:30px;
    	height:30px;
    	margin-top: -30px;
    	float: right;
    	border: none !important;
    	}
    .grav img, img.avatar {
    	padding:0 !important;
    	border:0 !important;
    	}
    a img {
        border: 0 !important;
        }
    /*
    ===== 8: comments =====
    */
    .commentList,
    #comments {
    	margin:0 !important;
    	list-style: none !important;
    	border-top: 1px dotted #F0F3B1;
    	}
    .commentlist p img,
    #comments p img {
    	border:0;
    	padding:0;
    	}
    .commentlist li,
    #comments li {
    	padding-bottom: 20px;
    	/* background:transparent; */
    	}
    
    .commentlist .comment-author,
    #comments h3 {
    	margin: 0.2em 0 0 0;
    	}
    .commentlist .comment-author,
    .commentlist .comment-author a,
    #comments h3,
    #comments h3 a {
    	color: #990;
    	text-decoration: none;
    	}
    .commentlist .comment-author a:hover,
    .commentlist .comment-datetime a:hover,
    #comments .comment-author a:hover,
    #comments .comment-datetime a:hover {
    	color:#C84A26;
    	}
    .commentlist .comment-author a:hover:after,
    #comments h3 a:hover:after {
    	content: " : " attr(href);
    	}
    .commentlist .comment-permalink a:hover:after,
    #comments .comment-permalink a:hover:after {
    	content: " : comment";
    	}
    .commentlist .comment-author a,
    .commentlist .comment-datetime a
    #comments .comment-author a,
    #comments .comment-datetime a {
    	text-decoration:none;
    	}
    .commentlist .comment-datetime a,
    #comments .comment-datetime a {
    	color:#666;
    	}
    .commentlist blockquote,
    #comments blockquote {
    	width:360px;
    	overflow:hidden;
    	margin:1.6em;
    	margin:20px 0 0 0;
    	padding-left:19px;
    	border-left:1px solid #F0F3B1;
    	/*float: left; */
    	}
    #comment {
    	margin-top:10px !important;
    	padding-top:2.5em;
    	border-top:1px dotted #F0F3B1;
    	}
    .commentlist .comment-edit a {
        float: right;
        }
    /*
    ===== forms =====
    */
    /* search form */
    #searchform input {
    	margin-left:5px;
    	}
     .widget_sandbox_search h3.widgettitle {
        float: left;
        margin-top: .25em;
        }
    #searchsubmit, #gsearch submit {
        display: none;
        }
    input {
    	padding:2px;
    	}
    label,
    legend {
    	display:block;
    	clear:both;
    	margin:3px;
    	color:#59600E;
    	font-weight:bold;
    	}
    fieldset {
    	border:0px solid white;
    	margin-bottom:16px;
    	}
    #searchform fieldset {
    	width:255px;
    	padding:5px;
    	}
    #s, #gsearch input {
    	border-width:1px;
    	border-style:solid;
    	border-color:#CEDE96 #D6E4A7 #D6E4A7 #CEDE96;
    	width:150px;
    	padding:4px 2px 4px 5px;
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/input_back.png) 0 0 no-repeat;
    	color:#666;
    	}
    /* comment form */
    .form-label label {
        width: 40%;
        }
    
    .form-label .req-field {
        float: right;
        padding-right: 40%;
        font-weight: bold;
        }
    #commentform fieldset {
    	border-top:1px solid #F0F3B1;
    	padding-top:20px;
    	position:relative;
    	}
    #commentform {
    	font-size:105%;
    	font-family:"Trebuchet MS", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
    	}
    .form-input input,
    textarea {
    	width:200px;
    	background:transparent url(http://sunburntkamel.wordpress.com/files/2007/01/input_back.png) 0 0 no-repeat;
    	border:1px solid #AFCD56;
    	padding:10px 2px 4px 5px ;
    	color:#666;
    	margin:5px 0 10px 0;
    	font-family: Arial, Helvetica, sans-serif;
    	}
    textarea {
    	width:345px !important;
    	height:249px !important;
    	overflow:auto;
    	border-top:1px solid #AFCD56 !important;
    	}
  2. How long does it take you to port a theme?

  3. it varies a whole lot.

    this one was easy, since john's layout and styling were already pretty bulletproof. i was mostly renaming classes and ID's, and dealing with some of the sandbox/wp.com quirks.

    unsleepable took me about a month, on and off (okay, mostly off, i do have a full time job), because i had to rewrite the header and bottom block.

    wank is the one to ask, though, she's done more than i have.

  4. "Bus Full of Hippies?"

    ok... ;)

    We really should put a special tag on these so we can find them.

  5. i've got most of them collected under "customCSS" (i left out a few k2s, and kubrick). That was the tag matt asked me to use for the post itself. i figured it was appropriate for the threads as well.

    "bus full of hippies" is john's name for the thing. i got nothin' ta do wit it.

  6. I like the idea of creating a special tag for available css customized themes. When bloggers ask which themes have been customized and where they can be found I have to zip around all over the css forum to find the links to pertinent threads. In fact what I have on my "to-do" list now is making one of my famous (infamous) canned reply posts. So if we create a tag that means I can strike that "canning" off my list. :)

  7. I love this CSS skin. :)

  8. I assume you're talking about general aesthetics and that you don't garden [said she chuckling].
    (1) What do honeysuckle, fuschias and laburnum have in common? They are all plants that have flowers on stalks that hang downward, rather than growing straight and upright from the ground.
    (2) What do daffodils, daisies and all other flowers depicted in this theme have in common?
    They grow straight and upright from the ground: they do not "hang".
    (3) Have you noted the upside down grass at the very top of the theme?
    My guess is that the hippies concerned were high as kites on grass of another kind and laying on their backs when they came up with this theme.
    Having said that anyone who doesn't actually garden or know anything about flowers may like it. But I do garden and in fact I have a huge covered deck renowned for it's hanging flower baskets. So I can't handle the reversal myself. *lol*
    (4) Alternatively, if the flowers could be changed to those that actually do have a "hanging" nature, I would be attracted to it. There are many free photos of hanging flowering plants available on the net {hint, hint}.

    P.S. The foregoing takes nothing away from the work my friend sunburntkamel did to customize the theme and make it available to everyone.

  9. @engtech -
    thanks!

    @tt -
    i saw this comment on my blog, which is fine. this, however, is the forums, which are meant for support.

  10. @drmike
    Will you please delete my comment above and this one too, as sunburntkamel is indicating they have been incorrectly placed here and I don't wish to offend him. I checked just now and found he has already deleted my comment from his blog so I think removing it here too is the way to go.
    Thanks :)

  11. tt- your comment is still right here. i don't really delete comments unless they're waaaaaay off topic.

  12. Oh crap! I'm sorry I just didn't see it because I was looking at the wrong blog. Yes, I was looking at your other blog ... duh .. Also it's okay if you want to delete my comment where it really is - go for it. It was never my intention to offend you. {Delete all this please, drmike.}

  13. staff/moderator:

    can you clear out john's email address in my original post?

    it shouldn't be converted to a mailto: link.

  14. I don't see a mailto: link above?

  15. I think SBK is referring to the embedded link in the first sentence in the original post ie: Joshuaink because it's the only one I could find.

  16. it's in the 'copyright + credits' section of the CSS

  17. Many thanks, done.

  18. oooo, dig the classy pre tag, too. many thanks.

  19. OT but I love Bus Full of Hippies. I'm learning CSS and as soon as I can figure it all out, I'm going to make a Goth version. Bus full of Goths. It'll rule! Uh, provided I can figure all this stuff out first...

  20. i've been using this theme since march! (actually i'm too lazy to change the skin, but it doesn't look bad still after 4 months. hehe.)

  21. @sulz
    I don't understand why you are surprised that the theme "doesn't look bad after 4 months". Presumably it should have the same appearance regardless of how much time has passed.

  22. i meant to say that i'm not bored with it even after so long. it wasn't a surprise, just an observation.

  23. haha, awesome.

    i can definately relate. i've had my current design for a hair under 3 months, and i already want to tear it apart :D

    it's especially humorous in light of your "6 times in 4 visits" jab :P

  24. Hi,

    I felt in love with this template so I hosted it, set it up but ran into a problem.

    Please take a look at this page: http://www.oreni.extra.hu/
    On the right side the text is aligned incorrectly and I don't know how to fix it.

    Please help me! Thanks!

  25. ha, i can't believe i'm funny sometimes. =P

    oreni: i think you have a self-hosted blog, in which case you have to go to http://wordpress.org/support to place your query. this is the forum for bloggers hosted by wp.com.

  26. Ok, I'll try it there.

    Anyways, if you know how to fix it (in css), let me know!

  27. @oreni
    I don't think you understand what is being said to you. The original version of the theme is coded to run on wordpress.org software.

    The version here has been adapted to run on wordpress.com wp-MU (multi-user) software.

    We cannot help you here with editing the css on the wordpress.org version.

    We provide support only to those bloggers who have blogs hosted by wordpress.com. The wordpress.com css customization upgrade is available only to those with blogs hosted by wordpress.com

  28. @oreni -
    i'm not sure where to tell you the best place to go for support is, as i don't frequent the wordpress.org forums.

    feel free to ask in http://sndbx.org/forums/ about anything sandbox related.
    feel free to ask in the comments on my original post

    back on topic
    please use widgets. i used the classes generated by them to make the layout work.

    i'll try to find your post in the .org forum as well.

  29. @sunburntkamel -
    I asked it in the sandbox forums and here is the link for the .org: http://wordpress.org/support/topic/126678?replies=1#post-591394

    Isn't a widget for extending the capabilities of the work (like calendar) or it allows me to move the hole right text column (or whatever it is called) to any directions? I'm a bit comfused, I have no experience in blogging at all:(.

    Thanks for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic