Tag Archives: skins

Walk in the Shadows for WordPress.com

This CSS design is an experiment in layout. There are two sidebars stacked vertically. The second sidebar stacks horizonally, visually making 2 sidebars out of 1.  

Screenshot

Walk in the Shadows

Credits

A List Apart’s article on typesetting (followed to the letter because IE sucks)
Joen Asmussen’s brilliant idea about adding columns without touching the markup
Dezinerfolio’s web2.0 layer styles
KDE‘s Oxygen icons project
Datestamps inspired by the cover of Eero Saarinen, designed by CoDe Communication and Design

License

CC-GNU <acronym title='GNU General Public License'><span class='caps'><acronym title='GNU General Public License'><span class='caps'>GPL</span></acronym></span></acronym> This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; version 2 of the License.

Download

Walk in the Shadows CSS

Promised Land for WordPress.com

This design is a single column, fixed width theme, with 2 footer widget areas. 1 area contains 4 widgets that stack horizontally, the other area contains horizontal widgets that stack vertically. The main page highlights the first post, and shows the next 4 as links below the first.  

Screenshot

Promised Land Screenshot

Credits

Some abuse of a stock photo by Ryan Ford.
Based on “for elaine“, which became archGFX v02.

License

CC-GNU <acronym title='GNU General Public License'><span class='caps'>GPL</span></acronym> This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; version 2 of the License.

Creative Commons License

This design is dual-licensed as Creative Commons Attribution-Share Alike 2.5 License. Where possible, please include a link to this page for attribution.

Installation

Select the Sandbox-10 theme (currently on page 4).  Then open the download link below, and copy the contents into the Edit CSS box, Making sure to check the “Start from scratch and just use this” box.

Download

Promised Land CSS
 

Shameless Plugs

Sandbox Design Competition

Scott’s organizing a wordpress design competition, purely in CSS. which means it’s open to:

  • wordpress.com users
  • anyone who can use CSS, since PHP and javascript won’t be judged

Also, Sourceforge is running Community Choice awards, so you can go nominate Dream in Infrared, if you’re so inclined:

SF.net Community Choice Awards

(Disconnected is also eligible).

Speaking of Sandbox themes…

WP Sandbox Logo

Hot on the heels of my own sandbox-based theme, Scott and Andy went ahead and dropped Sandbox v0.9 (0.7 only existed long enough for me to grab it out of SVN and build my theme off of it, and 0.8 had too many revisions to be released. 1.0 existed briefly, before being dragged back into beta-ville). The structural changes are much cleaner, so it’s easier to tweak the hell out of the thing.

The only new design element is that all of the example layouts now use a navigation menu. This is kind of an outgrowth of the skins menu being deleted: the menu HTML is always there, although it can be hidden in CSS (previously skins could disable the HTML).

And yes, the skins menu is gone. this means theme designers can now rely on the sandbox having a specific CSS. hello template: sandbox. 🙂 Accordingly, my skins have become themes:

The thin line uses about 4 lines of PHP to insert a credit link into the footer. The Joshuaink theme uses that plus the custom header API to help you add your own logo. Both themes are under Creative Commons licenses. Whatever waffling the wordpress developers may do about some themes being necessarily GPL, they can’t touch these themes, since they’re entirely CSS, save for API compliance (if API compliance transmitted the GPL, binary linux applications would be impossible).

Also, I’m discontinuing development on Sandbox Unsleepable. If I were to convert it to a theme, it would compete directly with the original, which is not my goal. Since the original has been installed on wordpress.com, there’s also no reason to develop the custom CSS version either.

WIP: The Late Show

banner inner

The Late Show by Liz Lubowitz.

As much as i love using this theme, It’s taking away from the energy i need to direct towards other projects. Inspired by patrick heaney, i’m going to strip down to something spartan, until i have the time to finish my own design.

This is a Work In Progress. First there’s the matter of license. Liz happily granted me permission to port the theme, but the theme is certainly not GPL, so it’s always going to be kind of “for personal use only”.

Also, Sixapart’s Style Contest themes work a little differently, in that they make use of a body class for each layout. (two-column-left, etc.) Even after adding the name of the current sandbox skin as a class to the body of the sandbox, i’d still need to finish my “Layout Dependent Sandbox Skins” plugin for this to really be workable.

Download:

So here’s my two column left version of the theme, and hopefully Rothyschild will finish her 3 column version soon. Select the ‘no stylesheet’ skin, and paste these two CSS files into the ‘edit css’ box in order:
base-weblog.css
thelateshow.css

Fork for wordpress.com

It’ll be a while before i’m designing an original layout for this blog. So in the meantime, here’s another copy-paste trick you can play with your custom CSS upgrade:

Both K2 and Fauna were designed to have skins applied to them. K2 has a directory of about a dozen skins, all of which can be applied pretty easily. my personal favorite is fork, by dave kellam. he’s the guy who wrote the flickrrss widget, which i’m also trying to emulate with the godforsaken table-based widget we have here on wp.com.

Fork.css

It’s actually based on the update by Gigi. It’s not like porting a theme to a sandbox skin, where you have to rename the selectors, and deal with quirks. i just uploaded the images, and did a find and replace for fork/ with https://sunburntkamel.files.wordpress.com/2007/01/. (the flickr widget was another matter, but i’ve submitted feedback for that). I’m still messing around with it, but it works as is, so go get dirty!

Bus Full of Hippies for WordPress.com

This skin is for WordPress.com Users. feel free to use this skin ‘as is’. the images are hosted on wordpress.com, so it’s no different than hosting them yourself. If you host your own blog, please get the zipped version of the skin.

Joshuaink Screenshot

Credits:

Original design by John Oxton
Illustration by Denis Radenkovic
Based on the Textpattern template reworked by Graham Bancroft.

License:

This Sandbox skin is under the same license as the original template:
Creative Commons Attribution-Noncommercial 2.5.

Preparation:

In order to comply with this license, you must paste the following code into a text widget:

<p><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></p>

Note: If you put this text widget in your secondary sidebar, it will display the way it does on this site, as a footer of sorts. All of the widgets in the secondary sidebar will display this way. (Further instructions on widget usage).

Layout: From the Sandbox Skins menu, select “No Stylesheet”.

Logo Image: This design uses a custom image as the header. The image is 200×60 pixels, twice. the two halves of the 400×60 pixel image create the standard and hover states of the logo (mouse over the logo at the top of this page to get an idea of what I mean). To help you out, here is the *.PSD file I used to make this logo. It includes guides to make it easier to line up the two states of the image: Sandbox Logo

after you make your own image, and upload it to your blog, you’ll have to change the CSS file to point to your new image. look for #header h1 a near the start of the file.

Features:

the maximum width for images in posts is 375 pixels. anything wider will be squeezed, to prevent the skin from breaking.

John is an excellent designer. almost anything you put in a post will be styled. you can see some of the formatting here, in the HTML templates. Since formatting every post with code to use his <ol class="codesample"> might be a bit tedious, i’ve also added styling for the <pre> element.

Download:

Bus Full of Hippies v0.6.1
or, copy and paste

Bookmark This:

add to del.icio.us :: Digg it :: add to ma.gnolia :: Stumble It! :: seed the vine :: TailRank