Hi there and welcome to this exciting first lesson! In this lesson i will explain you something about “webEdition”, and how to setup your copy!

History

webEdition is an high quality CMS system that has sold more than 50.000 licenses! that has gone open source late 2008.
webEdition was developed by a company called ASTARTE New Media AG in 2001, and sold on to a investor group First Ventury AG in 2003.
In 2006 GmbH was converted to the Living-e AG which is the current developer of webEdition.

Facts

These are a few facts, which are listed on there website. In my opinion all facts are TRUE!

• User friendly: Uncomplicated installation
• Editor friendly: Easy usability
• Modular: Add modules as you need them
• Dreamlike: Ideal integration in Dreamweaver
• Standard conform: PHP, MySQL, XML
• Accessible: Important for cities, municipalities etc.
• Multilingual: Different languages
• Open Source: webEdition can be adapted to your individual needs

Modules

webEdition has some great modules that you can use for free!

User Management PRO / ToDo Messaging / Workflow
Adds individual user permissions and workspaces to the User Management Module. Including: Workflow Management, internal messaging and task management.

Shop Module
Build and manage your own web shop using the Shop Module that comes with webEdition! Manage your shop with great ease.

Customer Management
Easily manage the data of the visitors of your website, customers and prospects with the Customer Management Module. Create personalized content or areas, which are accessible to certain customer groups.

DB/Object Module
The Database/Object Module enhances webEdition with the display of object oriented information. Typical applications: Management of addresses or contacts, management of events and addresses, picture database, publication database, central news management.

Newsletter Module
Manage your newsletter recipients, create and send individual mailings.

Step 1 - Downloading webEdition

As you might have read in the facts list, it is User friendly! During the download and installation you will see how smooth everything goes.

We can download webEdition from webEdition.de. You can turn the website language by clicking English on the left side of the search field.

If you would like to know everything there is to know about webEdition, i suggest to browse true the different pages on there website.
But if you are ready to start, click Download Center in the navigation on the left side of the website. In order to download the installation files for webEdition, you must click Software.

In this tutorial we will use the Online Installer(download link), because this very easy to use! Don’t forget to take a look below the Online Installer though! Because you can find a Dreamweaver extension and a Java upload, but we will get to that in a other lesson.

Step 2 - Installing webEdition

After you downloaded the Online Installer ZIP, please extract it which will leave you with 1 file: OnlineInstaller.php. Now its important that you upload this file to the ROOT directory of your website!! And make sure that you chmod your root folder 777 in order to give the installer write, read and excute access.

After you uploaded the file and chmodded the folder, enter the url to the file into your browser.

Just wait for the page to load, and after a few seconds the installer will start. Our first step is to change the language English (UTF-8).

When you change the language to English, the installer will reload and the language will be changed. Next click the next button. In the next step you will have to agree with the Online Installer notes, just check the checkbox and click next.

Now when we have to choose a application that will be installed! In all series i will use webEdition 6, so please make sure you select it! And then click next.

If you need a proxy connection please enter your proxy data! Right after you click next, the installer will check if a connection can be made with the server of webedition.de, because its going to download the install files from there server.

Next is the license agreement, click the checkbox to accept it!

In the next step you have to make sure the path is correct! If the returned path is correct leave the input field empty!

Click next and you will be send to the System requirements page, if problems occur fix them before moving on. Click next when everything is OK! Next the installer will check if you have any other versions installed in the current directory, so no problems should occur. (Please note that i do not include screens for the simple steps). So the next important step is the database information, fill in the details and click next.

Simply click next for the following 2 steps and then its time to enter the login data.

Ok so the next steps are easy, and speak for themselves. So then wait for the installer to download the files and start the installation

Congrats!! webEdition has been installed! Click Start webEdition so we can get started!

Interface - Login

webEdition only installs the CMS system itself, and will always be installed in the following directory: http://www.yourwebsite.com/webEdition. So lets enter that url into our browser and see what we get!

You should get the same as shown in the screenshot, now lets talk about the login. The login offers 2 modes, both have a BIG difference.

Normal

If you select the Normal mode the developer version of the CMS will be loaded, this mode is to build the whole website using webEdition.

See

This so called See mode is made for your CLIENTS, its a extremely nice feature of webEdition. Your clients can login and browse true there website like the would normally do, but now the have a toolbar, and with the press of a button the can change content that you as developer give them access to.

We we talk about the See Mode a bit later on in the webEdition series, so lets login (make sure you select Normal) and take a look at the developer interface.

Interface - Cockpit

By default when you login onto your webEdition installation the Cockpit will open. You can change the order of your Cockpit widgets by dragging them around.
You can also change the preferences for each widget by clicking the text icon in the widget window. By default you got 4 widgets active: (more widgets are available)

• Notes - Leave notes for yourself or other devlopers.
• RSS Feed - You can change the url of the RSS feed to anything you like, which will show you the latest items of the selected RSS feed.
• Last modified - Keep track of what you and others have recently modified.
• Shortcuts - A few shortcuts that you can edit, so you can start right away without going true any navigation at the top.

Interface - SideBar

The sidebar is something which opens when you login, you can turn this off in the preferences if you want. By default the sidebar always shows the same information for new users. A welcome message with a few links to Manuals or Other help resources. If you want to experiment with webEdition you can always use the First-Steps-Wizard which will install a website based on a simple “ready-to-use” layout. Please note that we are not going to use this! In these series we will build our own website from scracth. So if you install a website using the wizard please make sure you remove the website and it contents before moving on to lesson 2. (or do a reinstall). Lets get back to the sidebar for a minute, at first look it looks kinda useless if you familiar with webEdition because you don’t need the wizard or links to the manual. BUT, you can change the sidebar, and select a custom made template, so you can decide what will be displayed in the sidebar! Which is could come in handy, so great small feature.

Interface - Explorer

The explorer sidebar on the left will display the contents of your website, such as files and folders. On the left side of the sidebar you will see a few tabs.

• Documents - This will show a list of available documents and directories such as web pages, image, stylesheets, javascrips, movies etc.
• Templates - This will show all templates that you have made
• Objects - This is part of the Database/Object module and shows you avaiable objects
• Classes - This is part of the Database/Object module and shows you avaiable classes

And at the bottom of the left sidebar you got a search function so you can find files easy and fast.

Interface - Navigation

We can’t do anything without this! From this menu we create files, manage modules settings and extra’s!

Conclusion

webEdition is a great and friendly CMS system, that offers allot of features. In this lesson we took a look at:

• What webEdition is and what it can do
• How to install a fresh copy of webEdition 6
• The basics of the webEdition interface

So in the next lesson we will start building our website using the template and document system.
I hope you enjoyed this lesson, and i hope to see you next time in lesson 02!

PS. If you enjoyed this lesson, feel free to promote this tutorial using the promotion links below this post.

FancyBox
In some of our previous tutorials, and upcoming you will be able to enlarge tutorial images by clicking them!
Thanks to the perfect and good looking jQuery plugin FancyBox.

Write a tutorial
If you would like to write a tutorial for us, please let us know!
At this moment we can offer you free advertising at our website if your tutorial gets accepted!

Please contact us if you see any bugs on the website!

Now before you can use FeedBurner you need a RSS feed, or else you are wasting your time at feedburner.com unless you are there to advertise

No depending on the CMS you use or you have build your custom one, we need a RSS url.
In this case i’m using Wordpress so the feed URL can be found at domain.com/feed for example http://xcodetuts.com/feed. You can use any RSS feed, just to make that clear!

Ok, got your RSS feed URL? Great! Let’s go to feedburner.com and get started!
Copy and paste the RSS feed URL into the long input field, you can’t miss it
Now depending on if you are a pod caster check the checkbox if not, just leave it unchecked.

Step 2 - Basic Setup

So before FeedBurner can start tracking your RSS Feed, you have to make sure that the RSS link on your website is going to link to the feed address but we will take about that later on. First give your feed a title and make sure that all details are correct. Now you can either create a new account or sign in if you already have one. Done? Hit Activate Feed!

Congrats! Your FeedBurner feed is now live!
Now that you have that done you can set some more additional free FeedBurner Stats by pressing Next

At the Enhance Your Stats page you can activate some additional features FeedBurner offers.
Not happy with the free features? Well in that case you have to become a PRO member.

As free users you can add 2 additional features, which i think are not really important.
Clickthroughs changes all links in the feed so they can track clicks, i think that this does and can effect you traffic in a negative way. Item enclosure downloads can be checked for users who want to track there podcast downloads.

After you click Next you will see that you Traffic is now being monitored by FeedBurner.
Please note, that it can take a few hours before traffic details will be displayed.

Step 3 - Linking to FeedBurner

Now while we wait for FeedBurner to become active, we can work on our website and make sure that all RSS links are redirected to FeedBurner.
When you got your own custom coded website, you just have to change the URL to make it work, but what about Wordpress, because Wordpress dynamicly creates RSS links for each post.
We are lucky because “FeedBurner FeedSmith” a plugin originally authored by Steve Smith does everything for us, because this plugin detects all ways to access your original Wordpress feeds and redirects them to your FeedBurner feed so you can track every possible subscriber. So click here to download the plugin.

When the file has been downloaded, unzip it and upload FeedBurner_FeedSmith_Plugin.php into your plugin directory which can be found in wp-content/plugins/.

And that’s the only file you have to upload, now simply close your FTP program and login at your Wordpress Administration Area.
When logged in, click the plugins tab on the right side of the control panel.

As you can see Wordpress recognizes the plugin we uploaded, but it’s not working yet because we have to activate it.
Just click Activate on the right side of the plugin, and the plugin will be activated and start running right away.

One more thing is left to do before it will work, we need to tell the plugin whats the url to the FeedBurner Feed, so open your settings Tab and click FeedBurner.

Now a simple method to check if its working, open your web browser and enter the URL of your website + /rss, now you should be redirected to FeedBurner.

Feed Stats

After a few hours you can take a look at your first feed stats.
Just play around with all options that FeedBurner offers!
So this is the end of this tutorial! If you enjoyed it, please use one of the promotion links below or leave a comment.

Step 1 - Download jQuery and the required plugin

Before we can start editing our Wordpress theme, we have to download the required JavaScript files. For this tutorial we will use the jQuery JavaScript framework and a plugin called “jQuery Live Ajax Search” which is made by Andreas Lagerkvist.

Just download the Production version because we are not going to edit the jQuery Framework.

The plugin files can be found here: plugin.zip |
Visit plugin author website

Step 2 - Uploading the required files

Now you can use this method for any websites, but in this case we will apply it to a Wordpress theme.

So lets upload the files to our theme directory, in this tutorial, i will use the default Wordpress theme.

Theme Directory: wp-content/themes/default/

Now this is how you need to structure your files to keep it nice and clean:

Make sure you use the same structure for your files.
Which means:

• wp-content/themes/default/css/live-search.css
• wp-content/themes/default/js/jquery-1.2.6.min.js
• wp-content/themes/default/js/jquery.liveSearch.js

Step 3 - Include the files

To include the JavaScript and the CSS we have to edit the header of the template, which is header.php. Here we can find the <head> tags, where the JavaScript and CSS should be loaded.

<link rel=stylesheet type="text/css" href="<?php bloginfo('template_directory'); ?>/css/live-search.css">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.liveSearch.js"></script>
<?php wp_head(); ?>

This will load the required files, now what means the following:

<?php bloginfo('template_directory'); ?>

This is a Wordpress code that will return the URL to the directory of the theme. Which will return the following:

<link rel=stylesheet type="text/css" href="http://xcodetuts.com/wp-content/themes/default/css/live-search.css">
<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/jquery.liveSearch.js"></script>

Step 4 - Taking a look at Wordpress search

Before we can start, lets take a look at the search form.

<form method="get" id="searchform" action="http://xcodetuts.com/">
<label class="hidden" for="s">Search for:</label>
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Now when you enter a search keyword and hit Search, you will see that the url changes in your browser address bar:

As you can see your search term will display after the s=, if you would change this you will see that it will look for the term you have changed it to. So this is how it works, i needed to make this clear because it will help you understand the next step.

Step 5 - Configuring jQuery live ajax search

Now its very easy to activate the live search, just open footer.php and add the following before </body>

<script type="text/javascript">
     $('#s').liveSearch({ajaxURL: 'index.php?s='});
</script>

Ok great, but what did we just do?
We told the plugin where to grab the search term and where to find the search file.

So it will look for a input field where the id=”s” in this case our search input field. I also showed you the way how Wordpress searches, as you can see i told the live search plugin that index.php?s= is how to search and this means that the plugin will add the search terms after the s=!

So let’s try it out:

Now that’s not really what we want right, because we get the search results back including the whole template. So we need to apply a little hack to make this work. First let’s change the JavaScript to:

<script type="text/javascript">
     $('#s').liveSearch({ajaxURL: 'index.php?ajax=1&s='});
</script>

I added a short string which allows us to check if somebody using the normal search, or the ajax live search instead. So now that’s done, open search.php.

Now you see a whole bunch of code, let’s start simple so add the following before <?php get_header(); ?>.

<?php if($_GET['ajax'] == '1'){ ?>
	//Our code for live search
<?php }else{ ?>
	// Here is the code that's allready in that file
<?php } ?>

So now when you would enter some text:

<?php if($_GET['ajax'] == '1'){ ?>
	Hi there! This is going to be our live search!
<?php }else{ ?>
	// Here is the code that's allready in that file
<?php } ?>

So that works perfect! And if you would hit the search button you will see that the normal search also works fine!

But now we have to make it so that it shows us the real search results.
So what i did is copy the code from the original search and changed a few things:

<?php if($_GET['ajax'] == '1'){ ?>

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

		<h2>Search Results for "<?php the_search_query(); ?>"</h2>

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

			<div class="search-result">
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
			</div>

		<?php endwhile; ?>

	<?php else : ?>

		<h2>No posts found. Try a different search?</h2>

	<?php endif; ?>

<?php }else{ ?>

As you can see i removed parts like <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?> because these tags include template files. And we don’t want that! So this is how it would look:

Final: Search.php

<?php if($_GET['ajax'] == '1'){ ?>

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

		<h2>Search Results for "<?php the_search_query(); ?>"</h2>

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

			<div class="search-result">
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
			</div>

		<?php endwhile; ?>

	<?php else : ?>

		<h2>No posts found. Try a different search?</h2>

	<?php endif; ?>

<?php }else{ ?>

<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

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

		<h2 class="pagetitle">Search Results</h2>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

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

			<div class="post">
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
				<small><?php the_time('l, F jS, Y') ?></small>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">No posts found. Try a different search?</h2>
		<?php include (TEMPLATEPATH . '/searchform.php'); ?>

	<?php endif; ?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php } ?>

As you can see it returns the post “Hello world!”, so it works great!

Step 6 - Styling search results

We are almost done! We only need to style our results, which we can do in live-search.css. In this CSS file you can change all kind of things for the live search like the width of the results, fonts, colors etc.

First let’s change the margin and padding of h2 and h3 because its way to much:

	div.live-search-results h2 {
		font: 14px/1.2 Trebuchet MS, sans-serif;
		padding: 0;
		margin: 0;
	}

     div.live-search-results h3 {
		font: 12px/1.2 Trebuchet MS, sans-serif;
		padding: 0;
		margin: 5px;
	}

So that will look like:

So that’s the end of this tutorial, ofcourse you can style it much nice and give it some nice effects! So if you enjoyed it, please leave a comment and show me what you have made!

Step 1 - Creating a Flickr group

Get your ass over to Flickr and login

Now in order to create a new group, you have to click the arrow on the right side of the Groups link.
A menu will then show with a few new links, now press Create a New Group.

If you want to create a new group you have to choose a group sort.
Either Public (anyone can join), Public(invitation only) or Private.

Now, i want to use it for my website, and i think anyone should be allowed to join the group.
But that’s all up to you to decide.

First of al, you need to give it a name, for example the name of your website, so ill try XCODETUTS.
Next, what is the group about, well it’s about web development en design tutorials so lets enter that.
Now your group safety, most of the time you will use the selected option, but if you are showing images for 18+ please select the second option. When you have everything filled in click the Next button.

Next up is what would you like to display when non Flickr members visit your group page.
First option will display recent discussions that your group has started, they can see this and click it to view each topic.

Second up is the group photo pool, this will display photo’s that have been added not so long ago.
But they wont see all the photo’s in order to that they need to click the link that allows them to see all the content in a group pool.

Just hit Next when you are done, in my case i leave them both checked.

And the next step is giving the group Administrators, Moderators and Members a name, you can think of anything, call them names that fit the group, or just something funny its all up to you. When your done thinking of cool names, just hit ALL DONE!

After that, your Flickr group has been made! And people can now join your Flickr group and upload new images. Now i will upload some images to my group, or else we will have a empty example

Step 2 - Downloading Wordpress Flickr plugin

In order to display images from your Flickr group we will need a WordPress plugin, this plugin will make it much easier to manage it. The plugin is called flickrRSS, so click here and download it!

In case you are wondering, I’m using the latest version of Wordpress, so in my case i will download the plugin for 2.5 which also works with 2.6.x

The flickrRSS zip contains the following files:

• flickrrss.php
• README.html

Step 3 - Installing flickrRSS

Now, you will have to upload flickrrss.php to /wp-content/plugins/ this is the directory where all plugins should be placed. Now login to your Wordpress administration panel, and click the plugins tab.

Now in the plugin management area, click the checkbox on the left of the flickrRSS plugin name, and click activate. This will set that specific plugin active and working.

Although the plugin is active, it will not yet work because we haven’t configured it yet.
So click the settings tab on the right and click the flickrRSS link.

Step 4 - Configuring flickrRSS

When you reached the flickrRSS settings you will have to fill in the following information.

First up, you group ID number, this is a unique number that points to your group.
So lets get that by going idGettr, now in the “Photostream Address” input field, enter the url to your group.

Just enter the ID you get returned into the ID number field at the flickrRSS settings.
Next, the display options, well we are showing images from a group, so select the group option so it will show items from the previous entered group id. You can also set how much images you want it to display, i think 6 square images would look nice, but its all up to you to decide.

The Set and Tags fields are not really required but you can fill them in if you want.

Next up is the HTML Wrapper !important!, the code you enter will display before and after each image.
This allows you to add a nice class and style the images later on. So i added the following in the fields:

Before Image: <div class="flickr_img">
After Image : </div>

Below the main settings you also have the Cache Settings, i dont think that’s needed for this tutorial but feel free to try it out. Don’t forget to press Save Settings when you are done!

Step 5 - Installing flickrRSS into your Wordpress theme

In this tutorial we will add the flickRSS to the sidebar, but you can use the following code for any other part of the Wordpress theme template files. I will be using the default Wordpress theme, that comes with every Wordpress installation.

So let’s open the sidebar template file, this file can be found it the following directory /wp-content/themes/default/sidebar.php

Now i think it would look nice, if the flickr images would show between the Categories and the Blogroll, so let’s go into our sidebar.php file. So search for the following line:

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

Now we are going to display the flickrRSS below this line, because the line above displays the Categories, in order to display the flickrRSS we can call the flickrRSS function like this: <?php get_flickrRSS(); ?>
So this would look like:

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

 <?php get_flickrRSS(); ?>

Now 2 things might happen, 1 Your flickr group images will show, 2 It will show nothing.

1. Goooood! Glad its working
2. If your Flickr group is new it could take a few hours before it kicks in, so please be patient.

If you still want to continue just grab a group ID of a flickr group that has been online for quite some time.
For example let’s grab the ID of 0000(group name ;)) just use idGettr to get the id. (54808554@N00).

Now as you can see, this doesn’t look very good does it.
So that’s why we we added the HTML Wrapper before and after the image.

Step 6 - Styling flickrRSS

Now our final step is styling the images of course, because it doesn’t look very nice if it’s displayed in one long list. So let’s start styling, every Wordpress theme has a stylesheet, which always hast the same name, called style.css, so let’s open it and start writing css. (wp-content/themes/default/style.css).

Now as you might remember, we have added a HTML wrapper around the image in the flickrRSS settings, using a div with the class flickr_img, which we can now style. This is how a image is displayed ( i removed the url’s):

So let’s add the following to our stylesheet:

.flickr_img a{
    float:left;
}

We are telling that all links and what they contain, in this case a image should float left.
Now if would take a look, you will see that the images are moved next to each other which is good.

Well that looks ok, but not good enough, it could use some more styling such as some margin, padding and maybe a nice border. So first let’s add some margin:

.flickr_img a{
    float:left;
    margin: 2px;
}

Now this will push everything that’s outside the image 2px away on all directions, up, down, left and right.

So that’s looking good, but what about a nice border and some padding:

.flickr_img a{
    float:left;
    margin: 2px;
    border: 1px solid #000;
    padding: 1px;
}

What this does is, creating a black border around the image, but because of the padding, the border will be pushed 1 px of the image, which creates a nice effect!

And that’s the end of this tutorial! Sorry only source files for this tutorial!
If you liked it please leave a comment and click one of the promote links below! I would appreciate it!

Well today we will integrate Google Maps into our FancyBox.
Demo’s tell more then words, so just take a look at the demo

Step 1 - Downloading FancyBox

FancyBox can be downloaded from ancy.klade.lv, while you are at there website, take a look at the great examples, these show you what you else you can do with FancyBox besides what we are going to do!
When you are done watching those examples click the ZIP icon in the header of the website to download it.

When you downloaded the FancyBox zip file, unzip it, you will see that all files are in the same directory.
I don’t really like this, because its not structured, and makes everything messy.

So lets rearrange that by moving all images into a new folder called img/, the same for all the JavaScript files but these should go in a folder called js/, and last move the CSS file into a new directory called css/

So that looks much better, BUT we still have to make a few edits i the css/fancy.css and change the path’s of all images, because we moved them into a new directory.

If you open fancy.css you will notice some backgrounds have images like:

background: transparent url(fancy_progress.png) no-repeat;

Now you have to replace all image url with new ones, you can simply do a find & replace with your text editor. Find: url( Replace: url(../img/ , this will change all background url’s to:

background: transparent url(../img/fancy_progress.png) no-repeat;

Step 2 - Your contact page

We are going to create a simple HTML contact page, this is where the FancyBox + Google Maps will be shown. In this tutorial you will need some basic HTML & CSS knowledge!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Contact Me</title> //Website Title
		<style> //Start inline styling
			body{ //Style body background and global font type
				background:#323232;
				font: 11px verdana;
			}

			#wrap{ //Style the content wrap
				background: #FFF; // White background
				width: 500px; // 500px in width
				margin: 0 auto; // Center the wrap
				padding: 10px; // Add some nice space between text and wrap background
				text-align:center; // Center the text and images
			}

		</style>
	</head>
	<body>

		<div id="wrap">
			<h2>Contact Me</h2>
			<p>Hi there! There is only one way to contact me, and that is by coming to my house!
			Just click the globe below and you will see where i live!</p>

			<img src="img/globe.jpg" alt="" />

			<p></p><small>Psst! Click the globe!</small></p>
		</div>

	</body>
</html>

So the idea is when somebody click’s the globe image, a FancyBox window will open with the correct Google Map location. This is just a simple page, but you can apply this in any of your websites, cms systems or blogs.
This is how the page would look like - Contact page demo

Step 3 - Installing JavaScript & CSS files

Now in order to use FancyBox, we need to load the JavaScript files.
Currently we have these files which came with the FancyBox zip:

1. jquery-1.2.3.pack.js
2. jquery.fancybox-1.0.0.js
3. jquery.pngFix.pack.js

1. This file contains the jQuery framework, you need this because FancyBox is based on this framework and it will and cannot work without it!

2. This is the FancyBox “plugin” written using the jQuery framework, this is the file that allows us to create these great effects.

3. FancyBox uses .PNG images wich have shadows in them, IE6 and lower do not support .PNG transparency, so this file is optional, but i advice you use it!

Ok, so now its time to load the JavaScript into our contact page, we are going to load these files between the <head></head> tags. Almost forgot we also have to load the the FancyBox CSS file!

<head>
  <title>FancyBox + Google Maps | XCODETUTS</title>
  <script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
  <script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
  <script type="text/javascript" src="js/jquery.pngFix.js"></script>
  <script type="text/javascript" src="js/xcodetuts.js"></script>

  <link rel="stylesheet" href="css/fancy.css" type="text/css" media="screen">
</head>

As you can see i also loaded js/xcodetuts.js, this is the file where we are going to write some jQuery to active the FancyBox, so just add that link and we will start working on it in the next step.

So what we did is, loading all required JavaScript and the FancyBox stylesheet.
For anyone who does not know what the fancy.css file does, it takes care of all images included in FancyBox, like the shadows and of course the close button.

Step 4 - Configuring FancyBox

So what we need to do know is create js/xcodetuts.js in the previous step we added the link so it will be loaded, but we still need to create it. Now we are going to start of with the following code:

$(document).ready(function() {
   //Our code will come here
}

The code above means, when everything loaded, run the code between the 2 brackets.

$(document).ready(function() {
   $("a#maps").fancybox(); //Activated FancyBox when #maps has been clicked
}

So lets go back to our contact page, and add the following link around the globe image:

<a id="maps" href="#googleMaps"><img src="img/globe.jpg" border="0" alt="" /></a>

So, we gave the link a #maps ID, wich will active the FancyBox.
Ok, so now it’s time to grab the Google Maps iFrame block, so go to maps.google.com, and enter your home or any other address. When your address is loaded, click the Link button on the top right corner and copy the iFrame code.

Now paste the code at any place of your contact page, but add the following div around it:

<div style="display:none" id="googleMaps">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=1600%2BPennsylvania%2BAve%2BNW%2BWashington,%2BDC%2B20500,%2BUnited%2BStates&amp;sll=37.0625,-95.677068&amp;sspn=30.171443,67.675781&amp;ie=UTF8&amp;t=h&amp;z=14&amp;iwloc=addr&amp;ll=38.908601,-77.032356&amp;output=embed&amp;s=AARTsJqckjdDad6tPeDRH4s3w57t5bbS6A"></iframe>
<br /><small><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=1600%2BPennsylvania%2BAve%2BNW%2BWashington,%2BDC%2B20500,%2BUnited%2BStates&amp;sll=37.0625,-95.677068&amp;sspn=30.171443,67.675781&amp;ie=UTF8&amp;t=h&amp;z=14&amp;iwloc=addr&amp;ll=38.908601,-77.032356&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

What this div does, is hiding the code by default, and if you take a look at the id af that div “googleMaps” you can see that the href in the url points to that div “#googleMaps”, this means these are connected using FancyBox.

Now when you click the image, you will see that FancyBox is working, live example of step 4 can be found here

Now as you can see, its not working properly, the FancyBox is way to big which creates white space between the map and the FancyBox border. So we need to adjust the FancyBox frame width and height.

So let’s get our xcodetuts.js file and edit that.

$(document).ready(function() { 

    $("a#maps").fancybox({
                'frameWidth': 425, //frameWidth = Default width for iframed and inline content
                'frameHeight': 350 //frameHeight = Default height for iframed and inline content
    });

});

As you can see, we have set the FancyBox width and height using the FancyBox settings.
Now if you are wondering how i know the excact size of the Google Maps iFrame, well the start of the iFrame code says it:

<iframe width="425" height="350"

You can adjust the size of the Google Maps iFrame and the FancyBox to make it larger.
And that’s the end of this tutorial! I hope you liked it, and if so please use any of the promote links below.

Step 1 - Downloading jQuery

What is jQuery?

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

For this tutorial you will need jQuery, wich can be downloaded here at jQuery.com. You can download the minified version, because we are not going to edit the jQuery framework itself.

Step 2 - Uploading jQuery

In order to upload jQuery to your website, you need a FTP client, you can get many for free so just use your best friend: Google.com
Now in this tutorial i’m going to use the default Wordpress theme (Default) wich can be found in wp-content/themes/default.
We want our files organized so we are going to create a dir for all the JavaScript, in this case wp-content/themes/default/js.
Now simply drag and drop the jQuery file onto that folder in your FTP client, and you will see that the file is being uploaded.

Step 3 - Creating a JavaScript code file

We cant write code into the jQuery framework file, because that’s not the way to do it and it wont work.
So we have to create another file that contains our JavaScript code, so lets create a new file in our wp-content/themes/default/js directory called collapse.js

Step 4 - Loading the Javascript

Javascript has to be loaded between the <head></head> tags.
The Wordpress template system has 3 main files, header.php, index.php and footer.php, in this case we have to open and edit header.php.
Now we have to add the javascript before these 2 lines:

<?php wp_head(); ?>
</head>

So we need at the following code before those lines

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/collapse.js"></script>

<?php wp_head(); ?>
</head>

Before saving and closing this file, ill explain you what the wordpress tag ( <?php bloginfo(’stylesheet_directory’); ?> ) does.
In this case the tags returns the path to the stylesheet directory or also known as the theme directory(wp-content/themes/default), so when you look at the page its source code it will look like this.

<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://xcodetuts.com/wp-content/themes/default/js/collapse.js"></script>

These 2 JavaScript files will be loaded on every page, this is because of the header.php, this file is included on every page.

Step 5 - Editing comments.php

In the comments.php file, you can change the way how comments display. We want to make a few edits so we can get the proper effect with jQuery.
We need to focus on the following code in comments.php

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
	<?php echo get_avatar( $comment, 32 ); ?>
	<cite><?php comment_author_link() ?></cite> Says:
	<?php if ($comment->comment_approved == '0') : ?>
	<em>Your comment is awaiting moderation.</em>
	<?php endif; ?>
	<br />

	<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>

	<?php comment_text() ?>
</li>

The code above displays the comments, now we need to make a few edits to make it collapsible.
First we need something to click on, so that the comments collaps.

	<span class="collapse_me"></span>
	<cite><?php comment_author_link() ?></cite> Says:

Now as you can see, i have added a span and a class, but no text in it, that’s because it would be nice to display an image instead of text.
And i’m talking about the famfamfam icons of course. Let’s try tab_go.png.

So lets open up our stylesheet, which can be found in the theme directory wp-content/themes/default/style.css and add some code to display these images.

span.collapse_me{
	background: url('images/tab_go.png') no-repeat; /* Display the tab_go.png image */
	width: 16px; /* Make sure that its 16px in height */
	height: 16px; /* And 16px in width */
	display: block; /* Make sure it displays as a block */
	float:left; /* Make it float left of the author name */
	margin-right: 5px; /* And create a bit of space between the image and the author name */
}

Now when somebody clicks the button we want the comment text to collapse, so we have to make a div around that with the class comment_tex so we can hide it with jQuery.

<div class="comment_text">
	<?php comment_text() ?>
</div>

You might now understand why this is but you will find out in a bit.
Now we need to make a paragraph around the complete comment including the author and post details, so lets do that and call the class comment_info.

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
	<p class="comment_info">
		<?php echo get_avatar( $comment, 32 ); ?>
		<span class="collapse_me"></span>
		<cite><?php comment_author_link() ?></cite> Says:
		<?php if ($comment->comment_approved == '0') : ?>
		<em>Your comment is awaiting moderation.</em>
		<?php endif; ?>
		<br />

		<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>

		<div class="comment_text">
			<?php comment_text() ?>
		</div>
	</p>
</li>

Ok, the editing is done! What we did so far is add a image to collapse the comment and added a div around the comment text so we can hide that.
And another div around the complete comment so we can call to that using jQuery.

Step 6 - Editing collapse.js

Ok now its time to edit the collapse.js which is empty at this moment. First we have to add the document ready tags, what this does is waiting for the page to load and then execute the javascript code.

$(document).ready(function(){
	// Your code here
}

When the page is loaded, the script between the brackets will be executed.
Now we need to write a code that executes when the image with the class collapse_me is clicked.
jQuery has some easy commands for that, in this case the click function which runs the code when something is clicked.
As you can see below, it actually says, when something with the .collapse class is clicked run this code.

$(".collapse_me").click(function(){
	// Your code here
});

What we can do is just make the text dissapear, but that’s now really nice looking so we are going to animate it using jQuery:

$(".collapse_me").click(function(){
	$(this).parents(".comment_info").next(".comment_text").slideToggle(700);
});

Ok so what happends there? We tell jQuery to slide the text up or down depeding on its current state.
We dont want all the comments to slide up so that’s why we first lookup the parents, in this case comment_info.
The 700 between the ( ) means the speed, you can adjust this to whatever you like.
If you now go to your website, you will see that your comments will collapse.

Now we have one extra for this tutorial and that is a button that collapses all comments at once, so let’s add a new line above all comments in the comments.php file.

	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>
	<span class="collapse_all">Collapse / Expand all</span>

We have added the span and the class around the text so we can call it again using jQuery.

$(document).ready(function(){

	$(".collapse_me").click(function(){
		$(this).parents(".comment_info").next(".comment_text").slideToggle(700);
	});

	$(".collapse_all").click(function(){
		$(".comment_text").slideToggle(700);
	});

});

So what we did is make the collapse_all class clickable, and made a comment_text classes to slide up.
As you can see we do not use the parents class, that’s why they all slide up.

And that’s it! You got collapsing comments! Enjoy!

There are a lot of places where you can find inspiration for a website design.
Ill like to show you some of my favorites!

• 

  Best Web Gallery

  Best Web Gallery is one of most popular CSS Website galleries, they have unique content and a huge list of awesome looking websites! Its absolutely worth looking.

  Visit Best Web Gallery

• 

  Faveup

  If you would like to see some more aweasome work, but not only websites this is the place to be. Faveup shows you Logo’s, Business Cards, Flash Websites and CSS Websites! Which you can give your personal rating!

  Visit Faveup

• 

  InspirationKing

  Although this is another Web Site Gallery like Best Web Gallery, you will find allot of inspiring work that you wouldn’t find on other gallery’s! So don’t forget to visit them both!

  Visit Inspiration King

Frameworks

Of course you can code all your websites and apps line for line, but there are frameworks that could help you with that, and it would take you less time! I’m talking about frameworks, see some of the well known below.

• 

  YAML

  YAML wich means “Yet Another Multicolumn Layout” an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

  Visit YAML

• 

  jQuery

  jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. We will show you some great jQuery tutorials soon!

  Visit jQuery

• 

  Zend

  Extending the art & spirit of PHP, Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase. Zend Framework is focused on building more secure, reliable, and modern Web 2.0 applications & web services.

  Visit Zend

• 

  MooTools

  MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

  Visit MooTools

Form Styling

Form styling isn’t always easy, your form will look different in every browser and some nice JavaScript effects will work in the latest browsers but not in the old ones. Tables are common used for for styling, although this method works OK, styling your forms using CSS only will give you much nicer results!

• 

  40+ CSS/JS Styling and Functionality Techniques

  This is a great article about different form styling techniques, using the latest JavaScript Frameworks and some great CSS techniques. So check it out and will learn something about effective web forms for sure!

  Visit Article

• 

  Fancy Form Design Using CSS

  SitePoint is known for its good books, but also for there articles, in this amazing 7 page long tutorial, Cameron Adams will explain you how to build great looking forms using CSS and no tables! This will increase you form styling knowledge dramatically!

  Visit Article

• 

  Web Form Design - Sign up Forms

  If you have been wondering how a sign up form should look like and how not. This article will give you the answer for that, because the users voted on what they think is necessary in a sign up form.
  So it will show you allot of statistics and examples of websites.

  Visit Article

The End!

And that’s the Best of the Web for this month!
I hope you enjoyed this article, and if you did please promote it by pressing the promote links below!
See you next time at xcodetuts.com