sunburntkamelI'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;
}
drmike
mark
oreni