Custom Post Type

You like that carousel / slider in the home page? Well that is due to the amazing code known as the roundabout by Fred LeBlanc. You can easily change the contents of this carousel in two ways:

1) Using a custom post type

In the left hand side of the admin area you will notice a section called “Roundabouts”. Simply add a new roundabout and give it a title, some content and attach a “feature image”.

The images are automatically resized to the right dimensions. Also – you’re only allowed up to 5 roundabouts.

2) Change the static code

If you decide you don’t want to use the custom post type feature – you can simply change the HTML. Inside home.php you will see an unordered list with each item as follows:

1

<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/586x360.jpg" alt="Need Image Here" /></a><div class="hiddendesc">Need to Enter Image</div></li>

Simply replace the values of your images, title and link and you’re set to go.

The Navigation Menu

This by far is my favorite 3.0 feature – custom menus. It’s simply amazing. I’ve added the code to Rotary that lets you design the main navigation of the theme.

Simply drag and drop items to the menu builder and save.

Feature Images

Just like the roundabout items – all posts in this theme can have its own feature image. Simply use the “Set feature Image” option for each post:

This image will show as thumbnails in the archive pages, and a medium photo inside the single page template:

Conclusion

Truly by using the features above – you can utilize the power of WordPress 3.0 as well as turn your blog into a cool CMS. Give Rotary a spin – it’s cool, it works and it’s free!

So, why do I give away my themes away?

Because I believe in you people. I believe that if you like my work so much – that you’ll follow me in Twitter, like me in Facebook or even subscribe to my feed. I believe that you WILL NOT remove my credits in the bottom of the theme. I even believe that you will make a small donation – so I can keep building other things that can be useful to you in the future.

Let it be known that is is one of my older themes that I once had for sale in Themeforest. It did quite well in the beginning. Although I noticed the decline in sales as time passed, therefore I decided to give it away for free.

So what’s so special about it?

Monte Cristo is clean, sharp and minimal. Yet the subtle graphic effects give it a bit of modernity and heightened class. I especially like this theme because it kind of reminds me of the older style of web pages – with the borders, and the “page-peel” effect (which was quite big a couple of years ago). It comes with an options page where you can tweak the slideshow settings, switch stylesheets etc. It also comes with an alternate homepage template, as well as a “portfolio” page. Read my old sales pitch page for more details.

Creative Commons Who?

I’ve changed all my giveaways to have the Attribution Type of Creative Commons licensing model. What this means is that you can use the theme however you want – as long as you leave my credits in the footer. *But if you REALLY must take off the credits in the footer (i.e. you’re installing it for a client website): contact me – we may be able to work something out (hint: a small donation of some sort).

Conclusion

So go ahead, install Monte Cristo and have a blast. I’ve tested the theme to run on WP 3.0 and all major browsers. Also, make sure you read the “ReadMe.doc” file in the theme folder for additional instructions. Lastly, keep an eye out for more of my freebies. I shall be releasing more real soon!

Note: Since I created the theme almost a year ago, it doesn’t utilize the newer features of WordPress 3.0 such as post feature images, custom post types and custom menus.

Features

The one pager Sifiso has all the right stuff for a strong personal portfolio:

How to Edit

The source code is very pretty straightforward – simply edit the HTML with your own. The PSD contains 4 files – one for each main section of the page. All files are layered, grouped and labeled. To edit a text section – find the layer and edit the text within. Fonts used are “AR Blanca” (for the logo), and “Helvetica Nueu LT Std” for everything else.

Conclusion

Keep in mind that even though Sifiso may be full of images, it is still coded professionally to conform to standards and SEO. I hardly used any “image” tags (except for the portfolio section), and still used HTML text where it should be (see screenshot below).

*Note that I talked about how to code this way in my 3 part post: How to create a single page portfolio from scratch.

Credits to the icon developers:Coffee Mug by Omercitin, Paintbrushes by ArtDesigner.lv and Briefcase by thirteen eightyone.

The Websites:

Verizon Wireless

Sprint.com

Blackberry.com

Palm Pre

Sony Ericsson Xperia X10

Nexus One

WireFly.com

Of course -The iPhone

HTC

T-Mobile

The Free PSD:

Below is a preview of the Photoshop mock up free for download. It was inspired by the list above.

Here is the download link. Feel free to check out my downloads page for other free stuff you can use in your design projects. Follow me in Twitter or leave a comment below – That’s all I ask.

1

<div><?php wp_footer(); ?></div>

So much for a name change. Nonetheless, Aparatus is packed with features and design delight that aims to tickle your innermost web mag fancy. I have included extensive theme options that will leave you not needing to touch a single line of HTML. I have cufonized fonts for the headings and the site logos – that you need not create your own. I have modified the WordPress loop so much that it covered almost all possible looping scenario. Last of all, Aparatus comes with four different stylesheets targeted to suit your color schema.

Updated Twitter Badges!

I received enough comments on the Twitter badge to say “Follow ON Twitter” as supposed to “Follow IN Twitter“. So here they are:

• Maroon Badge
• Blue Badge
• Green Badge
• Black Badge

Simply replace the existing badge image in the Theme’s images folder.

The Slide Show

As for many magazine styled websites – a slideshow is a must have. Thanks to JonDesign’s Smooth Gallery – which made this possible. The slideshow by default pulls your five latest posts. The loop then continues to present the remaining of your posts directly below. The theme options allow total exclusion of the slideshow, as well as automatic slide. You can also specify a specific category to be pulled into the slideshow – without ever duplicating the posts in the bottom. All while the default loop logic is still acknowledged and functional. What this means is that – the loop still recognizes the options you enter in WordPress admin – not just in the theme (i.e. number of posts to show, etc); in addition, the paging system (next page etc) still works and automatically hides the slideshow in the inner pages. Oh, I also re-styled the WP-Navi Plugin (the right way), by de registering it’s default stylesheet.

WP 2.9 Thumbnail Ready!

The images in the slideshow as well as the thumbnails per post can be set by using the new “set as thumbnail” feature in WP 2.9!. This supersedes the old school way of inserting “custom-fields” – but will still work with either! You can use the thumbnail feature or custom fields set to “image”.

Ads, Twitter, Widgets and Everything else

The sidebar comes with advertising blocks which you can set up in the theme options panel. When you enter your Twitter account in the options, this will dictate the @replies in the Tweet Me buttons, the big “Follow my Updates” in the header, as well as the last tweet in the sidebar. The popular posts and recent comments tabbed area are all non-plugin driven – which means the code is all inclusive with the theme, without needing to install a plugin. Lastly, the sidebar supports widgets, the comments are threaded, gravatar – ready, as well as suckerfished drop down menus for the categories in the header.

That’s Enough! Download Already!

To view a live preview of Aparatus – click here. You can download the theme from this link. If you like the theme – you can do one of many things to keep me happy: Follow me in Twitter, Donate some coffee money, Tweet about it, subscribe to my feeds or even just leave a nice comment below.

1

<div><?php wp_footer(); ?></div>

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.

Part 2 – Below the Fold

Below the fold technically includes everything under the fold. But for the sake of this tutorial – it includes all BUT the footer section. The reason is – this will be the only part that will need to grow. If there was additional content to be made – it will be inside this section. The fold and the footer remain static in height.

We start by creating a new layer. With the selection tool, select everything below the red feature section below. Fill this selection with #f3f2ed using the paint bucket tool. *Note that the large image layer should be placed on top of all the other layers.

We then create a new horizontal guide. This guide should be right below our feature image (allow a few pixels extra for the added shadow effect). This guide’s main purpose is to know where we will slice our divs (which I will cover once we start coding) and where our gradient ends. Grab the selection tool once more and start from where the red area ends – down to the new guide. Using the gradient tool, select #e1decf primary color and #f3f2ed and fill with a straight line (hold shift).

We then add that same “etched” look where the two layers meet. The same technique is used – create two lines with one darker and one lighter. In this case the upper line has #670600 fill and the second #faf9f3.

Next step is to create the sub heading. With the type tool, choose the Rockwell font at 24 pixels in #292929 color and type the word “TESTIMONIALS”. Directly to the left of the text – I imported the “users_two_48” icon from WeFunction and scaled the image down to 60 percent and desaturize (Ctrl + U, slide the saturation all the way to the left). Add two horizontal 1 pixel lines (#e5e5e2 and #FFFFFF) directly underneath (by this point of the tutorial, I’m going to assume you have this technique down already).

*Tip – Create a group called “sub headings” and add all the above elements in it. We will be duplicating this sub heading in following sections.

Directly below the Testimonial subheading – we create 3 text boxes with some dummy text. I used Verdana at 14 pt, 20 pt leading. Make sure you allow enough padding and margin around each surrounding box. Align according to the grid. Note that this part of the design acts only as a marker. We will use actual text for these boxes.

Duplicate the two horizontal lines from the sub headings section. Move these 2 lines right below the 3 text boxes that you have created. Create a new layer, select 124 pixels (width) x 25 pixels (height) and fill with #FFFFFF with the paint bucket tool. Move this layer right below the two horizontal lines. Using the text tool, use 10 pt Verdana, color # 6b6b6b and type the words “more testimonials” – move this directly on top of the new layer we’ve just created. This acts as end marker for the testimonials section with a button that displays more testimonials.

*Tip – create a new group for the above elements and name it “end marker”.

Next, we add a “Previous Work” section. Remember that we created a group called “sub headings” a little while back? Duplicate this group and name it “sub headings 2”. Using the down cursor in your keyboard, move the new group approximately 560 pixels downwards. Change the text to say “PREVIOUS WORK” and use another icon, scale it down and desaturate.

An image gallery will showcase our portfolio’s “Previous Work” section. Similar to the testimonials area, we are dropping some dummy thumbnails in our photoshop file, just for mock purposes. We are going to span 4 thumbnails across at 210 pixels each in width. Make sure the thumbnails align to the grid, taking 3 columns each with enough paddings in between each other. Add the following effects for each thumbnail: Drop Shadow (settings shown in below screenshot) and an inside stroke of 6 pixels and #FFFFFF fill color.

To complete the “Below the Fold” section – we create an end marker for the “Previous Work” area. Duplicate the group “end marker” and name it “end marker 2”. Move this newly created group approximately 380 pixels downwards. Change the text in the button to say “more previous work”. Our next quest is the Footer. Keep going!

Part 3 – The Footer

And now we come to the final piece of the design process – the Footer. I enjoy designing footers because they represent completion; they’re also the most overlooked section of a page that I feel that it deserves the same attention as the other parts.

The height of the footer is approximately 375 pixels. If you haven’t already done so – extend your canvas size to an additional 375 pixels – but be sure to click the anchor all the way to the top.

Create 3 new horizontal guides: first is where the “Below the Fold” background ends, then approximately 35 pixels below, and third – another 30 pixels down (this is where the footer background layer starts). Make a selection from the first guide to the next one down, make sure you’re on the “Below the fold” background layer, and do a gradient fill: primary color #e3e0d2, secondary #f3f2ed. Next, create a new layer for the footer background and add a gradient fill: primary color is #361f01 and secondary #493215. Do 80 percent for the primary fill. Finally, create 3 horizontal lines with the line tool at 1 pixel each with the following fills (in the following order): #ffffff, #000000 and #624825. Line them according the last guide you’ve created (see below).

Duplicate the text layer for the slogan (The Fold), change the content to say “Hire me for professional work”, drag downwards to the footer, and place on the left half of the footer area. Add another text area, use Verdana, 12px #ffffff, enter some dummy text, and place directly below the large text.

On the right half of the footer, we’re placing a rounded rectangle for the background of the contact form. Using the Rounded Rectangle tool – create a rectangle, center between 6 columns in the grid. Add a drop shadow and stroke effect as shown below:

Create a new layer and make 3 rectangles inside the rounded rectangle we’ve just created. These will act as the form fields. Note that these are just as markers which will not really be used in the output. We’re using real form fields in the code. Fill these rectangles with #ffffff using the paint bucket tool.

What’s a contact form without a pretty submit button? Using the rounded rectangle tool – create a button and add an inner shadow (66 percent opacity) and a 1px inner stroke – #85827e. Add the text “Submit” on top of this button using “Rockwell” at 14px.

Finally, remember I said the footer should have the same detail as the other parts of the page? We’re going to add a nice glow in the background which will highlight our large text and the contact form. Select the footer background with the selection tool. Next, pick a soft round brush at 500 pixels, select color #ffffff and decrease the opacity of the brush to 10 percent. Center the brush horizontally and halfway above the footer – click once and Voila – instant glow in the background!

And there you have it. We’ve just created a full page mockup in Photoshop. Next will be coding the HMTL and CSS – so stay tuned!

You can download the .psd from this link

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.

It looks like the only thing it has in common with Kubrick is the rounded corners and the slim page width of 728 pixels. Anywho, you can take Kubrick on Crack! and install it in your WordPress site for free.

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.

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).

The project I envisioned was a full website turn around. The company was still using static pages with old style tables and in line styling. My proposal was to completely overhaul their site into WordPress.

As you can see from above I planned on using WordPress as a CMS. A large section that will house a jQuery Content Slider or another form of slideshow that leads viewers to try out the demo. Directly below are a set of three column containers which will pull posts from different categories. A slightly different approach for the footer – which contains six mini columns as the main sitemap.

Feel free to download this fully layered and grouped PSD file from this link. Hopefully you can find a good use for the template. If one of you should become successful in taking some company away from static pages – then I’m happy.