Sandbox Unsleepable
-
This is a port of Ben Gray’s Unsleepable to Sandbox, specifically for wordpress.com. It features a clickable image header, tabbed navigation, and a ‘fat footer’ style sidebar.
Check out the screenshots
The Installation is a bit tricky, so check out the instructions
———————————————————————
#blog-title {
float: left;
margin-top:0;
width: 270px;
font-size: 12px;
border-right: 1px solid #555;
text-indent: -9000px !important;
}
#blog-title a {
display: block;
width: 250px;
height: 50px;
line-height: 50px;
padding: 50px 20px 0px 0px;
background: transparent url('http://sunburntkamel.wordpress.com/files/2006/08/title.gif') no-repeat 20% 82% !important;
}
#blog-title a:hover {
background-color: #000 !important;
}
#blogdescription {
float: left;
width: 270px;
}
#blog-description, .access {
display: none;
}
#globalnav {
display:block;
width:100%;
height: 100px;
background:#333;
}
* html #globalnav {
display: inline !important;
}
ul#menu {
text-align: left;
line-height: 147px;
margin: 0 -15px;
padding: 0;
list-style-type:none;
display:inline;
}
* html ul#menu {
display: block;
line-height: 15px !important;
}
ul#menu li {
display: inline;
margin: 0;
}
ul#menu,
ul#menu li a {
padding: 85px 15px 20px;
vertical-align:bottom;
}
ul#menu li a {
color: #fff;
margin: 0 0;
text-decoration: none;
border-right: 1px solid #555;
}
* html ul#menu {
padding: 65px 15px 2px !important;
}
* html ul#menu li a {
padding: 65px 15px 22px !important;
}
ul#menu li a:hover {
background-color: #0D78B6;
color: #FFFFFF!important;
text-decoration: none;
}
ul#menu li.current_page_item a,
ul#menu li.current_page_item a:hover {
color: #FFFFFF!important;
background-color: #0D78B6;
text-decoration: none;
}
ul#menu ul, ul#menu ul li {
display: none;
}
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 11px !important;
background: #ccc url('http://sunburntkamel.wordpress.com/files/2006/08/top-bg.gif') repeat-x top left;
text-align: center;
margin: 0px;
}
body.loggedin {
background: #ccc url('http://sunburntkamel.wordpress.com/files/2006/08/top-bg.gif') repeat-x 0 28px;
}
#wrapper {
background: #fff url('http://sunburntkamel.wordpress.com/files/2006/08/top-bg.gif') repeat-x top left;
width: 775px;
text-align: left;
margin: 0px auto 0px;
padding: 0;
position: relative;
}
#header {
float:left;
height: 100px;
color: #fff;
background: #333;
border-left: 1px solid #555;
margin: 0;
}
#header a {
color: #fff;
}
#container {
clear:both;
}
#content {
width: 65%;
float: left;
padding: 20px 3% 15px 3%;
margin: 0;
display: inline;
}
#primary {
font: 12px Trebuchet MS /*'Lucida Grande', Verdana, Arial, Sans-Serif*/;
padding: 5px 0 20px 5px;
margin: 0px 0 0px 71%;
width: 26%;
color: #666;
position: relative;
line-height: 1.3em !important;
}
#primary a {
color: #333;
}
#primary a:hover {
text-decoration: underline !important;
}
.comments {
text-align: left;
padding: 30px 0 0;
position: relative;
}
a img,:link img,:visited img {
border:none;
}
#primary #pages ul {
margin-left: 10px;
}
#primary #pages ul ul {
margin-top: 2px;
}
#primary #pages ul ul .page_item {
margin-left: 10px;
padding: 0;
}
h1, h2, h3, h4 {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.static {
text-align: center;
margin: 15px 0 20px;
}
.static h2 {
font-size: 23px;
font-weight: bold;
letter-spacing: -1px;
text-align: center;
display: inline;
font-family: Helvetica, Arial, Sans-Serif !important;
color: #555 !important;
text-transform: lowercase;
}
.sidebar h2 { /* Secondary H2 is sidebar headlines */
font-family: Helvetica, Arial, Sans-Serif !important;
font-size: 16px;
font-weight: bold;
display: block;
color: #555;
margin: 0 0 10px 0 !important;
padding: 0;
letter-spacing: -1px;
text-transform: lowercase;
}
.sidebar h2 a:hover { /* Secondary H2 is sidebar headlines */
font-family: Helvetica, Arial, Sans-Serif !important;
font-size: 16px;
font-weight: bold;
display: inline;
color: #DA1074 !important;
padding: 0;
letter-spacing: -1px;
text-transform: lowercase;
text-decoration: none !important;
}
h2.entry-title, .comments h3 {
font-size: 2em;
font-weight: bold;
letter-spacing: -1px;
display: inline;
}
.category-noteworthy h2.entry-title {
background: url('http://sunburntkamel.wordpress.com/files/2006/08/favorite.gif') no-repeat 0 50%;
padding-left: 20px;
}
.static h3 {
font-size: 1.7em;
display: block;
padding: 15px 0 0;
}
.static h4 {
font-size: 1.5em;
display: block;
padding: 15px 0 0;
}
body.archive h3.entry-title {
font-size: 2em;
font-weight: bold;
letter-spacing: -1px;
display: inline;
}
.sidebar div {
margin: 20px 0 0;
padding: 0;
}
.sidebar div div div {
margin: 0;
}
h2, h2 a, h2 a:visited,
h3, h3 a, h3 a:visited,
h4, h4 a, h4 a:visited {
color: #444;
}
h2, h2 a, h2 a:hover, h2 a:visited,
h3, h3 a, h3 a:hover, h3 a:visited,
h4, h4 a, h4 a:hover, h4 a:visited {
text-decoration: none;
}
.entry-meta {
margin-top: 0.5em;
font-size: 1em;
display: inline;
padding-top: 2px !important;
color: #bbb;
}
.entry-meta a {
color: #DA1071 ;
font-weight: normal;
}
.entry-meta a:hover{
color: #DA1071 !important;
text-decoration: underline !important;
}
.entry-meta a:visited{
color: #666;
}
.entry-commentlink {
clear:left;
padding: 2px 0 2px 20px;
background: url('http://sunburntkamel.wordpress.com/files/2006/08/comment.png') left center no-repeat;
margin-right: 10px;
}
.entry-date {
margin-left: 3px !important;
padding: 0;
color: #ccc !important;
font-family: Helvetica, Arial, Sans-Serif !important;
letter-spacing: -1px;
font-weight: bold;
font-size: 23px;
text-transform: lowercase;
display: inline;
}
.published {
letter-spacing: -1px;
font-weight: bold;
}
body.single .entry-date {
font-weight: normal;
letter-spacing: inherit;
padding: auto;
font-family: inherit;
text-transform: none;
font-size: 1em;
display: inline;
color: #bbb;
}
span.metasep {
display: none;
}
.entry-editlink a {
display:block;
width:16px;
height:16px;
margin-top:-16px;
text-indent: -9000px;
background: url('http://sunburntkamel.wordpress.com/files/2006/08/pencil.png') no-repeat right;
float:right;
padding:2px 0 2px 2px;
}
.entry-category {
border-right: #ccc 2px solid;
margin-right: 2px;
background: url('http://sunburntkamel.wordpress.com/files/2006/08/page_white.png') no-repeat left;
padding: 2px 6px 2px 18px;
}
.entry-author {
display:none;
}
.hentry {
margin: 0;
padding: 0px 0 15px;
position: relative;
}
.entry-content {
font: 1.2em Trebuchet MS ;
text-align: left;
color: #333;
padding-bottom: 1px;
background: url('http://sunburntkamel.wordpress.com/files/2006/08/break.gif') bottom left repeat-x;
line-height: 150% !important;
margin-bottom: 0.7em;
}
body.page .entry-content {
background: none;
}
#numpingbacks {
background: url('http://sunburntkamel.wordpress.com/files/2006/08/arrow_refresh.png') 0 50% no-repeat;
padding: 2px 0 2px 20px;
height: 16px;
}
.comments {
clear: both;
}
.comments .commentlist {
margin: 0;
padding: 20px 0;
position: relative;
}
.comments .commentlist li {
margin: 10px 0;
padding: 10px 10px 5px;
list-style: none;
}
.comments .commentlist{
padding: 2px 0 2px 0px;
display: block;
}
.comment-meta {
font-size: 12px;
display: inline;
}
.comments .commentlist li img {
padding: 0;
border: none;
}
.comments .commentlist li .comment-author {
float: left;
margin-right: 0.2em;
font-size: 1.6em;
font-weight: bold;
letter-spacing: -1px;
}
.comments .commentlist li .counter {
font: normal 1.5em Helvetica, Sans-Serif;
color: #999;
float: left;
width: 35px;
}
.comments .commentlist li.bypostauthor {
background: #f6f7f8;
}
.comments .commentlist .comment-metadata {
line-height: 2em;
}
.comments #pingbacks {
font-size: 1.2em;
padding: 0;
margin: 0;
}
.comments #pingbacks li {
margin-left: 40px;
padding: 7px 0;
list-style: none;
}
.comments #pingbacks li .commentauthor {
font-weight: bold;
display: block;
}
.comments #pingbacks li small {
font: .8em Arial, Sans-Serif;
display: block;
}
.comments #leavecomment {
text-align: center;
margin-bottom: 40px;
color: #ddd;
font-size: 2em;
letter-spacing: -2px;
}
.comments form {
clear: both;
padding: 1px 0 30px;
margin: 0;
}
.comments .loggedin, .comments .form-label {
padding: 0.7em 0;
}
input[type=text], textarea {
font: 1.1em Trebuchet MS;
padding: 3px;
color: #777;
}
input[type=text]:focus, textarea:focus {
background: #fff;
color: #333;
border-color: #666;
}
.comments form input[type=text] {
width: 45%;
margin: 5px 5px 1px 0;
}
.comments form textarea {
height: 250px;
padding: 2px;
width: 100%;
}
.comments form #submit {
margin: 0;
float: right;
}
#footer {
clear: both;
background: #333 url('http://sunburntkamel.wordpress.com/files/2006/08/picture-1.png') no-repeat 50% 80%;
color: #fff;
padding: 0 0 15px 0;
position: relative;
text-align: center;
margin: 20px auto 0;
line-height: 150%;
}
#footer a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
#footer a:hover {
border: none;
text-decoration: none;
color: #fff;
}
.primary a:hover, .primary a:visited:hover,
.sidebar a:hover, .sidebar a:visited:hover {
text-decoration: underline !important;
}
h2 a:hover, h2 span a:hover {
color: #DA1071!important;
text-decoration: none !important;
}
a {
color: #DA1071;
border-bottom: none;
text-decoration: none !important;
}
.entry-content a{
color: #DA1071;
text-decoration: none !important;
font-weight: normal;
}
.entry-content a:hover{
color: #DA1071!important;
text-decoration: underline!important;
font-weight: normal;
}
body.archive h3.entry-title a:hover {
text-decoration: none;
color: #DA1074;
}
.clear {
clear: both;
margin: 0;
padding: 0;
}
.primary img {
margin-left: -5px;
padding: 4px;
border: 0px solid #ccc;
max-width: 100%;
}
small {
font-size: .9em;
line-height: 1.5em;
color: #777;
}
strike {
color: #777;
}
code {
font: 1.3em 'Courier New', Courier, Fixed;
display:block;
overflow:auto;
text-align:left;
background:#efefef;
border:1px solid #A6B0BF;
}
acronym, abbr {
font-size: 0.9em;
letter-spacing: .07em;
border-bottom: 0px dashed #999;
cursor: help;
}
blockquote {
margin: 20px 0;
padding: 0 20px 0 50px;
background: url('http://sunburntkamel.wordpress.com/files/2006/08/quote.png') 5% 0% no-repeat;
border: none;
}
hr {
display: none;
}
body.home #nav-above, body.single #nav-above {
display: none;
}
.navigation {
visibility: hidden;
text-align: center;
margin: 10px 0 10px;
padding: 0;
width: 100%;
}
.navigation .nav-previous a {
visibility: visible;
float: left;
width: 50%;
text-align: left;
}
.navigation .nav-next a {
visibility: visible;
float: right;
width: 50%;
text-align: right;
}
.navigation p {
margin: 0;
padding: 0;
}
.navigation a {
color: #999;
}
.alert {
background: #FFF6BF;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
text-align: center;
margin: 10px auto;
padding: 5px 20px;
}
img.wp-smiley {
border: none !important;
padding: 0 0 0 5px !important;
}
.entry-content ol {
padding: 0 0 0 35px;
margin: 0;
}
.entry-content ul{
list-style-type: none !important;
}
.entry-content ol li {
margin: 0 0 3px;
padding: 0;
}
.entry-content ul li{
list-style-type: none !important;
}
.sidebar ul, .sidebar ol {
margin: 5px 0 0;
padding-left: 0;
}
.sidebar ol {
margin-left: 15px;
}
.sidebar ul li, .sidebar ol li {
margin: 0;
padding: 1px 0;
}
.sidebar ul li {
list-style-type: none;
}
ol li {
list-style: decimal outside;
}
.sb-links ul li {
margin-top: 20px;
}
.sb-links ul ul li {
margin-top: 0;
}
body.home .widget_pages, body.archive .widget_pages, body.single .widget_pages {
display: none;
}
.primary h3 a{
color: #555 !important;
font-family: Helvetica, Arial, Sans-Serif !important;
letter-spacing: -1px;
font-weight: bold;
font-size: 23px;
border-bottom: none !important;
text-transform: lowercase;
}
.primary h3 a:hover{
text-decoration: none!important;
color: #DA1071 !important;
}
a {
outline: none;
}
a:active {
outline: none;
}
#secondary a {
color: #333;
text-decoration: none !important;
}
#secondary a:hover {
color: #333 !important;
text-decoration: underline!important;
}
#secondary a:visited {
color: #333;
}
#secondary {
clear:both;
display: block;
width: 765px;
height: 300px;
padding: 5px 0px 10px 10px;
margin: 0;
background: #fff url('http://sunburntkamel.wordpress.com/files/2006/08/bottomblock_bg.jpg') top left repeat-x;
font-family: Trebuchet MS;
font-size: 1.15em;
color: #666 !important;
}
#secondary h2 {
font-size: 16px;
font-family: Helvetica, Arial, Sans-Serif !important;
text-transform: lowercase;
letter-spacing: -1px;
color: #363636 ;
padding-bottom: 0px;
padding-left: 0px;
}
#secondary li {
display: inline;
list-style-type: none;
width: 220px;
padding: 2px 10px 0px 13px;
float: left;
}
* html #secondary li, * html #secondary h3.widgettitle {
margin-left: -10px;
}
#secondary ul {
padding-bottom: 20px;
}
#secondary h3.widgettitle {
display: inline;
float: left;
width: 220px;
padding: 2px 10px 0px 13px;
}
#secondary ul ul, #secondary ul ul li.widget {
float: left;
}
body.single #secondary, body.page #secondary {
display:none;
}
textarea#comment {
background: transparent url('http://sunburntkamel.wordpress.com/files/2006/08/comment-textarea.png') no-repeat center;
}
h3.comment-header a {
font-family: Trebuchet MS !important;
font-size: 22px !important;
}
h3.comment-header {
font-family: Trebuchet MS !important;
font-size: 22px !important;
}
#archives-by-category {
width:50%;
float:left;
list-style-type: none;
}
#archives-by-month {
margin-left:50%;
}
#archives-by-category li, #archives-by-month li, ul#linkcats ul {
list-style-type: none;
position: relative;
font-size: 1.1em;
line-height: 1.7em;
color: #bbb;
margin: 0 15px;
padding: 1px 20px;
}
#archives-by-category li a, #archives-by-month li a, ul#linkcats ul li a {
color: #888;
}
#archives-by-category li:hover, #archives-by-month li:hover, ul#linkcats ul li:hover {
background: #f8f8f8;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
padding-top: 0;
padding-bottom: 0;
color: #444;
}
#archives-by-category li a:hover, #archives-by-month li a:hover, ul#linkcats ul li a:hover {
color: #DA1074
}
img#wpstats {
float: right;
line-height:0px;
margin-top: -6px;
}
-
It’s all right if you want to let people use the images you uploaded in their stylesheet. It’s all coming from the same servers, so we really don’t mind.
It will only be a problem if you delete those images later on.
-
WOW! It looks really great adam.
(1) I love the fat footer instead of the sidebar.
(2) But I’m confessing that I do not know what a clickable image header is so can you explain to me what that means please?
(3) Also the screen shots are very small and I’m visually challenged so I would love to see a full size version one day if that’s at all possible.I remember the list we made on the forum of the 14 or 15 elements folks were looking for in a theme, although I can’t for the life of me remember the thread title, but I’ll bet you covered them all didn’t you? ;)
P.S. Is that kewl young dude in the sunglasses really you? :)
-
@ andy –
i covered that in the instructions. i don’t really use my wp.com blog for much, so it’s unlikely that i’ll run out of space.@ TT –
3) will do. in the mean time, you can have a look at http://archgfx.net/wordpres, which is running the skin at the moment.4) this isn’t the theme that uses those requests, this is just an popular theme that works better as a sandbox skin. (IMO). the theme that tries to answer those questions is waiting to see what happens with thomas’ competition.
5) yep -
This is just a great-looking skin. I really like what Adam did with the archives page template. Everyone use the archives page template!
1. Write > Page
2. Select “Archive Page” from the Page Template drop-down on the right
3. Write whatever you like.
4. Publish. Mouseover. Drool. -
Thanks Scott!
i added the same functionality to the links page as well.
but it’s not my idea, that comes directly from ben’s ELA template.
-
@sunburntkamel
(3) something’s wrong with the link above click it and you get “The page cannot be found” -
-
-
thanks!
and let me turn that around on you. Unsleepable is gorgeous, and it works beautifully. I only hope this means more people will enjoy it. :D -
Very cool, and a good idea to host the images so that all .com users have to do is copy and paste. I’ll probably do the same with my next skin ;)
-
yeah. the only issue i’m worried about is non-wp.com users hotlinking. my stats won’t show the hotlinking, so it would be up to the key masters to go around and tell people to host their own images.
-
Sunburnt: Thank you for the kind words. The more people that can use unsleepable the better. I love this free stuff! :D
Swallick: My mistake, I must have misunderstood ;).
-
Wow … a great looking skins ;) you’ve done really good job to create the unsleepable theme
-
Fantastic skin. Just started using it on my WP.com blog (http://gaminghobo.wordpress.com). Thanks very much for making the effort to convert it. The image making guide was very helpful too. Image making isn’t one of my skills.
-
-
how to change how wide is white part?? and how to change colour of pages on hover (they are black. blue on hover now) at the top?
-
the width is controlled by
#wrapper { width: 775px; }
the color of the pages on hover is controlled by
ul#menu li a:hover { background-color: #0D78B6; } -
- The topic ‘Sandbox Unsleepable’ is closed to new replies.
WordPress.com Forums 