Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 24 2014

04:22

February 12 2014

13:50

26 Web Design Tutorials for Learning New CSS3 Properties

Advertise here with BSA


Over the past few years a number of prominent CSS3 tutorials have been published online. These are perfect for beginners who don’t have a lot of experience coding webpages. But developers who do have that experience may also find the more detailed articles quite insightful.

Take a look over this collection of posts related to newer CSS3 properties. There may be some you’re already familiar with, and others that you’ve never even heard about before. CSS3 provides developers with many different solutions used to solve individual problems. Also if you know any other great posts I’ve forgotten you can share with us in the post discussion area.

CSS3 Box Shadow Effects

various css3 box shadow effects tutorial

CSS Text Stroke

css css3 text stroke effect

Cubic-Bezier In CSS3 Transition

css3 transition cubic bezier tutorial

CSS3 :not Selector

css3 negation not selector guide

CSS3 Multiple Columns Layout

css3 multiple columns layout tutorial howto

CSS3 :First-Of-Type Structural Selector

css3 first type structural selector tutorial

CSS3 Linear Gradients

css3 linear gradients tutorial howto article

Transparencies and Gradients With CSS

css3 transparency gradient howto tutorial design

Using any font with CSS3

howto tutorial web fonts css3 article

CSS3 multiple background images

tutoral learn css3 multiple backgrounds howto

CSS background-size property

css background size property tutorial

The Skinny on CSS Attribute Selectors

basic guide tutorial using css attribute selector css3

CSS3 Reflection

tutorial howto code css3 reflection effect

Box Model Control with box-sizing

box sizing css3 tutorial howto model

Annotation Overlay Effect with CSS3

css annotation overlay effect css3 design

Understanding the CSS Clip Property

css clip property tutorial howto

Intro to CSS Pseudo-Classes

howto tutorial css3 pseudo classes article

List of CSS3 Pseudo-classes

list of css3 pseudo classes design website

2D and 3D Transform Techniques

css3 tutorial 2d 3d transition animation

CSS3 Transitions from Scratch

html css3 transitions and form effects

Smooth Fonts with CSS3

css3 alias font design typography howto

Background-clip with CSS3

css3 background clip tutorial howto article

Change Default Text Selection Color

howto update text select color design tutorial

Awesome Flat Buttons with CSS

css3 flat gradient button design howto coding

CSS3 Animations Using Keyframes

css3 keyframe animation design howto tutorial

Experimenting With CSS3 Keyframe Animations

experiment new css3 keyframes howto animate elements


Advertise here with BSA

Sponsored post
soup-sponsored
20:53
Reposted byLegendaryy Legendaryy

February 06 2014

15:58

How To Code a Hidden Author Bio Display using jQuery

Advertise here with BSA


I was browsing through websites one day and came across one really interesting feature. Jennifer Perrin has a small blog on her website which uses a fixed top navbar. In the center you’ll find a profile avatar photo which displays her full author bio(triggered by hover). This is a really interesting feature and I’ve set out to replicate the idea using jQuery.

So in this tutorial I want to demonstrate how we can build a very simple HTML5 webpage recreating a full author bio display. The entire bio container is hidden until the user hovers over the avatar photo. Take a peek at my live demo to see what it should look like:

hidden author bio display hover tutorial screenshot

Page Setup

First I know the effect will be created using jQuery so I’ll be downloading a local copy for this project. It’s all pretty simple except for the hovering triggers based on event delegation. But we can get into that later in the article.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Hidden Author Bio Display Demo - DesignM.ag</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

I’ve also created a new stylesheet named styles.css. This has all my typical page resets along with a number of extra styles to position the bio and top navbar. To keep things simpler I didn’t use a whole lot of extra text or links within this toolbar. But for your own website it’s entirely possible to move things around as necessary.

  <header id="topbar">
    <div id="logo"><h1>MySite Logo</h1></div>
    
    <div id="avatar-icon">
      <img src="img/avatar.jpg" alt="Author avatar photo" class="authoravi">
      <div id="author-bio-box">
        <img src="img/avatar.jpg" alt="author big photo" class="bigavi">
        <h2>Jake Rocheleau</h2>
        <p>Jake is a writer and designer found all over the Internet. He specializes in UI design, frontend development, branding, and content strategy.</p>
      </div>
    </div>
  </header>

This is really the most important HTML on the webpage. Directly after the opening body tag I’ve setup a new header element as the base container. The logo and the avatar have their own separate divs positioned within this container. Whenever a user hovers on top of the #avatar-icon image, we display the internal #author-bio-box.

CSS Design

You should take a look over my basic styles and CSS resets if you’re unfamiliar with page structure. At the top I’m referencing an external web font named Montserrat Alternates. Beneath the top navigation bar I’ve setup a wrapper div which contains filler Lorem Ipsum text. You can see how the bio display works even when scrolling down through a webpage.

#avatar-icon {
  position: relative;
  width: 100px;
  margin: 0 auto;
  text-align: center;
  padding-top: 6px;
  cursor: pointer;
}

#avatar-icon .authoravi {
  width: 55px;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* header top bar */
#topbar {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  min-width: 750px;
  height: 70px;
  padding: 0 45px;
  z-index: 9999;
  background-color: #6e7cc9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6e7cc9), to(#6a74af));
  background-image: -webkit-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -moz-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -ms-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: -o-linear-gradient(top, #6e7cc9, #6a74af);
  background-image: linear-gradient(top, #6e7cc9, #6a74af);
  border-bottom: 1px solid #53597c;
}

To keep this avatar centered in position I’m using margin: 0 auto on the fixed-width container. We also need a relative positioning so the interior author box can use absolute positioning. #avatar-icon becomes the new container for this absolute position, as opposed to the entire body element.

Using a fixed position on the #topbar header is key for the navigation to follow along with the user. I’m using large padding on the HTML body so everything on the page gets pushed down beneath this fixed bar. Using the CSS property top: 0 will force this bar to stay fixed at the top of the page, while the other content appears below.

/** bio box **/
#author-bio-box {
  display: none;
  position: absolute;
  cursor: default;
  width: 300px;
  top: 0;
  left: -100px;
  padding: 5px 15px 8px 15px;
  background: rgba(20,20,20,0.9);
  z-index: 99999;
  -webkit-border-radius: 0 0 7px 7px;
  -moz-border-radius: 0 0 7px 7px;
  border-radius: 0 0 7px 7px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.6), -1px -1px 3px rgba(0,0,0,0.5) inset;
}

#author-bio-box .bigavi {
  width: 95px;
  height: 95px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#author-bio-box h2 {
  display: block;
  font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  text-align: center;
  color: #fff;
  cursor: text;
  font-variant: small-caps;
  letter-spacing: -0.03em;
}
#author-bio-box p {
  display: block;
  font-size: 1.5em;
  line-height: 1.35em;
  color: #fff;
  cursor: text;
}

Finally we get to the hidden author box and other internal elements. The #topbar div uses a z-index of 9,999 so that it appears on top of all other page content. Since we need this author bio to appear on top of the bar I’m using 99,999 z-index to setup the correct layout.

Width is fixed at 300px but since this bio is offset in the center, it won’t appear correct. We can’t use absolute positioning because the content itself will appear outside the boundary box. It’s smarter to use a negative left margin to reposition the author bio exactly where it should appear. Note this value should also be changed as you update the bio box width, so keep this in mind when adjusting for your own project(s).

jQuery Display Effects

Possibly the most confusing piece of my jQuery code is event delegation with the .on() method. By using the body element as my selector it works like an updated event handler to also bind events onto hidden or dynamically-appended elements. Check out this Stack Overflow post to get a better understanding.

$(function(){
  $('body').on('mouseenter', '#avatar-icon', function(e){ 
    $('#author-bio-box').css('display','block');
  });

  $('body').on('mouseleave', '#author-bio-box', function(e){
    $(this).css('display','none');
  });
});

Also worth noting are the mousenter and mouseleave event triggers. mouse over/out will trigger if the user re-hovers something other than the target element. So if we open the author bio and the user hovers the new avatar image or the bio paragraph, it would see we are hovering something new and close the whole box. Mouseleave will only trigger when leaving the entire container – much safer and provides exactly the effect we need.

So once the user hovers onto #avatar-icon we immediately display the author bio box. And once the mouse leaves those boundaries this box gets re-hidden from view. Truly a simple yet powerful script if you know how to use it.

hidden author bio display hover tutorial screenshot

Final Thoughts

I can admit that this solution probably wouldn’t work best on all websites. But if you’re designing a small author-based blog why not try it out? It is a really interesting concept which is perfect for any fixed-width title bar. Feel free to download a copy of my source code and let us know what you think in the post discussion area.


Advertise here with BSA

January 21 2014

16:53

How To Design Custom Pricing Plan Tables with HTML5 and CSS3

Advertise here with BSA


Any company selling a service with payment plans usually breaks up the structure into different packages. Smaller packages will cost less but also provide fewer features. Pricing tables are the perfect UI component to display these packages in an easy-to-compare design.

For this tutorial I want to demonstrate how we can create pricing tables with just a bit of HTML5 and CSS3. Despite the name, I haven’t actually used any <table> elements within the design. You might feel these are easier but they also depend on a rigid formulaic structure. Pricing tables can have many facets including service terms, plan details, pricing details, and of course the purchase/signup button.

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code

Getting Started

This demonstration is mostly built around aesthetics so I haven’t even bothered touching the jQuery library. The document header references a single stylesheet named styles.css which imports an external web font Alegreya Sans.

Looking towards the internal table itself you will see it’s built using a container div, along with internal block elements like <header> and <section>. This makes everything easier to read when skimming through the code. And we can separate block sections from each table to distinguish between background colors and font styles.

<div id="pricing" class="clearfix">
  <div class="price-table">
    <header>
      <h3>Basic</h3>
    </header>
    <section class="price-details">
      <p>$19<span class="price-recur">per month</span></p>
    </section>
    <section class="details">
      <ul class="details-list">
        <li class="wizard">Easy Setup Wizard</li>
        <li class="storage">250GB Storage</li>
        <li class="scripts">Open Source Scripts</li>
        <li class="support">24/7 Tech Support</li>
      </ul>
    </section>
    <section class="purchase-btn"><a href="javascript:void(0);">Purchase</a></section>
  </div><!-- @end "Basic" .price-table -->

To save room I’ve only copied the very first pricing table HTML for the “Basic” plan. The header section uses a background gradient plus a small text shadow to stand apart from the page. Pricing details are split using a span element with the class .price-recur. So the numeric cost will appear much larger than the denoted timeframe(per month).

You’ll also notice the .details-list contains list items with different classes. These each represent a different background icon from the Gentle Edges icon set. The PNGs are white by default which is perfect for this dark tabular color scheme.

The outer container #pricing uses a clearfix class to keep everything aligned properly. The tables are floated next to each other using fixed width values. These could be redefined to use flexible widths based on the container, if your layout is responsive. Basically you can adjust these numbers in CSS to get them aligned any way you’d like.

Typical CSS Styles

Each of the table designs follows the same class structure. Higher-priced tables have more listed icon features, and so they appear longer on the page.

/* page structure */
#w {
  display: block;
  width: 800px;
  margin: 0 auto;
  padding: 15px 10px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
  -moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
  box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
}


#pricing {
  display: block;
  margin-bottom: 20px;
}

.price-table {
  display: block;
  float: left;
  width: 185px;
  text-align: center;
  color: #fff;
  background: #6f8590;
  margin-right: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Each inner table is fixed at 185px width. This comes out to 740px along with an extra 10px margin. The total body wrapper is 800px so these tables come in at just about the perfect width value. Also the table itself has rounded corners which are then translated to other elements such as the header.

.price-table header {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid #54656d;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #5f8597;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#324a56), to(#5f8597));
  background-image: -webkit-linear-gradient(top, #324a56, #5f8597);
  background-image: -moz-linear-gradient(top, #324a56, #5f8597);
  background-image: -ms-linear-gradient(top, #324a56, #5f8597);
  background-image: -o-linear-gradient(top, #324a56, #5f8597);
  background-image: linear-gradient(top, #324a56, #5f8597);
}
.price-table header h3 {
  font-size: 2.7em;
  font-weight: bold;
  text-shadow: 1px 2px 0 rgba(0,0,0,0.3);
}

.price-table .price-details {
  padding: 20px 0;
  background: #cedee6;
  font-size: 4.46em;
  line-height: 1.1em;
  font-weight: bold;
  color: #4b5d72;
  margin-bottom: 15px;
  text-shadow: 1px 2px 0 rgba(255,255,255,0.6);
}
.price-table .price-details .price-recur {
  display: block;
  font-size: 0.4em;
  line-height: 0.9em;
  font-weight: normal;
}

.price-table .details-list {
  list-style: none;
  text-align: left;
  margin-bottom: 10px;
}
.price-table .details-list li {
  display: block;
  padding: 8px 0;
  padding-left: 40px;
  font-size: 1.2em;
  line-height: 20px;
  font-weight: bold;
  background-position: 6px 5px;
  background-repeat: no-repeat;
  border-bottom: 1px solid #a7b7bf;
}

You’ll notice the header uses a CSS3 background gradient with browser prefixes to create the glossy effect. As we move down to .price-details the background turns into a stationary color, and the pricing table itself uses a darker gray for the original background. Each of these sections will appear divided and still come together forming a recognizable pricing table.

On each of the .details-list li elements we need to keep the same background properties, but swap out different images. I figured the simplest way to do this would be including the same background-position and background-repeat values for each list item. Then for individual classes we switch between the icon URL itself.

The Recommended Table

You may have already noticed that the “Pro” table has a lighter purple hue in comparison to the darker teal. Many pricing tables will encapsulate one of the plans to appear more noticeable than the others. Companies offer these plans as the best deal for your money, and hope to persuade visitors into choosing that plan for its greater value.

The recommended table’s header is much shorter in height because I’ve included a small notice to catch people’s attention. You could get fancy using ribbons or badges, however I wanted to avoid extraneous images for this design. The table itself has an additional class so we can target internal elements using .price-table.recommended as the selector.

.price-table.recommended {
  background: #6c7b9b;
}

.price-table.recommended header {
  padding: 5px 0;
  background-color: #5a76b1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#495e8a), to(#5a76b1));
  background-image: -webkit-linear-gradient(top, #495e8a, #5a76b1);
  background-image: -moz-linear-gradient(top, #495e8a, #5a76b1);
  background-image: -ms-linear-gradient(top, #495e8a, #5a76b1);
  background-image: -o-linear-gradient(top, #495e8a, #5a76b1);
  background-image: linear-gradient(top, #495e8a, #5a76b1);
  border-bottom: 1px solid #3b577e;
}
.price-table.recommended .notice {
 font-size: 1.2em;
 line-height: 20px;
 background: #3b577e;
 font-weight: bold;
}

.price-table.recommended .price-details {
  background: #bac7ea;
  padding: 20px 0;
}

To compensate for the loss of space I’ve reduced the header padding from 30px down to 10px. This is also why the small .notice text uses a line-height of 20px. I wanted the last two tables to stay perfectly aligned, even though they do feature slightly different content. Mostly all of the background colors have been updated along with the purchase button.

.price-table.recommended .purchase-btn a {
  border-color: #6a3fc2 #7045bf #651fbb;
  background: #6149ad;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7a67d8), to(#6149ad));
  background-image: -webkit-linear-gradient(top, #7a67d8, #6149ad);
  background-image: -moz-linear-gradient(top, #7a67d8, #6149ad);
  background-image: -ms-linear-gradient(top, #7a67d8, #6149ad);
  background-image: -o-linear-gradient(top, #7a67d8, #6149ad);
  background-image: linear-gradient(to bottom, #7a67d8, #6149ad);
}
.price-table.recommended .purchase-btn a:hover {
  background: #634fc2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8876e2), to(#634fc2));
  background-image: -webkit-linear-gradient(top, #8876e2, #634fc2);
  background-image: -moz-linear-gradient(top, #8876e2, #634fc2);
  background-image: -ms-linear-gradient(top, #8876e2, #634fc2);
  background-image: -o-linear-gradient(top, #8876e2, #634fc2);
  background-image: linear-gradient(to bottom, #8876e2, #634fc2);
}
.price-table.recommended .purchase-btn a:active {
  background: #503d88;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6d58bd), to(#503d88));
  background-image: -webkit-linear-gradient(top, #6d58bd, #503d88);
  background-image: -moz-linear-gradient(top, #6d58bd, #503d88);
  background-image: -ms-linear-gradient(top, #6d58bd, #503d88);
  background-image: -o-linear-gradient(top, #6d58bd, #503d88);
  background-image: linear-gradient(to bottom, #6d58bd, #503d88);
}

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code

Closing

You won’t find a need for pricing plan tables in every project. Actually you probably won’t need them for a majority of web projects. But there are many companies which offer a recurring service, like TypeKit or MaxCDN. These are the designs which can truly incorporate pricing tables with a sense of purpose. Feel free to use my source code in your own website layouts, and to share any questions or ideas you may have in the post discussion area below.


Advertise here with BSA

December 02 2013

04:43

How To Code an Image Zoom Hover Display with jQuery

Advertise here with BSA


For typical e-commerce websites you will often notice a detailed photo display when hovering an image. The zoom effect helps prospective buyers to see more of the product when deciding if it’s worth purchasing. This familiar image zoom effect can be applied to many other websites just to provide a better user experience.

In this tutorial I want to introduce a very simple jQuery plugin called EasyZoom. It’s all free and open source to download right from Github. The tool makes it super easy to create your own image zoom panel, which can appear on mouseover or be tied onto another event handler. Check out my live sample demo to get an idea of the final product.

jquery easyzoom plugin hover images tutorial preview

Live DemoDownload Source Code

Getting Started

First you’ll want to download the jQuery plugin codes directly from Github. I’ve created 2 separate folders in my working directory for css and js files. You specifically need to copy over easyzoom.js and easyzoom.css. Also download or link to a CDN with the latest version of jQuery and include all these files into the document head.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Image Hover Zoom Effect - DesignMag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/easyzoom.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/easyzoom.js"></script>
</head>

My own custom styles.css stylesheet is used to create the page layout. EasyZoom does have its own features and classes which are targeted inside the other stylesheet. You can obviously choose to overwrite them if you need the design in a slightly different manner.

  <div id="w">
    <h1>Image Zoom Magnifying Effect</h1>
    <p><em><a href="http://www.flickr.com/photos/rykneethling/5679896974/">featured image source</a></em></p>
    
    <h2>@2x Zoom</h2>
    <div class="easyzoom easyzoom--adjacent">
      <a href="images/autumn@2x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
    </div>
    
    <h2>@3x Zoom</h2>
    <div class="easyzoom easyzoom--adjacent">
      <a href="images/autumn@3x.jpg"><img src="images/autumn.jpg" alt="autumn road" width="480" height="320"></a>
    </div>
  </div><!-- @end #w -->

In the HTML code you will notice the container object uses a class .easyzoom. By including a secondary class for .easyzoom–adjacent it will force the image zoom to appear next to the image. Everything is self-contained inside the HTML where the larger image URL will be inside a containing anchor link.

There are some extra classes for displaying image zoom effects off to the side, or right within the photo itself. Both of these samples are available in the Github archive if you want to see the code examples.

Common CSS Styles

There isn’t a whole lot of detail worth explaining within the EasyZoom stylesheet that can’t be understood with a quick glance. Container divs are positioned absolutely with relativity to the outer container. This way it’s simpler to ensure the hover image will appear off to the side, and you can adjust these coordinates using properties such as top: 15px.

.easyzoom-flyout {
	position:absolute;
	z-index: 100;
	overflow: hidden;
	background: #fff;
}

/**
 * EasyZoom layout variations
 */
.easyzoom--overlay .easyzoom-flyout {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.easyzoom--adjacent .easyzoom-flyout {
	top: 0;
	left: 100%;
	width: 70%;
	height: 70%;
	margin-left: 15px;
}

In my stylesheet the first line includes a relative web font named Balthazar. I’m only using this in the page title for a bit of extra design spice. Everything else follows typical page resets along with a wrapper div using the ID #w.

@import url('http://fonts.googleapis.com/css?family=Balthazar');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%; 
  line-height: 1;
  color: #414141;
  padding: 25px 0;
  background: #f3f3f3 url('bg.png'); /* http://subtlepatterns.com/straws/ */
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; }

h1 {
  font-family: 'Balthazar', 'Trebuchet MS', Tahoma, sans-serif;
  color: #515151;
  font-size: 4.4em;
  line-height: 1.4em;
  margin-bottom: 10px;
  letter-spacing: -0.05em;
  text-align: center;
}

h2 {
  font-family: Arial, Tahoma, sans-serif;
  color: #676767;
  font-size: 2.6em;
  line-height: 1.3em;
  margin-bottom: 6px;
  letter-spacing: -.075em;
}

p {
  font-size: 1.4em;
  line-height: 1.1em;
  margin-bottom: 15px;
}


a { color: #85aed1; }
a:hover { color: #91bbde; }

/** page structure **/
#w {
  display: block;
  width: 860px;
  margin: 0 auto;
  background: #fff;
  padding: 5px 11px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

My resets are based off the template by Eric Meyers and has been adapted as such. I find that some people prefer using content-specific resets rather than global ones. It all comes down to how you build websites and your own personal preferences. Customizing or editing the default EasyZoom classes will require most of your attention.

EasyZoom JS

This last bit of code should be held within <script></script> tags at the bottom of the page, before you close the body. We only need to call a single line of code in reference to the EasyZoom plugin.

$(function(){
  var $easyzoom = $('.easyzoom').easyZoom();
});

The reason for picking .easyzoom as the class selector just follows typical naming conventions. You could update this to follow another class or even a single element ID. Basically you should target an element which contains the regular image, and that tag should be wrapped around a link pointing towards the bigger image.

You might also notice in my code that I’ve setup 2 different examples. The larger images follow a naming scheme of autumn@2x.jpg and autumn@3x.jpg for being double and triple in size, respectively. You might prefer to include the largest sample image you can find, making for a better overall user experience.

Please check out the plugin’s live demo page which also includes function options and API calls at the bottom. Documentation is sparse because there isn’t a whole lot that needs customization. Using the .show() API method you can pass an individual mouse event which only displays the image zoom under certain conditions.

Overall this is a pretty simple configuration and it’s great for any website. Many other plugins also run on jQuery which makes this plugin another powerful resource for developers.

jquery easyzoom plugin hover images tutorial preview

Live DemoDownload Source Code

Closing

These code samples are not too difficult even for a beginner who has never touched jQuery. There are some alternative options that you can supply, but they’re only needed within more advanced layouts. Writing the most basic JS code will allow you to create a simple interface that works great in almost any website layout. Feel free to download a copy of my tutorial codes and see what else you can build with this plugin.


Advertise here with BSA

November 21 2013

13:59

Essential Features for Building a New WordPress 3.7 Theme

Advertise here with BSA


When you sit down to develop a modern-day WordPress theme you’ll typically be following some design mockup, or at least an idea in your head. This can be a challenge at times when you don’t want to think much about the customizations. But any good WordPress theme should be comprised of a number of key points.

usb wordpress logo theming featured image

In October 2013 the newest WordPress 3.7 release was announced with plenty of new features. Not many updates will directly impact themes, yet it is a marvel seeing how far this platform has advanced since version 3.0. In this article I want to go over some of the core fundamentals you should think about including with every new WordPress theme. Especially for premium or free themes designated for commercial use by hundreds of different webmasters.

Getting Started

If you are unfamiliar with the core fundamentals of WordPress theming please check out their online documentation for more details. The bare minimum requirements should be a single index.php file along with a style.css stylesheet. Your CSS should begin with a comment block indicating the theme name, version, and other key metadata.

But this is quite literally the absolute least effort you could put into theming. Once you can start building in the functions.php file you’ll end up with a whole lot more customization. You can specify new custom post types, taxonomies, pretty much anything technical should be organized into functions and called in your theme file(s), or within the content as a shortcode.

Some of this terminology is newer to WordPress development beyond 3.0. If you are not sure how to build shortcodes or CPTs don’t worry! Plenty of guides online provide an easy-to-copy template of code which you could save as your own snippet for future development. Just be sure to familiarize yourself with these newer features to at least understand how they behave, and how they look in the WP Admin backend.

Theme Headers & Backgrounds

When you click on the “Appearance” link within the admin panel you find a number of sub-links which appear based on the currently active theme. One link says Header and this is very typical with newer WordPress themes. This settings page allows users to change out their header text for an image, or just update the link/background colors.

This is also true with custom backgrounds on the page. You can read more about custom headers & backgrounds which changed a bit during version 3.4. Basically you’d need to code an area for dynamic updates in the header, based on what the user selects. Both of these background/header functions can take an array of settings which determine the default state.

wordpress header custom settings wpadmin screenshot

Backgrounds are slightly trickier but definitely not impossible. Custom Background Extended is a free plugin which capitalizes on this functionality. You can install the plugin and go through the source code to see how it works, or even check out some other related articles online. When targeting a wide audience both of these features can dramatically improve the quality of your theme.

Active Widget Areas

WordPress widgets are another very popular topic that have been around since the early days. However the process for developing widgets gradually advanced over newer versions to achieve what we have today. If you’re not familiar with the process of widgetizing a theme then definitely check out the online documentation or follow along with great tutorials online.

The benefit to widgetizing your theme is not in the ability to create your own widget(although this is pretty cool). By simply coding a widgetized sidebar you are allowing the user to swap out different pre-built widgets to see what looks best on the site. Plugins may also create new widgets giving the user even more options to switch around.

It’s noteworthy that a widgetized area can be placed anywhere in your theme. You could place some in your footer, just after the content, or even at the very top of your layout(think advertising). To get more technical, it helps if you name the widget areas specifically for their intended purpose. Also consider if they are left empty what content should appear, if anything at all.

Once you get comfortable programming widgetized areas into your theme, it might incentivize you to learn how to actually build custom widgets. These can include anything you like from database queries, API data, login forms, and so forth.

Custom WP Nav Menus

This step is probably the other crucial piece to any WordPress theme. Custom headers, widgetized areas, and WP menus are the 3 key points you should always consider. Anything else is definitely beneficial but certainly not required for a successful release.

You can read up more about navigation menus and the wp_nav_menu() function directly on the WordPress codex. The point is to first code a nav menu with a unique name. Then you can implement this menu into your layout with wp_nav_menu() calling the unique name as a parameter. If the menu isn’t setup then it’ll display the typical navigation by default.

Anybody who is somewhat familiar in WordPress should know how to create a custom menu. The user can arrange links and sub-links which become auto-formatted into HTML lists. Then the user selects which menu should be used and it’s all set! Now you would see this user-created list attached to a dynamic menu section already in the theme.

Additional Theme Settings

When you download a new copy of WordPress none of the internal themes have an extra settings menu. This has to be coded manually using the Settings API. It will usually display another link under “Appearance” with any text you choose – it is specific to your theme.

On this new settings page you can practically structure the layout any way you’d like. It can include sliders, input fields, many buttons and even multiple tabbed sections. Plugin developers often need to create their own settings pages for handling user preferences. But themes do not always require such settings – it is often found in more premium products.

monster theme open source wordpress custom settings api

But that doesn’t mean you should be discouraged from the idea! One free theme Monster does a very simple yet elegant job with this feature. Once activated you’ll find a new link “Theme Options” that displays a list of icons. The only option a user may customize is the monster icon which displays at the top of the page. A very simple and almost unnecessary settings panel – however it’s just one working example among a plethora of ideas that you could build into a WordPress theme.

Using Shortcodes

I brought up shortcodes earlier and I want to point out that many themes do not include these by default. Many plugins choose to utilize shortcodes because it is easier for embedding PHP-driven content into the page. Other reasons might include formatting text styles like columns, horizontal rules, link buttons, tables, HTML5 video players, and so forth.

WordPress also has a documented section about their Shortcode API you should look into. The development process might remind you of building a widget. Although these two ideas are very fundamentally different because shortcodes will be added directly into post/page content using brackets. So a new video widget might look like this: [wpvideo src="/media/movie.mp4" width="640" height="480"][/wpvideo]

You have the freedom to name your tags anything you like, so long as it hasn’t already been taken by another plugin or a core WordPress feature. If you are brand new to making themes don’t stress about getting into shortcodes right away. Build something that you can be proud of and make sure it works properly with no bugs. From there you should try updating the v1.0 release to add some extra functionality – and maybe a bit of that functionality includes shortcodes.

Closing

Many of these ideas are commonly understood by folks who are familiar with WordPress. Keep in mind that not everyone wishes to be a developer. So the more you can get people interacting with the admin section and not the source code, the better your theme will scale. But it’s also true that development is messy and sometimes you just need to hack into the code! No matter how you decide to start building themes, just keep practicing and be sure to gauge feedback whenever possible.


Advertise here with BSA

November 04 2013

15:28

Building a Single-Page Dynamic Website using AnimateScroll.js

Advertise here with BSA


Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

jquery animate scroll library single page tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

The first step is to download a local copy of jQuery and grab a copy of the AnimateScroll.js codes from Github. You will only need to copy over a single file animatescroll.js which should be placed alongside your jQuery script.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Dynamic Scrolling with AnimateScroll.js - DesignM.ag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/animatescroll.js"></script>
</head>

The inner page structure is fitted to host a single fixed navigation bar at the top of the page. I have this wrapped inside an HTML5 <nav> using an internal unordered list. Considering the page is meant to display at 100% width I haven’t used any outer wrapper.

  <nav id="topnav" class="clearfix">
    <ul>
      <li><a href="body" id="homenavlink">Home</a></li>
      <li><a href="#about" id="aboutnavlink">About</a></li>
      <li><a href="#portfolio" id="portfolionavlink">Portfolio</a></li>
      <li><a href="#contact" id="contactnavlink">Contact</a></li>
    </ul>
  </nav><!-- @end #topnav -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1581572/ -->
  <section id="pagetop" class="contentpg">
    <h2>First Section</h2>
      
  </section><!-- @end #pagetop -->
  
  <!-- BG http://nature.desktopnexus.com/wallpaper/1581411/ -->
  <section id="about" class="contentpg">
    <h2>About Someone</h2>
  </section><!-- @end #about -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1582636/ -->
  <section id="portfolio" class="contentpg">
    <h2>Portfolio Work</h2>
  </section><!-- @end #portfolio -->
  
  <!-- BG http://abstract.desktopnexus.com/wallpaper/1583541/ -->
  <section id="contact" class="contentpg">
   <h2>Contact Some People</h2>
  </section><!-- @end #contact -->

Depending on how you want your content to appear it may be worthwhile to create a wrapper class. This wrapper can be placed inside each content section for centering the text, or keeping it at some fixed width value.

Each of my sections is covered with a fullscreen background image. Since there is very little content they are only maxed out to a certain height. But with natural CSS3 background images we can expect the design to scale for any monitor resolution. Let’s delve into the stylesheet and really see how this all comes together.

Page Designs

Inside my styles.css file is everything necessary for the layout to render properly along with the AnimateScroll.js plugin. First you’ll notice one small import statement to include a Google web font used for custom heading text. This is followed by a long list of CSS resets to update the default page document structure.

It gets interesting once we break into the core page design. #topnav is fixed to the top of the page at a height of 55px. The links behave as parallax sliders moving around to sections within the webpage itself. You can build this navigation anywhere in your layout – but keeping it at the top makes more sense in a fixed position.

/** page structure **/
#topnav {
  display: block;
  position: fixed;
  top: 0;
  height: 55px;
  width: 100%;
  background: #779ec0;
  border-bottom: 2px solid #628aad;
}
#topnav ul  { padding-left: 80px; }

#topnav ul li { 
  display: block;
  width: auto;
}

#topnav ul li a {
  display: block;
  float: left;
  line-height: 55px;
  margin-right: 10px;
  padding: 0 15px;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  text-decoration: none;
}
#topnav ul li a:hover {
  background: #62819d;
}

Each of the internal section elements has their own ID to designate unique background images. But they also use the class .contentpg for strict duplicated rules. Notably I’ve written some internal padding along with a maximum height of 550 pixels. Each content section may be longer or shorter depending on how much you need to write. Feel free to edit this value so that it works best on your project(s).

/** page sections **/
.contentpg {
  display: block;
  min-height: 550px;
  padding: 55px 80px;
}

#pagetop {
  background-image: url('../img/bg1.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#about {
  background-image: url('../img/bg2.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale')";
}

#portfolio {
  background-image: url('../img/bg3.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale')";
}

#contact {
  background-image: url('../img/bg4.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale')";
}

The codes handling fitted background images are from the popular CSS-Tricks article covering perfect CSS-based fullscreen backgrounds. CSS3 is not supported in many older browsers and so this trick is great for modern websites. But if you are concerned about legacy support I would highly recommend using another jQuery plugin such as Backstretch.

Initialize AnimateScroll.js

With the page structure in place and the CSS designed nicely it is time to apply the animation. There are 3 options you can go over in the documentation but it’s all very straightforward. The easing option controls the animation style, padding gives extra space from the top of an element, and scrollSpeed adjusts how fast or slow the animation happens.

$(function(){
  $('#topnav ul li a').on('click', function(e){
    e.preventDefault();
    var scrolldiv = $(this).attr('href');
    
    $(scrolldiv).animatescroll({padding:50});
  });
});

This small block of code should be placed inside a script tag just before closing the document body. If you wish to write other scripts then it could be instead written into an external JS file. The selector is targeting any link within the top navigation section.

Once the user clicks on a link we can stop the href value from loading into the address bar with event.preventDefault(). However we do need this href value because it will designate which content section we are scrolling into. I saved this into a new variable scrolldiv which is then turned into a selector for the .animatescroll() method.

Notice the single option I am using is just related to padding. Since the top navbar is always fixed on the screen we need to relieve some extra room. This option works for all the lower content areas, but the very top home section needs additional CSS padding from the body. Now the navigation bar will never get in the way of any content on the page.

jquery animate scroll library single page tutorial preview screenshot

Live DemoDownload Source Code

Closing

I know this is a fairly basic demonstration but I made it this way to behave almost like a template. Anyone who is willing to build their own single-page website layout could use this tutorial as a starting point. There are also many alternative parallax plugins which you could try looking into. If you want to see how my example works feel free to download a copy of the project source code and play around to see what you can build.


Advertise here with BSA

October 28 2013

15:06

Introduction to A/B & Multivariate Testing in Web Design

Advertise here with BSA


Anyone who is familiar with increasing website conversions has probably heard about A/B testing. It is a way for webmasters to display 2 variants of the same page out to their audience at random, and then gauge results based on user performance. A/B testing(or split testing) is very popular on sites where users are more interactive on the page. Think about projects like social networks, SaaS products, e-commerce shops, business portfolios, etc.

split testing ab dribbble shot philip clark

There is also a higher stage of this process called multivariate testing. Here you can include more than just 2 options which may range out to A/B/C/D+ testing. The concepts are all similar but you’ll need to run tests for longer in order to acquire accurate results. In this guide I want to introduce the idea of split testing and how webmasters or project directors can get started.

What to be Testing?

This is a common first question and it’s completely reasonable to ask. You want to think about areas on your webpage, newsletter, or other digital interface which could be improved for an easier user performance. Blog headlines, sidebar advertisements, main navigation links, anything which should be commonly accessed by users is fair game.

The goal is to see which of your 2 designs performs best in a general 50/50 split of your traffic. You want to determine the average percentage of users who click your headlines more frequently, or click on the quicker, or something like this. It’s all about “fixing” your website’s first impression to get users more interactive on the areas you want them to be interacting with.

Online Tools

I would recommend a list of tools, but many of them do charge money for a full account. SaaS products have become more relevant and it is often easier for webmasters to pay money to a 3rd party service and have them manage the backend.

If you want a free product then definitely try out Google Website Optimizer. Their old URL has gone down and the service is now combined into Google Analytics. But it is completely free to use and directly ties into your Analytics traffic results. This is the best way for a new tester to dive right into the process.

visual website optimizer vwo homepage layout screenshot

But when you know you want something more detailed, I would highly recommend Visual Website Optimizer. You can signup for a free plan which has some pretty relaxed limits. It does include a majority of the paid plan features – however you are limited to testing only 1,000 visitors per month. For high-traffic websites it’ll take a lot longer to obtain useful results. But on low-traffic websites this is a great way to start manipulating your interface and seeing how it affects conversion rates.

Newsletter Designs

Not every website needs to or should run a newsletter. But for larger communities it is the perfect way to keep people visiting over time. You can include new items for sale, free downloads, or recent blog posts. And it is a great way to check out the response from visitors onto your internal landing page(s).

A/B testing for newsletter designs is much more common than you might think. It is somewhat easier than testing a website, and it can be handled by many e-mail delivery services. Both Campaign Monitor and MailChimp offer split tests as a part of their system. You can build two distinct email layouts and have them divided into a rough 50/50 split out to your subscribers.

email newsletter ab testing split multivariate mailchimp diagram

Obviously your goal for testing here is the same as anywhere else. How can you redesign buttons, links, headers, and content to engage visitors into clicking through to your website? Once subscribers can flesh out your newsletter they will be more likely to actually read what it says. Maybe one of your links or headlines gets somebody curious and they go through your entire landing page.

Web copy is just as powerful as small design changes. Many case studies online talk about this minor difference which can have a tremendous impact on your conversion rates. Don’t try to assume minor updates are silly and will have no effect, because you may be surprised when you see the results!

Testing in Phases

I want to add that you can’t give up too easily on this stuff. Waiting around for 5,000 visitors may not be enough of an audience to completely gauge how you changes are working. Don’t be too steadfast to move onto your next idea without allowing enough time to pass.

The best way to manage your A/B testing is in phases of updates. Either look for small wins through single-element updates, or try updating a lot on the page and see which version of the layout works best. These two scenarios are both helpful and they can both be run using an A and B option. But what you are testing for will play a huge role in the process.

android ux ui testing mobile app screenshot dribbble

If you feel more comfortable doing minor changes between design iterations this is another solution. Just be sure that you leave time for enough visitors to check out the page and give you some helpful feedback. Writing down a full list of ideas can be a great start towards figuring out what you hope to test, and how these tests may improve the percentage of user interaction.

Related Websites

There are some really cool blogs online which discuss the ideas of A/B testing. Some include tips while others focus on case studies and real impactful results. Check out some of these links if you want to learn more.

Closing

There are plenty of similar online articles which delve into the A/B testing process. I would greatly recommend looking for case study articles in Google. These will provide context for what other webmasters have tested, and what the results were. It may actually save you time in the long run when brainstorming ideas that you should be checking out on your website. A/B split testing most likely isn’t needed for every website, but when understood properly it can provide value into any creative project.


Advertise here with BSA

September 25 2013

13:46

Building Vertical-Tabbed Content Sections with jQuery

Advertise here with BSA


Ajax-style loading boxes are useful when displaying large sets of related data. Think about something like an FAQ page, knowledgebase, or support system. Any type of navigation is often suitable as long as the user can determine how to navigate between content areas.

In this tutorial I want to demonstrate how we can build a custom vertical content section using jQuery. All of the internal content is held inside div containers which can be navigated with an icon-based menu. This content isn’t loaded externally via Ajax, but is instead hidden & displayed using content sections already on the page. Check out my live sample demo to get an idea of what we are building.

jquery vertical content tabs sections tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

There are only two required files we need for this dynamic content section to work. The first is jQuery which you can download in a compressed local format. The other is Font Awesome which is a free open source CSS3 icon webfont. This means we can include certain fonts using @import and render icon graphics as font elements in the page.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>jQuery Vertical Tabbed Content Sections</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

This is what my document header looks like. I have included these two required items along with my core styles.css stylesheet. Also be sure that when you include the Font Awesome CSS file that you also copy over the entire /font/ directory. This includes all the important file types such as TTF and OTF, which are necessary to recognize any of the icon characters.

Creating Inner Body Content

The two main sections of the page are held within a single inner wrapping div. Obviously the navigation is much smaller than the content, so I have the navbar floating left without a connecting background. #sidemenu is actually an unordered list of items which display as block elements inside a fixed-width container.

<ul id="sidemenu">
  <li>
    <a href="#home-content" class="open"><i class="icon-home icon-large"></i><strong>Home</strong></a>
  </li>

  <li>
    <a href="#about-content"><i class="icon-info-sign icon-large"></i><strong>About</strong></a>
  </li>
  
  <li>
    <a href="#ideas-content"><i class="icon-lightbulb icon-large"></i><strong>Ideas</strong></a>
  </li>
  
  <li>
    <a href="#contact-content"><i class="icon-envelope icon-large"></i><strong>Contact</strong></a>
  </li>
</ul>

Now the other page element uses the ID #content which links to a number of internal div elements. These are labeled according to the navigation anchor links with the various IDs of home, about, ideas, and contact.

<div id="content">
    <div id="home-content" class="contentblock">
      <h1>The Main Page!</h1>
      <p>I swear this has some really great stuff. Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
      
      <p>Smack of ham. What is she doing at a beauty pageant? Is she running the lights or something? She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome.</p>
      
      <p>Probably out there without a flipper, swimming around in a circle, freaking out his whole family.</p>
      
      <p>Fun and failure both start out the same way.</p>
    </div><!-- @end #home-content -->
    
    
    <div id="about-content" class="contentblock hidden">
      ...
    </div><!-- @end #about-content -->
    
    <div id="ideas-content" class="contentblock hidden">
      ...
    </div><!-- @end #ideas-content -->
    
    <div id="contact-content" class="contentblock hidden">
      ...
    </div><!-- @end #contact-content -->
</div><!-- @end #content -->

Notice that each of the inner div elements uses .contentblock as an additional class for styling. Yet #home-content is the only one without the extra .hidden class because this homepage content should immediately display once everything finishes loading. We can use jQuery to un-hide the other page areas and re-hide the homepage content section when switching in the navigation.

CSS Design Styles

With the Font Awesome CSS already included we can use this font family anytime. I’ve also linked to another font family named Cantora One which is hosted by Google Web Fonts. Other than this my stylesheet uses a few basic resets along with a core container for each inner div section.

@import url('http://fonts.googleapis.com/css?family=Cantora+One');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  font-size: 62.5%; 
  line-height: 1;
  padding: 45px 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff url('../images/bg.png'); /* http://subtlepatterns.com/connected/ */
}

br { display: block; line-height: 1.6em; } 
img { border: 0; max-width: 100%; }

h1 {
  font-family: 'Cantora One', Arial, sans-serif;
  font-size: 3.0em;
  line-height: 1.6em;
  margin-bottom: 10px;
  color: #787878;
}

p {
  font-size: 1.4em;
  line-height: 1.25em;
  color: #575757;
  font-weight: normal;
  margin-bottom: 10px;
}

a { color: #8dadd8; }
a:hover { color: #7299cf; }

/* main page */
#w {
  display: block;
  width: 900px;
  margin: 0 auto;
  background: none;
}


#content {
  display: block;
  background: #fff;
  padding: 0px 15px;
  margin-left: 80px;
  -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  min-height: 300px;
}


.contentblock {
  display: block;
  padding: 15px 20px;
}

.contentblock.hidden {
  display: none;
}

You will notice that I’ve only included a white background on the main #content div which keeps the navigation off to the side as a separate element. There are so many different ways you could design this interface, but I like seeing the background on the active link turn white and appear to blend into the page itself. Also I have .contentblock.hidden set to no display which we can manipulate directly in jQuery.

/* side navigation */
#sidemenu {
  margin: 0;
  padding: 0;
  width: 80px;
  float: left;
  background: #e8e8e8;
  border-right: 1px solid #c9c9c9;
}


#sidemenu li { display: block; text-align: center; border-top: 1px solid #fff; font-size: 1.1em; }

#sidemenu li a { 
  display: block;
  padding: 6px 2px;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #d1d1d1;

}
#sidemenu li a:hover {
  background: #f2f2f2;
}

#sidemenu li a strong { 
  display: block;
  margin-top: 5px;
}

#sidemenu li a.open {
  width: 101%;
  background: #fff;
}

The outer navigation container is fixed to a width of 80px and floated off to the left side. We can use margins and padding on the other content box to keep these two from overlapping. The #sidemenu element uses a border on the right to encapsulate all the links.

Any anchor link with the additional .open class will be set to 101% width. This means it will be wider than the border and appear to be naturally connected into the page content. Everything else about the nav CSS is related to styling the icons and the text which are held in two separate HTML elements.

jQuery Animations

Finally we get to the bottom of the index.html file which includes a small block of jQuery. The main event handler is triggered whenever a user clicks on the navigation link items. First we want to disable the click event using e.preventDefault(). Since the content is loading dynamically, we don’t want to append the page ID onto the URL unless JavaScript were disabled.

$(function(){
  $('#sidemenu a').on('click', function(e){
    e.preventDefault();

    if($(this).hasClass('open')) {
      // do nothing because the link is already open
    } else {
      var oldcontent = $('#sidemenu a.open').attr('href');
      var newcontent = $(this).attr('href');
      
      $(oldcontent).fadeOut('fast', function(){
        $(newcontent).fadeIn().removeClass('hidden');
        $(oldcontent).addClass('hidden');
      });
      
     
      $('#sidemenu a').removeClass('open');
      $(this).addClass('open');
    }
  });
});

Jumping into the actual logic, we first check if the currently clicked item has a class of .open. If so then the link is already visible so we do nothing. Otherwise we create two new variables named oldcontent and newcontent. Using jQuery .fadeOut() on the old content we can then use a callback function to add the .hidden class while simultaneously showing the new content with .fadeIn().

The final two lines of code adjust the menu item once all the inner content has finished animating. We remove all .open classes from the menu links and then apply it onto the newly selected link item. This all happens within 1-2 seconds of time so it appears very sequential. We could always use a jQuery delay if there was some need to halt the animations. But this generic interface is quite easy to setup and shouldn’t require a whole lot of convoluted scripting.

Final Thoughts

I hope this tutorial may be useful to some web designers or developers who need a similar widget. The codes are easy to transfer into your own script or even into a plugin if needed. Of course, plugin functionality might be more convoluted than we need – but this type of dynamic webpage effect is perfect for section-based content with divisions in the material. Feel free to download a copy of my source codes and see if you can implement this design in your own future projects.


Advertise here with BSA

August 22 2013

13:58

How To Make a Custom HTML5 Select Menu with Selectize.js

Advertise here with BSA


Detailed and customized input fields have been a great focus of modern web development. The jQuery library along with similar open source projects have provided a framework to build with. It has lead to numerous advances within the field of user interface design. Especially for customizing the typical “default” components in form elements.

In this tutorial I want to introduce the Selectize plugin for jQuery. It allows developers to greatly alter the presentation of input fields related to select menus and tag-formatted text fields. This can provide a tremendous benefit on projects where you need a cleaner, updated interface. It is a fairly straightforward process and shouldn’t take more than 60 minutes to create. Take a peek at my live demo to see what we are making.

jquery selectize custom select menus html5 demo

Live DemoDownload Source Code

Getting Started

First we need to download a copy of Selectize and keep the local CSS/JS files stored in the same location. You can download this archive from the Selectize.js Github repo which also includes a few sample demos. All we need is selectize.min.js and selectize.css. Copy these files into a new folder /js and /css, respectively.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Customized Input Select Menus - Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/selectize.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/selectize.min.js"></script>
</head>

You should notice I downloaded a local copy of jQuery to store in the same /js folder. Also I created another stylesheet named style.css which helps to structure the website layout. Overall there are only 4 resource files and jQuery is the only dependency we need.

Now Selectize.js offers a multitude of various setups to choose from. The default configuration requires no parameters at all. But this plugin is heavily documented with all of the parameter options you could include, and what they do. I want to get us started with two basic elements inside a sample HTML form – but remember this link when you need to go back and customize some functionality.

Inner Body Content

The form elements are pretty standard and I am using jQuery e.preventDefault() to stop the form submission. Each .formrow class is used to split up the content into horizontal sections. We only need to apply selectize() onto the select menu and the tags menu.

  <form id="testform" method="post" action="#">
    <div class="formrow">
      <label for="name">Name:</label>
      <input type="text" id="name" class="basictxt" placeholder="Your name...">
    </div>
    
    <div class="formrow">
      <label for="email">Email:</label>
      <input type="text" id="email" class="basictxt" placeholder="Your email...">
    </div>
    
    <div class="formrow">
      <label for="subject">Subject:</label>
      <select id="subject">
        <option value="1">General Inquiry</option>
        <option value="2">Advertising</option>
        <option value="3">Press</option>
        <option value="5">Account Problems</option>
        <option value="4">Content Submission</option>
      </select>
    </div>
    
    <div class="formrow">
      <label for="tags">Tags:</label>
      <input type="text" id="tags" value="website,graphics,question">
    </div>
    
    <div class="formrow">
      <label for="message">Message:</label>
      <textarea class="basictxtarea" id="message"></textarea>
      <input type="submit" class="large button" value="Send Message">
    </div>
  </form>

After this initial starting block you’ll notice that I have included both the dropdown and the text-based tags input. Selectize handles this interface beautifully and it is worth the effort to get things setup if you need this functionality in your script. The ID #subject and #tags will be used for targeting the element itself.

Internal option values from the select menu can be determined using simple jQuery. This means you can pass the same values into your form through Ajax or regular user submission. But even using the tag field we can still get return values naturally after the form is submitted. My example here provides the default value=”website,graphics,question” which can be updated as the user appends more tags onto the list.

CSS Styling

The default Selectize styles are very important and should always be included within the page header. These will create the tag styles and other various input select features. If you wish to customize them, check each item’s scope within the CSS file and overwrite the properties in your own stylesheet.

/* form styles */
.basictxt {
  display: block;
  padding: 7px 8px;
  width: 550px;
  color: #555;
  font-size: 1.5em;
  border: 1px solid #ccc;
  font-family: Helvetica, Arial, sans-serif;
}

.basictxtarea {
  display: block;
  padding: 8px 10px;
  width: 600px;
  height: 115px;
  color: #555;
  font-size: 1.6em;
  border: 1px solid #ccc;
  margin-bottom: 14px;
  font-family: Helvetica, Arial, sans-serif;
}

.selectize-control { width: 60%; }

Many of these properties are not useful aside from resetting basic HTML forms. The .selectize-control class is applied onto every element running this jQuery function. Normally the input fields are using display: inline and the width can appear too short for the inner text. I am using 60% because it fits nicely into the layout, however you should customize this value to whatever suits your design.

.button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -ms-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button:hover {
  background-color: #eee;
  color: #555;
}

.button:active {
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

.button[disabled], .button[disabled]:hover, .button[disabled]:active {
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :)  */
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.button.large {
  padding: 12px 30px;
  text-transform: uppercase;
}

.button.large:active {
  top: 2px;
}

If you wish to duplicate the submit button style I copied over the important properties above. This original interface scheme comes from a design on Codepen with many other CSS3 effects. The button design is fantastic and it should blend nicely with any layout. Other styles are just common CSS resets and so we should move on to the final JS syntax.

Selectize.js with jQuery

As usual we need to create a script tag at the bottom of the page, before the closing </body> tag. This will contain the JS code to prevent form submission, as well as the selectize functions. If you need the form to work properly then remove this $(‘#testform’).submit() function entirely.

$(function() {
  $('#testform').submit(function(e){
    e.preventDefault();
  });
  
  $('#subject').selectize({create: true});
  $('#tags').selectize({    
    delimiter: ',',
    persist: true,
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
});

The first method is targeting the select dropdown menu. It runs selectize({create: true}) which passes the create parameter. When true, this allows users to actually type in their own value for the select menu. It is very unique and may be helpful in some specific instances.

Looking over at the tags function I am passing quite a few more options. When creating a new tag we need to call a function which can return these values to be added back to the input field. Since this is a text field it will behave differently than a select menu. The delimiter string is what separates all these tags when passed into the form as one long value. Also persist will force all user-added values to stay in the menu as a potential choice until the page is refreshed.

There are so many other parameters you can include which provide a heck of a lot more functionality. Many of these options are also callbacks, which means you can trigger a new function once a certain event has happened(like the user clicks an option). And if you really want to get technical look through their plugin documentation for creating your own extended effects.

jquery selectize custom select menus html5 demo

Live DemoDownload Source Code

Final Thoughts

Referencing jQuery plugins for your website design can be a huge time saver. I have been thoroughly impressed with many newer plugins that have been released over 2012 and 2013. There is never a shortage of new ideas when developers are willing to build these on top of existing open source platforms. I do hope this tutorial will prove useful in future web projects. Additionally feel free to download a copy of my source codes for easy-access to the sample project.


Advertise here with BSA

April 19 2013

10:03

*Special* LIVE Webinar Training: Learn 5 Step Formula How To Get Clients

Get ready for the FIRST live webinar at 1stwebdesigner! Check out video inside!

Are you struggling to get your very first client? Worrying about getting more clients in your freelance career? 

I got my very first client when I understood how to look at everything through his eyes! I became a marketer, not only a web designer, and I never had to worry about not having enough work!

Using a super-simple 5-Step System, I am about to show you exactly how to become an expert freelancer and land well paying freelance gigs anytime you want! 

I wish I had someone to show me this system 5 years ago, when I started! Don’t miss out as our freelance expert Spencer Forman reveals everything in this incredible content-packed training webinar.

Sign up Now! Seats are limited so take action and don’t be left out. Seats are filling in quick!

Register now to reserve your seat and get ready to take some notes!

You will learn exactly how to leverage WordPress’ popularity, pick “low hanging fruits” – pain jobs you can solve in a short time!

You will learn how to talk with clients, how to make them respond to you and how to get paid more!

See ya on the call!

P.S. If you want more details about our course and webinar go to http://1wd.tv now!

Register now!

April 15 2013

03:39

Swift Web Development Techniques for Startup Landing Pages

Advertise here with BSA


When launching a new startup online you need to consider the features which will draw attention. Visitors can often be easily distracted when browsing the Internet. So ask yourself what value does your page really offer to the average visitor? Developers should think about these topics from a user experience point-of-view. Then the process of constructing usable website layouts should be a whole lot simpler.

I want to use this article for sharing a few tips and techniques on building startup landing pages. The process is not easy and doesn’t provide any foolproof method. Interesting features will change based on the type of service or product you are selling. But I do not think these generic models are too overbearing after you work out the kinks fitted into each design.

Capture Attention

I’m not sure this is the #1 most important trait, but for landing pages and startup homepage layouts it can provide exemplary results. Users enjoy being swept off their feet when visiting your website for the first time. This requires attempting new marketing concepts towards what will capture attention and bring in new users.

chewse website layout interface background images

The startup homepage website for Chewse is small yet reliable. Visitors have access to the footer navigation plus a quick search feature. I would imagine the developers are expecting people to fill out their zip code and gauge the usefulness of this product. It is basically a search engine for picking out catering services, and the big fullscreen imagery illustrates this nicely.

sunrise iphone mobile app interface ui

Now the landing page for Sunrise is totally different, but still incorporating this same technique. Sunrise is a mobile iPhone app used as a mobile calendar system. The homepage is clean and follows a vibrant design matching the application UI. Specifically the large iPhone demo slideshow really stands out to let visitors know what this page is focusing on.

Long-Scrolling Pages

Out of all the recent trends I have been greatly interested in the single-page scrolling sections. This design caters around multiple page sections split up by images, headlines, colors, and textures. Users generally have access to a fixed navigation bar which often scrolls down alongside the page.

assured labor website ui interface layout inspiration

The landing page for Assured Labor is one great example. As you click on any of the top navigation links it will automatically scroll down to that section on the page. You can also find a small vertical list of dots which behave similarly as linked navigation fields. One reason I like this technique is because curious visitors may find all the details they need on a single page.

space monkey landing page design interface scrolling

Now the design for Space Monkey is also just a bit different. After landing on their homepage scroll down a bit and you will see another 2nd fixed navigation bar. This will only display on the homepage so it doesn’t track you around the entire website. But the developers have encapsulated so much information into the layout that it is easier customizing a guided nav menu. The use of icons and diagrams merely adds to this display effect for their product.

Flat UI for Simplicity

Just because many designers are fans of the flat UI does not mean this will work for everybody. However I have yet to find a website layout using flat interface elements which can be seen as ugly or unusable. Most buttons and links will be affected, along with larger block areas of important content.

kaggle startup website layout flat user interface

The reason I use Kaggle as one example is because of their brilliant use of colors. The entire layout is separated into various horizontal blocks of dark grey, light grey, and blue. All of the links and navigation blocks are blended nicely into the color scheme. Designers can take advantage by creating a meshed user interface balancing flat elements with colorful backgrounds.

divshot website ui inspiration layouts flat graphics

Now the website for Divshot is more of a landing page design. Here we can see elements for demonstrating how the product works and outlining the most important features. Using flat buttons and icons will keep all this information within readable context.

It is a big reason that I will advocate flat minimalist UI design. When focusing on simplicity you will generally garner faster and more powerful results. It also allows you to quickly fix what isn’t working and hopefully replace it with something that does work. Pulling in more converting users would be the highest priority goal for a majority of startups.

Targeted Branding

Of course unique branding will play a large part in your startup’s overall success. Why would people come back to your site if they can’t even remember the company name or logo design? Before launching your website online ensure that your brand is memorable and relatable to average users.

adstage io startup website brand inspiring

The example from AdStage uses their logo twice in the header and once again down in the footer. Visitors are sure to remember the website layout regardless of if they can remember what the company does. And thankfully this is all outlined on their homepage, so it should not be a difficult task discerning their goals.

The best methods for coupling your branding is repetition. Although not too many times, or else your design will become monotonous and frankly annoying. But instead use a set of repeating graphics, imagery, icons, and/or logos to instill a continuous force of branding design. As long as your website name is memorable the graphics should quickly tie into the overall brand.

Final Thoughts

Startups are one of the newer business models coming out of the 21st century. We have witnessed the rise of great tech companies and new Internet ideas which almost all started out in the startup phase. I hope these techniques will help developers construct usable landing pages and startup websites. Your design and interface will be a huge selling point for potential users and customers. But if I have overlooked any other useful tips feel free to share with us in the post discussion area.


Advertise here with BSA

July 11 2011

11:00

January 12 2011

10:04

Rounded: Create A Detailed Solid Dark Layout In Photoshop

Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner! In this tutorial you will learn how to create a Solid Dark Layout in Photoshop. A few techniques discussed in this tutorial include the use of proper spacing, typography, and colors. Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

Here is what we will making, click on image for full preview:

Step1: Working with Site Structure

Before we get started,download at first 960grid system for easy Guideline creation. Open 960_download\templates\photoshop\960_grid_12_col.psd . We also need to make sure that our Rulers and Guides are viewed, you can do that by pressing

  • CTRL + R (View Rulers)
  • CTRL + ; (View Guides)

Press CTRL + SHIFT + C to change the canvas size.

Using Paint Bucket Tool(G) fill the background layer to #242b30 Now you need to create a folders. Here is the folders that we will use in order to be organized. Implement this system in all of your designs – it will help a lot later when you will need to edit anything.

Now when you are done let’s get started.

Step2: Working with Header

Rename the layer1 folder to Header and rename layer 1 to header_bg (Make sure that you have finished creating the folders as I said earlier). Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #ffffff

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #171c20
  • #22292f

Stroke

  • #0d1012

Step3: Working with Logo

Create a folder inside header folder and name it to Logo, put all your logo related layers there. Now we are going to add the Site Title/Logo, so select the Text Tool(T) and write text the same way as in the screenshot.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #929292
  • #bcbdbd Location: 30%
  • #dfdfdf Location: 50%
  • #dfdfdf Location: 100%

Now that we have finished styling the text, let’s create a light to make it more emphasized. Create a new layer below the text, name it to light and make a selection as shown in the screenshot below.

Set the foreground color to #ffffff Select the Brush Tool(B), right click to the workspace to show brush options.

Brush as shown in the screenshot below to create nice radial effect to emphasize logo.

Set layer to Soft Light, Opacity to 80%:

Now when we are finished with our logo let’s proceed creating the navigation.

Step4: Working with Navigation

Create a folder inside header folder and name it to Navigation, put all your navigation related layers there. Now we are going to add the Navigation Links, so select the Text Tool(T) and write text the same ways as in the screenshot.

I separated the home link because it serves as Active state. For the other links I color it with #b6aefd.

Add this Blending Option for the home text:

Drop Shadow

Color Overlay

  • #232a2f

Now lets create the Active state styling for the home. Create a new layer below the home text, select Rounded Rectangle Tool(U) and set the radius to 5px.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Repeat the same step as we did to our logo.

Stroke

  • #13181b

Step5: Working with Slideshow

Create new guideline go to View > New Guide and set the position to 140px, orientation to horizontal. Repeat the process and set the position to 440px.

Now we are going to add the holder of our slideshow. Set the shape color to #171c20, now select the Rounded Rectangle Tool(U), set the radius to 5px draw a shape the same way as in the screenshot.

Add this Blending Option:

Drop Shadow

Now make a selection to the shape we have just create by pressing ctrl + click to the shape at the layers panel.

Go to Select > Modify > Contract, contract the layer by 5px. Now drag some guidelines to the edge of the selection left, right, top and bottom as shown in the screenshot.

Select Rounded Rectangle Tool(U), set the radius to 5px. For the color I chose #36414a. Color of this shape will not matter because it will serve as the holder of the slideshow images.

Add this Blending Option:

Inner Shadow

Inner Glow

  • #424f5a

Stroke

  • #111417

Create a folder inside slideshow folder and name it to divider. Make sure that this folder is on the top of the shape we have just created. To create a divider select Rectangular Marquee Tool(M), follow the color as shown in the screenshot.

We divided it into two parts, on the left part this will contain the description of the image in the slideshow, this will also contain previous and next button. The right part will contain the images. Lets start in the left part. Create another folder inside the slideshow folder and name it toleft.

Now select Rounded Rectangle Tool(U), set the radius to 5px, follow how I place the shape as shown in the screenshot.

Add this Blending Option:

Gradient Overlay

  • Stlye: Linear
  • #242b31
  • #36414a

Create a new layer and name it header. Select Rounded rectangle tool with the same radius, follow how I place the shape as shown in the screenshot.

Add this Blending Option:

Inner Glow

  • #424f5a

Gradient Overlay

  • Stlye: Linear
  • #21282d
  • #2f3840

Stroke

  • #111417

Now we are going to add the header text, so select the Text Tool(T) and write text the same ways as in the screenshot.

Duplicate the text layer. Now press down arrow key once.

Add this Blending Option:

Gradient Overlay

  • Stlye: Linear
  • #d4d4d4
  • #ffffff

Now we are going to add the description text, so select the Text Tool(T) and write text the same ways as in the screenshot.

Now lets create a read more button. Create another folder inside slideshow folder and name it to readmore. Select Rounded Rectangle Tool(U), radius to 5px. Place the shape as shown in the screenshot.

Now lets create a Previous and Next button. Create another folder inside slideshow folder and name it to prev_next. Select Rounded Rectangle Tool(U), radius to 5px. Place the shape as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Inner Shadow

Inner Glow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #929292
  • #bcbdbd Location: 30%
  • #dfdfdf Location: 50%
  • #dfdfdf Location: 100%

Stroke

  • #161b1f

Now we will add the previous and next arrow. Select Custom Shape Tool(U), find the arrow as shown in the screenshot.

Place the arrow as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • Linear Gradient
  • Angle: 90
  • #21282d
  • #2f3840 50% and 100%

Now grab some of your works to put up in our slideshow image. From the layers panel create a new layer above the image_holder layer and link it together. Follow how I link it in the screenshot.

For the final step in our slideshow lets create a shadow to make it look like 3d. To do this select Pen Tool(T), follow how I make the shape in the screenshot and fill it with #000000.

Select the layer and go to Filter > Blur > Gaussian Blur, set the radius to 5.0px. At the layer panel set the layer opacity to 80%.

Step6: Working with What I Do

Select the What I Do folder. Now we are going to add the What I Do Header, so select the Text Tool(T) and write text the same ways as in the screenshot.

Add this Blending Option:

Drop Shadow

Gradient Overlay

  • Stlye: Linear
  • #d4d4d4
  • #ffffff

Ready the icons that you have downloaded. We will going to add 4 different folders in our What I Do folder. These are I Capture Smiles, I Design Websites, Awards I Receive and I love to Socialize, these will be on a separate folder.. Now follow how I place the text in the screenshot.

If you are done you may have something that looks like mine.

Step6: Working with Divider

Select the Divider folder, inside of it create a new folder name it lines. We are going to make 2 1px line to make a divider and some blending options to make it more interesting. To make the line we can do this by the use of Line Tool(U), For the 1st line color will be #111417 and 2nd line #364148.

Select Rectangle Tool(U), place it as shown in the screenshot and set the layer fill to 0%

Add this Blending Option:

Gradient Overlay

Duplicate the layer, were going to change the gradient overlay.

  • #242b30

Step7: Working with About Me

Select the About Me folder , now we are going to add the about me header and information, so select the Text Tool(T) and write text the same ways as in the screenshot. I use the same formatting in text as we id in our What I Do section.

Step8: Working with My Portfolio

Select the My Portfolio folder, now we are going to add the about me header, so select the Text Tool(T) and write text the same ways as in the screenshot.

Select Rectangle Tool(U), and place the shape as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Stroke

  • #161b1f

Now place your sample images at the top of this layer and link it together the same as we did in our slideshow.

Now we are going to add the my portfolio information, so select the Text Tool(T) and write text the same ways as in the screenshot.

Step9: Working with Footer

Select the My Portfolio folder, now we are going to add the footer background, so select Rectangle Tool(U) and set the color to #171c20, place the shape the same way as in the screenshot.

Add this Blending Option:

Outer Glow

  • #111417

Stroke

  • #364148

We are going to add copyright text in the left side and some links in the right side, so select Text Tool(T) and write text the same ways as in the screenshot.

Step9: Working with Background Light

Notice that our background is just flat. In this step we will going to add more brightness in the slide show area and in the middle area. Now Select Background folder, create a 2 layers inside and name it Slideshow_light and the other is whatido_light. Select slideshow_light layer, select Rectangular Marquee Tool and make a selection as shown in the screenshot.

To create the light select Brush Tool(B) size 700 hardness 0%. Brush at the center top of the selection and at the layers panel set the blend mode to Soft Light Opacity to 70%.

You should have lightning effect the same in the screen shot below.

Now select whatido_light layer. Select Rectangular Marquee Tool(M), make a selection the same on the screen shot below.

Now when you’re done set the layer blend mode to Soft Light and Opacity to 70% this will create a lightning effect that blends to our background shown in the screen shot below.

Finally were done! Hope you learn something on this tutorial and hope you like it. If your have any question or tutorial request drop some comments below. Thanks!

Final Preview

July 16 2010

21:00

How to Enhance Your Website Using Breadcrumbs – Showcase

On large websites and websites with hierarchically arranged pages, breadcrumbs are a really great way for users to navigate around the web site. They are a type of secondary navigation scheme which indicates the exact location of a user on a website. They greatly improve the findability of a web site’s sections and pages.

Breadcrumbs, in the simplest form, are horizontally arranged text links separated by a greater than symbol (>). Using breadcrumbs on your website can be really beneficial. It provides a convenient way for users to navigate around the website and also allows users to establish their location on the website.

It provides an alternate way for users to navigate the website. For first-time visitors breadcrumbs can be a great way to entice them in exploring the website. Hence, it can be really effective in reducing the overall bounce rate of the website.

Different websites use different stylized breadcrumbs that blend in well with their site theme. Below is a showcase of websites with some of the best designed breadcrumbs.

1. Apple Store

The Apple Store has made use of breadcrumbs in a really creative way. The breadcrumbs are designed in the form of stylized buttons that fits in well with entire site’s theme. Apple Store

2. The Glasgow Collective

The Glasgow Collective has made use of stylish colorful breadcrumbs shaped in the form of a hexagon. The Glasgow Collective

3. Nestle

Nestle has used simple and neat breadcrumbs that blends in well with the theme of the website. The breadcrumbs are arranged in the form of horizontal text links separated by a greater than symbol (>).

Nestle

4. Delicious

Delicious has presented their breadcrumb trail of keyword tags in a simple and interactive way. The ‘x’ button besides the keyword tags lets you delete items in the breadcrumb trail in order to help you find your bookmarks easily. Delicious

5. Crooked Tongues

Crooked Tongues has made use of the standard attribute-based breadcrumb trail with a right-pointing triangle replacing the classic greater than symbol (>). Crooked Tongues

6. Ideo

Ideo has presented the breadcrumb trail in a really innovative way. The breadcrumb trail consists of square shaped colorful buttons whose color becomes darker as the breadcrumb advances. Ideo

7. Mia & Maggie

This website too has made use of the classic breadcrumb trail in which the greater than symbol (>) is replaced by a forward slash (/). Mia & Maggie

8. guardian.co.uk

guardian.co.uk has made use of simple & colorful hexagon shaped breadcrumbs that matches pretty well the multi-colored theme of the website. guardin.co.uk

9. Coolspotters

Coolspotters uses simple button-like breadcrumb trail that matches well with the website template and also provides an easy way to navigate between the sub-categories of the website. Coolspotters

10. Yahoo! TV

Yahoo! has made use of interactive button-like breadcrumbs on their Yahoo! TV webpage. Clicking on the inverted triangle brings a drop-down menu displaying different categories of the website. Yahoo! TV

11. NASA

NASA has made use of the simple, classic breadcrumb trail consisting of horizontal text links separated by a greater than symbol (>). The color scheme of the breadcrumbs blends in well with the entire entire. NASA

12. Design Collectors

The Design Collectors have designed simple and classic text-based breadcrumbs with color scheme that matches well the website’s template. Design Collectors

13. Bell

The Bell shop uses simple text-based breadcrumb trail in which the text links are separated by a right-pointing triangle. Bell

14. Wufoo

Wufoo has made use of the simple text-based breadcrumbs in their own creative way. The breadcrumbs have been integrated with the site’s logo and the classic greater than symbol (>) have been replaced with a right-pointing arrow. Wufoo

15. Girl Scouts

The Girl Scouts website have breadcrumbs that are well designed to provide an easy navigation around the website. The breadcrumbs displays various categories and sub-categories of the website. Breadcrumbs are used as a primary navigation on the Girl Scouts website. Girl Scouts

16. Bridge55.com

Brige55.com uses the classic text-based breadcrumbs that indicates the user’s current location on the website as well as provides an easy way to go back and find similar products. Bridge55.com

17. The Hillside Group

The Hillside Group uses breadcrumbs that are similar to the ones used in the Apple Store website. It has been designed to provide an easy way to navigate around the sub-categories of the website. The Hillside Group

18. Wowhead

This website has made use of interactive breadcrumbs with drop-down menus that display the various categories, sub-categories and pages of the website providing a convenient, user-friendly navigation scheme. Wowhead

19. Devlounge

Devlounge uses simple button-like breadcrumb trail that enables users to easily navigate around different categories of the web blog. Devlounge

20. MarTique Designs

MarTique Desings uses the simple, classic text-based breadcrumbs in which the greater than symbol (>) is replaced by a forward slash (/). Martique Designs

21. TechRadar

This technology website uses the classic text-based breadcrumbs in which the greater than symbol (>) is replaced by a right-pointing triangle. The breadcrumbs indicate the user’s current location on the website as well as enables the user to easily navigate between the sub-categories of the website. TechRadar

22. BP

This website too uses the classic text-based breadcrumb trail that enables users to easily navigate around the website. The color scheme of the breadcrumb blends in well with the entire website. BP

May 21 2010

10:15

How to Create Your first WordPress Theme: Part 2

This is the second part of the “How to Create Your first WordPress Theme” tutorial series. Just in case you have missed the first part, please go here and start reading.

You can Download source files of this tutorial or Live preview this theme.

As I promised in the first part of this tutorial, we will do some stuff that will make your blog theme more interesting and useful. I’m re-writing the list with what we will cover in this part:

  • Widgetizing your sidebar
  • Making a working search form
  • Using the single page template: comments, author details
  • Using custom fields for showing an image for each article

1. Widgetizing the Sidebar

Having a widget-ready theme is the most important thing of a blog theme. It doesn’t matter for the reader but it helps you a lot. How a widget-ready theme is helping you? Well, imagine that you want a lot of things to be displayed in the sidebar. Think that you will have some lists like friends, archive, categories, tag cloud, advertising area, etc. It would be easy to write markup in the sidebar.php file, but it would be more easy letting WordPress for handling this. Having a widget-ready theme is a big advantage because you can add text, lists and advertising area within WordPress admin panel.

But enough with talking, let’s get started! Open your sidebar.php file that you have coded in the first part of this tutorial. Now, we’ll have to decide what pieces of code will stay even if the widgets are turned on. Widgetizing the sidebar makes a condition like: if widgets are available, show widgets and chosen sidebar markup, else, show original sidebar markup. Below are the widget tags, without any code in them:


<!--Code that will stay even if the widgets are used-->
<?php  /*  Widgetized sidebar, if you have the plugin installed. */
 if (  !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :  ?>
<!--Code to be replaced by Wordpress-->
<?php endif; ?>

Maybe this clears everything for you. The comments are very explanatory, so now we just need to use it with our sidebar markup. So, you should decide what code will remain even if the widgets are used. Normally, the search box have to always be there. Of course you can let WordPress add it but this will stop you from any additional customization to the search form elements:


<div id="navigation">
<p><strong>Navigation  Here</strong></p>
<ul>
<li><a href="<?php  bloginfo('url'); ?>">Home</a></li>
<?php  wp_list_pages('title_li='); ?>
</ul>
</div>
<div  id="extra">
<form id="searchform" method="get" action="<?php  bloginfo('home'); ?>">
<input type="text" name="s" id="s" size="15"  /><br />
<input type="submit" value="<?php  esc_attr_e('Search'); ?>" />
</form>
<?php  /* Widgetized  sidebar, if you have the plugin installed. */
 if (  !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :  ?>
<p><strong>Categories</strong></p>
<ul>
<?php  wp_list_categories('title_li='); ?>
</ul>
<?php endif;  ?>
</div>

I’ll stop here for a moment. I added a search form, which has WordPress specific values. If you remove them, the search form won’t work:


<form id="searchform" method="get" action="<?php bloginfo('home');  ?>">
<input type="text" name="s" id="s" size="15" /><br  />
<input type="submit" value="<?php esc_attr_e('Search'); ?>"  />
</form>

The code I have been showing you previously, is the markup of the sidebar.php file, along with the widget tags. The condition for what I’ve written there, is the following: if there aren’t any widgets in use, show the categories, else, show the widgets you are activating.

We aren’t ready yet. This code won’t work if we do not add some functions. Normally, for not modifying the WordPress core files, we add new functions to the functions.php file that you will have to create. For creating the function for the widgets, add the following code to your new functions.php file:


<?php

if ( function_exists('register_sidebar')  )
 register_sidebar(array(
 'before_widget' => '',
 'after_widget'  => '',
 'before_title' =>  '<p><strong>',
 'after_title' =>  '</strong></p>',
 ));

?>

You need some explanation, right? Well, between the apostrophes you need to write your needed markup. Before and after widget could be used div tags, of course if your template needs them. For our current layout, we won’t add anything. The same thing happens for the title of each widget (e.g. Categories) which are wrapped by the paragraph and strong tags. You got it? Hope you did. This is everything you need to know about widgetizing the sidebar.

2. Adding a “Read more” link

Creating a Read more link is used for the blogs who do not want to show all the content of their articles on the front page. There are many ways we can achieve something like this:

2.1 The WordPress “more” tag

The more tag is activated by a little button when adding a new post from the WordPress admin panel. You can press ALT+Shift+T or click the following button:

Step 2.1-wordpress-theme-tutorial-more-tag

If you do not know how to use it, I’ll explain you how to. Let’s say you have 2 paragraphs of text, but you want to show on the frontpage only the first paragraph. Click after the first paragraph and then click the shown button. You will see a dotted line with a little tag where it says “more”. All the content before this line will be shown.

But there is something else. You need to modify the content tag from the index.php file. As the source files from the first part do not have any parameter set to the tag, you will need to add it. Copy and paste the following code instead of the standard content tag:


<?php the_content(__('Read more...')); ?>

Do not remove the paragrpah tags. Just the content tag needs to be modified. Now in each article where you place the more tag from the WordPress will show a “Read more” link. Go and try it!

2.2 Using the excerpt

Another way to achieve this is by using the excerpt. This works a bit diffrent. When publishing a new article in WordPress, you will see a box where it says “Excerpt” If you still have the content more tag used, the excerpt will automatically use the content before the dotted line. If you won’t use it from the WordPress Editing screen, it will remain empty.

If so, you will be able to write something different, like a short introduction or description. Let’s say you have some content in the article, and just write in the excerpt a random description.

If you publish the text, you will notice that you will get the whole content on the respective article. For getting the text you have written in the Excerpt box, you will need to modify the index.php loop. So instead of:


<?php the_content(__('Read more...')); ?>

You will need to add the excerpt tag which is the following:


<?php the_excerpt(); ?>

Now, take a look and see the difference.

2.3 Using a limitation plugin

Using such a plugin sometimes is easier for you. What this plugin does? Well, depending on each plugin, it can limit your content to word number, letter number or just show the first paragraph of the article. You can see a list of 3 such of plugins:

Now, you just need to decide which one is best for you.

3. Comments-template: using comments in WordPress

When It comes to develop a new WordPress theme, the part I hate the most is working on the comments. It’s not because it’s hard, it’s because I need to make a lot of stylings to achieve a nice comment area. I won’t get into styling because it relies on your creativity and CSS skill. I will only show you how to use the comments in a theme and what the used tags are doing. I suggest learning some basics of PHP before editing the comments.php file, because you’ll need some basic knowledge about PHP to code your own comments. For now, I’ll just show you how to use them. So let’s get started by opening the comments.php file from the WordPress Classic theme which is located in the wp-content/themes/classic directory.

Now, save the comments.php file in your layout07 directory. Ok, you won’t understand much things in this file if you don’t have some basic PHP knowledge. For now leave the file intact and open the single.php file and add after the content tag the following tag:


<?php comments_template(); ?>

This will enable the comments in your theme. You will see a heading saying “No Comments” and below, a form with a heading saying “Leave a comment”. You can either leave a comment as a guest, or just sign in to WordPress and leave a comment as an admin (or user). Now, the most important tags you need to know when editing the comments.php file are the following:


<?php comment_author_link() ?> <!-- The author of the comment  -->
<?php echo get_avatar( $comment, 32 ); ?> <!-- The  commenter's avatar (or Gravatar) -->
<?php comment_text() ?> <!--  The commenter's comment text -->
<?php comment_date() ?> <!-- The  date when the comment have been posted -->
<?php comment_time() ?>  <!-- The time when the comment have been posted -->
<?php  edit_comment_link(__("Edit This"), ' |'); ?> <!-- The edit link for the  comment (if you want to edit something in your comment) -->

Now, constructing a new comment structure is very easy, but you need to pay attention for not breaking the PHP code. The default structure of the comment is the following:


<?php if ( have_comments() ) : ?>
<ol id="commentlist">

<?php foreach ($comments as $comment) : ?>
 <li <?php  comment_class(); ?> id="comment-<?php comment_ID() ?>">
 <?php  echo get_avatar( $comment, 32 ); ?>
 <?php comment_text()  ?>
 <p><cite><?php comment_type(_x('Comment', 'noun'),  __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php  comment_author_link() ?> — <?php comment_date() ?> @ <a  href="#comment-<?php comment_ID() ?>"><?php comment_time()  ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |');  ?></p>
 </li>

<?php endforeach; ?>

</ol>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

So now, let me explain. Starting from the first line: If there are comments left to your article, your comments will be shown with the giveen structure within foreach PHP function, else (if no comments are posted) show a text with “No comments yet.”. For changing the look of your comments, you need to work just inside the foreach function. I’ll show you how to change the look of your comments, very easily.

Delete the <ol> tags and everything inside the foreach function. You’ll just be left with something like this:


<?php if ( have_comments() ) : ?>

<?php foreach ($comments as $comment) : ?>

<?php endforeach; ?>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

Next, wrap the foreach function with a div id “comments”, like the default structure were wrapped by <ol> tags. Now, add the following code withing the foreach function:


<div id="comments">
<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__("Edit This"), ' |');  ?></strong></p>
<p><?php comment_text()  ?></p>
</div>

Just take a look on how the comments are displayed now. I have removed some tags because you won’t need them as a beginner WordPress theme developer. I added div’s instead lists because it’s more clean. The class and the id were assigned for further customization via CSS. Now, if you have made the changes as I told you, you should edn up with something like this:


<?php if ( have_comments() ) : ?>

<div id="comments">

<?php foreach ($comments as $comment) : ?>

<div class="comment">
<p><strong><?php  comment_author_link() ?> said this on <?php comment_date() ?> at  <?php comment_time() ?> <?php edit_comment_link(__("Edit This"), ' |');  ?></strong></p>
<p><?php comment_text()  ?></p>
</div>

<?php endforeach; ?>

</div>

<?php else : // If there are no comments yet ?>
 <p><?php  _e('No comments yet.'); ?></p>
<?php endif; ?>

For finding more information about manipulating the comments.php files go to the WordPress Codex and start looking for what you need. All that I’ve covered here is just basic stuff. Hope you’ve understood everything of what I’ve told you!

4. Using custom fields for showing an image for each article

Custom fields are one of the most important feature of WordPress. If you master the custom fields, you can create stunning WordPress functionalities like displaying an image for each article (like what I’ll be teaching you), displaying a certain message or link to your visitors (like a live preview and a demo button or even a source link for your article).

Where can you find the custom field box? The cutom fields box is located under the Send Trackbacks box, in the Post > Add post in the admin panel:

Step 4-wordpress-theme-tutorial-custom-field

Using the custom fields isn’t so hard. You just have to learn the tag that calls a specified custom filed name. The tag is the following:


<?php echo get_post_meta($post-&gt;ID, 'custom field name', true);  ?>

If you would write “image” instead of “custom field name”, WordPress will create a custom field with the name “image”, so any value you will give to the custom field, WordPress will output the value in the place where you have written your custom field tag. Not too clear for you? Let’s apply the custom field tag to create a nice thumbnail for each post! We will use an image tag which uses as source a link introduced by the custom field:


<img src="<?php echo get_post_meta($post-&gt;ID, 'image', true); ?>"  alt="<?php the_title(); ?>" />

This tag will be posted above the content tag inside the index.php and the single.php files. Now go and create a new custom field with the name “image” and add to the value a link to an image. You can see how I’ve done this in the following pic:

Step 5-wordpress-theme-tutorial-custom-field-creation

Just in case that you won’t attach a thumbnail to your post, the article will show you an image missing. So you may add a thumbnail to each article you are writing. This is everything you need to do!

5. Author details: single page template and profile

WordPress have some predefined functions to output the current author details. This can be useful if you want to show some details about you or other authors in the single page templates. WordPress is also creating a profile page for any author where you can show the author details: description and posts.

This may sound difficult, but it’s very easy, just like all other things in WordPress. You only need a tag or two (if you want the author name displayed too) to show up your auhor details on single page template (and also others). Place the following tags at the start or at the ending of the article loop (in the single.php file):


<p><strong><?php the_author_posts_link();  ?></strong></p>
<p><?php the_author_description();  ?></p>

The first line is for outputing the author’ posts page link and the second is for outputing the description of the author (entered from Biographical Info from the profile within WordPress admin panel). You can wrap these codes by a div id “author” so you can style it if you want. So the loop would look like the following:


<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<p><strong><a href="<?php the_permalink();  ?>"><?php the_title();  ?></a></strong></p>
<p>Published on <?php  the_time('m d Y'); ?> by <?php the_author(); ?></p>
<img  src="<?php echo get_post_meta($post->ID, 'image', true); ?>"  alt="<?php the_title(); ?>" />
<p><?php the_content();  ?></p>
<div id="author">
<p><strong><?php  the_author_posts_link(); ?></strong></p>
<p><?php  the_author_description(); ?></p>
</div>
<?php  comments_template(); // Get wp-comments.php template ?>
<?php endwhile;  else: ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif; ?>

Now, for creating the author profile page, you need to open the page.php file then save it as author.php. Now, delete the actual loop and everything within the content div and paste the following code:


<p><strong><?php the_author_posts_link();  ?></strong></p>
<p><?php the_author_description();  ?></p>
<ul>
<?php if (have_posts()) : while  (have_posts()) : the_post(); ?>
<li><p><strong><?php  the_title(); ?></strong></p><p>Published on <?php  the_time('m d Y'); ?></li>
<?php endwhile; else:  ?>
<p><?php _e('Sorry, no posts matched your criteria.');  ?></p>
<?php endif; ?>
<ul>

As you see, the author details are outside the loop. Then, we would like to display the posts that the current author have written so far. We are creating the loop, but this time we will show just the article title and the date when it was published. That’s it now. Save your file and go to test it!

That’s it!

Well, people, these are all the things I’ve wanted to cover as basics. Just leave comments requesting other things, and probably I will cover them in upcoming tutorials. Have fun with creating WordPress, and if i’ve helped someone to develop a nice theme, let me know! More to come on 1STWD…

May 19 2010

20:00

Expert Tips on How to Build a Multicultural Website

Let’s start with a truism: the web is global. Nothing particularly insightful about that statement, but for anyone undertaking any kind of creative endeavor in cyberspace, the proclamation that the ‘web is global’ should be an unspoken mantra that underpins any design consideration. For web designers, issues such as colour, layout, formatting and navigation are all key considerations throughout the design stage. Given that the web is indeed global, then anyone from London to Lahore can view your carefully crafted web pages – and if you want to appeal to a global audience, it may be best to design your site so that it’s easier to convert for international visitors.

Arabic, for example, has around 300 million native speakers around the globe, and as an official language in 26 countries (the third most after English and French), it’s clear that Arabic is a language that shouldn’t be ignored for those seeking to make serious inroads into international markets.

Using Unicode

Use UniCode

Fancy graphics and cool colour schemes will certainly help sell your site to the masses – but ultimately, the old adage that content is king certainly rings true for most websites.

With that in mind, even if the plan is to build your website in English only, if you design using Unicode from the start, you will be well positioned to adapt your pages for other languages later on. Unicode is the only sensible character-set option that enables websites to support different scripts. UTF-8 is compatible with over 90 written languages (‘scripts’) and has a range of over a hundred thousand different characters.

Importantly, UTF-8 is supported by the most common browsers (Explorer, FireFox etc) and Operating Systems (Windows, Linux, MacOs), whilst the likes of Apple, Microsoft, IBM and other industry lynchpins have all adopted it as a standard.

Even if you don’t plan to use a non-Latin script on your site such as Arabic, the German alphabet, for example, contains an additional four characters: Ä, Ö, Ü and ß. Many other European alphabet systems use even more characters – which is why using Unicode is important.

Green Hats: Cultural and Colour Considerations

Colour Considerations

If you are setting up a website primarily to be aimed at audiences in the US or the UK, that’s great. But what if your strategy changes later on? It’s much easier to develop the aesthetics of your site from the start, rather than re-designing it later on.

Clearly, you can’t structure the aesthetics of your website to please everyone. But you can choose a culturally sensitive colour scheme – remember that different colours can mean different things in different cultures.

For example, in the United Arab Emirates and other Arabic cultures, green signifies holiness or luck, whilst blue represents immortality and is deemed a ‘protective’ colour. Orange has religious connotations for Protestants in Northern Ireland, and whatever you do, you might want to avoid placing a green hat anywhere on your website, as this means that a man’s wife has been unfaithful to him in China.

A light-coloured background with dark text is a safe bet across the world – it’s easy to read. Any other graphics, patterns or colour schemes you use should be chosen to reflect any markets you plan to enter: as a general rule of thumb, it’s best to avoid anything that is potentially divisive, such as religious, political or sexual symbols. A picture of a partially clad lady may go down a storm in the West, but in many eastern cultures, a dim view may be taken of this.

Layout & Navigation

Right to Left Languages

Not all languages read from left to right. Arabic is one such language that reads in the opposite direction (right-to-left) and as such, this can throw up some issues when converting your design for specific markets.

If your navigation bar is vertically positioned on the left-hand-side of your English language website, then in Arabic users will obviously have to read from the right to left which means the navigation bar may not appear in your preferred position in relation to the direction the user is reading.

Of course, it’s not the end of the world if you have to shift the navigation bar to the other side of the page for your Arabic site, but for simplicity – and uniformity – you may favour a horizontally positioned navigation bar instead. This means the rest of your design and layout templates can remain the same across all your sites.

Bandwidth Barriers

Entrance Page: Text Version Only

This may be hard to believe, but not all countries have high-speed broadband internet access yet. Much of South America, Africa and even parts of Asia are still on internet connections that most people in Western countries would deem ‘slow’. With that in mind, you may want to avoid really heavy graphics and bandwidth-sapping Flash animations – it’s unlikely web users will hang around for ten minutes for a picture to load on their screen.

This doesn’t mean you should build text-only websites, but it does mean you should perhaps provide two options for web users: a simple HTML only version and a normal, flashy ‘bells and whistles’ version.

Multilingual SEO

Google Keyword Finder

You might have the most beautifully designed website in the world, but if nobody can find it on the World Wide Web, then is there any point in it being there?

Visibility is everything on the internet, which is why search engine optimisation (SEO) plays such a crucial part of any web content strategy. The issue of SEO is probably best left for another article, but for those who already optimise their English language site, it’s worth bearing in mind one golden rule of thumb when optimising your site for international markets: never translate your keywords directly.

If you’re translating your website content yourself or using a translation agency, the keywords for which you rank highly on Google.com or Google.co.uk should be researched for each target country. A translator won’t know what people use to search for products or services locally, they may use synonyms, abbreviations or colloquialisms.

And there you have it…the basics of multicultural web design!

May 07 2010

21:00

30+ Things You Have to Know about being a Freelancer

Wanting to be a freelancer? – there are many things you need to be aware of. In this article I will list many things for you to think through and consider before jumping into the freelance business. I hope this list will be a valuable tool for you to evaluate the current situation and being prepared for possible challenges along the way.

It’s hard work

Picture by Zsuzsanna Kilian

If anyone tell you otherwise, they’re wrong. It’s that simple. So if you’re looking for an easy option to a normal day job, freelancing is not for you.

You won’t be rich in a day or two

You can be 100% sure that going over to freelancing wont make you rich overnight. There are possibilities of making a decent living, yes, but it will take hard work over time.

Most people can’t make a living from freelancing right away

If you start freelancing thinking that it will give you a good paycheck from week one, that’s very unlikely. Because of this, my tip is to consider combining it with either a part-time job to begin with, a loan of some kind or the best option – that you have savings you can live from for a while. If you are able to live from the first paycheck you get, then good for you – but it’s very rare.

Working harder than a regular employee to receive the same results

Picture by Eva Schuster

When you freelance you will have to consider many different aspects of everything you do. This means extra work and extra hours to output the same amount of work that you’d do at a normal job.

You have to be your own boss

As wonderful as it may sound to work alone, it means you will have to do the job your boss did before, and more. You will have to be a bit hard on yourself at times to make sure that things get done the right ways and to the right times.

No one will kick you out of bed in the mornings

Picture by Diego Jaimovich

As mentioned, you will have to be your own boss. This also means that no one will kick you out of bed in the morning. You will need discipline and still continue to get up early to start doing your daily tasks – just as you would have done when you had to go to your normal workplace. This is a point that quickly will show if you have the required backbone to deal with it. Many wannabe freelancer fall out of it already here.

You have to stay on top of every financial matter

Even if you haven’t had to deal with any financial stuff before, you will have to now. Obviously you could hire someone to help out with this, but that costs money. So at least in the beginning you should aim to do as much as possible of this yourself. Not only should you do this to save money, but also to keep on top of things. You want to know what everything costs to make good calculations of how much you have to earn to be able to pay your bills and also make a profit that you can live from.

It takes hard work to gain a reputation

Being a freelancer, and a new freelancer, your name won’t immediately have the same ring to it as a company name. This means that it’s not likely clients will come running to you. You will have to gain a good reputation through hard work in order for them to choose you in the future.

Every single client counts more

Picture by Barunpatro

For a multimillion dollar company, you could say that a single client doesn’t necessarily mean everything. For you as a freelancer though, every client counts. Remember this when you take on new projects and treat them thereafter. One client more or less can mean the difference between failure and success – every single month.

You have to save for rainy days

Picture by Jakub Krechowicz

To save for slow times means a lot. When you’re a regular employee you know that your paycheck comes at given dates and how much you will get paid. Being a freelancer is completely different. If you don’t have any money in the bank in month with few paid projects, this could mean the end of your freelancing career.

You won’t automatically be insured (for injuries, sickness and so on)

Depending on your region/country you will have to check out what kinds of insurance you can/should have. When you’re an employee, the company you work for have to have some sort of insurance that makes sure you get paid almost no matter what happens. Being a freelancer this responsibility falls on yourself. Different countries have different options, so make sure to check this out BEFORE you start-up.

You need somewhere to work from

Picture by Wilton Rodrigues

When you’re employed somewhere, you know where to go to work. You don’t have to pay for electricity, phone bills or furniture. Now though, you will have to consider these things. Before you start-up you need to think through where you will be working from to make sure you can actually afford it. A home office or some sort of office collaboration can many times be the cheaper solutions to begin with.

It can be hard to set the limit between work and hobby

If you’re going for working freelance, one of the reasons for doing this will quite likely be that you will be able to do what you love. This means that you sometimes will be doing work-related things very many hours of each day. This can mean many challenges, remember to try not to get burned out..

YOU have to pay for repairs

When something gets broken, you can’t go to your boss to get it fixed. You will have to do whatever it takes to get it fixed, and most importantly be able to pay for it.

YOU have to pay for new equipment

Picture by Zebra31

Just like with repairs, you will also have to be able to pay for new equipment when it’s needed. In some cases insurances could cover things that can’t be properly repaired but don’t count on it.

The first 3-6 months will be REALLY hard

At least the 3-6 first months will be extra hard. Not only do you have to adjust to a completely new way of working and thinking – but you need to get a base of clients that have work for you to do. You have to be prepared, both mentally and financially.

At times you’ll be at work 24/7

Picture by Manu Mohan

When you are a freelancer YOU ar your business. This means that if something doesn’t get finished within the regular work hours you’ve set, YOU will be the one that needs to step in and get it done in time. Sometimes this could mean that you for days can be working almost 24/7.

You have to always think ahead

When you’re a regular employee, someone else usually does the planning. Freelancing you have to make plans ahead all the time to make sure to get enough time for reaching deadlines.

You will have to do things you don’t like

Picture by Steve Ford Elliott

You probably choose your freelance career to be doing something you love. This doesn’t mean that you will always be doing only fun things. Every now and then you will have to do projects you find extra challenging, or sometimes even static and boring to make ends meet.

You will have to deal with difficult clients

We are all different. When you freelance you are always the one being in touch with every single client and they are also very different in personalities and in how they prefer to get things done. Not everyone will like you and vice versa, that’s just the way it is. Try to deal with that as smoothly as possible.

You have to think through what you say (and don’t)

Picture by Arte_Ram

You are your own business’ face outwards. This means that you will more than ever before be having to think through things before you say them. Remember that a single sentence said without being thought of can possibly ruin contracts and have you lose valuable income.

Prepare to work longer hours for less pay…for a long time

Picture by Nick Colomb

When you work for yourself you will see that you many times get less paid for every actual hour worked. This is because clients pay for what you do for them and not for your own accounting and planning. Thankfully though, you will be able to adjust your rates to fit this over time. But in the beginning it will be hard. So don’t give up right away.

All markets have ups and downs

Depending on your niche/market you will experience some ups and downs due to changes in the market. This isn’t anything you can do much about other than actually being prepared as good as possible.

Not all people understand that freelancing actually is hard work

Don’t expect everyone to understand what it’s like to do your work. Many new freelancers experience communication problems with family and friends who think freelancing is easy money and little work. It can also many times be hard for them to understand when you’re working and not. Make sure to do all you can to be prepared for this.

There are many laws/rules you have to read up on

Picture by Kristian Risager Larsen

It’s rarely as easy as just deciding what you want to do with your business and starting to do it. In most countries there are rules and regulations on many aspects of various businesses. You have to figure out what will apply to you so that you can do things they way they’re supposed to be done.

Taxes and VAT can have special rules in your country, make sure you know them!

Just as with all other rules and regulations there are rules for how to pay taxes and more. If you don’t know these you could be in for a very expensive surprise. This could eventually cost you your business.

You always need to have a plan B

Picture by Flaviu Lupoian

What many times separates the best from the rest, is the ability to adapt to challenges. This means that you have to keep a plan B ready at all times. What will you spend time on when there are slow days? What will you do if the client changes his mind about something in the last-minute and how will you be able to catch up lost hours if you get sick?

Slow times don’t mean less work, it often means more

If you have a day or three without paid projects, this definitely doesn’t mean that you can just sit back and relax. These are the days when you should do various other tasks, – both in order to get new clients and to take care of your own business. If you take advantage of these days it can mean an ocean of difference when the new projects start coming in again.

There are always many competitors

Picture by Gabriella Fabbri

When you enter the freelance world, you will quickly see that your competitors are many. This means that you can’t slack and expect for clients to stick to you. You always have to do your best and then some to be able to compete with everyone else.

You have to be able to make adjustments fast

Clients can require last-minute changes, meetings sometimes have to be rescheduled, you or the client can get sick for a few days. The options are many and you have to be able to adjust fast to make it.

Being a freelancer can be very expensive

As you probably understand from all these points, Freelancing can be quite expensive at times.

You will make more each hour, but also have more expenses

Picture by Sephen Hyun

Its easy math, but not always easy to remember. The bill your clients pay will equal a higher price each hour compared to what you get paid as a regular employee. Remember though, that this is supposed to cover for all your expenses.

You will have to say NO to some business opportunities

The ability to say No can prove to be a very important thing for you, or you will work 24/7 still not being able to finish everything. This will affect the quality of your work, your physical and mental health and your clients.

You will have to say NO to personal projects at times

Picture by StillSearc

If something didn’t go according to plan and someone need to put in extra work last-minute to get something finished, that person would be you. This means that you will have to say No to many other things sometimes, that’s the hard reality of being a freelancer.

Conclusion

This article wasn’t meant to scare you off, but to have you realise that making it as a freelancer is no easy road to go. You have to make sure you have what it takes and think these things through properly beforehand. It can save you many sleepless nights. I hope these tips can help you get better prepared for what’s ahead, to help you get a succesful and fun career freelancing if you decide to try it out.

It can be very rewarding and also comes with many positive side effects once you succeed. When you’re good at planning your days, you will sometimes be able to take time off to be with your spouse or children when it’s important, plan holidays that fit the rest of the family’s plans and so much more. Just remember to be careful and you could very well be one of those who succeed! :)

Picture by Svilen Milev

We would love to hear your own tips in the comment sections! Good luck!

10:00

How to Create Your first WordPress Theme: Part 1

WordPress is the most popular and the best (in my opinion) blogging platform, created by Automattic. It’s really easy to use and it’s very powerful, giving you the opportunity to build any kind of site, from blogs to shopping carts and CMS’s.  In this series of tutorials, we are going to create our first WordPress theme. For this tutorial you need to have a little more than basic knowledge about HTML and CSS. Let’s get started.You can Download source files and you can also Live preview the theme here. It’s a basic css layout so it will be easy for beginners to convert it into a working WordPress theme.

What we need

WAMP/XAMPP Server (or similar software) - Download

WordPress 2.9.2 (latest version, recommended) – Download

Getting started – creating the working environment

First thing first, you need to install WAMP Server. After installing WAMP, download and copy the WordPress files in the www directory from your WAMP folder. Start WAMP Server, click on the icon in the task bar, and a pop-up list show appear, then select phpMyAdmin.

Now, create a new database. Give it any name, but you need to keep it in mind as we need it at the WP installation. As for now, we are done with WAMP Server, just leave it running.

WordPress Installation

After copying all the files, you need to install WordPress. Enter on the address where you have put the WP files. The address would be exactly, without any www or http, localhost or localhost/WordPress. After accessing the address, the installation may start.

Click “Create a Configuration File”. After this, you will see some listing of things you need to know. I’ll just tell you what you need:

  1. Database name: your given name of the database we’ve created earlier
  2. Database username: this should be “root” if you set it on your computer.
  3. Database password: there is no password set.
  4. Database host: localhost
  5. Table prefix: for now, leave it as it is.

Now, just fill in the fields with the required information, and go further! After filling up the fields, next give any name to your blog, and write your e-mail address.

Now, copy the auto generated password, and paste it in the password field at the site login. Now, because you cannot keep that weird password in mind, go the upper right corner of the site and click on “admin”. You should see a page where you have your account info. You can modify anything there, but for now we are setting a new and easier password.

Go to the bottom where it says “New password” and set your new password.

Good, now you have WP installed, but we have a lot more things to do.

1. Planning the theme layout

When I’m starting a new project on developing a WordPress theme, as everyone should do, I first build my HTML/CSS template. This is easier because you also learn how to convert a simple HTML template into a fully functional WordPress theme. So i won’t go through building the template, considering you already know how to build your own. I’ll just use a simple layout from Free-CSS.com in this tutorial. Go here and download the #7 template.

2. Starting the conversion

When I’m making a theme, I’m always copying code snippets from a default WordPress theme (because i cannot remember all of them). I use the WordPress Classic theme, but you can also use a cheat sheet. The best one i’ve found is the one created by Ekinertac. After it opens in the PDF format, save it in your computer (you may need it when you do not have access to the internet).

All the contents from the sheet are the most used functions from WordPress, and the ones that you need to create a basic WP theme.

A thing that you have to notice is that WordPress is using PHP. Even if you aren’t a PHP master, or you have absolutely no idea what PHP is, you are still able to create a basic theme. When creating a theme, you need to know just tags and what they are doing, so do not worry about PHP.

2.1 Making the theme recognizable by WordPress

A very important part of a WordPress theme is the CSS file. In the CSS file are written some lines that WordPress is using to g a theme. First, you need to rename the styles.css to style.css as WordPress is search for style not styles. Copy and paste these lines at the start of your CSS file:

/*
Theme Name: Free-CSS template WP version
Theme URI: <a href="http://free-css.com/">http://free-css.com</a>
Description: A very basic  WP theme based on a simple CSS layout from Free-CSS.com
Version: 1
Author:  >your name<
Author URI: >your site url<
Tags: free, css,  tutorial, simple, basic
*/

You can change everything that is located after the “:” dots. Save your CSS file as we won’t need it because we are just trying to give to the HTML template functionality.

2.2 Converting the HTML file

After you set up your CSS file, we need to go and change some things in the index.html file. First of all, clear all the sample text.
Save you file as index.php. We do not need the sample text anymore as we will introduce our own text from WordPress later.

Now, we need to make some declarations for the WP theme. We need to make the title dynamic and to set the stylesheet path. These lines will help you:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type');  ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true,  'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">@import url(  <?php bloginfo('stylesheet_url'); ?> );</style>

Now, we will start with the header of the design. For adding your blog’s name with a link to your homepage in the header, we will use this line of code:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

The first PHP tag is used for retrieving the blog’s homepage link and the second is for the blog’s name (the one you set in the installation).

Now we’re going further for the loop. The loop is a block of code that will repeat for each post from WordPress. We will use the loop to construct the article. I’ll cover more about the loop in the second part, where we will use it for other things too.

Now, all your code is wrapper by some loop specific tags. Here they are:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!--Code to be repeated here-->

<?php endwhile; else: ?>
<?php endif; ?>

Next, we will start constructing the article structure. We will need a title, some info about the dat when the article was published and it’s author.

The following line makes the article title:

<p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>

The first PHP tag is for the article’s link and the second is for the article title. These tags are kinda self-explanatory. We’re moving further for the meta data (date, author). Copy and paste the following code under the article title code:

<p>Published on <?php the_time('F d, y'); ?> by <?php the_author(); ?> in <?php the_category(','); ?></p>

First tag is for retrieving the date. The date tag have some parameters. These parameters are setting the date format (month, day, year). You can add characters like “-” or “.” or making something like “Month 02 Day 15 Year 1990″, it’s up to you! The second one, is for echoing the author of the post and the third, is for category or categories that the post is filed under.

Now, we will be placing the content tag. The content tag will output everything you write in a WordPress post:

<?php the_content(); ?>

The tag doesn’t need paragraphs because WordPress auto generates them for you. We’re finished with the loop. You can see the code pieces at the party:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>

Next, we will be going to code the sidebar.

We will start with the navigation. As you see in the CSS layout, the navigation is located in the sidebar. It doesn’t matter because the technique is the same. For creating a basic navigation you need these lines of code, which will placed between the <strong>ul </strong>tags:

<li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>

You already know what the first PHP tag does. The second one, is listing the pages that WordPress generates. The parameter is for list title. Try removing it and see what’s happening.

This is all you need to do for getting a nice working navigation menu. Now, we will create the categories list. All the blogs have categories and we don’t want our theme to lack categories. We will just add this code between the div #extra tags:

<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>

There is another listing tag but this one is listing the blog’s categories. I’ll cover more things relating the sidebar in part 2, where i will teach you how to make a theme widget-ready. That means you will introduce new blocks inside of WordPress, without coding anything.

But what about the footer? Shouldn’t it have some text in it? Well, we will write the copyright:

<p>Copyright &copy; 2010 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. All rights reserved.</p>

As you see, we have introduced some tags, just like in the header, to output the blog’s title.

The theme is functional, but we will need to make some page templates for single post (where the comments will appear) and the page (where you could write some info about your blog). If you use the same code for the header footer and sidebar, your template would get messy. Let’s say that you want to add one more thing to your sidebar. You will have to modify 3 times for each page template. Well, for avoiding this, we will chop the markup.

For each section of the index.php file we will have a separate file. So we will have header.php, footer.php and sidebar.php. Now, we will be starting to chop!

Copy and then replace the following lines:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
</head>
<body>
<div id="container">
<div id="header"><h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1></div>

With the following line:

<?php get_header(); ?>

Your copied code needs to be placed in the header.php file. The same thing we will do with the footer and sidebar

Copy the following:

<div id="navigation">
<p><strong>Navigation Here</strong></p>
<ul>
 <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div id="extra">
<p><strong>Categories</strong></p>
<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>
</div>

Paste them to sidebar.php then in the index.php file replace it with:

<?php get_sidebar(); ?>

Now, do the same thing with the footer. Copy the footer div and it’s contents, paste it in footer.php file, and then remove it in index.php with:

<?php get_footer(); ?>

You should have something like this:

<?php get_header(); ?>
 <div id="wrapper">
 <div id="content">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <p><strong><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong></p>
 <p>Published on <?php the_time('m d Y'); ?> by <?php the_author(); ?></p>
 <p><?php the_content(); ?></p>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>
 </div>
 </div>
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
</div>
</body>
</html>

Now you’re done with chopping the markup. We are going to create the page templates. We will create firstly the single template. Just save your index.php file as single.php. We won’t modify anything in this page yet. We will do it in part 2 where I will learn you how to create a comment form and how to list comments and other things like custom fields.

Now, for the static page, page template, delete the line where you have placed the meta data (the line with date, author and category tags). Then save the file as page.php. Being a page, we won’t need any info about the creation date or the author. We won’t even use comments on page because there is no point in it.

The last move we need to do is to print screen our template and save it in a canvas of 300 x 225 px and save it as screenshot.png in the root directory of your theme. This will be used in WordPress theme menu.

Well, we’re done with the first part. Go ahead and test your theme. If there is something you want to ask, do it via comments. Don’t forget that you can download the source files too.

To be continued

There are a lot of things to cover about WordPress. Making a theme isn’t so difficult, you just need to be patient. There are a lot of things that are needed to make a fully functional WordPress theme. That’s why, this tutorial will have a Part 2. Maybe there will be more parts, but i will let you know what I will be covering in the next part:

  • Widgetizing the sidebar
  • Using the single page template: comments, custom fields, author details
  • Using custom fields for showing an image for each article
  • Making a nice and working search form

Stay Tuned.

May 04 2010

21:36

30+ Best Texture Tutorials for Photoshop

Making art or various designs will often require different textures. It can be that you need it for that extra grungy look or maybe you are trying to recreate a piece of denim for a logo. It can be very useful to be able to make your own textures in Photoshop. This way you get the exact effect you want, its customizable, no need to pay anyone for the use of it etc.
I’ve collected some of the best texture tutorials I know of and hope these will inspire! Enjoy! :)

1. Realistic denim texture

Denim, a rugged cotton twill textile has been around for a long time. The variations you can make to this are many. Check out the Bonus features at the end of this article as one of them features denim!

2. Create an Awesome Grass Texture in Photoshop

The texture of Grass can be used for many different designs, and also here the variations are many.

3. Realistic crumbled paper

The crumbled paper texture is a texture that always is popular. It’s a fairly easy one to get realistic and the uses are many; business cards, websites, brochures, flyers – you name it.

4. Military style

Military style textures are mainly popular for those who make artwork that features military machinery or personnel. But how about switching the colors around a bit? That way you get a versatile look that goes with anything.

5. Reptile/dragon scales

These cool and versatile scales can be made in any color combination you want. This can be used as an exotic part of a design or to actually be used as skin for a dragon, snake or dinosaur you’ve created.

6. Brushed Aluminium

This is a texture trying to recreate the look of the good old Mac Powerbook (g4). Nowadays many things do come with this finish, maybe it even could be cool for a web design or business-card?

7. Metal Mesh

To add an extra dose of industrial funk to your design this very easy-to-make texture is worth a try.

8. Rusty texture

Rusty textures are quite in in several types of design. They make great additions to so-called “grungy” looks.

9. Glass

There are many ways of recreating the look of glass. This way is probably one of the easier ones.

10. Canvas texture imitation

By adding a texture to a picture you have you can make it fit better into a design or even on your wall. In this tutorial you will learn to make a canvas texture that has hundreds and hundreds of uses.

11. Marble

Marble has many different uses, mainly building and sculpturing. Marble comes in several color combinations from the pure white, via red and green – to black. In this tutorial you will learn to make a green one but changing the color is very easy.

12.  Rock / stone

Rock can be made several ways. In this tutorial you will learn how to make it in a very quick way. Remember to try out different colors and settings to give it your own look and feel.

13.  Rusty Surface

This rusty surface is quite easy to make and looks pretty realistic too. Customizing colors and patterns can be done quickly as well.

14. Fabric folds

This texture is very versatile. Choose the color that fits your design and this can be anything from curtains to bed sheets. Tweak it a bit and it can even be just some sort of smooth abstract element.

15. Wood

Wood has always been popular to recreate in Photoshop, and it’s easier to get it realistic than you might think at first. This tutorial gives kind of a worn wooden look – great for many types of designs.

16. Wood (2)

This second wooden texture tutorial gives us a darker type of wood.

17. Leopard skin

An exotic skin texture that can be used for many different projects.

18. Fur

Another type of recreating fur. Easy to follow and customize.

19.  Grungy paper

By using the Photoshop texturizer filter, blend-modes and more you can create this grungy paper look. Perfect for everything from web design to birthday-invitations.

20. Leather

Leather hasn’t been the most popular texture for a while but I see it coming more and more back. Playing around with different colors gives you an interesting look to add to almost any design-project.

21. Diamond Plating

In this tutorial Corey Barker combines Photoshop and Illustrator to make a pretty cool diamond plating texture that can be used in many designs.

22. Metal “fence”

If you don’t have Illustrator or the skills to make texture #21, this is a more light versions of the same look. Play around with some settings and make your own metal.

23. Grungy Metal (+ a star)

Grungy is in, and if you don’t feel like making a rusty texture then maybe metal could be an option?

24. Lava Texture

This crazy looking texture can be used as lava or play around with settings for an abstract look.

25. Red slate tile

Recreate tiles in a house or use it for a design. This good old tutorial gives an interesting look.

26. Bubbles

An easy tutorial showing a texture that can be highly customized to fit many types of designs.

27. Cool stage curtain

This can be used as a background for your project or as part of it. A very well-explained tutorial with a professional look in the end. Takes a while to make compared to some of the others, but is definitely worth it.

28. Realistic sky

Adding some sky can be the extra it-factor needed to create a stunning piece of art/design.

29. Leaf texture

Leafs look quite interesting when you look closely. Here’s a tutorial on how to recreate that.

30. Fabric textures

We finish off with a tutorial that shows us how to easily create several different kinds of fabric. Remember that as easy as they may look it will only require minor adjustments and colorization to get completely new results. This means endless variations!

Those were the 30 texture tutorials I had found for you this time, I hope you enjoyed them!

Finally, here are some cool tutorials related to textures:

Portfolio Layout created with jeans texture

Create an eye-catching portfolio using jeans texture. Download the provided texture or use your own that you’ve made earlier in this round-up :)

Paper Texture from Scratch + Create a Grungy Web Design with it!

Using textures and grungy looks in web designs is quite popular. In this high quality tutorial you will first learn how to create paper (from scratch) followed by making a web design where it’s implemented. Great fun!

How to Turn a Texture into a Seamlessly Tiled Background

Here you will learn some tricks on how to turn your textures into seamlessly tileable background. It’s good to have that in your toolbox, – especially for making backgrounds for your designs.

And that was it for now. I hope you learned a couple of new things, good luck with creating your own textures. Always remember to play around with settings and colors, – maybe you’ll come up with something unique!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...