This tutorial is the first of three parts: 1) the Photoshop Mock up, 2) Coding the HTML / CSS and finally 3) Adding PHP / jQuery.

The Output

Below is a preview of what we’re building. The aim is to have a mock up that is fully layered, so we can optimize for the purpose of SEO and page performance. Ready to get started – Let’s begin:

Part 1 – The Fold

We’re going to design the page from the top to bottom. The fold is first part of a web page can see – without having to scroll downwards. In our case, this includes the header and the big red feature bar:

If you aren’t familiar with 960.gs – it’s a CSS framework that follows the standard 960 pixels page width rule. Download the photoshop template and check out the guides – we are building the page following the 960 grid rules:

Create a new layer – this will be the fold layer. Select the full page width, with approximately 380 pixels in height. Fill it with a solid color – in my case I chose a bright red #730701:

Create another layer for the header bar, select the full page width and 48 pixels in height. Fill this with another solid color – in my case, #bcbcbc for light grey.

Where the header bar and the fold meet, we want to add an “etched” effect. We achieve this by using 2 lines using the “line” tool. Create 2 horizontal lines at 1 pixel each (make sure you hold the “Shift” key) as you drag it across the page. Nudge one line so that they sit just on top of one another. The rule is to use a lighter shade for one line, and a darker for the other (it is important that you play with the colors, and zoom out and test if the etched look is achieved). Add a subtle gradient fill for the header bar as well.

The next step is to add a large feature image. This sits on top of all the layers to give it that 3D effect. Place in at almost half the 960 pixel page width, overlapping some part of the header and pass below the fold. Include the effects as shown:

Immediately to the left of the feature image, add your large slogan text. This is to be your attention grabbing statement, and is important to be the most prominent. I chose Rockwell at size 36 pixels, with -50 tracking. Also add the following text effects:

• Drop shadow – Normal blend mode – #000, 90 degrees angle, 1px distance, 0 spread and 1px in size
• Inner Shadow – Normal blend mode – #FFF, 90 degrees angle, 1px distance, 0 choke and 0px size
• Gradient Overlay – use default settings, reduce opacity to 34% and 90 degrees in angle

Add a gradient effect to the background layer named the fold. The rule is to use a slightly lighter color than the existing background as one color, and the same background color as the secondary color. Fill by pressing the shift key and releasing simultaneously.

Add another 2 horizontal lines right underneath the slogan text. *Use the rule as described in the previous line tools used in the header and the fold separation. Add a smaller set of text – I used Arial with 14 pixels in size, #FFFFFF color.

To complete the fold – we add a glow effect to the bottom area where the borders separate the large text and the small text. Select a small area (shown below), grab the brush tool, select white for the color, increase the brush radius (shown below) – reduce the opacity all the way to 12 percent and daub a quick light stroke. Next up: Below the Fold.

Argyle’s Drudge has a very narrow content area of only 746 pixels. I chose to stay away from the standard 960 grid design because I find that grunge layouts don’t seem to play well with it. Speaking of grid based design, find this article about lining up your posts perfectly within the grid. As I was saying – the whole point of grunge is random and spontaneous – conforming to a grid just doesn’t fit.

More Details:

The pale blue watercolor splash background is courtesy of my Backgrounds etc. The beautiful hand sketched fonts is known as “Fail Font” and can be downloaded from DaFont.com. Note that since “Fail Font” is free – it’s the perfect opportunity to use Cufon in your coding. Cufon is the technology that enables you to use any kind of font in your pages (read article).

Argyle’s Drudge is completely free to use for your next theme of choice. May it be Wordpress, Blogger, Typepad: all I ask in return is for you to follow my updates in Twitter or leave a comment below.

Download Argyles Drudge.

I inspect element in Firebug – then I see span class “cufon” everywhere.

So What in the world is Cufon?

Cufon is defined as “fast text replacement with canvas and VML”. It also claims to be a worthy alternative to sIFR – which is, to those who are not familiar – stands for Scalable Inman Flash Replacement. sIFR is the technology used by web designers to replace dynamic text with non-web safe fonts. Although sIFR has done an okay job with text replacement – it has proven to be quite tricky to set up. I’ve used sIFR in a few projects in the past and do admit that it is not the easiest thing to get going. On top of that – sIFR seems a bit buggy, as well as slows down page loads. These are serious consequences to consider for the price of using a unique font for your pages.

So I went ahead and tried Cufon. To my amazement, the following steps is all that it takes to fully “Cufonize” your web pages. *Forgive the use of the term “cufonize” – it may sound funny, but after you try these steps, you too will “cufonize” your pages.

Step 1: Get Cufon

The first thing you need is to download the core javascript file which is responsible for the rendering of your custom font inside your HTML. Head on to http://cufon.shoqolate.com/generate/ and right click the “Download” tab – choose “Save Link As…” Save cufon-yui.js into a local directory in your machine.

Step 2: Generate your Font

On the same page at http://cufon.shoqolate.com/generate/ – click on the “Regular typeface” field – and browse to your desired font in your local machine.

The rest of the upload fields are optional. I left all of them default for the sake of making this tutorial short. Just make sure – you are using a font that is legit to use, check off the EULAs and the Terms of Agreement. Click on the “Let’s Do This” Button at the very end of that page.

This should generate a custom font javascript code for you – depending on your font choice. In my case, I picked something very un-extraordinary: Gigi.TTF – which produced a file named Gigi_400.font.js.

Go ahead and save this file in the same directory where you saved the core Cufon-yui.js file and we’re ready to build your page:

Step 3: Cufonize your Page

All you really need to do from this point is to link to these javascript files in the head section of your HTML. Also make sure that cufon-yui.js is called before the font.js file:

To begin the replacement process – create a custom script like below:

The above script is telling the cufon to replace all H3 and P tags to our custom font.

Note that if you want to target specific elements in your page the same way you assign CSS classes and Ids, you have to use a framework such as jQuery that’ll let you do such a thing. To download jQuery, go to http://docs.jquery.com/Downloading_jQuery. Make sure you link to this file BEFORE the core cufon-yui.js in your header.

With the jQuery library in place, now you can select more specific elements in your page (hashtags for IDs and periods for classes). See example code below:

The above code will Cufonize only the h3 tags with the id of “convert-me”, and p tags with the id of “convert-me-too”.

Conclusion:

That’s basically it! That’s all it takes for you to use any font you like in your web pages. What I like best about Cufon is that it’s quick and it works. You will also find that general CSS properties such as color, size and positioning still applies on the transformed font. To find out more about the specifics of Cufon styling – see http://wiki.github.com/sorccu/cufon/styling.

Much respect to the people who created Cufon. I’m sure this marks a new trend in web typography. To the folks at Woothemes: keep pushing the boundaries – your work is pure inspiration to web artists everywhere.

Who’s Using Cufon?

The following list of websites are already using Cufon text replacement in their pages:

Healthy Valdosta

Press75

International Rugby Academy

Zen Desk

Rock Beats Paper

Shopify

We all know that a typical grid design uses some kind of block containers to house content. This block container may be DIV or list that span a couple, three or four times across inside a parent DIV. Now with CSS – we simply apply the proper left or right margins to all the containers except the last one in the pattern:

The result is the children containers line up perfectly inside the parent DIV. To achieve this effect we apply the same class to all the children DIVs, and append a unique class to the last one like below:

HTML

	//content goes here


	//content goes here


	//content goes here

CSS

.parent {width:415 px;}
.child {width:125px; margin-right:20px; float:left;}
.child.last {margin-right:0;}

The Challenge:

Since content inside these containers are typically coded using a form of recursive technique such as “the Loop” in Wordress; how are we to designate that unique class to that second, third or fourth child DIV?

For instance, if we were to house our posts inside one of these children DIVs, the PHP would look something like below:

This block of code inside the parent DIV will just keep repeating for all posts with the same “child” class. We need to a way to select just the second, third or fourth child to not have that extra margin.

The Trick

A not so popular arithmetic operator known as the modulus – represented by a (%) symbol is what we’ll use to do the trick. The modulus operator is the same as division – but returns the remainder instead. Since we’re only targeting every “nth” div or child item, all we need to create is a pattern that has a multiple of some value in order to apply our special class. Take a look at the code below:

First we create a variable $r_count and initialize its value at 1 right before the loop starts. Right after the call for the posts, we add a conditional statement with the modulus operator for 3 is equal to 0 (since we want every 3rd element to have that unique “last” class), everything else returns empty. Lastly, we increment $r_count by one.

In our HTML, we call the regular “child” class, then we echo our special $r_class. The end result will be an alternating call of styles depending on what we define for our modulus operator:

Of course – depending on the number of columns you would like to display – all you have to do is change the modulus operand and you should get the same effect. Thanks to PHP master David Young – who showed me how to do this trick.

Features

The slider in the home page templates are dynamic. Meaning – they are actual posts in your blog that you set in a specified category (i.e. feature) – so they show up in the slider. You can set it to run automatically and are allowed up to eight slides. The slider uses CSSGlobe’s “easy slider“. All images that link to other images automatically loads “FancyZoom” – which which is the amazing javascript zooming effect you see in many modern websites. Monte Cristo also comes with four different “characters” or color schemes: Jacopo is the gray and burgundy guy, Danglars swaggers in brown and taupe, Mondego likes it purple and green while Dantes is different shades of blue.

Why Friendly?

Monte Cristo has a built in options panel where you can set your preferences. Friendly because this way – you don’t have to know HTML, or Javascript to tweak the code. You can set which character you want from the options panel, set the slider categories, automatic or not, plugin your logo files – just about all that you need to customize Monte Cristo to fit your website.

Why Buy?

Monte Cristo is up on sale at ThemeForest.net for a measly $25.00. You can check out the live demo from this link. Why buy if I have been giving away stuff for free? Oh I don’t know – maybe because since I spent a whole lot of time making this theme that I figured I might as well try to make money off of it. Maybe since I give away free support once you purchase is another reason. Or maybe if I make enough money from this that I can now spend more time with my son – teach him not to say bad words like “what the heck“. Of course, its completely up to you.

Home Page with a Feature Post

Unlike the original Kubrick – this theme automatically takes your latest post and converts it to a Feature post. It sits atop of a dark fading background with a custom image field that looks like its on top of a stash of photographs. It uses the custom field key: “image“. To learn how to use custom fields (which I strongly recommend) – read it from the codex. No image resizing is required – they’re all automatically cropped, thanks to the TimThumb script by Darren Hoyt. But for best results – upload an image that is wider than 424 pixels and longer than 284 pixels in height.

The search form magically appears in a fade in box. This script is “Thickbox” and provided by jQuery. The spectacular smoke art background is by Applse Actually of Deviantart.com.

Theme Options

Kubrick on Crack! comes with a control panel so you don’t have to touch the code in order to customize for your website. The options include the following:

1 – Header Logo, once your logo is uploaded, enter the url here. I recommend using a transparent .png to preserve the look.

2 – Twitter account, this will save to the link that is behind the twitter icon in the header.

3 – Custom Feed, this will save to the RSS icon in the header. If no value is provided – the default blog rss will be used.

4 – Google Ad Sense, this will create an ad space right below the single post page. (use the the 728 leatherboard style). To learn more about Adsense, click here

5 – Google Analytics, this saves your Analytics code below the footer – which of course is invisible. To learn more about Analytics – click here

You can see Kubrick On Crack! in action at my Demo site. Download the theme from this link.

Update: the original PSD files can be now be dowloaded from this link. *There are 3 photoshop files in the zip – one for the main layout which contains all of the elements except two buttons – which are in the other psd files.

All I ask is for you to leave me a comment, Retweet or Digg this article, or follow me in Twitter.

What the heck are “Magic Quotes”

For those who know PHP, the language is designed to avoid conflicts in strings (mostly characters used in variables) through the use of escape sequences. Escape sequences are formed by providing a (”\”) backslash in front of characters such as double quotes, to convert them into a literal string. The people who wrote PHP wanted this to be an automated process, so they decided that all text passed through online forms are automatically escaped with a backslash. This is known as Magic Quotes. Although their intentions were good, it has caused more problems than fixes. According to the PHP.net: Magic Quotes are deprecated as of version 5.3 and will not be part of future versions.

Wordpress Fix

Although you can disable Magic Quotes in your server php.ini file, it won’t do me any good since I’m developing a theme to be released for public use. This means that users of my theme will have various server configurations and telling them to turn this feature off is simply not an option. Luckily, Wordpress has adapted PHP.net’s function “stripslashes deep” – which disables Magic Quotes at runtime. All you need to do is paste the following code into your theme file and should take care of the issue:

if ( get_magic_quotes_gpc() ) {
    $_POST      = array_map( 'stripslashes_deep', $_POST );
    $_GET       = array_map( 'stripslashes_deep', $_GET );
    $_COOKIE    = array_map( 'stripslashes_deep', $_COOKIE );
    $_REQUEST   = array_map( 'stripslashes_deep', $_REQUEST );
}

The above code strips slashes when data arrives via $_POST, $_GET, $_COOKIE, and $_REQUEST methods. In my case, I’ve pasted this code inside my functions.php file which contain my theme options. This page alone will serve multiple textarea input fields which will allow special characters such as Google Analytics and AdSense code. Note that this can be used in any page with input fields such as a contact and RSVP forms.

A Centralized, Mashed up Commenting System

First of, before you’re able to download the plugin – you are asked to create a Disqus account. I figured, an account may merely be for marketing purposes, but right after creating one – you are presented with a API key. Now something tells me that this system is something more – I was right. Disqus is able to provide the system to any type of blogging platform you are using: Typepad, Movable Type, Blogger and Wordpress. Note that there is also “Generic” which I assume is for static websites. Now remember I said what I was expecting to see check boxes for Facebook and Twitter? Well that’s what I got. Plus options that span from the ability to display Social Media Reactions (replies or social media services like Twitter, FriendFeed, Digg and YouTube), Trackbacks (we all know what this is), Seesmic video comments, OpenID and of course – Facebook connect and Twitter. Now as if that’s not “mashed-up” enough – there is also an option to add a Disqus Feedflare to your Feedburner. A FeedFlare places a simple footer at the bottom of each content item, helping you to distribute, inform and create a community around your content.

Where Are the Actual Comments Stored?

Now the funny thing is once you’ve installed Disqus in your Wordpress blog – it takes over your commenting system. Try clicking “Comments” from your Wordpress admin panel and it will take you to the Disqus settings screen (which is just an iframe of your Disqus account). From this interface gives you total control of your blog comments such as importing existing ones to Disqus, moderation, as well as adding widgets and changing the look of the form. Did I say “Import existing ones“? Yes I totally did. As it turns out, once you have Disqus installed – it uses it’s own database to store your comments in their system. A system that still ties with your website and post id. Now don’t fret! Your wp_comments table (where your comments are stored in Wordpress) remains untouched. Furthermore, it is updated at the same time new comments are entered, with the Disqus system.

There has to be a Kicker

Okay, with Disqus you can mash up world renowned applications with your comments. You can add widgets, change the appearance, move things around in your comments section with a few simple clicks. You can manage your comments in both places: your website control panel and your online Disqus account (since the comments are literally stored in two databases). All of this are wonderful features but there has to be a kicker. A “kicker” as in a feature so significant, that blog owners will actually deviate from their regular commenting system and use Disqus instead.

Well let’s think about it for a moment:

For starters, now you can moderate comments centrally in one place. Really, I’m sure many of us run more than one blog. For the lucky ones that are bombarded with hundreds of comments daily, this is definitely a kicker. Another one is the ability to add moderators. That’s correct, with Disqus – you now can add comment moderators (similar to a forum) without giving them access to your physical blog. This is a big plus for sites with a large enough community. What about the ability to “Reblog“. Reblogging is exactly like “Retweeting” – but it’s a post instead of a tweet. How about having a “Lifestream” type of your blog posts in the Disqus website. Once you join Disqus – you automatically get a community page (http://yourwebsitename.disqus.com) that displays quick feeds of your latest posts – that link directly to your website.

Win-Win, Lose-Lose or Win-Lose?

I’m sure there are other “kickers” for the Disqus system that I haven’t discovered yet. Consider that I’ve only been using it for a mere five hours! But there could also be downfalls. For instance, I now don’t have any code control of my comments section. Once Disqus is installed – the comments.php in your Wordpress theme is completely overridden. Another point to ponder: since your data is now in two places – isn’t it kind of scary? By this I mean, back ups, redundancy, duplicate data, “what if disqus.com is down – what will happen?” – am I just paranoid?

Overall, I think the Disqus Comments system is a sophisticated platform that is sure to enhance your blogs discussion abilities. It is simple enough to use, safe, and at the same time – provides enough bells, whistles and “kickers” that blog owners will sure go for. I know when I see “Comment with Facebook Connect” – it makes me want to leave a comment more; therefore, it works for your readers as well.

What about you? What’s your take on a third party comment system such as Disqus?

Javascript / jQuery Goodness

I’m a big fan of animation in web design. Especially ones that enhance your pages functionality, accessibility and of course – quality. This is the case in the tabbed containers that you get in Pork and Beans’ top sidebar and comments form.

The code is from Queness, I was able to squeeze a lot of content into such constrained spaces. Content that are to be grouped logically in the first place. For instance, in the comments area, the form shows up as default, but you can also switch from a selection of subscription options, as well as a list of related posts.

Other Javascript features include the sliding captions on the images – courtesy of Buildinternet.com, and a Scroll to the top button found in the footer area.

Colors Schema, Aesthetics and Auto Resizable Images,

The original design didn’t include a wood background, nor was there a patch of grass in the footer – but I figured, it needed some identity. I know what you’re thinking: What does it have to do with “Pork and Beans”? Absolutely nothing. Who said the name had to relate anyway? Picked up the color scheme from the “Moboogie” Color template from Adobe’s Kuler website. Images are automatically resized using a custom field entry (image). For best results, use images wider than 562 pixels.

Plugins Needed

The sidebar has a Flickr Box included which will need you to download the flickrRSS plugin by Eightface. The sidebar is also fully widgetized, styled to match the rest of the page’s elements. You will also need the Similar Posts plugin by Rob Marsh – which will pull related posts to the current article. This will show right below a single article, in the last tab in the comments form.

Conclusion

Pork and Beans is ideal for the traditional blogger. Although it may work best with people who have high quality and vivid photos to include with their articles. I do not suggest customizing it to match another look – since the colors and the background images will be difficult to mess with. Well, if you really must need to tweak, then by all means. I must also mention that I started to code to satisfy IE 6 quirks – but gave up. There is also a bug that the body background shifts to the right on scroll, but goes back to the original position. I don’t know what causes it, but if any of you experience the same thing – please leave a comment.

You can see Pork and Beans live in action from this link, Download the theme from here. All I ask is to spread the word, leave a comment or follow me in Twitter.

Update – You can now download the PSD:. Note that the PSD does not look exactly like the demo (changed my mind a couple of times during coding).

Note that you can “widgetize” almost any of your template files, but for the sake of this article, we will take a look at just the more common, single sidebar.

First of all – What are Widgets?

According to Automattic (the company behind Wordpress), “they’re just things you can use to personalize your WordPress site without knowing HTML”. To elaborate further, widgets are like a fast way to plug in bits of code into your sidebar. Widgets are accessed via the admin panel, under “Appearance” > “Widgets”. Common widgets are Calendar, Meta, Recent Posts, the Tag Cloud and Text. Widgets are not to be confused with “plugins”. Although there are some plugins that become available as “Widgets” once you install them.

Why use Widgets?

For theme developers – it is almost a necessity for your theme to be widgetized. This means that you have to tailor your theme to non-savvy users to be able to customize your theme to use these small snippets of code without writing a bit of HMTL. It is a way to cater to their needs as well as expand and utilize the full capability of Wordpress. Check out the screenshot below of the Widgets section from the admin panel:

Now consider the user of your theme doesn’t know any web development – doesn’t this functionality come in very handy? This is why widgetizing your themes is always a good idea.

Styling Your Widgetized Sidebar

The Container Approach:

I’m sure you’ve seen this kind of sidebar. It’s one where widgets are compartmentalized or “boxed”. May it be sharp squares, faded edges or even rounded corners – the container approach is definitely one of the more popular sidebar styles around. Take a look at a typical container for a widget:

As you can see, the entire container can be drawn up by just one DIV. This is what the “before_widget” and “after_widget” name-value pairs are for in your functions.php:

Note that declaring a “sidebar-column” div for the widget container – you are now able to style unordered list items, as well as their child elements. As with my example, I’ve designated bigger icons for the parent list-style property, and a smaller arrow button for the children.

Below are a couple of good example websites that use the container approach for their sidebars:

http://www.gomediazine.com

http://www.blurbia.com/blog

The Continuous Column Approach:

This approach preserves the notion of a sidebar being – just a real bar. May it be in the right side or the left, the continuous column sidebar remains classic, simple and if done right – timeless.

Take a look at the simplicity of this style:

In this case, all I really styled is the headings of each widget. This is what the function.php’s “before_title” and “after_title” comes in handy. I used a regular H3 tag, assigning just the right font style, sufficient padding and a tiny bottom-border image – and it’s ready to go.

As mentioned, the continuous column approach gives your sidebar that “clean” look. It is used by many news and magazine style blogs in the conservative end. Two popular websites that employ the continuous column approach are:

http://www.woothemes.com/blog/

http://daily.creattica.com/

Anything Goes:

Anything goes is exactly what it implies. It is very random, no compartments, borders or even visible patterns. Although it is still a column, there is no definite distinction where widgets start or end. Note that this can only be achieved by combining the “fewest similar” widgets, along with static elements. By “fewest similar” I mean widgets that are visually different from one another. For example: “Recent Posts”, “Archives” and “Categories” widgets are all rendered as lists.

Remember – you can play with static elements and combine them with the more dynamic widgets, to give your sidebar a more arbitrary look:

Take a look at these websites that have an “anything goes” style sidebar:

http://www.webdesignerwall.com/

http://www.dawghousedesignstudio.com/

What about you? What’s your take on styling sidebars and widgets?