Make sure you edit the settings at the top of the file to make sure it points to your Sickbeard install.

Yesterday I decided to make a homepage for the server and I figured other people might like to check it out as well, so I released it on GitHub!

It's a cool little one-pager that has buttons for SickBeard, CouchPotato, Headphones and SABnzbd, details of your current download, your wifi information and a list of TV shows that are coming out today.

It's completely customisable, at the top of the php file is a big array full of various settings you can tinker with.

Old browsers weren't that target audience for this project as it makes use of CSS3 and HTML5 (progress bars!)

Check it out on Github!

Let me know if you have any requests or suggestions.

Now available in Package Control

Fear not, though, it's a relatively simple issue to fix!

The file you need to edit is: /admin/Skins/search.ascx.

Inside that file on line 6 you'll find a sneaky little non-breaking space element. Delete that element.

Save that file and upload it if necessary and you'll notice your search bar goes from:

to:

I've done a visual refresh of the WordPress Theme here so I've started a new Github project to separate it from the previous theme.

Like last time, this is a development template and is in no way ready to be used on any website "as is". It's only being shared as a developer resource. If you see something here you like and want to know how it's done then you can download the source and peruse the templates

This is the theme being used on this website right now. It's like a live demo!

Version History

I'll be working with the as-of-writing default template, TwentyEleven, but the steps can really be applied to any skin as long as you acknowledge the dimensions of your website before you start.

This introductory page will act as a guide to break up the tutorial in to easy to digest chunks, so here's a run down of each page and what you will learn:

Page Two

• Create an "artwork" custom post type using the Custom Post Type UI plugin
• Apply additional image sizes using the Additional Image Sizes plugin
• Creating  your first art gallery post

Page Three

• Creating a template to display your artwork post type as a gallery rather than a series of posts.

Page Four

• Implementing Colorbox to display your "full posts" as a popup gallery

Page Five

• Creating a homepage for your website
• Using Sudo Slider to develop a "latest artwork" slider.

Page Six

• Adding titles and dates to your slider and styling
• Linking the titles directly to a colorbox popup

Epilogue

• Download final template from Github
• Other tutorials to keep going with

Ready to get started? Head on over to Part Two.

• Front-end development of DotNetNuke Skin
• Custom colorbox skin
• Content population

Here I'll detail the steps I took to add the +1 buttons to my artwork and motion portfolio pages.

First you need to understand the logic behind my portfolio. The artwork page is actually a list of WordPress posts that have the post-type of artwork, so each picture has it's own post and it's own permalink. This is essential for the +1 buttons, as they each need to have their own URL to +1 independent of each other.

If you are using a different CMS, just ensure that each image (or whatever you're colorboxing™) has a unique URL, even if it's just the URL of the image itself.

Step 1: Adding the URL somewhere that Javascript can access

In my wordpress loop I needed to add the permalink for the WordPress post, in this case I just used the "data-*" attribute:

<a href="/path/to/image.jpg" data-permalink="<?php echo the_permalink(); ?>" class="galleryThumbnail" title="my really cool image">

If you're just going to use the URL of the image you can skip this step, as we can just steal the URL from the "href" attribute.

Step 2: The Javascript

I already had a custom "title" set up in my colorbox call, as I wanted the option for the user to download the image. Here is the script I had originally:

$("a.galleryThumbnail").colorbox({
opacity: 0.92,
scalePhotos: true,
maxHeight: "90%",
maxWidth: "90%",
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span>'+download;
}
});

I already have some variables set up in there that's pulling information from the markup. This gives you an idea on how we're going to access the permalink, so let's start the magic!

The Magic

We can't just add in the typical <g:plus> tag in the script since it just plain doesn't work. Conveniently, the plus guys have a handy-dandy documentation page that covers just about everything we need to tackle this problem. We need to use the Javascript API instead, which is really quite easy.

We need to set up a target element which is as simple as adding an empty element to the return, like so:

return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;

So I've added an empty span with the ID of cboxGplus. Now we want to target that element with the gapi.plusone.render command. At the end of the title function, add a comma after the last curly brace ("}") then add in the colorbox "onComplete" option:

 
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;
},
onComplete: function() {
// This is where the plusone magic will happen
}
 

The onComplete function, funilly enough, will run when the colorbox pop up finishes loading. So once the image has loaded and everything's settled, we'll tell Google to render that button for us. Do it Google! Do it!

Inside the function add the following two lines:

var permalink = $(this).attr("data-permalink");
gapi.plusone.render("cboxGplus", {"size": "small", "count": "true", "href": permalink});

The variable is pulling the permalink from the data-permalink attribute. If you're using the full-size image as the URL to +1 then change the "data-permalink" to "href".

The render command is being triggered for the "cboxGplus" element. It's being rendered as a "small" button, showing the count and the href is being pulled from the permalink variable. Neat-o.

All together

So now our complete code looks like this:

 
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;
},
onComplete: function() {
// +1 Button
var permalink = $(this).attr("data-permalink");
gapi.plusone.render("cboxGplus", {"size": "small", "count": "true", "href": permalink});
}
 

And after some CSS tweaking, check it out, it's now showing up:
Note: This example has "count" set to false, so the count bubble is hidden.

See it in action

This is now live on my website, over in either my artwork or motion pages. The source is freely available over at GitHub. The pages you're interested in are:

• /js/dbaines.js - Do a search for "// Colorboxing Artwork"
• /loop.php - Do a search for "/* Artwork */" and look for the a tag.

Hope that helps, let me know if you have any questions in the comments section below, or drop me a line via email.

• Design and Development
• Single page, jQuery-driven website with noscript fallbacks.
• Media Queries for a flexible layout.
• Media Queries for Mobile Devices with jQuery tweaks.

I've uploaded my current WordPress theme as a Github project, freely available for WordPress hackers of the world to dissect and learn from. So if there's anything here that you've seen and thought, "How the hell is he making that happen?" well, now you can find out! Feel free to download, use, dissect, play-with or do nasty, nasty things that you really shouldn't tell anyone about.

Version History

Version 1.7 - 2012-01-17

• FINAL VERSION - Superceded by the 2012 theme.
• Re-arranged and styled the author info box at the bottom of loop-single.php, shows up when user has filled out their profile
• Styled Author Archives page
• Multiple Size Favicon (64, 32, 16)
• Added a little "sticky" icon/flag for sticky posts
• Switched from EasySlider to SudoSlider
• Removed left over Google Prettify code

Version 1.6 - 2011-08-22

• Fixed the excessive PRE tags in Geshi causing massive padding everywhere. (This was actually part of the last update, I just forgot to document it)
• Minified the customised EasySlider script in plugins.js
• Fixed accesskey 2 for about link
• Updated download shortcode to open in new window, removed "Download" part of title text so you can use it as a pretty link button instead.
• Added "or" between load more button and show pagination
• Added some logic to show a disabled load more button if there are no more posts to load
• Added an error message if the loadMore button fails to load the next page
• Adapted post-icons to allow for multiple icons using some jQuery (dbaines.js)

Version 1.5 - 2011-08-21

• Removed changelog from style.css for older releases. Still available at GitHub and the URL at the top of the file.
• Updated to Modernizr 2.0.6 Custom
• Removed border-top for active menu item when using wordpress menus, since custom post types were showing the blog as being active, rather than the correct parent page. Bug in WordPress?
• Added custom close button for colorbox
• Added a blue hover state to the homepage logo link
• Implemented Google Code Prettify to replace GeSHi, but changed back due to quirks of Prettify (namely line number incrementing, copy and paste issues and other things GeSHi does better) - I've left the code in /functions/functions.shortcodes.prettify.php
• As a result of the above I've moved the GeSHi stuff in to functions/functions.shortcodes.geshi.php for hot swapping action
• Added "Show Pagination" link to the load more posts button. Shows wp-pagenavi links next to the load more button. LoadMoreButton also pulls in the wp-pagenavi from each page so if the user loads a few pages and then shows the pagination, it shows the relevant page as being current.
• Fixes to the Load More feature:
  • Functionised&tm; the part of the dbaines.js file that adds colorbox classes to everything so we can call it after the new page has been loaded
  • Called gapi.plusone.go after a successful load so the google plus buttons are rendered.
  • Rejiggered the ajax call for the loadMore link to only do one .load() and then cherrypick the things to go to places and what not
• Added some accesskeys:
  • 0: Takes the user to the new accessibility page
  • 1: Homepage
  • 2: About
  • 3: Blog
  • 4: Portfolio
  • 5: Search
  • 6: Sitemap
  • 9: Contact Page
  • S: Skip to Content

Version 1.4 - 2011-08-04

• Styled figcaption for codebox
• Added aprilfools.css for headache inducing fun come April-time
• Added WordPress Option: Google Analytics UA Code
• Added WordPress Option: Enable WordPress Menu - Uses a WordPress menu, "Main Menu" as the main navigation instead of the hardcoded links
• Added WordPress Option: Replace 'friends' with 'blogroll' links
• Added WordPress Option: All posts have thumbnails - includes shiny new generic post-thumbnail.png
• Added WordPress Option: AJAX Post Loading - Facebook/twitter esque post loading technique
• Removed -webkit-appearance from search input
• Added Google +1 buttons to search results
• Added .2 seconds of transitions (of various vendors) to the top-level nav links for fun and profit
• Gave .homepageSlider h2 1px of text shadow blur to fix the shadow being white in chrome 12/13.
• Added line-height: 1.5 to p,ul - if it affects too many things I'll specify it to content areas only.
• Hardware Acceleration (via the "Magic Bullet" -webkit-transform: translateZ(0);) given to homepage slider and websites slider
• Added a "Shortcodes Reference" box in the new post admin page. Super convenient!
• Responsive Design changes:
  • Fixed rendering of the search input in Firefox for the mobile design, again. Should stick this time.
  • Made the artwork portfolio look somewhat nicer on the reponsive design
  • Changes for the contact form when less than 960px wide
  • Made the "About me" image centred and styled like the centred images in the blog

Version 1.3 - 2011-08-01

• Fixed search input rendering in Firefox for the mobile display
• Added +1 buttons to portfolio colourbox popups (dbaines.js)
• Added +1 buttons to websites loop

Version 1.2 - 2011-07-31 (double day update!)

• Fixed the 1.1 date
• Figure HTML5 elements for wp-captions
• Figure HTML5 elements for tutorial post thumbnails
• Figure elements for code blocks, adding caption option to codebox shortcode
• HTML5 form fields for comments form
• Removed some vendor prefixes for some box shadows and rounded corners as the major browsers now use non-vendor-prefixes.
• Fixed some more inconsistent typography
• New WordPress Theme Options:
  • Google +1 "count" bubbles on/off
  • Footer Text
  • Comments Intro
  • Laid groundwork for WYSIWYG editors in theme options page, still a bit buggy.

Version 1.1 - 2011-07-31

• Reponsive Design changes for <960 and <600 wide
• <600 wide is optimised for mobile devices
• Pseudoelement CSS icons for subsection (dark grey area) and post meta icons
• Fixed some inconsistent typography
• Added GooglePlus and Forrst Icon to homepage
• Plugins.js for minified plugins
• jQuery from Google CDN, Updated to 1.6.2
• Added rel="me" to links to my profiles on things
• Re-arranged functions.php, cleaned up, separated large chunks in to manageable files (ie. functions.shortcodes.php)
• Removed Facebook Likes
• Added Google +1 Buttons
• WordPress Options Page!
  • Google +1 Buttons on/off
• Updated login css to reflect changes in WordPress 3.2

Version 1.0

• First Release