Hope everyone had a great Thanksgiving! Hope you aren’t too stuffed yet, ’cause we have huge backgrounds on this week’s Friday Focus.

Designs of the Week

One of the questions that will be asked when dealing with large backgrounds is “how much is too much”? The main content here seems to drown into the illustrations and you have to wonder if this was done on purpose. A lot of other things throw your eyes all over the place. The designer certainly took risks in this instance, and you’ll probably either love it or hate it.

Now for a more realistic look. My only gripe here is that the foreground is almost disconnected from the background, the complete opposite of the previous website. Almost—the designer still made transparent borders to ease the transition.

This looks like the best execution so far, but now the design is abstract. Dark, but still striking. The fades and glows reinforce the mysterious, gothic look.

And back to another illustrated look. I’d say this one’s another “just right”. It’s okay for the text boxes to look like they’re floating especially since the background is an aerial view of a community. Makes sense. Rounded corners and outlines add to the relaxed, fun feel.

Social Media Weekly

Programming – 15 Must-Have Bookmarklets For Web Designers And Developers

Programming – Essential free apps for your web design toolkit

As you've probably noticed, there's a bunch of funky things you can do with WordPress 2.7, due any day now. Previously, we've played with the new sticky post functionality, and then there's the category styling features added with the new template tag for post CSS classes. Let's dive a little deeper into the latter, adding an asides functionality without actually hacking the loop or using a plugin.

Requirements and Preparations

For this to work, you need the beta version of WordPress 2.7 (the third one's the latest when I'm writing this, but do check the dev blog to make sure). You also need to use the post_class() template tag to spit out the classes in your post's div tag, so make sure your theme is up to date with that. It is detailed in this post. You could always use the default theme with the 2.7 beta as well, and then easily add this functionality to your own theme when the full version is out.

As for preparations, you'll need to decide on what category should be your asides one. In my Notes Blog Core theme, I call it "asides", plain and simple. It also has "asides" as its slug, so that means that post_class() will add the CSS class category-asides to the post div, as detailed in the previous post. You can call your asides category whatever you want, just swap out the slug part in the code.

The Code

Right, so lets get this baby on the road! First of all, this is how we want it to look:

You can see this baby in action over at my Notes Blog theme site, where I'll be offering the Core version of the theme for free at a later date. I've pulled this code snippet from the Notes Blog Core theme, so this is actually exactly what I'm doing in my style.css file right now:

So what's happening here? It's pretty straight forward. Just disregard the #content if you will, that's the div container with the content stuff. You probably have one in your theme as well.

The .category-asides is the actual class of course. This is where we tell it how to behave. You can see the border, some padding and margins, things like that. The rest tells us how h2 tags should work and so on.

And that's it, basically!

How to Add This to Your Theme

Naturally, you don't want my Notes Blog Core styling on the asides your theme, unless it really fits. Luckily, it's very easy to add this to your theme. Just add the .category-X class, where X is the slug of the category you want to be the asides one, and style it accordingly. In other words, if you want to use the category called "asides", just add:

...and take it from there.

Feel free to borrow ideas, elements, or whatnot from the asides code demoed above.

Focus is one of the most important aspects of design---you need to tell the audience which elements are important and which aren't. This week's featured sites execute this idea well, and even take it to the next level. See if these designs don't grab your attention at all!

Designs of the Week

This layout makes you feel you're really interacting with an application as opposed to a webpage. And it doesn't hurt that Apple's design touches are at play here: colorful icon art reinforced by shades of gray on everything else. Plus transparency, gradients, and rounded corners, of course!

Achieve focus by making the foreground far more pronounced than the background. And if you have few elements on your page, big, shiny icons are great for the most important links.

This looks completely stunning. Great lighting, great detail. Almost wallpaper-worthy, I'd say!

You can get away with no illustrations at all and just use good type. Then try an unusual combination like fuchsia and wood. Simple but very catchy!

Or you could play with both type and complementary graphics. Here's a good hint for "coming soon" pages: put all your keywords front and center to keep your guests from guessing. That'll increase your chances of returning visits.

Social Media Weekly

Design - Large Website Backgrounds Do’s and Don’ts
A great design trend that should not be abused!

Programming - How to SEO Flash
Flash and SEO don't mix, right? They can!

With upcoming WordPress 2.7, just released in beta 3 as I'm writing this, styling your categories gets even easier. Previously, you more or less had to do a conditional tag thing and echo a specific class to get some custom styling, but no more.

Enter this little line of code:

The only thing it does, when it's inserted in your post's div tag, is write class="post". In other words, you replace your class="post" with post_class().

Why? Well, this little thing adds some other nice classes to each post as well. We've already discussed the sticky post class, sticky, in a previous article here on Devlounge. Besides that one, it adds the following classes:

• category-X where X is the post's category, one for each category, so it could be category-games and More →

Our featured sites this week all have fresh and brilliant navigation techniques you'll surely envy. Be sure to click on the links to see them in action. Ready to be inspired with this week's Friday Focus?

Designs of the Week

You might not notice how disciplined it looks at first glance, so look more closely at how everything revolves around the grid. No fancy graphics here, because it's the variation of lines (light, dark, solid, broken, handwritten) that bring personality and texture to the site.

The best designs tell great stories. This site comes to life as though its speaking to you and telling a story. It takes your hand and brings you to different places, and you'll certainly come back for more.

To tell a good story, "show, don't tell". Now apply that concept a website with the help of illustrations or in this case, photographs. I love you can still see them as the text sections expand below, acting as header and background to the whole design.

Social Media Weekly

Design - Design Top 10 - The monthly pick of online design
This site also has excellent navigation, but more importantly, it's another great resource to keep your eyes on every month.

Design - 7 Usability Mistakes Usability Experts Commit
In commemoration of world usability day (November 13), try to follow the tips from this article to improve the overall experience websites provide.

In part two of this series, you got into CCK and views. This time around, you will be theming the views and adding a little spit and polish to pretty it up.

Views Templates

Views has a neat feature that allows you to create a simple template file to coerce the ugly default output of views into something more presentable. If you created the CCK fields and Views just like I did in part two you can copy and paste the following code into the appropriate files.

Headline Template

Paste this code into a file called views-view-fields--Headline--block.tpl.php and copy it to your theme folder. The headline view will now output the image followed by the title and teaser. This convoluted file name is actually specified in Views itself by clicking the Information link for the selected View. I simply looked for the file name that most closely matched what I wanted to do.

Features Template

This is the same as the Headline but this time you need to name the file views-view-fields--Features--block.tpl.php.You should now have a fully functioning Headline and Features list.

Categories Template

This get a little complicated for the categories. In this case, you will need to paste some code into your page-front.tpl.php file. Here is the code.

It simply loops over each Term for whatever Vocabulary you specify. During the loop, Drupal makes a call to the posts_by_category View, which returns the five most recent post titles formatted as links.

Just find a good spot for it in page-front.tpl.php file and specify the commented parameters. That is it.

Styles

The last thing you need to do is a few styles to the stylesheet to make everything look nice and tidy. See the attached files for a full example.

Wrap up

It does not take much to style your views if you know file to create. In this case, just a few lines of code did the trick. With a little CCK and Views you have managed to create a dynamic Magazine-style layout for Drupal that is robust and structured.

Download the Framework theme with styles and View templates

It's creative use of vegetation this week on Friday Focus. Are you ready to grow a green thumb?

Designs of the Week

You have to see the whole length of this website to see all the neat touches in the design. Don't you just love how the portfolio items are embedded on the grass?

I like that the choice of flowers here are pretty specific. Some of them look very realistic, considering they're just illustrations. The use of sparkly animations with Flash is a subtle but attractive detail.

The floral decorations on this site are a bit more abstract, but I like that they're used in moderation. In fact, it's the menu that grabs your attention on the page, enticing you explore more.

See how the green vines and pink roses make the large text look softer and a lot more interesting? I would have wanted a bit more variation in color for the rest of the website, but the header makes up for it.

Social Media Weekly

Design - 12 Most Inspirational Political Websites
The US elections are over, and here's a great way to close one of the most significant political races in history.

Programming - 10 Most Sought-after Skills in Web Development
Do you have what it takes to be an in-demand web developer?

Sticky posts are a new feature in WordPress 2.7. Basically, it means that you can mark a post as sticky, which means it'll stay at the top of your post listing until another sticky one shuffles it down. More or less like sticky posts on forums.

This has been possible previously as well, with a plugin by Lester Chan.

WordPress 2.7 is out in beta, and isn't due until later this month (late, most likely), but you might want to get your themes ready for this new functionality. You do have to change your post class output to post_class, which I detailed here.

This is what you need to add to your style.css:

That's right, it is just one simple little class, .sticky, for you to add to your stylesheet. The code above will just give the sticky post a grey background color, so how about we do something more funky?

That would give us a box with large text, a grey border in the top and bottom, and a light grey background, with 15 pixels padding. Naturally, you'd have to style your sticky posts for your design, this is just to give you something to think about to highlight your headlining posts in the future.

Remember, this won't work with versions of WordPress prior to 2.7!

In part one of this three part series we laid the foundation for a magazine-style home page in Drupal. This week we are going to get our hands dirty by digging into CCK and Views. Get out your pocket protectors, this one is a little geeky!

Vocabulary settings

The first thing you will need to do is make sure that the Story content type has the two vocabularies that we created in part one. Go to Content management » Taxonomy and click on the edit vocabulary link next to Categories. Select the Story checkbox under content types. Next, check the Multiple Select checkbox below Settings. You can clear the other checkboxes in this section. Now hit save and move on to the Tags vocabulary.

The Tags vocabulary also needs to be available to the Story content type. Under settings, select both the Tags and Multiple Select checkboxes. This will allow us to free-tag a Story.

Extending Content Types with CCK

In order to take advantage of the ImageCache module you will need to extend the Story content type with CCK. At the very least, you will need to add an Image type field. If you ever use Creative Commons licensed photography you will want to credit the Author and Source. It can be useful to add these as fields so that you do not have to remember a special format every time.

Add the following fields to the Story content type by going to Content Management » Content Types and then clicking the Manage Fields link next to Story.

Toward the bottom of the page, you will see several input boxes. In the New Field section, enter the settings in the table above. Views will automatically prefix the field name with field_, so you do not need to include that part.

After you hit save there are, only two things that you need to configure on the next page. If you prefer, you can configure the Path Settings to put uploaded images into a subdirectory. I like to get clever here and put my images in a directory called—you guessed it—images! The other optional setting is the ALT text. Be nice to your disabled users and select this box. Finally, save the field settings.

Add the Image Author and Image Source fields using the data in the table. The options are up to you. I like to limit the amount of text that can go into one text box to 255 characters. That is all that you need to configure for Content Types. Next up is the hard part, creating the views that will display the content on your homepage.

Creating the views

Views seem to be one of the most powerful and yet most confusing modules there are. The overhauled Views module looks good but I found it startling at first. There is a LOT that you can do with it.

If you are feeling lazy you can just import the views by copying the export code provided and then pasting into the form under Site Building » Views » Import. Imports do not usually work well for me, so you are on your own.

Warming up with the headline view

The headline view will display a single post with a nice big image. This is for your most important stories only. Go to Site Building » Views » Add. The View name should be "Headline" and the description can be anything you would like. I used "Display a single post teaser and medium size image in the Headline category." A tag is optional but may help you find your views quicker if you have a lot of them. Finally, select the Node View type and press the Next button.

On the next page, you will begin to configure the view settings by selecting the Block display type from the drop down. Next, click the Add Display button. Views will create a new display type that uses the default settings. You will only need to configure the Basic settings, Fields and Filters for the headline view.

You can change each of these settings by clicking the setting's link or gear icon. Views will display the configuration options below the settings. The tricky thing about the configuration options is that you have to look for the Override button on the right side of the editing area. Because you did not set any default values, you will usually want to override the setting by clicking this button. Remember to click the Save button or your changes will be lost.

Configure the Headline view with the following settings:

Basic settings

• Name: Headline
• Title: None
• Style: Unformatted
• Row style: Fields
• Use AJAX: No
• Use pager: No
• Items to display: 1
• More link: No
• Distinct: No
• Access: Unrestricted
• Exposed form in block: No
• Header: None
• Footer: None
• Empty text: None
• Theme: Information

To set the Fields you will need to click the little + icon beside the Fields header text. You can use the drop down to display only relevant Fields but I have found that it is just as easy to scroll through the list. You will need to select the following fields and then click Add.

Fields

Filters

Remember to click the Save button!

The Features View

The features view displays three excerpts each with their own thumbnail image. You will configure it to show the three most recent stories marked as a Feature.
Basic settings

Basic settings

• Name: Block
• Title: Features
• Style: List
• Row style: Fields
• Use AJAX: No
• Use pager: No
• Items to display: 3
• More link: No
• Distinct: No
• Access: Unrestricted
• Exposed form in block: No
• Header: None
• Footer: None
• Empty text: None
• Theme: Information

Fields

Sort criteria

Filters

Remember to click Save!

Posts by Category

This view is a little tricky. It will display the last five posts for each category. The difference is that you will not add the view to a region. Instead, you will hard-code the calls to it in the front-page template file. Add a new view called posts_by_category with a display type of Node. You can just use the default display type instead of creating a block.

Basic settings

• Name: Defaults
• Title: None
• Style: List
• Row style: Fields
• Use AJAX: No
• Use pager: No
• Items to display: 5
• More link: No
• Distinct: No
• Access: Unrestricted
• Exposed form in block: No
• Header: None
• Footer: None
• Empty text: None
• Theme: Information

Arguments

Fields

Filters

Smooth Sailing

If you made it this far, you have done well. The good news is that was the hardest and most tedious part. It is smooth sailing from here on out. Next week we will wrap up the series by themeing the views and adding some CSS to spruce things up.

View Import Files

• Headline View
• Features View
• Posts By Category View