hv-designs

Wordpress Layout #5

Richard Carpenter — Thu, 02 Jul 2009 19:15:04 +0000

Hello everybody, welcome to tutorial 212. In this tutorial we’ll be creating a wordpress mockup layout with some 3D elements to it.

Setting Up Our Canvas

Wordpress layouts tend to be quite big in length so we’ll start of with a canvas size of 950 x 1520 pixels.

Using the paint bucket tool fill your background layer with the color #d9d9d9.

Creating Our Content Area

Select the rounded rectangle tool with a radius of 30pixels.

On a new layer draw out a rectangle a little bit smaller than the actual canvas.

Add these layer styles to your rounded rectangle.

Creating The Header

Select the rectangular marquee tool, then make a selection across the top half of your rounded rectangle. The rectangle should be about 123 pixels in height and wider than your rounded rectangle.

Fill the selection with any color than add these layer styles.

You should have something like this.

On the left and right sides where the header is bigger than the content area, using the polygonal lasso tool make a selection like the image below.

Fill the selection on a new layer underneath your big rounded rectangle using any color. Then add these layer styles.

Once you’ve done both corners you should have something like this.

Inside your rectangle that you just created add your wordpress theme title and slogan. Above the header add a simple text navigation, to represent a hover state add a blue rounded rectangle to one of the links.

Creating A Wordpress Post

Using the rectangular marquee tool make a selection underneath your header, the selection should overlap the content area by the same amount of pixels as the header did. The selection should end just past the middle of the content area leaving enough space for a sidebar.

Fill the selection with any color than add these layer styles.

You should have something like this.

Using the polygonal lasso tool add the little corner peice on the left side where the rectangle hangs over the content area using the same method and layer styles as the corner piece on the header.

In the rectangle you just created add your desired wordpress dummy title. Underneath your rectangle add your wordpress dummy text.

Directly underneath the post dummy text add a seperator. The seperator is done by creating two 1 pixel lines on top of each other, the bottom line should always be white or the lighest shade of a color, the dark color should always be on top. This gives the line and indented look.

Underneath your line add some post meta data, along with some spliffy icons from “wefunction”.

Using the steps and methods above create two more example wordpress posts. You should have something like this.

After the very last post create a couple of white squares with a subtle stroke added to them for a simple pagination.

Creating The Sidebar

Before we create our sidebar lets create a subtle divider to seperate our sidebar from our main content. Using the rectangular marquee tool create two 1 pixel lines just like we did our wordpress posts only this time create them vertically instead of horizontally.

Stretch the divider all the way down to where the content ends. In the same way we created our wordpress post title area create exactly the same for our sidebar title area. This time add the corner peice to the right.

Using a combination of a seperators and a small icons from “wefunction” create a simple list underneath the first sidebar title.

Build up your sidebar with your sidebar items, ive just added a simple sponsors section to finish mine off.

Creating The Footer

On this layout were going to create a fairly big footer, duplicate your header and the left and right triangle peices then drag them to the bottom. Press CTRL + T and resize the height of the footer, adjust the corner peices to match.

In the space thats left directly underneath the footer add your copyright info. Actually on the footer add a couple of simple lists, to display dummy widgets like recent comments, recent posts etc..

You should now have completed the tutorial and have something like this.

Thats it all done, hope you enjoyed this tutorial. Dont forget to subscribe via rss and twitter.

PSD Giveaway: Winners

Richard Carpenter — Tue, 30 Jun 2009 15:37:56 +0000

Thanks to everybody who took part in subscribing and following us. Your help and support is much appreciated, listed below are the winners.

Congratulations to, in no particular order….

Orion

Next Memory

Luis Lopez

Marlon Ramos

J

Kusgara

MC Billy

Eric

Andrew

Sanrazak

ALL E-mails have been sent out so be sure to check your e-mail address.

Many Thanks
Regards
HV-Designs

Impressive Footers: 20 Examples

Richard Carpenter — Tue, 30 Jun 2009 06:32:54 +0000

Most people would agree that footers on websites arn’t that important, after all there displayed at the bottom of the webpage and in more cases than none there the least viewed part of the webpage.

Just because the footer doesnt get alot attention theres no need to make it dull and boring, the websites showcased below will give you some insight to how it should be done.

Colégio Bela Alvorada

YoDiv

Pinjata

Jiri Tvdek

Kulturbanause

Just Pixel

Branded 07

Carbonica

Dean Oakley

Twither

Ligne 13

Biowind

Divvoted

Pojeta

Design Bombs

Sohtanaka

The Rissington Podcast

Straw Poll

Launch Mind

David Hellmann

If you think you might have a good example of an impressive footer than dont hestitate to stick it in the comments below. Thank You.

Widgetizing Wordpress

Richard Carpenter — Sun, 28 Jun 2009 07:56:31 +0000

Widgetizing your wordpress theme sounds harder than it actually is. In this tutorial il show you how.

What Are Wordpress Widgets

WordPress Widgets (WPW) is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as “widgets”) without having to change any code.

Taken from the wordpress codex

Widget Friendly HTML

When designing your wordpress theme theres a certain way you should concider coding your sidebar or part of the sidebar you want to widgetize. The best way is to use a simple list markup. Take the example below for instance.


Widget Title

Item #1
Item #1
Item #1
Item #1
Item #1

In the code above we have a simple class of “sidebar-widget” inside our class we have a simple unordered list and our list items. This is an ideal markup for a wordpress widget.

Registering Our Sidebar

Now we have our ideal widget ready HTML code we’ve go to register our sidebar in our “functions.php” file. Open up your file in your code editor then add the code below.

 'Right Sidebar',
'before_widget' => '',
'after_widget' => '
',
'before_title' => '',
'after_title' => '',
));
}
?>

Let me explain the code above in abit more detail. There are 5 parameters you need to set, the first one is “name” which will be the name of your widget area, when you add the name it will appear in the widget pallette.

The second parameter is “before_widget” in this part you need to put the start of your widget, which in our case is our div class “sidebar-widget”. The third parameter is “after_widget” this will be the end of our widget, in the space we need to put our ending div.

The last two parameters we need to input are “before_title” and “after_title”, if you look in our simple HTML list we have a widget title wrapped in a “H3″ tag.

Adding The Widget Into The Widget Area

You can have a widget any where you see fit, but for the widget to work you first need to add a couple lines of PHP into the area of your theme where you want the widgets to appear. The code looks like this.

Notice in the code above we have our “right sidebar name” if you were to have more than one widget area on your theme you can easily define what goes in what widget area and where. To add a second widget area you need add another snippet of widget code like this.

 'Left Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Right Sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}
?>

Once you’ve inserted your widget code into the area you want it, upload your files and give it a whirl, just dont forget to style your HTML in your stylesheet. Thats it all done, any questions dont hesitate to ask.

Meta Tags

Richard Carpenter — Fri, 26 Jun 2009 19:33:15 +0000

What are meta tags??? - Answer - Meta tags are snippets of informational code located in the section of your HTML pages.

There are many “meta tags” you can use, but what do they all do and mean??? Here are 12 meta tags and wether to use them or not.