Tag Archives: the thin line

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.

hand on mouth, the game goes on

it’s update time.  no, not wordpress.  i don’t get the kewl new features, so it’s hard to be excited about it.  plus, the thought of all my tags going to hell doesn’t sound fun.  my test blogs are updated for theme testing purposes, since they didn’t need backing up.

The Thin Line

The Thin Line for wordpress.com has moved up to v2.  I’m running it on this site, poke around a bit.  The skin will come later, as scott’s working on v0.7.  andy’s off cavorting in mexico, so i doubt i’ll have to worry about the wordpress.com version changing.  The reasons for the change are something like this:

  • maintaining that many layouts is too complicated for my small brain.  and a single column with a 2 column fat footer is really hard to dress up. giving the skin its own layout made life easy.
  • my recent obsession with ambient occlusion
  • the footer-like sidebar from the bus full of hippies was really cool.
  • the inward and outward graphics were just to big, and counter to the name.
  • jumping straight from proof-of-concept to 2.0 is all kinds of trendy and cool.

I’ve now hosted the file on archgfx, because for whatever reason, i can no longer upload *.txt files.  i can upload *.doc files, though, so clearly it has nothing to do with security.

The Thin Line: From Skin To Theme

You may have noticed that i really like The Sandbox. Andy suggested a possible path for it to become the default theme, which I think would be an excellent idea. Mainly because writing PHP is not my strong suit. CSS is closer to my skill set.

WordPress versions 1.2 and below used a templating system like the one andy proposed. The problem was, the classic theme had limitations. if you wanted to remove the sidebar on post pages, as kubrick does, you were out of luck. The Sandbox would fix that. The other development that helps make templating viable again was introduced in wordpress 2.0. Since 2.0 was introduced, wordpress loads functions.php of the current theme, if it exists. this means that a theme could use only style.css and functions.php, and have an enormous level of control.

Changes to The Sandbox

it’s been a while since andy added the sandbox branch, but it doesn’t seem to be making progress. so, while i can’t implement status: hidden, i can make a workable version of The Sandbox to test The Thin Line on.

It’s been stripped of it’s skins panel (as well as the skins subfolder), had the default skin set to none, and had status: hidden added to the theme information. I also moved wp_footer(); inside the #footer div, for even greater semantic justice so that information added to the footer can be styled more easily (scroll to the end).

Changes to The Thin Line

when i said that Themes could be built on style.css and functions.php, that’s only partly true. you could build a theme that way that only inserted a footer credit, and applied javascript to the head of the theme. to add an options panel, you’ll probably want to use theundersigned’s tutorial, or ozh’s theme toolkit. I’m using theundersigned’s tutorial, mainly because the PHP is simple enough for me to get the gist of what’s going on. Ozh’s toolkit does more, but requires me to take more on faith, and has previously caused problems on the theme viewer and wordpress.com.

The first step to gluing The Thin Line to The Sandbox is this:

/*



Theme Name: The Thin Line

Theme URI: http://archgfx.net.net/blog/index.php/themes/the-thin-line

Version: 0.7

Description: Hand on mouth, the game goes on

Author: Sunburntkamel

Author URI: http://archgfx.net/blog/index.php/about/

Template: Sandbox



*/

That’s my entire style.css. it doesn’t need to have anything else. I’ll be using style.php for all the style information. The important part is the last line, which tells wordpress to use the template files (index.php, single.php, etc) from ‘sandbox’ to handle the content. Style.php will be loaded on top of the existing sandbox CSS, which is why we set the sandbox skin to ‘none’.

Layouts

I was going to re-use the sandbox’ “skins” submenu at first, but that would require digging into the function, and renaming all the variables to use theundersigned’s $shortname converntion, and including it in the thin line, rather than the sandbox. That requires redistributing more code, which isn’t my goal. so i used theundersigned’s tutorial to make a dropdown list.

corrosponding to the dropdown list is this section of style.php, which performs roughly the same task as the skins page:

<?php if ($thethinline_layout_style = "3c-b") { ?>

@import url('skins/3c-b.css');

<?php } else if ($thethinline_layout_style = "3c-l") { ?>

@import url('skins/3c-l.css');

<?php } else if ($thethinline_layout_style = "3c-r") { ?>

@import url('skins/3c-r.css');

<?php } else if ($thethinline_layout_style = "2c-l") { ?>

@import url('skins/2c-l.css');

<?php } else if ($thethinline_layout_style = "2c-r") { ?>

@import url('skins/2c-r.css');

<?php } else { /* 1c-r */ ?>

@import url('skins/1c-b.css');

<?php } ?>

after that, style.php is just the remainder of the original thethinline.css. The advantage of styling in a PHP fileis that you can use variables, wordpress conditionals, and other assorted tricks.

Functions.PHP

Adding functionality to The Thin Line via functions.php is a little more like writing a plugin than like writing a theme. I’m using add_action(); hooks to add to both the header and footer of the theme. I could also add and remove widgets, although i don’t need to mess with the basic widget formatting, because that’s handled by functions.php in The Sandbox. Theundersigned’s tutorial needs a minor correction first, though. at the end of functions.php, I changed <?php bloginfo('template_directory'); ?> to <?php bloginfo('stylesheet_directory'); ?>. For most themes, those hooks point to the same file. This is the first time the difference matters to a theme.

Updated Footer

This is the new footer for The Thin Line. I added an image and link to The Thin Line homepage, as well as a section for users to add their own copyright notice/pithy slogan/whathaveyou (another trick i stole from scott). This is purely PHP, but it’s not scary. Just make the end of theundersigned’s functions.php look like this:

function mytheme_wp_footer() {/* Places credit link in the footer */ ?>

<span id="skin-link">

<a href="http://archgfx.net/blog/index.php/themes/the-thin-line" title="Theme by SunBurntKamel">

<img src="<?php bloginfo('stylesheet_directory'); ?>/thethinline/ttlogo.jpg" alt="The Thin Line" title="The Thin Line" /></a></span> <br />

<p class="annotation"><small><?php echo $thethinline_footer_text ?></small></p><?php }

add_action('wp_head', 'mytheme_wp_head');

add_action('admin_menu', 'mytheme_add_admin');

add_action('wp_footer', 'mytheme_wp_footer');

?>

That’s actually probably easier than creditting yourself in footer.php I could (and may possibly) also use this function to add, say, siFR to the theme as well. Someone who didn’t ph34r javascript the way i do might add livesearch to a sandbox based theme.

The End

My point in writing all of this is to show that the idea of writing a new theme every time is overkill. Template files themselves don’t vary a lot. Most of the functionality and variation happens in javascript and CSS. those can both be handled by only a couple of files. If theme authors could depend on the sandbox being in every wordpress distribution, It would make it easier for them, as well as for casual users who just want to change something small about a theme. It’s a lot easier to find the thing to change when there are only 3 files in the Theme Editor panel of the dashboard.

theme contents

I was going to include The Thin Line with this, but i’m having a little difficulty making everything style the way it was before, and some of the variables i’ve created with theundersigned’s tutorial aren’t properly sticking, despite showing up correctly in my database.

Bookmark This:

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

The Thin Line

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.

Screenshots

The Thin Line 2

CREDITS

Agendia STD font, used for many of the graphics
Silkscreen font, used for the vertical text
Zygote skin by intolerant, for turning me on to vipnagorgialla font
Andy and Scott, for giving me such a wonderful playground. I’ve also borrowed/reused some of their CSS.

License:

Creative Commons License
This design is licensed under a Creative Commons Attribution-Share Alike 2.5 License.

Preparation

The Thin Line is its own layout, so you can either choose the ‘no stylesheet’ option from the sandbox skins menu, or you can choose ‘Start from scratch and just use this’ from the edit CSS panel.

Features

The goal of this skin is to leverage the semantic classes of the Sandbox. So for each post, there is a corner label that shows the date using some very attractive fonts not found on most computers. Similar numbering will be shown on pingbacks soon.

Sidebar 2 acts as a footer to the layout, and anything you put in it will be displayed horizontally, rather than vertically.

Download

The Thin Line CSS

Bookmark This:

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