I’ve been thinking to put a search box on my site lately, and while doodling in Photoshop for some design I finally had something. So while I am still waiting to decide on where on my site I should put it – I wanted to show you how I created it in detailed steps.

Again, all of my tutorials are fairly easy to do. No special technique has been used, if you got lost on the steps please do ask me in the comments below.

Final Result

Advertisement

Let’s begin!

Open your canvas, use width 400px and height 200px.

Grab your Rounded Rectangle Tool (U) and set the radius to 5px. Draw the same shape like above.

In Blending Options > Drop Shadow set your foreground to #818181 and Distance 1px and Size 5px.

Select Inner Glow and set the Foreground to #FFFFF and change the size to 1px.

On Gradient Overlay, set this colors.

Follow the Gradient Settings above.

In Stroke, change the color to #b1b1b1 and set the size to 1px, Opacity to 100%.

You should have the same box like the one above.

We will create another one, this will be our input field (when doing HTML). Same as the first step, Rounded Rectangle Tool – radius is set to 5px.

On Drop Shadow, change the Foreground to #FFFFF and Distance and Size to 2px.

Now select Inner Shadow, Foreground color #b6b6b6 and Angle to 90, Distance 1px and Size to 5px.

Inner Glow, Foreground color #FFFFF change the Size to 1px and hit OK.

Now select Stroke and set the size to 1px. Change your color to #9d9d9d.

Here is our form field, it’s coming out pretty well.

Now, we will create the search button. Create a new layer and select Marquee Tool (M), draw a square shape like the one above. Fill it with #5d8f27.

Now, while still highlighting the search button layer click the input field layer and press CTRL + SHIFT + I and hit delete. Result should be the same above.

On search button layer, Blending Options > Drop Shadow set the Distance to 1px, Size 2px.

In Gradient > follow the color settings above and hit OK.

To create a left border on the button, we will add a line. On Single Row Marquee Tool (M) and fill in the color with #76a934.

Here is our search button, I also added some text. I use Bebas 16pt #5b8c26.

Next is to create some detail to our text. Drop Shadow > set the color to #fffff and Distance and Size to 1px also angle to 90.

In Inner Shadow, Foreground is #538224 and Distance, Size 1px.

Here is the text, someone is looking for a job! Font is Bebas 16pt #6f6f6f.

On text that we just put in, select Blending Options > Drop Shadow and follow the settings above.

Inner Shadow use #00000, and Distance, Size 1px.

Here it is! Almost done, now to add some background patterns so it’ll look good.

Ta-da! Here it is, finally. As you’ve noticed we didn’t use any new or advance technique to create this search bar UI. What we used a lot is blending options for layers and a few gradients which gives us a greater detail. You can download the PSD here for free.

The question now is, can you turn this into a working HTML / CSS search bar form? So I can finally use it on my website

Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

• How to Create a Clean Login Form in Photoshop
• How to Create your Own Chat Window UI in Photoshop
• How to Create a Blog Layout in Photoshop

New Year is really close now and here at Tripwire Magazine we decided to prepare a little treat for you to help you create you own unique greeting cards. So we decided to offer a New Year’s Greeting Card Cover Design and detailed tutorial made in Adobe Illustrator. We are also giving away a free vector along with the tutorial on how to make this Season’s Greetings card. We hope you will enjoy this tutorial and be useful for you this coming year. Please drop a comment if you have any feedback for us and share this post with your friends and colleagues!

Advertisement

1. Let’s create a black background using Rectangle Tool. Under Object Menu, choose “Create Gradient Mesh” and set 4 and 6 for rows and column fields respectively. Choose Flat option for Appearance. Using the Direct Selection Tool, let’s drag the points lower than its original position as shown in the illustration below.
2. Select all the points lined in the middle of our grid. Hit Shift Key while doing so. Fill it with #09274C color.
3. Create a new background on top of our first background using Rectangle Tool. Fill it with “Radial” Gradient (R=237 G=28 B=36 and R=0 G=0 B=0) and “Overlay” under the Transparency window, set with 31% Opacity.
4. Grab the Pen Tool and draw an arc shape as shown in the illustration below.
5. Fill it with Radial Gradient with white and black background on both sides. Slightly move the white slider on the right.
6. Draw a circle using the Ellipse Tool at the top of our drawn arc.  Apply “Radial” Gradient. Group the circle and arc together.
7. Make several copies and arrange it as shown in the illustration below by rotating each individual group.
8. Draw a big circle in the middle. Group them all together.
9. Let’s now drag it to our gradient mesh background. Set the transparency “Color Dodge”.
10. Now for the “fun part”. We will start creating our own brush. Draw again another small circle using the Ellipse Tool. Drag it in the “brush” panel (Shortcut key is “F5”). A “New Brush” pop-up will appear, choose the “scatter brush” from the options given. Click Ok.
11. Choose the Ellipse tool and draw a circle around our first drawing.
12. Double click on our newly created brush. A “Scatter Brush Options” dialogue box will appear. Choose “Path” from the “Rotation Relative to:” options. Choose Random for “Size, Spacing, and Scatter” as well. Move the slider from the bar of each option to customize the size, spacing and distance between our circle brushes. Tick on the Preview checkbox to see what our customization would look like. Click OK when done, then Apply to Stokes.
13. Go to Object, and “Expand Appearance”. Apply “Radial” Gradient and Color Dodge in the transparency window.
14. Select our first group and the circle brush. Group them together.
15. Again, we will create a new brush. Grab the Pen Tool and start drawing a shape similar to the below illustration.
16. Add a circle at the top. Unite (using the Pathfinder) the two created shape.
17. Drag it in the “brush” panel (Shortcut key is “F5”). A “New Brush” pop-up will appear, choose the “scatter brush” from the options given.
18. Create a new circle using the ellipse tool. Double click on our newly created brush. A “Scatter Brush Options” dialogue box will appear again. Choose “Path” from the “Rotation Relative to:” option. Choose Random for “Size, Spacing, and Scatter” as well. Move the slider from those choices to customize the size, spacing and distance between our circle brushes. Tick on the Preview checkbox to see what our customization would look like. Click OK when done, then Apply to Stokes. Go to Object, Expand Appearance. Apply Radial Gradient and Color Dodge.
19. Drag it to our gradient mesh background in the center of our fireworks. Resize.
20. Add more light and sparkles by copying our previous design. Paste, resize and rotate to give desirable results.
21. This should finish our fireworks blast. Let us now create our firework’s tail. Start by using the Pen Tool. Draw a wavy vertical line
22. Double click again our custom circle brush and play with the options value. I set my size 10% to make the circles smaller. Drag it below our fireworks. Go to Object, Expand Appearance. Apply Radial Gradient and Color Dodge.
23. Repeat the same step to give us a starry sky effect. Just remember to repeat our scatter brush effects, radial gradient and color dodge to give us that starry night spark.
24. You can also add more fireworks to complete our New Year Fireworks night. Add a season’s greetings text to complete our greeting card.

Again, we would like to greet you a Happy and Prosperous New Year!

Download Vector Here => Free Season’s Greetings Design Vector

Author : Melanie Reyes

Melanie Reyes is an aspiring graphic designer who loves to learn new stuff. She is currently learning adobe illustrator, offering her finished vector work free for the public to download. Melanie runs designermelanie.com, a site dedicated to free vector downloads, tutorials and of course, her online portfolio.

• Illustrator Tutorial and Free Ribbon and Bow Vector
• 160+ Amazing Web Design Tutorial Collection
• Copper Texture Photoshop Tutorial

Recently I was talking to a friend on Facebook, during the conversation I noticed the chat window UI and though to my self “what if I design my own chat window”? Well that’s the inspiration for today’s tutorial, we will create our very own chat window in Photoshop. Although the techniques that we will use are basic, I do hope that you’ll learn something here.

Advertisement

This tutorial is aimed for newbies, but if you’re a rockstar in Photoshop and you want to share a few tricks of your own, feel free to follow.

Final Product

Let’s Begin

Open your Photoshop and set the size to 450px width, 300px height.

Now, fill our canvas using Paint Bucket Tool (G) and select the color #e9e8e8.

Name this layer as Body, grab your Rounded Rectangular Tool (U), set your radius to 3px and draw a square like shape. Now we will create another shape, hold Shift and draw another rectangular shape. This time radius was set to 0.

In Body layer, right click the layer and select Blending Options > Drop Shadow and set your color to #bab6b6.

Now on Gradient Overlay, follow the settings above.

In Gradient Overlay Settings, make sure that angle is set to 90 and Opacity is at 100%.

Next is Stroke, set the Size to 1px, Opacity to 100% and follow the given color hex.

You should have something like this one, notice the shadow and stoke that we did.

Create a new layer and name it header, grab your Marquee Tool (M) and draw the shape same as above. Fill it with #2998ed.

While still selecting the header layer, hold CTRL + Click on the body layer and hit CTRL +Shift + I and delete. The excess of the header will be removed. You should have the same header layer as the one above.

On header layer, Right Click > Blending Options and select Inner Shadow, set your angle to 90 and Size is 2.

Now on Gradient Overlay, set this colors and hit OK.

In Stroke, set the size to 1px and use the color #2576b4 hit Ok.

Here is our header layer should look like, now we will add some text.

Add your name on the layer, we used Arial Regular 13pt color #FFFFFF.

We will add some detail to our text to make it “POP”. In Blending Options > Drop Shadow set Distance and Size to 1px, Change the Blend More to Normal and Angle to 90.

After that we will create the exit button on the right side, just type in the “x” character on the right side same as above.

In Blending Options > Drop Shadow set the Distance to 1px and Opacity to 38%.

Now on Inner Shadow, set your Distance and Size to 1px and angle is 90.

Our header should look like this. Now let’s move on to the chat conversation!

Bring in some photo (we will use mine) and set the size 40px by 40px.

On image layer, go to Blending Options and set Drop Shadow Distance and Size to 5px, angle 90.

In stroke, set the size to 1px and color #FFFFFF

After that we will add some text, for the name text I used Arial Regular 13pt #1e6daa. For the conversation text Arial Regular 13pt #8e8e8f, for the date Arial Regular 8pt #a2a2a2.

We will just replicate the conversation, and add another image to make it more realistic.

Between those conversation text there will be a line, grab Single Row Marquee Tool (M) and draw the line same as above.

Use the color #f3f3f3 for the lines and set the opacity to 82%, delete the excess on the both sides.

Now we will work on the icons, on Custom Shape Tool (U) select the speech balloons shape (grab here) and draw one facing left. Use the color #b5b5b5.

Duplicate the first one, and press CTRL + T and select Flip Horizontal. In Blending Options > Stroke and set the color to #FFFFF and size to 1px.

I added another name text at the bottom of the chat window, on the right part we will put a status icon name this one status. Select Ellipse Tool (U) and hold Shift, draw a small circle.

Blending Options > Gradient Overlay follow the color settings above.

In Stroke, set your size to 1px and use the color #83a659.

Final Product

And we are done! I hope you learned a few tricks by following this tutorial, some of the things that you should take note is the detail on the header, shadow on the body and of course our clean chat window UI.

If you came up with different versions of your own, feel free to post your work in the comments below. I want to see what you guys have! Also if you have questions or stuck on some of the steps, feel free to ask in the comments.

>> You can download the layerd PSD here showing how I structured it <<

• How to Create a Seach Bar in Photoshop
• How to Create a Clean Login Form in Photoshop
• How to Create a Blog Layout in Photoshop

For my first tutorial here at TripWire Magazine, I decided to create a free ribbon and bow vector made in Adobe Illustrator. It is great for use in a Christmas-, birthday- well any type of gift / giveaway related design. Christmas season is coming fast now making this kind of ribbon bow vector really useful and relevant. I’m going to show you in detailed steps how you can create this kind of design building blocks in Illustrator yourself. However since Christmas is almost here we are also giving away the Illustrator Vector files you can use directly in your project as a freebie.

Advertisement

1. Let’s open a new document in Adobe Illustrator. We will start by drawing the basic shape of the left bow of our ribbon using the Pen Tool.
2. Fill the drawn shape with a linear gradient (no stroke) using the colors #be1e2d and #f15a29.
3. It would be great to give our ribbon a design on its lace so we will go on ahead and use the Pen Tool to draw the arc shape on our ribbon as shown below. Color it yellow. I use a linear gradient using the colors #fcb040  and  #fff200.
4. Let’s grab our pen tool again to draw the inner lace of our ribbon. Color it with #d91b5c and 3c2313, linear gradient. Arrange, send it to back.
5. Then with our pencil tool, draw our ribbon’s highlights freely and fill it with # f1592a (opacity set to 12%), # f7941e (opacity set to 100%), # ed1c24 (opacity set to 41%). For overall transparency, set its opacity to 25%.
6. Now that our left bow is finished, it is easier if we can group the elements together. We do it by selecting all and click the right mouse button. Choose Group. We also want to create a duplicate copy of it; again select all, copy and paste, right click on the duplicate copy then choose “transform” from the popup menu, “reflect”, then choose vertical.
7. Grab our pen tool again and start drawing the center knot. Fill it with linear gradient same color as our bow earlier. You can also use the eyedropper tool and pick on the bow’s color to copy its color properties automatically.  
8. Draw the two arc bar line inside the knot to give our knot a design same with our bow. Give it a linear gradient using the colors #fcb040  and  #fff200.
9. Now we will draw our ribbon’s tail. Use the Pen tool and draw the shape as shown below. Use the eye dropper tool to copy the same color that we use on our bow. However, use the gradient tool to get the right angle for the lighting and shadow of our ribbon’s tail. Adjust our gradient slider accordingly.
10. For the tail design, I copy the ribbons tail twice and resized it smaller than the original. I also adjusted the points using the direct selection tool.
11. Next, I selected both the top tail (smallest) and the middle tail and hit Pathfinder’s Minus Front.  I use a linear gradient using the colors #fcb040 and #fff200 again. I selected both tails, duplicate and transform it vertically.  Both should be arrange and send to the back of our ribbon’s bow and knot.
12. For a more complicated ribbon, we can choose the left portion of our bow then duplicate it twice or thrice. Rotate them to form a circle around our knot. You can resize it and play with it to get more result.

Hope you enjoyed my tutorial!

Author : Melanie Reyes

Melanie Reyes is an aspiring graphic designer who loves to learn new stuff. She is currently learning adobe illustrator, offering her finished vector work free for the public to download. Melanie runs designermelanie.com, a site dedicated to free vector downloads, tutorials and of course, her online portfolio.

• 10 Useful jQuery Techniques to Improve Your Code
• 65+ InDesign Tutorial Roundup for Graphic Designers
• 50 Fresh And Amazing Free Photoshop Tutorial Roundup

Designing websites is a creative process and it isn’t easy at all to get started if your don’t have the right ideas, inspiration and tools available. There are several different ways you can approach the design process and depending on what type of design task you’re facing some have pros and some have cons. If you’re designing a lot of pages for a complex application for a customer that requires to approve the usability and easy of use early an ongoing it may be a good idea to start with a mock-up (simple html page hierarchy with minimal design to start with). If on the other hand you’re designing a blog theme with a very sophisticated layout containing many textures and images it may be much better to start the design process in an application like Photoshop. This is the approach this article covers end to end by presenting you with more than 160 high quality Web Design Tutorial showcase that guides you step by step in building up a web interface all the way from scratch. The article will take some time to download because of the many images!

• Web development toturials
• Business Websites Designs
• Blog Designs
• Portfolio Designs
• Grunge and Texture Designs
• Photoshop Tutorials for designing Website Elements

Actually I don’t think that most people will have to be attend design courses or Photoshop training any more to learn the basics; most people can be self-taught thanks to the many generous experts willing to share their tricks in free online tutorials. Instead of designing from ground up it is also an option to use e.g. cute tumblr themes or some of the best wordpress themes. Both publishing platforms are easy to use, free and very popular.

Advertisement

The Web Design Tutorial Collection

Web development tutorials

Object-Oriented Programming in PHP

This web design tutorial helps you understand object oriented programming – being well aware that it is hard!

This is a set massive video series separated into three parts. If you want to dig into Object Oriented Programming, and, not only understand the concepts, but also understand WHEN and HOW you would actually use these techniques – then check this out.

 CSS: Noob to Ninja

This training video series will take you from being an absolute CSS “noob,” all the way up to ninja-status, capable of wrangling even the most obnoxious of browsers into place. The web design tutorial series begins with the basics: the syntax, properties, etc. However, each new video expands upon the previous, as you work your way up and improve your skills.

If you’re switching over from a graphic design career, or are hoping to finally dig into CSS from scratch, this will be the series for you. And even if you have a modest level of experience and want to take your skills to the next level, learning the latest CSS3 techniques, the latter part of this series will surely quench that thirst!

The Beginner’s Guide to Web Design

Throughout this three-part series, you will learn how to create a website using the latest in web design techniques (HTML5 & CSS3 ).

No previous web design experience is required – you will start at the beginning, learning the basics of HTML and CSS , and working up your skills until we have a functioning website.

How to Build a Newspaper Website with a Grid

In this Premium web design tutorial, you’ll learn how to use a grid to create a simple newspaper-like website from scratch. Along the way, you’ll learn helpful techniques:

• Create the layout of a website from scratch.
• Easy ways to target IE7 and IE6 with only a single character
• Learn how to use the 960 grid system
• Take advantage of new CSS3 to create multiple columns!

How to Code a Gorgeous Watercolor Website

This web design tutorial is a useful guide for both expert and noob designers/developers who wants to learn more about how to convert complex designs to standards-compliant websites. We’ll learn the basics of slicing a PSD design, how to convert it into a 100% functional HTML +CSS+JavaScript mockup, and more.

Professional Web Design

This eBook web design tutorial presents guidelines for professional Web development, including communicating with clients, creating a road map to a successful portfolio, rules for professional networking and tips on designing user interfaces for business Web applications. The book shares expert advice, and it also helps you learn how to respond effectively to design criticism, use storytelling for a better user experience and apply color theory to your professional designs.

Business Websites Designs

Web 2.0 Business Layout

Create a web 2.0 business layout with a lot of empty spaces with this web design tutorial.

Corporate Business Layout

Make a clean corporate style layout for your business with this web design tutorial.

Simple Clean Business Layout

In this web design tutorial, it shows you how to make a really simple clean business layout.

Real Estate Web Site Design

This real estate web design tutorial will take you through a step by step process if you offer web design services to your agents/realtors.

Business PSD Layout

Create a business PSD layout in less than 10 minutes with this web design tutorial.

Trendy Business and Finance Layout

Whether you are a single entrepreneur involved in financing and accounting or a member of school of business, you will definitely love the following layout.

Web Design Layout

Dark Corporate Layout

This website design tutorial will show you how to create a sleek corporate layout and you can use this layout also for any internet business you want.

Clean Business Layout

Create a simple and professional website design, a business-themed website template.

Dark Web Hosting Layout website design tutorial

This web design tutorial will show you how to create a layout for a web hosting company using Adobe Photoshop.

Corporate WordPress Style Layout

In this web design tutorial you will learn how to create a corporate wordpress styled layout.

Business WordPress PSD Layout

Create a nice business WordPress layout which can be used also for a corporate layout.

WordPress Theme Design in Photoshop

This web design tutorial takes you through all the details of designing a Winter Theme Template in Photoshop.

Awesome Software Layout

This web design tutorial will show you how to create your own software PSD layout.

Sleek Professional Looking Business Layout website design tutorial

Create a sleek professional looking business layout with this web design tutorial.

Sleek Business Layout

Make a sleek business layout with this web design tutorial.

Computer Store Web Layout

Web design tutorial on how to create a Web Layout for Computer Store.

Professional Business Layout

Web design tutorial – Create a sleek business layout from scratch.

Creating Business Style Template Design

There are a lot of resources that provide free website templates in Internet. One of them – FreeTemplatesOnline.com Here you can download plenty of free and premium templates. However, if this is a free (or premium) template, somebody else can also download it, and use it for his website. That’s why I’ve made up my mind to make a web design tutorial with the detailed description of creating a template from the very beginning. I hope it allows you to create your own templates in future, or to make some changes in the existing ones.

Arhitecture Bureau Layout

This web design tutorial will show you how to design such a layout from scratch.

Create Real Estate template

How to make nice looking web template for Real Estate site.

Interior Design Layout

Professional Web Template website design tutorial

Design a nice an professional web template in Photoshop

ECommerce Web Layout

In this web design tutorial you will create a spare parts ecommerce layout. It can be used for magento, oscommerce, or any e-commerce cms you want.

Web 20 style blog

Several new techniques are covered in this web design tutorial, such as interesting use of the drop shadow element. We’ll also cover creating a see-through navigation bar, as well as creating our own unique icons for this layout!

Modern Web Layout

This Photoshop tutorial will show you how to create a portfolio Layout.

Web 2.0 Layout

In this web design tutorial, you’ll learn how to create a very fancy “Web 2.0? website layout in Adobe Photoshop using beginners skills.

Clean Web 2.0 Style Design

In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout.

Modern Web 2.0 Layout

This web design tutorial is going to teach you how to create a modern web 2.0 styled web layout from scratch.

Real Estate Web Design

Create a clean and contemporary website design for a real estate related website.

Create Chopper Layout

Creating a Professional Business Layout

Web design tutorial on how to Create a unique business layout using Adobe Photoshop

Business Web Page

How to create a web layout for your Business Website

Cool Photography Layout

How to design a simple blue layout with Photoshop by combining shapes and layer styles.

Clean Business Layout website design tutorial

Dark and Sleek Web Layout

In this Photoshop web design tutorial, you are going to create a beautiful, dark, and sleek website mock-up centered on an elegant navigation menu that lends itself easily to CSS background sprites.

Two Color Website Layout

Web design tutorialon how to create a clean website layout using only a few colors.

iPhone Related Website

This web design tutorial will show you how to create a website for a iPhone business.

Awesome Colorful Layout

This web design tutorial i will show you how to create another web 2.0 layout for your creative portfolio.

Typography Layout

This web design tutorial will show you how create a nice typography layout.
These types of layouts will help you to effectively and accurately transmit the message.

Create a Jewelry Web Template

Learn how to Create a Jewelry Web Template with this very easy to follow tutorial.

Beauty Web Layout

This web design tutorial will show you how to create a layout for a beauty salon in 10 simple steps.

Creative Unusual Layout

This web design tutorial will show you how to manipulate some simple shapes, to obtain a wonderful layout.

Creative Studio Web Page

Dark Style Web Layout

This web design tutorial will show you how to create a sleek dark style layout.

Futuristic Web Layout

Coding a Layout with XHTML and CSS

This is a web design tutorial done by erracticwisdom. They do a good job explaining the tutorial, but its forwarded more towards users with a little more experience.

Simple and Clean Portfolio Layout Coding

This is a great tutorial done by hv-designs describing how to code a simple portfolio layout.

Clean black and green webdesign

Product Sales Page

Grunge and Texture Designs

Design A Grungy Website Design In Photoshop

Grunge Photographer Layout

This web design tutorial will show you how to create a grunge layout for a photographer. This layout can be used also for a portfolio layout.

Grunge-Themed Web Layout

In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop.

Cartoon Grunge Web Site Layout

Learn how to add a worn look that works well with cartoon-style graphics.

Clean Grunge Blog Design

This tutorial will cover the steps of designing the Clean Grunge blog design from scratch. It also discusses the techniques and styles of this kind of web design.

Create an extreme sports layout

Create a PSD layout for a extreme sport website with this step-by-step-tutorial

Create a dvd movie shop layout

Learn how to create a sleek looking dvd shop layout with this step-by-step tutorial.

Realistic Website Layout

This website design tutorial will show you one more time how powerful are stock images and textures.

Sleek and Textured Web Layout

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

Grunge Web Design

This web design tutorial will show you how to create a complete grunge home page design.

The Ultimate Grunge Design Tutorial

This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before.

Funky Web Design Layout website design tutorial

Unique Desktop Layout

How to make a unique desktop style layer, using common work desk objects.

Nature Portfolio Layout

If you want to start working as a freelancer i suggest you to create an eye catching layout to start properly in your business.

RocknRolla Blog Design

Great looking portfolio style design with a rough look.

Paper Texture and Grungy Web Design

Web design tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.

Grunge Vector Layout

This tutorial will show you how to create a vector style layout with a nice grunge effect.

Graphic Design Studio Web Layout

A simple and professional design studio layout.

The Design Lab: PSD Conversion

First they provide you with an excellent tutorial on creating a design lab layout. Then they take it to the next step and give you a step by step directions on how to convert your newly created PSD into a fully functional web design.

Worn Paper Web Layout

In this web design tutorial, you’ll learn how to create a textured “worn paper” web design theme using some basic Photoshop techniques.

Amazing Textured Layout

This tutorial will show you how to create an amazing layout using a simple texture, and some layer styles.

Create a Agriculture layout

Learn how to create a Agriculture layout with this very easy to follow tutorial.

Create a Nature Inspired Painted Background in Photoshop

In this web design tutorial, I will you show you my own technique for creating this type of background.

Build a Sleek Portfolio Site from Scratch

With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.

Dark Themed Web Design

This tutorial covers the key areas to focus on when creating a Web site design.

Magic Night Themed Web Design

A web design tutorial on artistic web design depicting a “Magic Night” concept.

Rock Band Music Layout

This will show you how to create a rock band layout ( music layout )

Game Magazines

The Most Advance Game Layout

Clan Layout

In this website design tutorial you will learn how to create a nice looking game layout, or a clan layout.

Gaming Layout

Web design tutorial on how to create stylish web2.0 style gaming layout from scratch using photoshop CS3.

GameSpots Website Layout

This tutorial will be showing you how to create a web layout much similar to the famous gamespot.com design in Adobe Photoshop.

Gaming Layout

In this web design tutorial you ’ll be making a quick, small, unique looking gaming layout, right lets get started.

Gaming Layout

Learn how to create a fantastically looking gaming layout, you wont be disapointed.

Warcraft 3 gaming template

Learn how to create a unique and dark template, perfect for gaming or clan websites. In this tutorial we will work extensively with layer styles to enhance certain parts of our layout to give it that gaming feel. We’ll also work with the path tool to create special shapes as well as using the brush tool to blend in images.

Photoshop Tutorials for designing Website Elements

Creating Navigation in Photoshop

Design a Glossy Navigation Interface for Media Sites in Photoshop.

Design a Web 2.0 tab with Photoshop

Create a website header using Photoshop

This web design tutorial is part of a 4 page tutorial on how to create a simple web site using Photoshop and Dreamweaver.

How To: Make the Viget Inspire Background

An overview of how we put the Viget Inspire background together. The driving philosophy behind real-texture stuff like this is to fake as little as possible. No matter how many brushes you have or how good you are in Illustrator, there’s a quality of unpredictability in real photographs and real, physical elements that adds great subtle qualities to any design.

Professional header design for your website

How to make a nice-looking and professional header for your website easily.

Web 2.0 clean layout

How to make a clean style layout with some basic tools with Photoshop.

Easily Create a Beautiful, Unique Website Header

Stylish Dark Navigation Menu

In this web design tutorial, I’ll be teaching you some tricks with the rounded rectangle tool and how to use the rectangular marquee tool to make a stylish navigation box for a web design.

How To Create a Stunning Vista Inspired Menu

How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

Sleek Photoshop Header Design

11 step website design tutorial that shows you how to design a Sleek Header for you Website.

Sleek Banner Tutorial

In this tutorial you will be shown how to design a website banner like this one here:

How To Create a Stunning Vista Inspired Menu

How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

WebHost company header template

Modern Web 2.0 Header

In this tutorial, I’m going to be teaching you how to make the web header I used for this site. It’s fairly straight forward, so if you’re just starting web design, this will be a good tutorial to read.

Clean White Navigation Bar

Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.

Modern Web Search Bar

How to create a modern web search bar with a drop down menu.

Green Navigation

How to make a stylish looking green navigation with a shine effect.

High-Detailed Plastic Navigation Bar

Navigation menus can vary from ordinary text links to the most complicated dropdown menus. This tutorial is describing detailed process of creation of “plastic” navigation bar.

Wii Web Header

How to design the Wii header found at Nintendo.com.

Create a Professional Gaming Header

How to create a professional gaming header design.

Volkswagen Inspired Navigation

This tutorial assumes that you know your way around Photoshop enough not to need too much hand-holding. You should know your way around the Layers palette and know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation.

Design a Unique Bookmark Box

How to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.

Vista Style Nav Bar

Create a navigation bar with a unique Vista Style

Slick Blue Navigation

In this tutorial, you will be shown how to design something like this:

Metallic Header Design

This tutorial shows you how to create a rough Metallic style Website Header

Web 2.0 Header Design

Photoshop tutorial design classy header in photoshop

Modernistic Navigation Module

How simple shapes and gradients can create elegant designs.

Dark Navigation Box

How to make a more advanced styled navigation box using some more effects and tools.

Clean Blue Navigation Box

This tutorial is going to go over how to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.

Elegant Navigation Box

Learn to use some basic photoshop techniques to create an elegant navigation box for your website.

Slice Your web graphic properly

This tutorial will teach You how to slice Your web graphic with future xHTML and CSS in mind.

Blue Poll Box

In this tutorial I am going to be teaching you how to make a stylish looking box for a poll box.

Designing Nature Theme Header for Web Site

This tutorial takes you through 17 pages of detailed instructions of Photoshop techniques to create the Website Header.

Source files: design-nature-theme-header-for-web-site.zip

Silhouette Website Header

Use Adobe Photoshop to create a moonlit silhouette, for use as a website header.

Photoshop Tutorial: Girly Web 2.0 Header

With this tutorial, we’ll go through the process of creating a very trendy, abstract header design used on many girl-oriented websites. It doesn’t mean you can’t use this tutorial for other kind of sites. All you’ll need to do is tweak the colors.

Curled Corner

Learn how to create a sleek content box that features a curled corner to give it a more dimensional approach. This effect could be put to good use on business websites, such as hosting sites, product sales pages, portfolios, and more.

How to Create a Simple & Sleek Web 2.0 Site Footer

How to produce a sleek looking site footer in

Professional web design studio logo

Learn how to create a professional web design logo.
We’ll show you several ways of working with text in this tutorial.
The outcome from this tutorial could also go well with our Product Sales Page tutorial, as a proper logo wasn’t really made for it.

Concept Web Logo Design

Website design tutorial that takes you through the steps of Concept Web Logo Design in Photoshop.

Once your design is finished you need to get it sliced up and converted into web markup. This is where it gets though for people that are not programmers and professional web designers. These articles may help you in that phase so check them out:

• Essential Web Designers Guide on PSD to HTML/CSS
• 20+ Photoshop Tutorials PSD to HTML/CSS, 35+ Online Services

• 50 Fresh And Amazing Free Photoshop Tutorial Roundup
• 40 Excellent Web Design Tutorials for Busy Web Designers
• Hand Picked Photoshop Web Design Tutorials to Sharpen Your Skills

Growing as a web professional requires you to keep yourself up to date with latest developments in the web design or development areas. The industry is in constant movement and traditional books really have hard times keeping up and risk being obsolete just six month after being published. This is one of the reasons why blogs and magazine have become so popular as content published today or this week typically is as fresh as it gets. Screen casts is the latest development in online publishing and basically this trend is awesome. It is so much faster and effective to learn from seeing other doing it, watching a subject matte expert explain complex stuff than reading text.  Luckily there are plenty of great places to find screen casts and in this article I will guide you to the best.

Advertisement

1.Ajaxian

A detailed analysis by Danny Outlaw about becoming a successful freelancer. Here he gives you suggestions about building a feedback
community, how to use digital cameras, importance of interface design, modern website designs and may more tips to improve
yourself.

2.Creativesuitepodcast

Sharpen your skills in Adobe Creative Suite with Terry White who demonstrates you about the usage of JPEG’s in Adobe,creating sharp movies, editing movies using Premier Pro CS5 and more from his library.

3.CSS tricks

These screencasts are explained from the graphic designers themselves. Get to know about various web designing features like organizing a Photoshop document, setting a new project in Compass / Sass, about SEO, WordPress
theme and AJAX, MAMP and a lot more from the experts.

4.From the couch

David and Marc tell us about the color scheme that can be used in e-commerce sites, how inspiration can help us and how can it stop us, and how to keep our ego aside while working and why?

5.Jqueryfordesigners

A site exclusively built for designers according to their difficulty level starting from debugging tools, jumping animations, image loading , fading and slider gallery to the most difficult like Coda slider effect and pop up bubbles.

6.kelbytv

The weekly Photoshop TV show featuring “The Photoshop Guys ” Scott Kelby, Dave Cross and Matt Kloskowski. Presented by the National Association of Photoshop Professionals (NAPP)

7.LayersMagazine

If you are an avid learner and want to learn at your own pace then her is the place for you. Just subscribe yourself to this site and watch the latest episodes also the previous ones without any disturbances.In each episode Corey instructs the latest development in Photoshop such as pixel grid designing, animating a layered design, creating a graphic design using warp tool, learn to browse 3D content online and download a variety of resources for use with Photoshop’s 3D features.

8.net.tutsplus

Want to Refresh your browser when designing new sites, improve site performance , create blog excerpts with PHP.Here is the solution to all your PHP, CSS & HTML problems. Learn here about profiles, benchmarking, php’s prepared statements in this video series.

9.Netmag

Advancements happen each and every second which we may be unaware of, So her is the right place to move on with the latest updates such as future proofing the websites, perfecting the progress bars and many more.

10.Outlawdesignblog

A detailed analysis by Danny Outlaw about becoming a successful freelancer. Here he gives you suggestions about building a feedback community, how to use digital cameras, importance of interface design, modern website designs and may more tips to improve yourself.

11.Photoshopkillertips

Fine tuning the original picture can greatly increase the quality of a picture. Learn about using smart objects with photo layers, type layers, duplicating the objects, scalability, different selection tools and many more given as tips.

12.psd tutsplus

Learn to create various a 3D string of pills, leather textures, wood panel textures and bar code in Photoshop in this screen cast. They are provided by experts in the designing industry. So get expert teachers and stay updated.

13.User Interface Engineering

User Interface Engineering is a leading research, training, and consulting firm specializing in web site and product usability. Jared M. Spool founded the company back in 1988 and has built UIE into the largest organization of its kind in the world. With our in-depth research findings based on user observation, we empower development teams to create usable web sites that increase customer satisfaction and loyalty.

14.Revision3

A site dedicated for Photoshop learners. Bert Monroy creates a plastic shirt, a photo drawing, converting flat images into 3D, making smart contact sheets in each episode and also get access to all of the previous episodes.

15.Themeforest

Add announcement bars on the top of your site, stay updated on marketplace redesign, learn WordPress features exclusively developed for designers, posts through plugins from these screen casts.

16.Thisisaaronslife

Stay in touch with the user experience designer of Harte Hanks / Pennysaver through this link where he discusses about the UX resources for front end designers, how can HTML 5 help web designers,  along with the negative aspects in the design communities.

17.Tubetorial

A place to learn about anything to everything in Facebook, Twitter, WordPress. Not only this, compete with others by improving your search engine rankings, target your competitor’s keywords with SEO Digger and all those things which you could never learn anywhere.

18.vector.tutsplus

Learn about those hidden features like making high gloss icons and reflections, creating metal grille using the Transform effect and creating Aurora Borealis are demonstrated here. A great place to be encountered with these stunning effects.

19.wordpress.tv

Learn whats next for WordPress, introduction, what can blogging do for your business, how to create a healthy blog community, activating WordPress 3.0 multi site feature in this interview by Andrew Warner and answers by Matt Mullenweg and Chris Pearson

20 Tut Candy

TUTcandy is a new site brought to you by freelance designer Che McPherson of PixelPimps.net. Sites looks really nice and the tuts have high quality and covers Photoshop, Illustrator etc.

22. Railscasts

Powerful web applications are made much simpler using Ruby on Rails. So Rails3 is getting upgraded to Version 3.Controllers, generators, PDFKits, and up gradation to Rails3 is shown in each screen cast.

23. Freelance Switch – Freelance Radio

Lots of great freelancer advice here as podcast. Useful to both designers and developers working alone.

We like to showcase and inspire you with nice things like this  beautiful Epiphone Les Paul vintage Sunburst. Please have a look. Want to keep on surfing? Have look at these Drupal 7 Themes maybe this is what you’re looking for.

Author : Siva Siva

Photography and design lover i like these two essential things more than my job(Web developer). So only i have launched
Pokkisam and a Photography,design inspiration blog too Photography and design inspiration blog Follow me in twitter to get interesting things in photography and design >>pokkisam

• Hand Picked Photoshop Web Design Tutorials to Sharpen Your Skills
• 20 Great Websites I find very useful and worth recommending to Web-Developers and Designers
• 35+ Community Picks for Designers and Developers

This is a guide showing you how to use Autofill Forms, a firefox plugin, to submit multiple forms faster again and again. The reason why Autofill Forms is a great time saver is because it allows you to set up your article information once and then push it into as many forms as you like by using keys [ALT]+j. Of cause you need to configure Autofill Forms to know the forms but this is a onetime exercise and it pays off!

Basically Autofill Forms is excellent for filling a lot of forms with the same information and really speeds up the process.

Autofill Forms use profiles to store information about forms that you want to submit and the information you want to put into the forms. You need to build up a template with rules for the forms you want to fill using Autofill Forms. Once you have your template in place you will of cause need to maintain it when forms change (believe me they do…) but you will be able to use it to fill forms fast over and over again.

Preparing Autofill Form to fill a new form

OK if you are starting from scratch you will need to set up the forms first and this way start building your template. This is how it is done.

When you submit articles there is a few fields you will almost need every time. This is fields like.

• Your Name
• Your Email
• Website/Article Title
• Website/Article URL
• Website/Article Description
• Tags (more rarely needed)
• Category

You can set this up yourself or you can start with the file I have prepared for you. autofill_template_profile.txt

This file have a lot of rules already that makes it work on many community link pages on popular design and development blogs. The file also contains a few special rules. If a form has fields that are not covered by the above list I recommend that you simply add a new field and keep the rule for it there. As the data to be filled in will always be the same it will be saved as part of your template and you will not need to enter it again (unless site is changed).

In the “Profiles” View selected at the top you will be able to use the “Import” feature to load in the file. IF you want to start over you can create each field manually in the “Main” view.

Let’s assume you want to submit an article to the community link page on tripwire magazine: http://www.tripwiremagazine.com/submit-user-link

Before you create rules for a form you should generally try out if the existing rules will cover the form you are facing just now. Why? Because all websites based an same platforms (ex. WordPress) that use the same plugins for creating forms can share rules! Don’t do this just now but keep it in the back of your head…

You simply load up the page containing the form. Once Autofill Form as been installed as a plugin for firefox you will be able to right-click a form field and create a new rule for it autmatically. You can also use the “Display Form Details feature to see the names of the form fields. It is the names that are used for creating the rules.

If you try to click the “Add complete form as profile you will notice that Autofill Form will create a new profile for you with all the data you need. This profile is needed to copy out the rules. It cannot be used for multiple forms because the “Site rule” in the top will block the profile to be used on any other site. What you will be looking for doing is creating one profile with all rules for all the forms you need to fill (you should consider building on top of the one you downloaded a few minutes ago. This is basically done by taking the rules generated by Autofill Forms and pasting them into your own profile in the “Main” view and separating the rules with a | sign. Below you can see all rules for “Website Title”. Simply add a | at the end for each rule and copy in the rules generated by Autofill Forms. Then test the rules as described below. Once your rules are all fine you should do an export in the Main view to keep the rules for future reference. Next time you have an article to promote you will load the file you just exported as it contains all your rules and then add the article information…

Using the profile template for submitting forms

Once all rules is combined in one profile you can export it and reuse it for every article you want to submit. All you have to do is import and rename to the article name and then fill the new profile with the article data. This is done this way. Click “Import” and select the file with all your rules.

Once you have imported you have to change the profile name and hit “Apply” to the right.

Then go to the “simple” view by clicking at the top. In this view you can add all the article data quickly and then click “OK”. Now you are ready to load up each form and fill them out by pressing [ALT]+j. If a form is not filled correctly you need to evaluate your rules for that particular form. You may have to add the rules again.

Let me know if this is working for you! Also please share any tricks you use to promote your articles.

• Howto: WordPress 2.7+ User Link Feed Submit Form and Widget
• jQuery and General Javascript Tips to Improve Your Code
• 10 Useful jQuery Techniques to Improve Your Code

Nathan Burn, Web Developer at Creative Jar, recently took and passed, the MCTS 70-536 – Microsoft .NET 3.5 Framework – Application Development Foundation. His journey to the result was a tough, yet fruitful one and he has prepared some advice to anyone considering taking the exam.

Prepare for the test

Unless you have several years of experience as a .NET developer you need to prepare carefully for the MCTS 70-536 test. There are a few good options to get you started.

Self-Paced Training Kit:

The Self-Paced Training Kit book provides you with about 40-50% of the knowledge required to pass the exam; Nathan suggests "reading the book from start to finish, then spending extra time on the areas where you have the least knowledge by re-reading the relevant chapters, doing the examples, exploring intelliSense and doing further reading on MSDN about anything you don’t understand or haven’t encountered before".

When revising, try to match the amount of time you spend on each section with the percentages in the headings on Skills Measured tab.

MSDN Library:

MSDN Library is your best friend when trying to gain the extra knowledge required to pass the exam. The MSDN Library includes how-to and reference documentation, sample code, technical articles, and more. To find the content you need, browse the table of contents or use search. Nathan commented, "Every time I came across a structure, type, class, method or property I didn’t understand or hadn’t used before I looked it up to find out more."

Classroom Training

For those who need extra guidance there are classroom courses and even a few MCTS boot camps. Training in a classroom can help students grasp complex technical concepts more easily, and can cater to individual student learning style

• 2957B: Advanced Foundations of Microsoft .NET 2.0 Development (3 Days)
• 2956B: Core Foundations of Microsoft .NET 2.0 Development (3 Days)

Microsoft E-Learning

E-learning offers a flexible learning experience for those who lack the time for classes. Users will still get the benefit of expert instructors, as well as developing real hands-on experience.

• 5161AE: Advanced development with the Microsoft .NET Framework 2.0 Foundation (16 Hours)
• 5160AE: Core development with the Microsoft .NET Framework 2.0 Foundation (14 Hours)

Microsoft Press Books

Thanks to Microsoft Press Books you can work at your own pace through a series of lessons and reviews that fully cover each exam objective; maximise your performance by putting what you have learnt into practice.

• MCTS Self-Paced Training Kit (Exam 70-536): Microsoft .NET Framework 2.0 Foundation
• MCTS Self-Paced Training Kit (Exam 70-536): Microsoft .NET Framework–Application Development Foundation, Second Edition

3^rd Party Practice Exams:

If you think you need more practice you should consider trying tools like MeasureUp or Self Test Software.
MeasureUp produces the practice exams which come with the Self-Paced Training Kit, these practice exams are helpful initially, but the pool of questions could be considered too small. However, if you purchase the MeasureUp online software package, users will receive a higher level of question (closer to the real exam) as well as a larger pool of questions.
Self Test Software offers further practice tests to determine where further study is needed. They can clearly show you what areas you are weak in before taking the actual exam.

Exam:

When you feel you are ready, choose a local test centre and book with Prometric.

The exam consist of 40-60 multiple choice questions. With only 150 minutes to take the exam, you must get at least 700 marks, out of a possible 1000, to pass.  Each question has its own mark based on its complexity. Your test will get marked automatically at the end of the exam, be prepared for an instant message stating a Pass or Fail.

Below is a list of areas that Nathan found where extensively tested (at least 4-5 questions) and some less extensively tested (at most one question):

Extensively Tested:

• Code Access Security
• User and Data Security
• Threading / Input and Output
• Application Domains
• Serialization
• Globalization
• Types, Collections and Generics

Not Extensively Tested:

• Regular Expressions
• Graphics

The Future – After Passing the Exam

The benefits of taking this exam are numerous; not only will you achieve an increased knowledge of the .NET Framework, and everyday programming, but you will be learning topic areas that may not be covered in your day job. Once the exam has been passed, why not aim for the MCPD Enterprise certification for .NET 3.5. Plus the extra bonus that it looks good on your CV and you can add Microsoft Certified Professional to your status and signature!

Nathan said; "I would definitely recommend this exam and I hope this information will help you pass first time too!"

Author : Alex Iszatt

Digital Journalist at Creative Jar; working with a whole bunch of creative, technical and intelligent people… a big, happy team with the same goal – to make the client happy!

Follow CreativeJar on Twitter to get my daily ramblings

• World-Wide Web Design: Hints and Tips for Designing a Cross Cultural Website
• More jQuery and General Javascript Tips to Improve Your Code
• jQuery and General Javascript Tips to Improve Your Code

jQuery makes using JavaScript easy even for most designers because of it’s huge community and supply of really useful plugins. Using plugins is great for sure but knowing a bit more of what is going on behind the curtain can make you more powerful than you would expect. Digging into the coding details may not be that simple but with the good examples, tips and tricks in this article you should have a good chance.

Advertisement

Storing Data

Use data method and avoid storing data inside the DOM. Some developers have a habit of storing data in the HTML attributes like fx.:

$('selector').attr('alt', 'data being stored');
// later the data can be retrieved using:
$('selector').attr('alt');

HTML attributes is not meant to store data like that and the "alt" as a parameter name does not really make sense. The right alternative in most cases is using the data method in jQuery. It allows you to associate data with an element on the page.

$('selector').data('paramtername', 'data being stored');
// then later getting the data with
$('selector').data('paramtername');

This approach allows you to store data with meaningful names and it is more flexible as you can store as much data as you want on any element on the page. For more information about data() and removeData(), see here jQuery internals One classical use of this is saving the default value of a input field because you want to clear it on focus.

<form id="testform">
 <input type="text" class="clear" value="Always cleared" />
 <input type="text" class="clear once" value="Cleared only once" />
 <input type="text" value="Normal text" />
</form>

$(function() {
 //Go through every input field with clear class using each function
 //(NB! "clear once" is two classes clear and once)
 $('#testform input.clear').each(function(){
   //use the data function to save the data
   $(this).data( "txt", $.trim($(this).val()) );
 }).focus(function(){
   // On focus test for default saved value and if not the same clear it
   if ( $.trim($(this).val()) === $(this).data("txt") ) {
     $(this).val("");
   }
 }).blur(function(){
   // Use blur event to reset default value in field that have class clear
   // but ignore if class once is present
   if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
     //Restore saved data
     $(this).val( $(this).data("txt") );
   }
 });
});

Demo here

Columns of equal height

This tip show you how to use two CSS columns, and make them having exactly the same height?

function equalHeight(columns) {
    tallest = 0;
    columns.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    columns.height(tallest);
}

/*
How it works:
$(document).ready(function() {
    equalHeight($(".box"));
});
*/

Test and improve you jQuery selector skills

This jQuery selector Lab is really cool and can be used free online and you can even download the lab and use it off-line. There’s a test page with most of the combination of html fields you can imagine and then a very long list of predefined selectors you can try. If that is not enough you can also type in your own selectors.

Target blank links

Did you know that XHTML 1.0 Strict don’t allow “target=blank” attribute on links? Still it is quite useful to keep visitors on the site when they press an external link. A good solution to this problem should be using JQuery to make links opening in new windows. The rel=”external” attribute is used to match the links that we want to open in a new window.

$('a[@rel$='external']').click(function(){
  this.target = "_blank";
});

/*
This is how it works:
<a href="http://www.tripwiremagazine.com/" rel="external">tripwiremagazine.com</a>
*/

Test if a jQuery collection contains any elements

If you need to test if a jQuery collection contains any elements you can simply try accessing the first element like this:

if($(selector)[0]){...}
// or you may use
if($(selector).length){...}

Let look at an example:

//ex. if you have this html on a page
<ul id="shopping_cart_items">
  <li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
  <li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
  <li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>
...
//The condition in this if statement will evaluate to true because we have two
// input fields that match the selector and the <statement> will be executed
if($('#shopping_cart_items input.in_stock')[0]){<statement>}

Use Callback to synchronize Effects

If you want to ensure that events occur one after the other you should use callbacks. Functions allow us to register a callback once the operation is over like this: slideDown( speed, [callback] ) ie. $(‘#sliding’).slideDown(‘slow’, function(){… Try try the example below here.

<style>
 div.button    { background:#cfd; margin:3px; width:50px;
   text-align:center; float:left; cursor:pointer;
   border:2px outset black; font-weight:bolder; }
 #sliding      { display:none; }
</style>
<script>

$(document).ready(function(){
// Use jQuery to change look of div once clicked and the event to
//start off the slide effect
 $("div.button").click(function () {
   //div.button will now look like a pushed down button
   $(this).css({ borderStyle:"inset", cursor:"wait" });
   //The hidden #sliding will now slide down and use callback to start the
   //slideup once it completes
   $('#sliding').slideDown('slow', function(){
     $('#sliding').slideUp('slow', function(){
       //once the slide up is over the callback change css for button back
       $('div.button').css({ borderStyle:"outset", cursor:"auto" });
     });
   });
 });
});
</script>

Use Events to control DOM Elements and Custom Objects

One of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event.There is a wide range of Events that are supported by jQuery and you will be able to create your own as well. Binding events to page elements doesn’t get much easier and elegant here a few examples.

//Bind click event to a paragraph and write click coordinates to the page
$("p").bind("click", function(e){
  var str = "( " + e.pageX + ", " + e.pageY + " )";
  $("span").text("Click at coordinates: " + str);
});

//Binding multiple events is also simple and
$("p").bind("mouseenter mouseleave", function(e){
  //toggleClass adds the specified class if it is not present, removes
  //the specified class if it is present.
  $(this).toggleClass("mouse-over");
});

Not only can you bind events to DOM elements as simple as just illustrated. With jQuery you can actually bind a custom event to ANY object. Here is an example.

}
function shoppingCart() {
  // Do general shopping cart stuff here...
};

var myShoppingCart = new shoppingCart('personalShoppingCart');
jQuery(myShoppingCart).bind('addItem', function() {
  // Custom event handling for adding items to the shopping cart...
});

// Trigger custom event:
jQuery(myShoppingCart).trigger('addItem');
);

Learn to use Custom Selectors

On top of standard CSS selectors jQuery allow you to define custom selectors that makes your code even more simple.

$.expr[':'].mycustomselector= function(element, index, meta, stack){
    // element- is a DOM element
    // index - the current loop index in stack
    // meta - meta data about your selector
    // stack - stack of all elements to loop

    // Return true to include current element
    // Return false to explude current element
};

// Custom Selector usage:
$('.someClasses:test').doSomething();

Lets take a look at an example. This custom selector will return elements in the scope specified with attribute "rel":

$.expr[':'].withRel = function(element){
  var $this = $(element);
  //simply returning elements where rel is not empty
  return ($this.attr('rel') != '');
};

$(document).ready(function(){
//Using the custom selector is simple and the collection returned support chaining
// as illustrated here to apply some css to the returned elements
 $('a:withRel').css('background-color', 'green');
});
...
<ul>
  <li>
    <a href="#">without rel</a>
  </li>
  <li>
    <a rel="somerel" href="#">with rel</a>
  </li>
  <li>
    <a rel="" href="#">without rel</a>
  </li>
  <li>
    <a rel="nofollow" href="#">a link with rel</a>
  </li>
</ul>

Remove a word in a text

It is quite simple with jQuery to remove words in a element text? The following code can be easily modified to replace a word by another. In this case “wordtokill” is replaced by “wordtolive”.

var element= $(‘#id’);

element.html(element.html().replace(/wordtokill/ig, "wordtolive"));

Make entire Elements click-able

A lot of menus are created using simple <li> lists and css. It would be nice for the website usability if navigation was provided for the entire <li> and not just for the link text. jQuery makes this possible in a pretty simple way by taking the href (url) from the embedded link.

<ul>
  <li><a href="home">home</a></li>
  <li><a href="home">about</a></li>
  <li><a href="home">contact</a></li>
</ul>
...
//selector select all li within the ul and then we make them clickable.
$("ul li").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
});

Preloading images

Generally it is a good idea to preload images if they are used in javescripts.

//Define function that preloads a defined list
//of images (arguments for the function).  

jQuery.preloadImages = function(){
  /Loop through the images
  for(var i = 0; i<arguments.length; i++){
    jQuery("<img>").attr("src", arguments[i]);

  }
}
// You can use usage the script this way:
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

Disable right-click contextual menu

As with other things we have been doing for years using javascript jQuery makes it simpler and more elegant. Of cause you can use this for much more. You may do something when the contextmenu event is fired.

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
})

Make code simpler using group queries

A useful way to make the code simpler and easier to read is by grouping the queries for elements that need the same treatment.

// Don't do it like this as it takes up unnecessary space and takes time to write
$('div.close').click(doSomething);
$('button.close').click(doSomething);
$('input.close').click(doSomething);

// Simply use group queries in the selector if you have to
//apply same operation to them all
$('div.close, button.close, input.close')
    .click(doSomething);

Test your code well

jQuery comes with a unit test framework called QUnit. Writing tests is quite easy and allow you to confidently modify your code while ensuring that it still works as expected. Here is how it works:

//Separate tests into modules.
module("Module B");

test("some other test", function() {
  //Specify how many assertions are expected to run within a test.
  expect(2);
  //A comparison assertion, equivalent to JUnit's assertEquals.
  equals( true, false, "failing test" );
  equals( true, true, "passing test" );
});

Minimize download time

Most browsers only download one script at the time and if you have several scripts being loaded on every page it can impact your download time. You can use Dean Edwards service "packer" to compress your scripts and make download faster. You need to maintain a development version and a runtime version as all you in-line comments will be lost. You will find it here.

Another solution that take this to the extreme is interesting to take a look at. Basically it is a server based PHP script that combine javasctipt files and compress them in a easy to maintain approach. Take a look at and see if you can use the idea and some elements of the concept "Make your pages load faster by combining and compressing javascript and css files".

Logging to the Firebug console in jQuery

Firebug is one of my favourite Firefox extensions providing tons of tools in a very usable structure to aid you in HTML+CSS+JavaScript development. Obviously it is worth having just for it’s excellent inspection feature allowing you to jump into the html and css and learn in a visual way what elements of the page is rendered by what code. As a jQuery and general Javascript developer Firefox also has good support for logging in your JavaScript code. The easiest way to write to the Firebug console looks like this:

console.log("hello world")

You can pass as many arguments as you want and they will be joined together in a row, like

console.log(2,4,6,8,"foo",bar)

As a jQuery developer it even gets better using a tiny extension that Dominic Mitchell came up with to log any jQuery object to the console .

jQuery.fn.log = function (msg) {
    console.log("%s: %o", msg, this);
    return this;
};

With this extension you can simply call .log() on the object you are currently addressing fx.:

$('#some_div').find('li.source > input:checkbox')
    .log("sources to uncheck")
    .removeAttr("checked");

Use ID as Selector whenever possible

Selecting DOM elements using the class attribute is simpler than ever using jQuery. Even though it is simple it should be avoided whenever possible as as selecting using ID is much faster (In IE the class selector seams to loop through the entire DOM why generally it should be avoided). Selecting elements using IDs is fast because the browsers have the native getElementByID method that jQuery will use for IDs. Selecting classes still requires the DOM to be traversed behind the scene and if it is a large DOM and you make several lookups the performance impact can be significant. Let take a look at this simple html code:

<div id="main">
<form method="post" action="/">
  <h2>Selectors in jQuery</h2>
  ...
  ...
  <input class="button" id="main_button" type="submit" value="Submit" />
</form>
</div>

...
//Selecting the submit button using the class attribute
//like this is much slower than...
var main_button = $('#main .button');

//Selecting the submit button directly using the id like this
var main_button = $('#main_button');

Use Tags Before Classes

When you are selecting through tags jQuery will use the native browser JavaScript method, getElementsByTagName(). ID is still faster but this is still much faster than selecting with a class name.

<ul id="shopping_cart_items">
  <li><input class="in_stock" name="item" type="radio" value="Item-X" /> Item X</li>
  <li><input class="3-5_days" name="item" type="radio" value="Item-Y" /> Item Y</li>
  <li><input class="unknown" name="item" type="radio" value="Item-Z" /> Item Z</li>
</ul>

It is important to prefix a class with a tag name (here this is "input") and then it is important to descend from an ID to limit the scope of the selection:

var in_stock = $('#shopping_cart_items input.in_stock');

Cache jQuery Objects

Caching an object before working with it is essential for performance. You should neverdo like this:

<li>Description: <input type="text" name="description" value="" /></li>
...
$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text').val("text updated");

In stead cache the object and work on it. The example below should really use chaining but it is just for illustration.

var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");

//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
 .css('border', '3px dashed yellow')
 .css('background-color', 'red')
 .val("text updated");

Bind certain jQuery functions to $(window).load event

Most jQuery code examples and tutorials instruct us to bind our jQuery code to the $(document).ready event. In many cases this is OK but since $(document).ready occurs during page render while objects are still downloading it may cause problems for some types of scripts. Functionality such as binding visual effects and animations, drag and drop, pre-fetching hidden images etc. could benefit from being bound to the $(window).load as it will ensure that all dependant elements are ready for use.

$(window).load(function(){
 // Put your jQuery functions that should only initialize after the page has loaded.
});

Use Chaining to limit selectors, make the code more simple and elegant

Because JavaScript supports chaining and because it works across line breaks you can structure your code like this. This example first removes a class on an element and then adds another to the same element.

$('#shopping_cart_items input.in_stock')
    .removeClass('in_stock')
    .addClass('3-5_days');

If needed it is really simple and useful as well to create a jQuery function that support chaining.

$.fn.makeNotInStock = function() {
    return $(this).removeClass('in_stock').addClass('3-5_days');
}

$('#shopping_cart_items input.in_stock').makeNotInStock().log();

Loading latest jQuery version from jquery.org

You can actually load the latest jQuery version using this code:

<script src="http://code.jquery.com/jquery-latest.js"></script>

This is handy if you quickly want to try out an idea for a script with the latest version. As you may know you can also load jQuery from ajax.googleapis.com as shown in #1 – Load the framework from Google Code here.

Load the framework from Google Code

Google have been hosting several JavaScript libraries for a while now on Google Code and you may want to load it from them instead of from your server.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

Use Cheat Sheets

Most people can’t remember a lot of details and even though programmers tend to be better that the average the amount of information they need to have instant access too is devastating. Having a few cheat sheets printed out and placed next to the monitor is a good idea to speed up programming and to improve the code quality.

jQuery 1.4 API Cheat Sheet

• jQuery and General Javascript Tips to Improve Your Code
• More jQuery and General Javascript Tips to Improve Your Code
• 120+ Javascript, Ajax, jQuery Mega Toolbox

In this article tripwire magazine provides a detailed tutorial on how to setup a Community News Feed solution in WordPress 2.8+. I use it at tripwire magazine and currently get 30-50 links submitted every day. It’s a good way to interact with users and peer blogs!

Allowing your readers to provide interesting and relevant links to you and your other readers is nice feature as it gives a blog dynamic content. It actually also may drive traffic from bloggers looking for sources to get some easy and free traffic for their own site. Besides that links submitted are very useful for creating regular  news posts listing all or the best resources readers submitted. The solution provided have been tested and works with WordPress 2.7 to 2.8.6. This is a follow-up on a previous article taking TDO Mini Forms changes into account. I have also decided to add new options and taking reader comments into account. The post will show you how to:

• create a Community Link Submit Page (demo)
• create a Community Link Widget or custom code for sidebar (demo scroll down to find it)
• create a Community Link page (demo)
• filter out community links from RSS feeds

Advertisement

Introduction

Adding a Community Link/Reader News Feed is currently quite popular and I have seen it on many of the very popular Web Development and Design Blogs i keep an eye on. Here is a few good examples that you can check out: Noupe, Psdtuts+. Even though Community Link/Reader News Feeds are popular there doen’t seam to be an easy way to implement it in WordPress. There is as far as I know currently no plugins and we lack good tutorials that binds all the elements together making it available for everyone. This post share the details of the solution created for and used on tripwire magazine. There are as usual more than one way of doing this. Some use the comments system in WordPress while others use their own proprietary database. In the solution I cover in this tutorial User Submitted content will be added as new posts in WordPress.

Step 1. Get the files.

The form

Submitting content to WordPress from the front end can be done in many ways but I think that one of the best and most flexible ways available is to use TDO Mini Forms. TDO is not exactly simple to configure to start with but as you start using it you will see that it gives you real power to make the Forms you want.

TDO Mini Forms: Download

The sidebar community post list

Listing posts from one Category in a widget can also be done in countless ways. You should really use the plugin or approach you prefer here but in this tutorial I have decided to use the plugin Query Posts. I have made a few changes to the plugin presentation template to make it fit my needs. I’m not that proud of this part but….well you may find a better and more generic way yourself if you’re not into changing code to preserve compatibility with future releases of the plugin. If you do please share and post a comment.

Query Posts: Download

As part of this follow-up I have extended the tutorial for Readers using themes without widgets showing you how to code functionality from ground up that pulls the submitted posts from the database and format the output as you prefer.

2. Install and activate the plugins you need

This is not a tutorial on how to install plugins in general but it is very simple. If you’re not going to use Query Posts plugin and plan to use the code version then only install TDO Mini Forms.

a. Upload the files under your wp-content/plugins directury

b. Log into WordPress back-end and click the Plugins menu button. Find the 2 new plugins under Inactive Plugins and press Activate.

3. Create a Page and a Category to hold the Form

You may call the page whatever you want but I suggest calling it &quot;Submit User Link&quot;. There’s no reason to publish the page yet but you need it as a place holder. Describe at the top of the page if you have any rules for what resources will be approved.

Create a WordPress Categoty that the posts will be put into per default. In this tutorial the Category is called User-News (user-news)

4. Basic Configuration

Activating TDO Mini Forms (TDOMF) will add a Options Menu at the bottom of your WordPress Admin Menu.

Make sure you start with configuring TDOMF via the main TDOMF menu &quot;Form Manager and Options&quot; in the WordPress Administration back-end. You must assign a user as the &quot;Default Author&quot;. This user must not have rights to publish or edit posts, i.e. they should be of the subscriber role. The TDOMF options menu can automatically create a dummy user to set as the Default Author. This is the recommended approach.

With a Default user selected you’re actually done setting up the basics. You may consider enabling the Akismet Spam Protection at the bottom of the page. I don’t use it myself and I have not experienced any spam issues. I generally think standard comments forms are much easier to target and that the effort needed for a spammer to use your custom form isn’t worth the time…

5. Creating the Form

You can use Form 1 or press the “New Form” button. This will add a Form 2 button next to Form 1. I’m not sure why the names are Form 1,2,x and keep being this after naming the form but you may call it a “feature”. Once the form is created press the Form 2 button. This takes you to the main Form 2 configuration page (or stay at Form 1 if you continue using this).

General Tab:

• Put in the Form Name “User Link Feed”.
• Check “ Include on ‘Your Submissions’ page “
• Finally if you like Ajax forms enable it. I’m using it and it really is a nice feature.

Access Control Tab:

• Make sure that &quot;Unregistered Users (i.e. everyone)&quot; and &quot;Users with rights to publish posts&quot; can access the form.

Submitting Tab:

• Set “Default Category” to the category created in step 3.

Moderation Tab:

• Enable Moderation
• You may check the check box just below if you want your own submission to go through directly.

Throttling Tab:

• To prevent your WordPress from becoming spammed you should create a throttle rule. The default rule can be useful. Each IP address can only have 10 unapproved submissions per hour.

6. Setting up the Form Layout

Form Layouts in TDOMF is made by arranging widgets (these should not be confused with WordPress side bar widgets!)  To configure your widget press the create button.

First of all scroll to the bottom and set the Custom Field Widget to 3 and press save.

The make the following arrangement by dragging the field boxes from the area below the widget into it.

Configuration of the 3 custom fields and the content field can be seen here. Click on the images.

[nggallery id=9]

Add the following code to “Custom Fields 1″.

<?php
/* Set the link title for use in Append to Post Content 1*/
$LINKTITLE= get_post_meta($post_id, 'LINKTITLE', true);
if($LINKTITLE != false) {
   $link_title = $LINKTITLE;
} else {
   $link_title = '[No Link Title]';
}

?>
<p><a href="%%VALUE%%" target="_blank"><?php echo $link_title ?></a></p>

Add the following code to “Append to Post Content 1″.

<?php
/* Using value put into Custom Field 3 called  LINKTITLE to insert
custom title on post to make it stand out in the WordPress Posts view. */

$link_title = get_post_meta($post_id, 'LINKTITLE', true);

if($link_title != false) {
   $post_title = '[User Link:'.$link_title.']';
} else {
   $post_title = '[no link title set]';
}
$postdata = array(
         "ID" => $post_id,
         "post_title" => $post_title);
      sanitize_post($postdata,&quot;db&quot;);
      wp_update_post($postdata);
?>

The Form is basically set up now. To make the last hacks you have to go into Form Hack Mode.
Press the Form Hack Button and a page that gives you access to all the code is loaded.
What to do here:
1. Search for “URL:” and remove it. (makes the form look better)
2. Search for “Email:” and remove it.
3. If you want ot get rid of the preview button as well you can just locate the button input html and delete it.

Be aware that once you used the hack page you will not be able to use the form create page in the same way. TDO Mini Forms have made an attempt on solving the issue by introducing a kind of revision and diff functionality. It works OK but once you go into hack mode it is hacked and getting back is hard! SO DON’T start hacking until you’re form is finished with regards to number of input fields needed.

7. Add the form to the Submit User Link Page

Open the page you created in step 3 for editing. Insert this tag on the page as shown below (I can’t put in the code here as it will be turned into a form):

Visit the form page and try to submit a few User Links. NB! Depending on the configuration you decided on in step 5: If you’re logged in as an administrator on the Browser session your submissions will be published directly.

This is the end result at tripwire magazine.

8. Add the Sidebar widget

Here you will be able to either use Query Posts plugin or code it yourself.

Query Posts

Showing the links that users have submitted somewhere is necessary. If the Query Posts plugin was activated earlier as described you should navigate to the WordPress Widgets page.

Here you should Add a “Query Posts” widget to the sidebar and click edit. The configuration is simple but make sure you put in the id of the category you created in step 3 instead of 41.

Save the sidebar. Go to the blog and check if everything works as intended.

Code it yourself

Basically this is about finding a way to pull out the posts submitted by users. You can add this directly to the sidebar.php (or whatever it is called in your theme) or you can use widgets like Executable PHP widget.  I love this plugin and it is also useful here.

Add the following code. It first query the WordPress databse for published posts in a specific category “WHERE wp_term_taxonomy.term_id IN ( 41 )”. You have to replace 41 with the catid of your own category created in step 3. You will get maximum 10 posts returned unless you change it here “LIMIT 0 , 10″ );”. The script then steps through all records returned and prints the post content in a html list.

<ul>
<?php
global $wpdb;
$result = $wpdb->get_results(“SELECT *
FROM wp_posts as wpost
INNER JOIN wp_term_relationships ON wpost.ID = wp_term_relationships.object_id
INNER JOIN wp_term_taxonomy ON wp_term_relationships.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id
AND wp_term_taxonomy.taxonomy = ‘category’
WHERE wp_term_taxonomy.term_id IN ( 41 )
AND post_status = ‘publish’
ORDER BY wpost.post_date DESC
LIMIT 0,10″ );
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$post_content = $post->post_content;

?>
<li><?php echo $post_content ?></li>
<?php } ?>
</ul>

If you want to style the post content ex. the link you need to go back to step 6: “Custom Fields 1″ and modify this:

<p><a href="%%VALUE%%" target="_blank"><?php echo $link_title ?></a></p>

9. Changing the Query Posts plugin (only needed if you use it!)

Now this is where it gets a bit ugly. I could have found a better way but I don’t have to use the plugin for other things at the moment. Open the following file for editing (on the server or locally….if locally you need to upload it afterwards):

/wp-content/plugins/query-posts/query-posts.php

To add the Add and RSS buttons insert the following line of code on line 180. Update the [...] as needed.

<div id="userLinkMenu"><a href="http://[your domain]/submit-user-link">
<img src="http://www.tripwiremagazine.com/wp-content/themes/[theme name]/images/[add image]" />Submit</a>
<a href="http://[your domain]/category/user-news/feed">
<img src="http://www.tripwiremagazine.com/wp-content/themes/[theme name]/images/[rss image]" />RSS</a></div>

You need some images if you want to use the code as it is. If you just want text links remove the img tag.

<div id="userLinkMenu"><a href="http://www.tripwiremagazine.com/submit-user-link"><img src="http://cdn.tripwiremagazine.com/wp-content/themes/freshnews/images/add.png" />Submit</a><a href="http://www.tripwiremagazine.com/user-links"><img src="http://cdn.tripwiremagazine.com/wp-content/themes/freshnews/images/link-page.png" />More Links</a><a href="http://www.tripwiremagazine.com/category/user-news/feed"><img src="http://cdn.tripwiremagazine.com/wp-content/themes/freshnews/images/ico-rss.gif" />RSS</a></div>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div <?php if ( function_exists( 'post_class' ) ) post_class(); else echo 'class="post"'; ?>>

<?php if ( function_exists( 'get_the_image' ) && $thumbnail ) : ?>
  <?php get_the_image( array( 'custom_key' => array( 'Thumbnail', 'thumbnail' ), 'default_size' => 'thumbnail' ) ); ?>
  <?php endif; ?>
  <!-- comment this part out to leave out title in user link presentation
    <?php the_title( '<h2><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>
    <p>
      <?php printf( __('<span>By</span> %1$s <span>on</span> %2$s', 'query-posts'), '<span><a href="' . get_author_posts_url( get_the_author_ID() ) . '" title="' . get_the_author() . '">' . get_the_author() . '</a></span>', '<abbr title="' . sprintf( get_the_time( __('l, F jS, Y, g:i a', 'query-posts') ) ) . '">' . sprintf( get_the_time( __('F j, Y', 'query-posts') ) ) . '</abbr>' ); ?>
      <?php edit_post_link( __('Edit', 'query-posts'), ' <span>|</span> <span>', '</span> ' ); ?>
    </p>
    -->
    <?php if ( $display == 'the_content' ) : ?>

    <div>
      <?php the_content( __('Continue reading', 'query-posts') . ' ' . the_title( '"', '"', false ) ); ?>
      <?php wp_link_pages( array( 'before' => '<p>' . __('Pages:', 'query-posts'), 'after' => '</p>' ) ); ?>
    </div>

    <?php else : ?>

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

    <?php endif; ?>
    <!-- comment this part out to leave out post meta in user link presentation
    <p>
      <span><span><?php _e('Posted in', 'query-posts'); ?></span> <?php the_category( ', ' ); ?></span>
      <?php the_tags( '<span> <span>|</span> <span>' . __('Tagged', 'query-posts') . '</span> ', ', ', '</span>' ); ?>
      <?php if ( comments_open() ) : ?><span>|</span><?php endif; ?> <?php comments_popup_link( __('Leave a response', 'query-posts'), __('1 Response', 'query-posts'), __('% Responses', 'query-posts'), 'comments-link', false ); ?>
    </p>
    -->
  </div>
  <div style="border-bottom:1px solid #F1F1ED; padding-bottom:3px; padding-top:2px;"></div>
  <?php endwhile; endif; ?>
<?php endif;

In order to make the list of Link only show the post content containing the title og the link and the description and exclude fx. the realt title of the posts some lines of code in the file have to be either deleted or commented out. I recommend commenting them out so for. The blocks below start at around line 195.

Save the file and make sure it is updated on the server. Check how it looks. This is the sidebar at tripwire magazine:

10. Exclude the User News Category from Menus, front page and RSS feed.

I don’t think that You dont want the User Link menu and the User Link posts to appear on your front page or in your RSS feed. This part is really quite dependant on the theme you are using and how you set up your blog. I’m giving a few hints but don’t expect this part to be fully covered here.

1) The feed part is very simple if you’re using feedburner and the feedburner plugin that redirects all feed requests to feedburner.com. Just add ?cat=-[catid] to feed URL provided to feedburner

When it comes filtering what is shown on the to the frontpage or what Categoties that are shown in menus and widgets I will advise you to look for descriptions and tutorials that cover this as its main focus. There are manu good resource for this that you can use.

11. Creating a Community Link page

Once people start adding community links to your site it makes sense to show more than the 10 latest. In my case if I approve 30 submissions at a time most of them will never be visible in the sidebar. I have found a useful plugin that can show content of a category on a WordPress page – it’s called List Category Posts. Once you have installed it you can create a page and include the following code (have to write catlist and not cat-list. I could not write catlist as it would have printed 200 posts! ) to make it list a specified number of posts from a category. Ability to limit is important as you may get thousands of submissions over time.

[cat-list id=41 numberposts=200] // NB! change cat-list with catlist on your page! //

Because We don’t want the post title in WordPress to be shown (as it contains [user link:...]) and have added the link to the content we have to modify the plugin a bit to make things work as we want…! You have to locate “list_cat_posts.php” in the folder “list-category-posts” (under wp-content/plugins). Then goto line 66 and replace the entire foreach section. Basically I have commented out a few lines and use single->post_content to insert the post content.

foreach($catposts as $single):
	//Template idea by Verex
	if($lcpTemplate){
		require($tplFileName);
	} else {
		//$output .= '<li><a href="' . get_permalink($single->ID).'">' . $single->post_title . '</a>';
		if($atts['date']=='yes'){
			$output .=  ' - ' . get_the_time($atts['dateformat'], $single);//by Verex, great idea!
		}
		if($atts['author']=='yes'){
			$lcp_userdata = get_userdata($single->post_author);
			$output.=" - ".$lcp_userdata->user_nicename . '<br/>';
		}
		//if($atts['excerpt']=='yes' && ($single->post_excerpt)){
			$output .= "<p>$single->post_content</p>";
		//}
		$output.="</li>";
	}
endforeach;

The result will look like this:

Please leave a comment if you find this tutorial useful or if you try it out and run into trouble!

Hold on! Do you have a Facebook page? With one of the good looking Facebook Skins you social profile and presence will improve. Have a look! If you’re looking for nice Cute Tumblr Themes there is a lot of good one to choose from.

• 10+ Awesome Up To Date WordPress Plugins to Build Contact Forms Fast
• 60+ More Designer and Developer Community News
• 70+ Useful Community News for Designers and Developers