An outline of the steps:

See demo:

XML Demo

Step 1: Connecting to the database.

As mentioned previously, the code is going to be written in an object oriented fashion. Let us begin with the connection class. To establish the connection the class will use PDO, you can read more about PDO and the following class using the link below:

http://weebtutorials.com/2012/03/pdo-connection-class-using-singleton-pattern/

Moving on, Create a new file called ‘db_conn.class.php’ and add the following code.

<?php

//db connection class using singleton pattern
class dbConn{

//variable to hold connection object.
protected static $db;

//private construct - class cannot be instantiated externally.
private function __construct() {

try {
// assign PDO object to db variable
self::$db = new PDO( 'mysql:host=localhost;dbname=DBNAME', 'USERNAME', 'PASSWORD' );
setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
}
catch (PDOException $e) {
//Output error - would normally log this to error file rather than output to user.
echo "Connection Error: " . $e->getMessage();
}

}

// get connection function. Static method - accessible without instantiation
public static function getConnection() {

//Guarantees single instance, if no connection object exists then create one.
if (!self::$db) {
//new connection object.
new dbConn();
}

//return connection.
return self::$db;
}

}//end class

?>

First of all, the class is using the singleton pattern. If you don’t know what this is you can find out more using the link provided previously. Just for clarity though, the pattern is used when global access is desirable and only one instance of the class is required. You will notice that the ‘__construct’ method is set to private. This prevents the class from be instantiated externally.

The ‘getConnection’ method is set to ‘public static’ which means it is accessible externally, and can be called without ever instantiating the class. The method checks to see if a database connection object exists, if not it creates one and then returns it.

Using this class it is possible to connect to the database, you can do so by using the following code:

$conn = dbConn::getConnection();

Step 2: Create class to query database.

With the database connection class complete, let us move on to the database query class. The class below is an abstract class and is used to provide a base set of methods & properties for any children which extend it.

Although using an abstract class isn’t actually necessary in this scenario, it makes it possible to easily extend the functionality at a later date if needs be. For example, you could easily create another child class, lets say ‘getRecordSet’ which could then be used to return data in the usual format, rather than XML.

As a final note, abstract classes cannot be instantiated – so you will not be using this class directly. Instead you will create a further class which extends it.

Take a look at the code below, then see the explanation beneath it for further clarification. First of all though, create a new document called ‘getRecordSet.class’ and add in the code.

//include db connection class
require_once( 'db_conn.class.php' );

// abstract class used as base class to store functionality/data required by children.
abstract class get_RecordSet {

//properties.
protected $db;
protected $stmt;

//constructor
function __construct()
{
//store db connection in class property.
$this->db = dbConn::getConnection();
}

//standard function to retrieve database info using PDO.
public function getRecordSet ($sql)
{
$this->stmt = $this->db->query($sql);
return $this->stmt;
}

}

So, first of all the connection class is ‘imported’ using the ‘require_once’ function. The class is now available for use. The class is then declared with the abstract access modifier (cannot be used directly, must inherit from the class first).

Inside the class we declare two properties, with the protected access modifier. This means the properties can only be used INSIDE the class, or inside child classes. The ‘db’ property will hold the database connection object, the ‘stmt’ property will hold the SQL statement.

Inside the constructor the connection class is used to establish a database connection, and finally is a function used to query the database and return the result.

Step 3: Create a child class to format sql query results as XML.

The following class is a child of the previous class and is used to set the xml headers, format the sql results and finally to display them. The comments explain the process fairly well, but it seems necessary to a least give an overview first.

The class has a method named ‘getRecordSet’, the same as its parent. Inside this method,  the necessary headers are set for XML, the ‘getRecordSet’ method of the parent is called (runs query and returns data) and a new variable is created to store the results.

At this point the function loops through the data set, storing the data into structured XML nodes. XML nodes work in a similar way to HTML elements, they have an opening tag, a closing tag and can also have attributes, the only difference being you can name them as you wish.

In this example, by using an associative array (‘fetch(PDO::FETCH_ASSOC)’), the name of the database column will be saved to the array key. This key is then used to name the XML nodes, so our XML nodes will be named the same as the database columns. Take a look at the demo to get an idea of how this looks.

Quick note: You will notice that the ‘getRecordSet’ method accepts another parameter, this is the name used for the custom XML elements

//class to return record set in xml format
class XMLRecordSet extends get_RecordSet {

//overiding base class. Two parameters, first is sql statement, second is option and is
//the name to be used for xml.
public function getRecordSet($sql, $elementName = 'element')
{

//Set headers to XML.
header("Content-Type: text/xml");

try {
//execute parent function to run query & retrieve data.
$stmt = parent::getRecordSet($sql);

//var to store values
$returnValue = "";
//xml header info
$returnValue .= "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
//xml parent node, or wrapper to be named according to 'element' parameter
$returnValue .= "<{$elementName}s>\n";
// fetch each record as an associative array
while ($book = $stmt->fetch(PDO::FETCH_ASSOC)) {
//child node element name
$returnValue .= "\t<$elementName>\n";
// iterate through each field in the associative array,
foreach ($book as $key => $value) {
// Store values as xml elements, using key as element name.
$returnValue .= "\t\t<$key>" . htmlspecialchars($value) ."</$key>\n";
}
//close each single element.
$returnValue .= "\t</$elementName>\n";
}
//close xml wrapper element.
$returnValue .= "</{$elementName}s>\n";

//return data in xml format.
return $returnValue;

}
catch (PDOException $e) {
//catch and display error
echo "Connection Error: " . $e->getMessage();
}
}
}

Another free wordpress theme today…Been working on this on and off for a while now. The theme was originally created for use on my portfolio site, but i didnt actually get around to installing it. There may be a couple of bugs, so if you spot anything acting wierdly leave a comment on this page and i’ll check it out!

See demo:

BrownPort Theme

Download free theme:

Download Theme

Images:

Description:

The theme can be best described as a blog / portfolio style template. The front page is made up of dynamic content, including a slideshow which is pulled from the posts stored in the wordpress database. Included in the theme are many features such as an inbuilt content form, multiple widget areas and full support. An overview of these features is listed below:

1. In built contact form.
2. Homepage Slider.
3. Multiple page templates.
4. Ajax contact form in footer.
5. A total of 8 widget areas for full customisation of the theme.
6. Regular bug fixes / updates. Just leave a comment if you spot any problems.

This post will show you how to create a PDO connection class using the singleton pattern. Before jumping into the code, take a look at the following paragraphs if you are new to PDO or the singleton pattern.

What is PDO?

PDO stands for PHP data objects, it is an API and can be used as an alternative to the MySQL, or MySQLi extensions.  Using the API it is possible to connect to databases in a consistent way, meaning it is possible to switch between different types of databases easily. For example, switching from a MySQL database to a SQLite can be achieved by changing a single line of code.

The API also has a bunch of useful methods. An example being ‘prepare()’ and ‘execute()’ which make it possible to write prepared statements easily.

Check out the php.net page for further info.

What is the singleton pattern?

A design pattern is normally used as a solution to a common problem, it can be thought of as a template or blueprint on which code can be structured. The singleton pattern is used to ensure there is only one instance of a class, and that global access is possible. Although there are cases when connections to multiple databases will be required it is quite rare.

With that said, we can assume that creating multiple instances of the database connection class would be a wasteful use of resources. To prevent this, the following singleton class can be used.

The code

Below is the class, check the comments for explanations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<?php

//db connection class using singleton pattern

class dbConn{

//variable to hold connection object.

protected static $db;

//private construct - class cannot be instatiated externally.

private function __construct() {

try {
// assign PDO object to db variable

self::$db = new PDO( 'mysql:host=localhost;dbname=DBNAME', 'USERNAME', 'PASSWORD' );
setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
}
catch (PDOException $e) {
//Output error - would normally log this to error file rather than output to user.

echo "Connection Error: " . $e->getMessage();
}

}

// get connection function. Static method - accessible without instantiation

public static function getConnection() {

//Guarantees single instance, if no connection object exists then create one.

if (!self::$db) {
//new connection object.

new dbConn();
}

//return connection.

return self::$db;
}

}//end class


?>

Further explanation

A quick over-view of how the class works:

The ‘getConnection()’ method is called. This method checks that there is no existing connection, if this is the case then it creates a new instance of the ‘dbConn’ class (itself).  Upon creation of this class the constructor is executed which then creates a new instance of the PDO class, this connects to the database. The PDO object is then saved to the ‘db’ property.

So, that’s the singleton pattern. It’s probably the easiest pattern to understand so i wont go into too much detail.  It is worth noting that the constructor is set to private, this means the class cannot be instantiated without using the ‘getConnection()’ method. If the constructor was public, then it would be possible to create multiple instances of the class.

Example usage

1
2
3
4
5
6
7

<?php
//calling static method ( '::' rather than '->')

$db = dbConn::getConnection();
?>

It is important to consider the different media used to browse the web today. Smartphones, ipods and tablets are ubiquitous and could be used by a significant proportion of your user-base.

This tutorial will cover the basics only, showing you how to create a bare-bones responsive web template. Try re-sizing your browser to see the results.

Demo

Demo

Download

Download

Step 1 – HTML for responsive template

To get started you will need a HTML template. Simply copy and paste the code provided below, or alternatively download the code using the button above.

The template is using a HTML 5 doctype, and contains a few simple sections. First is the header, then the content, followed by the sidebar and finally the footer. If you are unable to follow this code it is probably a good idea to check out some beginner HTML tutorials first of all.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<link href="stylesheet.css" type="text/css" rel="stylesheet" media="screen">

	<!-- Prevent elements from being automatically re-sized on apple iphones, ipad etc -->
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

	<title>Responsive Web template</title>

</head>

<body>

	<div id="wrapper" class="clearfix">
		<header>

			<h1><a href="#">Weeb Tutorials.com Responsive template</a></h1>

		</header>

		<div id="content">

			<h2>Lorem Ipsum</h2>

			<p>
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
			</p>

			<img src="tech-sect.jpg" alt="sample" />

		</div>

		<div id="sidebar">

			<h2>Recent Posts</h2>

			<ul>
				<li> <a href="#"> A sample tutorial </li>
				<li> <a href="#"> A sample tutorial </li>
				<li> <a href="#"> A sample tutorial </li>
				<li> <a href="#"> A sample tutorial </li>
				<li> <a href="#"> A sample tutorial </li>
			</ul>

		</div>

		<footer>Tutorial by <a href="http://www.weebtutorials.com"> Weeb tutorials</a></footer>
	</div>

</body>

</html>

Step 2 – Style the page using CSS

As with the HTML, there is very little here that needs explaining. The majority of the code is simply applying backgrounds, colours, borders etc. The clearfix rule probably needs a little explaining, take a look at webtoolkit.info for further info.

body{
	font-family:"Myriad Pro", "Tahoma";
	font-size:100%;
	color:#444;
}     

/* Content elements */
p{
	margin:18px 0;
	font-size:1em;
}
h1 {
	font-size:1.5em;
}
h2{
	font-size:1.2em;
	margin-top:20px;
}
/* Site structure */
#wrapper{
	background:#fff;
	border:1px #ddd solid;
	width:960px;
	margin:0 auto;
}  

header {
	padding:1%;
}
#content {
	float:left;
	width:72%;
	padding:1%;
}

#sidebar {
	float:left;
	width:24%;
	padding:1%;
	background: #e4f1f4;
}

footer {
	padding:1%;
	width:98%;
	clear:both;
	background:#efefef;
	text-align:center;
}

/* Fixes */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

Step 3 – Make the template responsive.

Using media queries it is possible to make the theme responsive. Lets look at the first example:

/* Larger Monitors / Resolutions */
@media screen and (min-width: 1300px) {

	#wrapper{
		width:1200px;
	}  

}

This piece of code will only apply to those using a higher resolution, and that’s how media queries work – they make it possible to check a certain condition and then run a specific piece of code based on the result. In this case, the code is applied when the browser is at least 1300px wide.

You may have noticed it is only a very simply change, the width is simply increased on the wrapper DIV. When there is less screen space available it becomes necessary to sometimes make further changes. An example of this is provided below.

/* iPhone - Potrait */
@media screen and (max-width: 330px) {

	body{
		font-size:90%;
	}     

	#wrapper{
		background:#fff;
		border:1px #ddd solid;
		width:290px;
		margin:0 auto;
	}  

	#content {
		width:98%;
	}

	#sidebar {
		width:98%;
	}

}

The rule above is applied to the website when the browser has a width of up to 330px. At such a dimension horizontal space is obviously minimal and should be used wisely. For this reason it seems wise to remove, or at least move the sidebar.

As the content and sidebar containers are floated to the left, all we need to do is alter the width so that there is not enough space for them to sit side-by-side. By doing this, the sidebar will move below the content. In this example both the content and sidebar DIVs are set to span the entire available width of their parents, minus the space needed for padding.

Full stylesheet for reference:

body{
	font-family:"Myriad Pro", "Tahoma";
	font-size:100%;
	color:#444;
}     

/* Content elements */
p{
	margin:18px 0;
	font-size:1em;
}
h1 {
	font-size:1.5em;
}
h2{
	font-size:1.2em;
	margin-top:20px;
}
/* Site structure */
#wrapper{
	background:#fff;
	border:1px #ddd solid;
	width:960px;
	margin:0 auto;
}  

header {
	padding:1%;
}
#content {
	float:left;
	width:72%;
	padding:1%;
}

#sidebar {
	float:left;
	width:24%;
	padding:1%;
	background: #e4f1f4;
}

footer {
	padding:1%;
	width:98%;
	clear:both;
	background:#efefef;
	text-align:center;
}

/* Fixes */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* Responsive Code */

/* Larger Monitors / Resolutions */
@media screen and (min-width: 1300px) {

	#wrapper{
		width:1200px;
	}  

} 

/* iPad - Potrait */
@media screen and (max-width: 768px) {

	body{
		font-size:90%;
	}     

	#wrapper{
		background:#fff;
		border:1px #ddd solid;
		width:728px;
		margin:0 auto;
	}  

} 

/*--------------------Smart phones--------------------*/

/* iPhone - Landscape */
@media screen and (max-width: 480px) {

	#wrapper{
		background:#fff;
		border:1px #ddd solid;
		width:450px;
		margin:0 auto;
	}  

	#content {
		width:98%;
	}

	#sidebar {
		width:98%;
	}

} 

/* iPhone - Potrait */
@media screen and (max-width: 330px) {

	body{
		font-size:90%;
	}     

	#wrapper{
		background:#fff;
		border:1px #ddd solid;
		width:290px;
		margin:0 auto;
	}  

	#content {
		width:98%;
	}

	#sidebar {
		width:98%;
	}

} 

/*--------------------End Smart phones--------------------*/

The following page describes a number of things that separates a good wordpress theme from a bad one. The below items are listed in no particular order.

Multiple page templates

What are they?

Page templates define how information is displayed on your wordpress site, and what’s quite useful about them is that you can set a different template for each and every page. This gives you the ability to control and configure your pages without writing a single piece of code (if you have the right theme anyway). Page templates are made up of HTML, CSS and Javascript. Basically the same as a normal website page, but modified to be compatible with wordpress.

Finally, remember that all wordpress pages are based on page templates. This includes blog posts, normal pages, archive pages and the home page.

Why is it important?

Simply put, the more page templates a theme has the more control you have over your site. For example, a theme that comes only with a single default layout – say a right-hand column for your content with a sidebar to the left, doesn’t leave much room for configuration. What if you needed the full page width for content and had no need for a sidebar?

An example of a theme with different page templates, you can see how it could be useful:

Left sidebar

Full width with banner

Documentation

What is it?

Well this one is pretty obvious, but the a wordpress theme should come with documentation detailing how to configure and use the theme. This is for the benefit of the end user.

Why is it important?

Whether you are looking to buy a wordpress theme, or create one, you should pay some attention to the idea of documentation. Let’s face it, a wordpress theme is going to consist of, and contain, various different functions / functionalities. Although configuring the majority of these may seem straight-forward it is not always the case. This is especially important for those who are considering buying a wordpress theme, without documentation you may end up hiring a web developer just to install the theme.

So, what type of things should the documentation contain? Below are some common entities and suggestions.

• How to configure common elements – such as header image, feedburner link etc.
• Description of widget areas and how to add content to these.
• How to use theme options page ( if the theme has one) e.g. include social links, alter sidebar or footer etc.
• How to configure any slideshows or other functionality built into the theme.
• Description of page templates included and examples of what they may be used for.

I think you can get the idea from that list, the documentation should really provide the end user with everything they need to install and configure the theme.

Short-codes

What are they?

Short-codes allow the end user to add complex elements to a page or post, without actually writing the code themselves.

They can be used to add buttons, columns, and even slideshows to a page. A really simple example of how they work is below.

Lets say you want to add a blue background to a paragraph to make it stand out, you would need the following:

[codesyntax lang="html4strict"]

<div id="highlight"> This is highlighted using CSS </div>

[/codesyntax]

And the CSS:

[codesyntax lang="css"]

#highlight {
background:blue;
}

[/codesyntax]

However, if the developer had implemented a shortcode to do this as part of the theme, it would be as simple as the example below:

[highlight] This is a highlighted element [/highlight]

Obviously, this is a really simple example used to illustrate the idea. However, you should now understand how useful shortcodes can be.

Why is it important?

Well, as mentioned earlier, they give more power to the end user. By providing the ability to add buttons, highlights, columns and other elements to the page the user has more control.

However, it is worth mentioning that short-codes do have there down-side and should be used cautiously. Imagine if you wanted to change theme after adding short-codes to all your pages, unless the new theme supported the short-codes they simply wouldn’t work.

Theme options page

What is it?

A theme options page is usually used to provide the user with some control over the look and feel of their theme, as well as some of the functions. Through use of a simple interface users are able to alter such things as the color scheme, location of objects, logo images, icons etc. Of course this is just the tip of the iceberg.

Why is it important?

Well, this is pretty obvious. The better the theme options page is, the more you can do with your theme. With a good options page you can modify aspects of your theme that would normally require technical knowledge, i.e changing the color scheme or the number of columns a page may have.

Support

What is it?

Some theme authors will offer post purchase support with their wordpress themes, it is always worth checking that a theme comes with support before purchase. Why? Well, there is a good chance that after buying the theme you will run into one, or more problems. Of course, most common problems will be covered in the documentation, but on the off chance that you run into an unusual problem it is wise to purchase a theme with support.

Why is it important?

Simple, without support you will need to pay a Web developer to fix any bugs the theme may have. Unless, of course, you can fix the bug yourself.

Browser compatibility

What is it?

A browser compatible theme is a theme which works across multiple browsers. The more browsers it works on, the bigger its potential user base. When creating, or purchasing a theme this is definitelysomething you should be considering. Most theme stores clearly display which browsers a particular theme is compatible with – a good selection of browsers would usually be IE7+, FF3.6+, Safari, Chrome and Opera. These are the most popular browsers.

Why is it important?

Internet users today surf the web using a range of web browsers, each of these have their own problems, quirks and bugs. If a theme has not been coded in a browser compatible manner, then it simply may not work for a portion of your user base.  The future of the web seems to be mobile, so it is probably worth checking that a theme is mobile compatible also. There are plug-ins that help with this, such as WP-Touch.

Thanks for reading, if you think anything needs adding to the list let me know in the comments section below.

To add some effects, such as rounded corners, or drop-shadows, CSS3 will be utilised. These means that the form styling will only work properly in modern browsers.

A couple of external sources were used to produce the images,  a link to these will be included -  so you will also learn of a couple of valuable source sites too.

Step 1 – Download images for the form.

Before starting you will need to download a couple of images, you can grab these below. One image is for the form background, the other is the icon found on the right-hand side of the form.

Link:

http://weebtutorials.com/wp-content/uploads/2011/10/formimages.zip

Background pattern source:

http://subtlepatterns.com/

Icon Source:

http://www.shapes4free.com/

Step 2 – The HTML.

As the purpose of this tutorial is to discuss the stylnig of a form, rather than the full creation i wont go over the HTML in much detail. However, you can still find the code below.

<form class="stylishForm1" method="post" action="script.php">
<h2> Contact us </h2>
<img src="images/contactIcon.png" alt="contact" class="contactImg"/>

<p> Your Email:
<input type="text" name="userMail" class="formInput"/>
</p>

<p> Your Name:
<input type="text" name="userName" class="formInput"/>
</p>

<p> Your Question :
<textarea rows="1" cols="1">
</textarea>
</p>

<p>
<input type="submit" value="Submit" class="formSubmit"/>
</p>

</form>

As you can see the HTML pretty much consists of a few paragraph elements, each one containing either a text input, a textarea or a submit button. Its pretty simple code, but if you are unfamiliar with this stuff take a look at the W3C forms page.

Step 2a – Add google fonts link to HTML head section.

The form will be utilising some custom fonts via the google fonts API. All you need to do is add the following code to the HEAD section of the HTML document. You can then refer to the fonts in the CSS file.

Find out more about google fonts.

<head>
<link href="sylishForm1.css" type="text/css" rel="stylesheet"/>
<title> A Spacious CSS3 Form </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Rochester' rel='stylesheet' type='text/css'>
</head>

Step 3 – Styling the HTML form using CSS.

Style the form:

Changing the display property to ‘inline-block’ means the form will be a block element, but will expand to fit the elements inside of it, rather than span the full width of its parent container.

Notice the padding property, the third value is 0px. This means the bottom of the form has 0px has padding, the reason this has been done is that the paragraph elements will have 30px padding on the bottom so the form itself doesnt actually need it.

The position property is set to relative. This allows us to position any child element as absolute, giving us full control over its location.

Box-shadow property accepts 4 vlaues. These are, in order, horizontal offset,  vertical offset, blur radius and color.

.stylishForm1 {
border:thin solid #eaeaea;
display:inline-block;
padding:30px 30px 0px 30px;
-moz-box-shadow: 2px 2px 3px #f2f2f2;
-webkit-box-shadow:  2px 2px 3px #f2f2f2;
box-shadow: 2px 2px 3px #f2f2f2;
background:url(images/background.jpg);
position:relative;
}

Style the header section:

As mentioned earlier, the paragraph elements will have 30px padding added to the bottom. The same goes for the header element, this keeps the spacing consistent.

Change the font-family value to use the custom ‘Rochester’ font supplied by the google fonts API.

Using the contactIMG class the image added to the HTML can be positioned. An element which uses absolute positioning, is positioned relative to the first parent container which is positioned as relative. In this case the image should be move to the top right hand side. This is done by using the top, and right properties.

[codesyntax lang="css"]

.stylishForm1 h2{
margin:0;
margin-bottom:30px;
font-family: 'Rochester', cursive;
font-size:30px;
color:#494949;
}
.contactImg {
position:absolute;
right:30px;
top:35px;
}

[/codesyntax]

Style the paragraph and input elements:

Nothing much to explain on the ‘P’ element. The font has been changed, padding added etc.

The form inputs, and the text area have had their display property changed to block. This is used to push the elements on to a new line, below the text contained within the paragraph. Everything else on there is pretty straightfoward, or has already been explained.

[codesyntax lang="css"]

.stylishForm1 p{
margin:0;
margin-bottom:30px;
font-family: 'Open Sans', sans-serif;
color:#7a7a7a;
font-size:15px;
}
.stylishForm1 input, .stylishForm1 textarea{
display:block;
margin-top:10px;
width:430px;
padding:10px;
-moz-box-shadow: 2px 2px 3px #e3e3e3;
-webkit-box-shadow: 2px 2px 3px #e3e3e3;
box-shadow: 2px 2px 3px #e3e3e3;
border:1px solid #e9e9e9;
}
.stylishForm1 textarea{
height:130px;
}

[/codesyntax]

Style the submit button.
Now, you’re probably about to look at the code below and pass out. Don’t worry though the code was created by using a CSS3 generator. The first section, which is wrapped within a comment ( taken from colorzilla) was taken from the following site:

http://www.colorzilla.com/gradient-editor/

Its a CSS3 gradient generator which produces the necessary code for all modern browsers. Highly recommended.

Following on from that is some pretty basic CSS, a border has been added and rounded corners have been implemented using border-radius. Just below that an inner shadow is added by using the box shadow property. The code for adding an inner shadow is exactly the same as for an outer shadow, the only difference being the word ‘inset’ is added.

The text shadow was again implemented using a CSS3 generator. I can never remember the code for IE(filter property) so normally just use a generator. You can find a link to the one i used below.

CSS3 Generator

Notice the width of the submit button is 452px, where as the other inputs are 430px. This is because the submit button does  not have 10px of padding at either side, unlike the input elements. The extra 2px accounts for the box shadow added to the inputs.

The final section of the code is used to implement a hover effect to the button. Again the colorzilla generator was used. The cursoer property simply changes the mouse cursor when the button is hovered.

[codesyntax lang="css"]

.stylishForm1 .formSubmit{
/*Taken from http://www.colorzilla.com/gradient-editor CSS3 Generator*/
background: #7db8e2; /* Old browsers */
background: -moz-linear-gradient(top, #7db8e2 0%, #75aed6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db8e2), color-stop(100%,#75aed6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db8e2', endColorstr='#75aed6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #7db8e2 0%,#75aed6 100%); /* W3C */
/*End Taken from CSS3 Generator*/

border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border:1px solid #75aed6;

box-shadow:inset 0px 0px 2px #dcebf1;
-webkit-box-shadow: inset 0px 0px 2px #dcebf1;
-moz-box-shadow: inset 0px 0px 2px #dcebf1;

/*Taken from http://css3generator.com/ */
text-shadow: -1px -1px 0px #5f90b0;
filter: dropshadow(color=#5f90b0, offx=-1, offy=-1);
/*End Taken from CSS3 Generator*/

color:#fff;
font-family: 'Open Sans', sans-serif;
text-transform:uppercase;
font-size:16px;
width:452px;
}

.stylishForm1 .formSubmit:hover {
/*Taken from http://www.colorzilla.com/gradient-editor CSS3 Generator*/
background: #80bde5; /* Old browsers */
background: -moz-linear-gradient(top, #80bde5 0%, #78b3db 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80bde5), color-stop(100%,#78b3db)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #80bde5 0%,#78b3db 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #80bde5 0%,#78b3db 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #80bde5 0%,#78b3db 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80bde5', endColorstr='#78b3db',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #80bde5 0%,#78b3db 100%); /* W3C */
/*End Taken from CSS3 Generator*/

cursor:pointer;
}

[/codesyntax]

Hope you enjoyed the tutorial, and thanks for reading.

There will also be a small programming task near the end to help you improve your skills, so make sure you read carefully! Lets get started.

Part 1: What is an array

As a programmer you will need to use arrays regularly. They are similar to variables in that they are used to store a value of some description. However, unlike a variable an array can hold multiple values. And they do so in a structured format.

Each value within an array is referred to as an array element and has an index, or ID,  number associated with it. You can access these individual values by using the index assigned to them. As a final note, remember that the indexing is zero-based, meaning that the index starts at 0 rather than 1.

Below is some simple code which shows how to create an array, then assign some values to it.

var classMates=new Array();

classMates[0]="Dave";
classMates[1]="Sam";
classMates[2]="John";
classMates[3]="Kate";

An example of how you could use this data:

alert(classMates[3]);

Part 2: What is a function

In programming terms a function is a named piece of code which performs a specific task, such as multiplying a number or many other calculations.  The code contained within a function will only run when called, or when triggered by an event. You can pass values (known as parameters, or arguments)  into functions, which can then be used to carry out calculations before being returned.

It’s a simple concept to understand, and i dont believe it requires any more explanation.

How to create a function in javascript:

function alertMsg()
{
alert("Hello");
}

And a function that accepts parameters:

function multiply(a,b)
{
return a*b;
}

alert(multiply(5,10));

Part 3: Programming task

Create a function called ‘dayName’ that accepts a number and returns the day of the week based on that number. Details are below

1. Day 1 – Monday, Day 2 – Tuesday, Day 3- Wednesday and so on.
2. The function should first of all create an array.
3. For the purpose of this tutorial you should then store the day names in this array.
4. Use the alert function to display the result once complete.

It’s a pretty simple problem, but it should help you remember what you have learned. If you like the format of this tutorial please leave a comment and i will consider writing more like this.

The solution is hidden below and can be expanded when you are ready

• Solution

  function dayName(day)
  {
  var daynames=new Array(); 
  
  daynames[1]="Monday";
  daynames[2]="Tuesday";
  daynames[3]="Wednesday";
  daynames[4]="Thursday";
  daynames[5]="Friday";
  daynames[6]="Saturday";
  daynames[7]="Sunday";
  
  return daynames[day];
  }
  
  alert(dayName(3));

Quick preview:

Get the free wordpress theme.

Anyway, the theme is given away totally free on their website. You can find a link below.

http://www.tech-sect.com/wordpress-themes – Link temporarily disabled as tech-sect site was hacked

Theme features

1. W3C Compliant
2. Easily configurable front page
3. Portfolio page.
4. Blog page.
5. Browser compatible (IE7+, FF3+, Opera 10+)
6. Multiple widget areas
7. Drop-down CSS navigation
8. jQuery slideshow on front page.

Theme preview:

You can see a working example of the theme by following the link below:

http://weebtutorials.com/testEnvironment/

I usually use IETester for any compatibility tests, but the script was simply causing the program to crash. After realising i was going to need an alternative test environment i quickly ran to google! And thats where i found this:

Micosoft VPC image

Microsoft have a number of virtual PC’s available for download from the Windows Virtual PC VHD page. Each comes with a different version of IE installed and ready to use.

After installing this and running the site however i realised it wasnt much use! I was simply receiving a generic “A script has caused an error on this page” message and then had to stop the script. This method of testing would be good for your basic HTML/CSS browser compatibility checks though!

IE8 Browser mode

After some more google bashing i found out about IE8 browser mode. This basically allows you to run IE8 as if it were IE7. Very handy for me, as i have IE8 installed on my windows 7 machine.

To access browser mode simply open IE8 and press ‘F12′. At the top of the pop-up screen that opens you should now see ‘Browser mode: IE8′. Simply click this button and change to IE7 mode.

Now, refresh the page and an errors should display in the console. Easy as that, all you have to do now is fix the actual problem!

I’m not 100% sure, but i would think IE9 also has browser mode for those that dont have IE8 installed.

On that note i would like to mention that the primary purpose of this tutorial is to show how the template can and should be used. If you are looking for a tutorial showing each and every step of the drop-down process you may want to look elsewhere.

The navigation menu has been testing in IE7+, Firefox 3.6+, Chrome, Opera and Safari.

Demo

Step 1 – Download required files for menu.

Below are all the files required for this tutorial.

1a – The navigation template.

First of all you will need our drop-down menu template, you can download the template below.

Browser compatible drop-down navigation menu template.

1b – PIE.htc and required images.

Just so you know, PIE.htc allows Internet explorer 6-8 render CSS3 properties. You should extract it to the same directory as your CSS file. The two images are simply background images, save them in a folder named ‘Images’. Use the link below to download these files.

PIE.htc and required images.

If you would like to know more about ‘PIE.htc’, go ahead and visit www.css3pie.com. There is some good information on there and its worth a look!

1c – Extract.

Extract the navigation template files first of all. Then, as mentioned above, extract the pie.htc file into the same folder as your css file and extract the images into an ‘images’ folder.

Step 2 – Edit the CSS.

Open the CSS file ready for editing. The first thing you will need to change is the background styling of the menu, this is applied to the ‘UL’ element and has an ID of ‘#navMain’.

Below is the current code, followed by the new code. We will use this format throughout the tutorial.

Old code:

#navMain{
list-style:none;
font-family:tahoma;
font-size:12px;
border:1px #595959 solid;
float:left;
width:940px;
margin:0;
padding:0;
background:#f6f6f6;
}

New Code:

#navMain{
list-style:none;
font-family:tahoma;
font-size:12px;
border-top:1px #e8e7e7 solid;
border-left:1px #e8e7e7 solid;
border-right:1px #e8e7e7 solid;
float:left;
width:940px;
margin:0;
padding:0;
background:url(images/navBG.png) repeat-x #f2f1f1;
-webkit-box-shadow: inset 2px 2px 2px 2px #fafafa;
-moz-box-shadow: inset 2px 2px 2px 2px #fafafa;
box-shadow: inset 0px 0px 3px 2px #fafafa;
behavior: url(PIE.htc);
}

Whats changed:

First of all  the bottom-border has been removed and the color has been changed. Once we add a shadow we will no longer require a bottom border, and it can sometimes have a negative effect on the way the drop-down menu works – so for that reason i find it better to just remove it(in this case).

Secondly we have changed the background to use the image provided, no explanation required there. Finally an inner glow has been added using the box-shadow property. By using the ‘inset’ keyword the shadow will be added inside the element, rather than outside.

Box shadow accepts 5 values, the following should give you a better idea of how the box-shadow property works:

box-shadow: Horizontal offset, Vertical offset, Blur radius, Spread, colour.

As a final note, the behaviour property allows us to attach a script to a CSS selector. You can read more about it at www.css3.com.

Step 2.1 – CSS: Container

The next step is to add an outer shadow, you will need to add this to the wrapper ‘DIV’(#container) since you have already added a shadow to the ‘UL’ element.

Old Code:

#container {
width:940px;
margin:0 auto;
}

New Code:

#container {
width:940px;
margin:0 auto;
-webkit-box-shadow: 2px 2px 2px 2px #e6e5e5;
-moz-box-shadow: 2px 2px 2px 2px #e6e5e5;
box-shadow: 2px 2px 2px 0px #e6e5e5;
behavior: url(PIE.htc);
}

Whats changed:

Nothing much, a subtle border has been added to the bottom and left hand sides of the menu.

Step 2.2 – CSS: List items

The list items are to be updated next. The current item class will have a different background, borders will be added, text color changed etc.

Old code:

#navMain > li{
float:left;
position:relative;
}
#navMain > li > a{
color:#1b2e28;
float:left;
text-decoration:none;
padding:11px 12px;
}
#navMain .currentPage a{
background:#d3d3d3;
}

New code:

#navMain > li{
float:left;
position:relative;
border-right:1px solid #fff;
}
#navMain > li > a{
color:#adacac;
float:left;
text-decoration:none;
padding:13px 14px;
margin:0;
text-shadow: 0px 1px 0px #fff;
font-size:13px;
border-right:1px solid #e5e4e4;
}
#navMain .currentPage a{
background:url(images/currentBG.png) repeat-x;
}

Whats changed:

First of all, two borders have been added. One to the list item(light), and one to the anchor(dark). This gives a nice, realistic lighting effect and fits perfectly on a navigation menu such as this.

The text has an embossed effect which is added using the text-shadow property. The code for this property is similar to that of the box-shadow property, a brief explanation can be found below.

box-shadow: Horizontal offset, Vertical offset, Blur radius, color.

Some other minor changes have been made, such as increasing the padding both vertically and horizontally. Also, the font size has been notched up a little and the color has been changed.

Finally, the background of the current list item has been changed to use the image which you should have downloaded earlier.

Step 2.3 – CSS: Drop-down menu

The following changes will be pretty much finish the navigation menu off. The styling of the dropdown menu will be changed and the positioning will need adjusting slightly.

Old code:

#navMain ul {
display:none;
position:absolute;
list-style:none;
left:0;
padding:0;
margin:0;
border-left:1px solid #595959;
border-right:1px solid #595959;
background:#dfecee;
}
#navMain ul li a{
color:#1b2e28;
text-decoration:none;
display:block;
padding:6px 7px;
border-bottom:1px solid #595959;
}
#navMain li:hover ul {
display:block;
top:36px;
min-width:200px;
}
.gecko #navMain li:hover ul {
top:38px;
}
.ff3_6 #navMain li:hover ul {
top:36px;
}

New code:

#navMain ul {
display:none;
position:absolute;
list-style:none;
left:0;
padding:0;
margin:0;
border-left:1px solid #e8e7e7;
border-right:1px solid #e8e7e7;
background:#f7f6f6;
border-top:1px solid #e8e7e7;
}
#navMain ul li a{
color:#adacac;
text-decoration:none;
display:block;
padding:6px 7px;
border-bottom:1px solid #e8e7e7;
text-shadow: 0px 1px 0px #fff;
}
#navMain li:hover ul {
display:block;
top:42px;
left:-1px;
min-width:200px;
overflow:hidden;
}

Whats changed:

The majority of the changes are purely cosmetic. The background color has changed, along with the font and borders. The most important changes though are to the positioning. Using the ‘top’ property the dropdown list has been properly positioned to meet the increased padding of the menu.

You may also have noticed the the ‘.gecko’ and ‘.ff3_6′ rules have been removed. These are browser specific rules for the old navigation menu and are no longer required.

Step 3 – Finish up!

The navigation menu should be pretty much complete now, you may notice that the hover colors are still off. The hover effect is handled by a jquery script, you can change these in your HTML document.

Old code:

$(document).ready(function(){

    $("#container ul li a").hover(function() {
    $(this).animate({ color: "#1c99da" }, 800);
    }, function() {
  $(this).animate({ color: "#1b2e28" }, 100);
    });

  });

New code:

 $(document).ready(function(){

    $("#container ul li a").hover(function() {
    $(this).animate({ color: "#7d7c7c" }, 800);
    }, function() {
  $(this).animate({ color: "#adacac" }, 100);
    });

  });

Whats changed:

Simple hex color code change, no explanation required.

Hopefully that was easy enough to follow and you now have a good idea how fast, and easy, it is to create a dropdown navigation menu using our template. Thanks for reading.