Bus Full of Hippies – Sandbox Edition

• 

  sunburntkamel · Member · Jan 4, 2007 at 1:02 pm

  • Copy link
  • Add topic to favorites

  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;
  	}

• 

  devblog · Member · Jan 4, 2007 at 3:56 pm

  • Copy link

  How long does it take you to port a theme?

• 

  sunburntkamel · Member · Jan 4, 2007 at 4:51 pm

  • Copy link

  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.

• 

  drmike · Member · Jan 4, 2007 at 6:34 pm

  • Copy link

  “Bus Full of Hippies?”

  ok… ;)

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

• 

  sunburntkamel · Member · Jan 4, 2007 at 6:53 pm

  • Copy link

  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.

• 

  timethief · Member · Jan 4, 2007 at 6:57 pm

  • Copy link

  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. :)

• 

  engtech · Member · Jan 10, 2007 at 9:57 pm

  • Copy link

  I love this CSS skin. :)

• 

  timethief · Member · Jan 10, 2007 at 10:06 pm

  • Copy link

  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.

• 

  sunburntkamel · Member · Jan 10, 2007 at 11:00 pm

  • Copy link

  @engtech –
  thanks!

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

• 

  timethief · Member · Jan 10, 2007 at 11:18 pm

  • Copy link

  @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 :)

• 

  sunburntkamel · Member · Jan 10, 2007 at 11:31 pm

  • Copy link

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

• 

  timethief · Member · Jan 10, 2007 at 11:35 pm

  • Copy link

  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.}

• 

  sunburntkamel · Member · Jul 17, 2007 at 3:31 pm

  • Copy link

  staff/moderator:

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

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

• 

  mark · Member · Jul 17, 2007 at 5:01 pm

  • Copy link

  I don’t see a mailto: link above?

• 

  timethief · Member · Jul 17, 2007 at 5:03 pm

  • Copy link

  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.

• 

  options · Member · Jul 17, 2007 at 5:09 pm

  • Copy link

  it’s in the ‘copyright + credits’ section of the CSS

• 

  mark · Member · Jul 17, 2007 at 5:15 pm

  • Copy link

  Many thanks, done.

• 

  sunburntkamel · Member · Jul 17, 2007 at 5:23 pm

  • Copy link

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

• 

  raincoaster · Member · Jul 17, 2007 at 9:02 pm

  • Copy link

  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…

• 

  sulz · Member · Jul 17, 2007 at 9:43 pm

  • Copy link

  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.)