But for a website that I spend so much time on, boy is it ugly.

Reddit Enhancement Suite is a popular browser add-on that offers fine-grained customization of your reddit experience. But my problem was the opposite. I didn’t want more knobs and twiddly bits – I wanted to get to the content as quickly as possible, and make posts and comments easy to read and navigate.

I didn’t want to get caught up in the karma game. I didn’t care about custom banners or flair. I wanted to read, respond, and vote with as few distractions as possible.

So I made a CSS theme for reddit that strips out the extraneous details, makes content king, and facilitates reading. If you’re a redditor, please do install it and let me know what you think in the comments. These are a few of the key features:

• The header area sticks to the top of the page as you scroll, so you have easy access to all your subreddits and your inbox
• Vote counts are hidden – the post’s position on the page is a good enough indicator of its popularity
• The content area is narrower, so you don’t have lines that stretch across the entire screen
• The softer colour scheme is easier on your eyes

P.S.: Two other browser add-ons have significantly added to my pleasure of using reddit: Hover Zoom and Reddit Hover Text. I suggest you install them if you browse reddit at all; it cuts down significantly ont he amount of clicking you have to do.

tl;dr: I made a minimalist reddit theme. Download it here.

It’s actually very simple. The <ul> element has a background image. The <li> elements have a transparent background, and a solid border that blocks the background image from showing through. Finally, the <a> element has a semi-transparent png that is removed on hover to make the background image shine through brighter.

No need to splice images in Photoshop – you can achieve the same effect with some super clean code and a little creativity!

Take a look at the demo to see the final product. You can also download the source files (including images).

The HTML structure is as simple as can be:

<ul>
	<li><a href="#" class="selected">Tickets</a></li>
	<li><a href="#">Showtimes</a></li>
	<li><a href="#">Tour Info</a></li>
	<li><a href="#">Merch</a></li>
	<li><a href="#">Contact</a></li>
</ul>

And this is the CSS:

ul {
	display: block;
	float: left;
	background: white url(navbg.jpg) no-repeat;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul li {
	float: left;
	border-left: 10px solid white; /* Blocks the background image from showing through the cracks */
}
ul li a {
	background: transparent url(overlay.png) repeat; /* Semi-transparent PNG lets the background image show through. */
	color: #fff;
	display: block;
	line-height: 20px;
	padding: 0 10px 2px;
	text-decoration: none;
	padding-top: 100px;
}
ul li a:hover, ul li a.selected {
	background: transparent;
}

Admittedly there are limitations with this method. First, the area around the menu must be a solid colour (unless you use a border-image, which doesn’t have enough browser support yet). Also, the entire menu needs to be floated, so you might have to do some clearing to make it work with your layout.

As always, if you can make this code better or know someone else who has, please let me know in the comments!

While we wait (and wait… and wait…) for CSS3 to be implemented across all the major browsers, I thought I’d post my method for creating a 3D box effect using plain old CSS2 and less than 300 bytes of images. Of course, the border-image property will eventually make this method obsolete, but who knows when that will be?

First, a caveat: with this method, you need to specify a fixed width and size the images accordingly. A fluid width version wouldn’t be too hard to do, but it would involve some nested divs and more images.

Take a look at the screenshot above. The box is made up of 3 divs (I know, I’m cringing too, but I couldn’t find a simpler way of doing it without relying too much on images). Here’s the html:

<div class="box-top"> </div>
    <div class="box-content">
    	<h1>Content Title</h1>
    	<p>Content goes here.</p>
    </div>
<div class="box-bottom"> </div>

These are the only two images you need (source files here):

And now for the CSS to pull it all together:

.box-content {
	width: 180px;
	background-color: #FEFF91;
	margin: 0;
	padding: 1px 10px; /* Top and bottom values cannot be zero */
	border-left: 20px solid #D8D97C;
}
.box-top, .box-bottom {
	height: 20px;
	width: 220px;
	background: #FEFF91 url(box-top.gif) no-repeat;
	margin: 0;
	padding: 0;
}
.box-bottom {
	background-image: url(box-bottom.gif);
}
h1 {
	margin: -15px 0 0 0;
}

Easy! If you want to see a live demo and download the source files check it out here: http://demo.samnabi.com/3D-css-box. It’s really easy to change the colours of the images with the paint bucket tool in Photoshop (or even Microsoft Paint, whatever).

To create the settings for these custom layouts, you need to muck around in JSON (which is not very fun). So I put together a little app that lets you customize your player through a form, and then copy the code that it generates – easy as pie. Check it out:

http://demo.samnabi.com/bcembed

Leave bug reports and feature requests in the comments below. I hope this is useful for some people!

Note: There are still a couple features to add, namely support for text colour and tracklist row height. I’ll get to those after I’m done my research report – this app is a result of me procrastinating on that!

But when viewing an individual post, the current-cat class doesn’t get generated. To generate it when your visitors are reading a single post, insert the following code in your theme’s functions.php file.

// Generate the current-cat class when viewing single posts
class singlePostCurrentCat {
  function wp_list_categories ($text) {
    global $post;
      if (is_singular()) {
        $categories = wp_get_post_categories($post->ID);
        foreach ($categories as $category_id) {
          $category = get_category($category_id);
          $text = preg_replace(
            "/class=\"(.*)\"><a ([^<>]*)>$category->name<\/a>/",
            ' class="$1 current-cat"><a $2>' . $category->name . '</a>',
          $text);
        }
      }
    return $text;
  }
}
add_filter('wp_list_categories', array('singlePostCurrentCat','wp_list_categories'));

(Adapted from Kahi’s Highlight Used Categories plugin.)

Anyway, bear with me as the next few blog posts I make will probably be me trying to figure this whole situation out.

- Sam