site redesign

Still in progress, but if anything is horribly broken please drop me a comment. (Unless you are using IE6, in which case you should be used to horribly broken things by now.)

I’m now using tags for internal organisation and categories for global tag traffic, which I’m aware is completely the wrong way round, and I’ll probably get kicked out of global tags anyway for using too many and hiding the links; but hey, never mind. You can find skins according to colour, subject and layout now.

I still need to upgrade the majority of existing skins; they’re all going to be Sandbox-10-ised, apart from the ones which let you choose your layout in the admin panel (currently tagged ‘multi-columns‘) and there will finally be some proper installation instructions with screenshots and stuff. And once we’re all set up… new skins. Woo.

Castor

While sorting through my hard drive I found this ancient skin I’d tried to get to work with Classic when custom CSS was first introduced. It didn’t work then but it does now, thanks to the magic of

So, yeah, the base template is WordPress Classic rather than Sandbox. And in their infinite wisdom wordpress.com have decided to break file uploading so you’re going to have to copy/paste your code from here:

/* Theme Name: Castor
Theme URI: http://ntuat.wordpress.com
Template: classic
Description: Ancient Gemini stylesheet converted for use with the custom CSS upgrade on wp.com
Version: 2.0
Author: not (that) ugly
*/

body {
	color:#333;
	font-family:tahoma, sans-serif;
	font-size:0.7em;
	letter-spacing:0.1em;
	text-align:center;
	background:url('http://ntuat.files.wordpress.com/2006/08/castortitlebk.gif') #fff no-repeat;
	margin:10px;
	padding:0;
}

#rap {
	width:725px;
	background:url('http://ntuat.files.wordpress.com/2006/08/castor.png') top 

right no-repeat;
	text-align:left;
	margin:0 auto;
}

#masthead {
	height:130px;
	margin:0;
}

#header {
	margin-right:200px;
	margin-bottom:10px;
}

#content {
	float:right;
	width:525px;
}

#menu {
	float:left;
	width:200px;
}

a {
	color:#f33;
	text-decoration:none;
}

a img {
	border:none;
}

a:visited {
	color:#f60;
}

a:hover {
	color:#39c;
}

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

acronym,abbr,span.caps {
	cursor:help;
}

blockquote {
	background:#fff url('http://ntuat.files.wordpress.com/2006/08/castorquotebk.gif') no-repeat;
	border:1px solid #ccc;
	padding:5px;
}

cite {
	font-style:italic;
	color:#39c;
}

#content ul {
list-style-image:url('http://ntuat.files.wordpress.com/2006/08/castordot.gif');
}

h1 {
	font:48px 'times new roman', serif;
	line-height:1em;
	font-weight:normal;
	margin:0;
}

h1 a {
	color:#39c;
	text-decoration:none;
}

h1 a:hover {
	color:#999;
}

h2 {
	color:#999;
	font:2em 'times new roman', serif;
	font-weight:normal;
	font-style:italic;
	margin:0 0 0 8px;
}

h3 {
	font-weight:normal;
	font-size:1.4em;
	letter-spacing:0;
	margin:0;
}

h3 a {
	color:#39c;
	text-decoration:none;
}

h3 a:hover {
	color:#999;
}

/* posts */

ul.post-meta {
	list-style:none;
}

ul.post-meta span.post-meta-key {
	font-weight:bold;
}

.meta li,ul.post-meta li {
	display:inline;
}

.meta ul {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}

.meta {
	color:#999;
	font-weight:normal;
	letter-spacing:0;
}

.meta a {
	color:#f33;
}

.meta a:hover {
	color:#39c;
}

.post {
	margin-top:5px;
	margin-right:10px;
	margin-left:10px;
}

.feedback {
	color:#999;
	text-align:right;
	clear:both;
}

/* comments */
#commentform #name,#commentform #email,#commentform 

#url,#commentform textarea,input,textarea,select {
	background:#fff;
	color:#666;
	border:1px solid #ccc;
	font:1em tahoma, sans-serif;
}

#commentform #comment {
	width:450px;
	border:1px solid #ccc;

background:url('http://ntuat.files.wordpress.com/2006/08/castorquotebk.gif') 

#fff no-repeat;
	margin:0;
}

#commentlist li {
	background:#fff 

url('http://ntuat.files.wordpress.com/2006/08/castorquotebk.gif') no-repeat;
	border:1px solid #ccc;
	margin-bottom:10px;
	padding:5px;
}

#commentlist li ul {
list-style-image:url('http://ntuat.files.wordpress.com/2006/08/castordot.gif');
}

#commentlist img.avatar {
	float:left;
	margin-right:5px;
}

#commentlist cite {
	clear:left;
}

/* sidebar */
.textwidget {color:#999;
font-size:0.75em;
padding:5px}

#menu form {
	margin:5px;
}

#menu input,textarea {
	width:80%;
	font-size:0.7em;
}

#menu ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

#menu ul li,#menu h2  {
	text-transform:lowercase;
	letter-spacing:0;
	font-size:1.4em;
	color:#39c;
	border:1px #ccc solid;
	padding-left:5px;
	padding-top:5px;
	margin:0 0 10px;
}

#menu h2 {
	border:0;
	font:1em normal normal tahoma, sans-serif;
}

#menu ul li ul {
	margin-top:10px;
	margin-bottom:10px;
}

#menu ul li ul li {
	border:0;
	font:0.75em tahoma, sans-serif;
	font-weight:normal;
	margin:3px 5px;
	padding:0;
}

#menu ul li ul li ul li {
	font-size:1em;
	margin-top:-5px;
}

#menu table {
	font:0.75em tahoma, sans-serif;
}

#wp-calendar {
	font-size:0.8em;
	width:90%;
	text-align:center;
	margin:auto;
}

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

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

#wp-calendar caption {
	text-align:left;
	font-size:14px;
	padding-left:10px;
}

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

#wp-calendar a:hover {
	color:#f33;
}

#wp-calendar td {
	border:1px solid #fff;
	padding:2px 0;
}

#wp-calendar td.pad {
	border:0;
}

#wp-calendar td:hover,#wp-calendar #today {
	border:1px solid #ccc;
}

#wp-calendar th {
	color:#999;
}

#menu,#content {
	overflow:hidden;
}

/* footer */
p.credit {clear:both;
text-align:center;
padding-top:20px;
padding-bottom:15px;
background:url('http://ntuat.files.wordpress.com/2006/08/castortitlebk.gif') top right no-repeat}

/* wp.com stuff */
#wpstats {
	height:1px;
	width:1px;
}

.possibly-related strong {color:#999;
font-weight:normal;
letter-spacing:0;
padding-left:20px;
padding-bottom:5px;
background:url(http://www.sphere.com/images/sphereicon.gif) top left no-repeat}

/* Captions & alignment */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px #ccc solid;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions & alignment */

Let me know if you like this better or worse than the previous system.

You can see a full-size preview at the test blog; it’s not an exact replica of a wp.com blog but it’s close enough.

PhotoWP for Sandbox

Everybody knows that wordpress.com lacks a photoblogging theme. To be fair, there’s not a vast selection available for wordpress.org either. I think most photographers realise there are other tools out there which do the job better. Nonetheless, we now have 3GB available for image storage and some people may wish to use it. Enter PhotoWP for Sandbox, an uber-minimal theme which ensures all eyes are on your images:

download PhotoWP for Sandbox

Basically it emulates the appearance of Steven Campbell’s PhotoWP theme (link seems to be down at the moment), though obviously I can’t replicate the functionality.

To get the best out of this theme, try not to post anything wider than 600px (decent browsers will resize anything, of course, but I can’t speak for IE6) and display only one post per page (Options > Reading > Blog Posts).

You know the drill. Select ‘Sandbox-10′ under ‘Presentation’, head for ‘Custom CSS’, copy/paste the contents of photowp.txt in the textarea and make sure the ‘Start from scratch and just use this’ option is selected. Save, view, tweak as much as you like, feel free to pimp in the forums

24/09/08: updated to support the new gallery features like captions and positioning classes. Yeah, I know they’re not that new anymore, but all the photobloggers are using Monotone these days anyway…

Diurnal

Never before have I wished so intensely for multiple file upload:

download diurnal stylesheet for wordpress.com

Yeah, I know the screenshot has a different layout to the actual skin. Blame IE6. There are a couple of minor differences between this and the contest version (hover image for global tag links and nicer dropdown menus) but the dynamic goodness of this 5-in-one theme remains intact.

As far as I know, this is the only wp.com theme currently available with a dynamic header image which changes according to the time of day. Being unique is as simple as selecting Sandbox-10, choosing the ’start from scratch’ option on the Edit CSS page, and copy/pasting the contents of diurnal.txt. I’d use this myself, if it wasn’t for branding considerations.

24/09/2008: updated to support related links and image captions. Also, child pages should no longer appear in the top menu.

Picnic

To celebrate the availability of Sandbox 1.0, here is the wp.com edition of Picnic:

picnic.txt

Images are hosted for you, so all you need to do is copy and paste. I know it’s confusing to have two Sandboxes, but I’m tagging my styles with the theme they’re based on which will hopefully make things easier.

Now, on to Diurnal. (@import gets stripped, so this is going to be a freaking nightmare.)

The Blue Butterfly Layout

preview
download CSS

If you want to use this on your wordpress.com blog, enable Sandbox-10 and copy and paste the contents of the text file into the custom CSS box, selecting the ’start from scratch and just use this’ option. It’s a three-col layout disguised as a two-col one, so you’ll want widgets in both sidebars for the full effect.

Sandbox Design Competition

I’m hoping this’ll be as successful as last year’s Style Contest, and that Automattic will be as generous with their support as Six Apart were with theirs. (Matt has already thrown in $500 prize money, which is a good start, but a little linkage wouldn’t hurt.) I’m not worried about the two-month deadline from a design point of view, but it may be a little short notice to get top-quality judges and sponsors in place. Judging and adminstrating these things is a lot of work.

Potentially, this could be a real boost to takeup of the custom CSS option on wordpress.com, which so far has been mostly limited to people already proficient in CSS and those who know enough to make minor tweaks to a theme they’re otherwise happy with. There’s no intrinsic reason why this should be so. After all, not everyone who installs a wordpress theme is familiar with XHTML and PHP.

The GPL requirement does limit what we can use to create our styles (no stock photography, icons, brushes etc.) and I don’t see the necessity for it since, as adam points out, not even the most rabid free beer fundamentalists can seriously argue that CSS for WP needs to be GPL. If I’m not allowed to touch PHP I can’t insert the required links anyway, though, so this is pretty much moot. Anyway, it’s more of a challenge having to make everything from scratch. Time to dig out the camera again.

Meadow

This design is about two or three years old now, but I am very fond of it nonetheless. Hence, I have ported it to Sandbox. You can preview it on the test blog, at least until I get bored and put something else up there.

If you’re on wordpress.com, pick your preferred column layout from the Sandbox skins menu, ensure that ‘Add to existing CSS’ is selected and paste the contents of meadow.txt into the custom CSS editor. If you’re using Sandbox on a wordpress.org blog or wish to host the images yourself, download meadow.zip.

baubles

Quick, simple festive stylesheet for Sandboxers wishing to decorate their blogs. If you’re on wordpress.com, pick your preferred layout from the Sandbox skins menu and copy and paste baubles.txt into your custom CSS box. If you’re hosting your own sandbox installation or want to host your own images, the zip is here.

Biology

This is another original design (well, ok, it’s another variation on one I did for livejournal) that’s been sitting around for a while now waiting to be uploaded. You can see a full-size version on the test blog, at least until I start testing other stuff out . WordPress.com custom css users, cut-and-paste biology.txt into your custom css box and you’re good to go. Got Sandbox installed on your own domain? You’ll be wanting the zip.

edited to add: I forgot to mention that this style is compatible with the existing Sandbox layouts, so rather than selecting ‘no style’ you need to pick the number of columns you want from under the ‘Sandbox Skins’ tab. Yes, you read right: you can pick the number of columns on this one. You paid $15 and I’m trying to ensure you get value for money