In the first part of the Ultimate Magento Guide, we covered the back-end features of this open source e-commerce software. We also created a simple product and displayed it in our e-store.

Today we will focus on "customizing the basic layout of our e-store",  "what Magento Connect is” and "how we can install themes + extensions".

Let's Turn Off The Cache

Before heading to the customization, we will turn off the cache mode of Magento so that we can see our changes. Otherwise, Magento will keep showing the cached pages.

We can turn off the cache from our back-end. Go to System>Cache Management. Choose "disable" from the drop down menu which is an option in "All Cache". Follow the screenshot below if you are having some problem.

After disabling the cache, we will now change the name of our e-store which appears on many places (like after a new user registration). We can change it by going to System> Manage Stores, click the "Default Store View" and put the actual name of the store there just like “WRD E-Store”.

We can now customize our homepage. Let's start with the default logo and default welcome message.

Upload your logo to the mag/skin/frontend/default/default/images/ folder. This is the images folder of the default theme we are using now.

Go to your Magento back-end> System> Configuration> General> Design> Header.

Define the logo image source here and we are done with customizing our logo.

You can now see your front-end showing the new logo. And also, it is possible to change the alternative text of your logo and default welcome message here.

After these updates, our header looks like this:

Now we will move to "changing the homepage layout" in order to show our products there.

In the first part of our guide, I had described the CMS capabilities of Magento. We use these CMS capabilities for changing the look of our front page on WRD E-Store as “HOME”. Consdering "HOME "is also a static page, different snippets can be used to show different arrangements of products.

Showing all products of your e-store on homepage
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}

Showing only the new products
{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

Showing only the products from a specific category
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}

You can get the "category ID" at "Manage Categories" page under "Catalog". Then click on the specific category and you will get the "ID" in the header just like the following screenshot.

Now go to CMS> Manage Pages and select "homepage". You can add any of the previously mentioned snippets according to your needs. As we have only one product, I have used the 1^st snippet. These snippets are actually "content blocks" of Magento.

You can also select the layout of your "homepage" from here. Go to "Custom Design" and choose a layout.

The default Magento theme comes with 5 layout options

• Empty
• No Sidebar
• Two-column layout with left sidebar
• Two-column layout with left sidebar
• Three-column Layout

 I have selected 3-column layout and now we have a good-looking e-store.

Callouts

Callouts are the visuals (banners) for self-promotion like announcing special deals, new products, etc.

Now, we will upload new callouts for a small but awesome touch to our e-store as its still showing the default ones.

Customizing callouts:

1. Simply replace your image with col_right_callout.jpg (right callout) or col_lef_callout.jpg (left callout) in \skin\frontend\default\default\images\media.
2. You can change the alternative text and link for right callout by going to right_col.phtml in \app\design\frontend\default\default\template\callouts.
3. You can change the alternate text and link for left callout by going to catalog.xml in \app\design\frontend\default\default\layout.

After changing the callouts, I have following the following output of the e-commerce store.

We are done with the customization of the home page. Now we will take a look on what is Magento Connect.

Magento Connect

Magento Connect is the brand name for the official marketplace of plugins and themes where you can download/buy free and premium themes and extensions.

For example, by default, Magento only supports the most popular shipping methods and payment gateways. You can download extensions to extend its payment capabilities.

How to install an extension?

First off all, select an extension from Magento Connect. You will get an extension key upon agreeing with their terms and conditions. As an example, I'm getting the key of mCommerce-iPhone Optimized Theme.

Copy that key and return back to your back-end. Go to System> Magento Connect > Magento Connect Manager. You will be prompted once again to enter your admin login details. Fill in your credentials, put the extension key and click connect. The same console is used for updating Magento.

How to install a theme?

You can install a new theme by following the same process as written above.

When the installation via Magento Connect is completed, go to System> Configuration> General> Design>Themes, put the name of the theme (for example: Modern Theme), save it and you are done.

After installing a new theme, your home page may not load appropriately because of the different layout options. Just go to CMS> Manage Pages and choose the appropriate column layout and everything will be fixed.

The "Magento Ultimate Guide Series" includes necessary information for beginner and intermediate users. If you are looking for advanced sources and want to design for Magento then I will highly suggest you to read the wiki page.

Author: Saad Bassi

Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.

He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.

Books On Magento:

• The Definitive Guide to Magento
  
• Magento 1.3: PHP Developer's Guide
  
• Magento 1.3 Theme Design
  

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

In the process of launching an e-store, when it comes to choosing the right solution, you will get puzzled by the hundreds of solutions available.

The options range from simple and free shopping cart systems to complex and paid e-commerce softwares which can charge you for both getting and “keeping” your shop online.

However, there are some applications which offer great features but still free.

One of the best and open source e-commerce solutions available for free is Magento.

In the following comprehensive tutorial, we will see what are the benefits and drawbacks of using Magento as your e-commerce application. We will make a demo store and take a look on some basic and intermediate features of Magento. So what are we waiting for? Let’s get started.

Why use Magento?

Pros:

• free (absolutely free, no charges at all for community version)
• open source (you can even make it better by writing your own code)
• easy upgrades (automatic upgrades without loosing your customizations)
• extensions, plugins (enhance your Magento installation with plugins just like WordPress)
• very comprehensive theming system (custom themes for your store similar to WordPress)
• downloadable goodies support

Cons:

• resource intensive (yes, Magento needs a lot of memory in order to work efficiently but don’t worry, we will also learn how to fix it up to run Magento in low cost hosting solutions.)
• latest version of PHP not supported (Magento only works with PHP 5.2)

Downloading Magento:

You can download Magento from their website. There are two versions available. One is the online installer and 2^nd  is the complete setup.  I will recommend you to download the full package.

Another option on this page is of downloading sample data (it is like sample text to fill your e-shop). As we are going to make an original e-store, we will not download it.

I am using Magento 1.3.2.3 and you can download it by going to release archives on Magento download page. The latest stable release 1.4.1 came out but still has some errors. So I will not recommend you to use it. However, this guide should also work with it.

Installing Magento:

As said earlier, the latest stable release of Magento works only with PHP 5.2 which is installed on most servers and some web servers also come with a one-click install option.

For learning purposes, it is a good practice to install it on localhost using xampp. It is recommended to use xampp 1.7.0/1.7.1 for easy install of Magento as it comes with PHP 5.2. If you are using the latest version of xampp, you will have to manually install PHP 5.2 if you want to run Magento. I will show you how to install Magento on xampp 1.7.0/1.7.1. You can download old versions of xampp from its official source code repository.

After installing xampp, go to your xampp directory. In my case, it is c:\xampp.

The two directories, C:\xampp\php and C:\xampp\apache\bin include php.ini file which is the configuration file for PHP language. We will uncomment the following lines of code to enable some necessary add-ons required by Magento to work properly.

Line 582: ;extension=php_curl.dll
Line 622: ;extension=php_mcrypt_filter.dll
Line 624: ;extension=php_mhash.dll

You can uncomment the lines mentioned above by simply removing the semi-colon which is the first character for each line of code.

Now, we will have to replace the libmysql.dll contained in xampp 1.7.0/1.7.1 which is buggy and will crash apache server during Magento installation. You can download a better version from here (or it can be found inside the MySQL server downloads from mysql.com). After the download, replace it with the existing libmysql.dll in C:\xampp\php and C:\xampp\apache\bin.

The last step is to change some code lines in Magento’s files to disable some checks. Otherwise we will not be able to login on localhost. Go to your Magento folder (In my case it is C:\xampp\htdocs\magento) then go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php. Then point to line 78. You will see session cookie parameters. We will comment line 81,82,83 to disable cookies. I am writing down the difference between original and edited file to give you a better understanding.

Original varien.php (Line 78 to Line 84)

$cookieParams = array(
	'lifetime' => $cookie->getLifetime(),
	'path'     => $cookie->getPath(),
	'domain'   => $cookie->getConfigDomain(),
	'secure'   => $cookie->isSecure(),
	'httponly' => $cookie->getHttponly()
);

Edited varien.php (Line 78 to Line 84)

$cookieParams = array(
	'lifetime' => $cookie->getLifetime(),
	'path'     => $cookie->getPath()
	//'domain'   => $cookie->getConfigDomain(),
	//'secure'   => $cookie->isSecure(),
	//'httponly' => $cookie->getHttponly()
);

We are done with all the fixes needed to run Magento on localhost. You have to fix these things only when you are installing it on localhost. On live servers, it doesn't need customizations

Now we will make a MySQL database in phpmyadmin as Magento uses MySQL to store its data.

Here we have created a MySQL database named Magento. So we are done. Let’s point our browser to http://localhost/magento.

Magento Installation Wizard

If you have followed all the steps correctly then you will get the welcome screen of Magento installation wizard.

Step 1:

The first step will show you the terms and conditions to use Magento, simply accept it and press next.

Step 2:

The second step is about localization. You will set default location, time zone and currency for your online shop. We are done here. Let’s move to the next step.

Step 3:

In the 3^rd step, you will see a screen asking for the MySQL database. As we created one with the name Magento, we will fill the information with it. The default password for the administrator user “root” in xampp is blank. So you don’t have to put anything here.

You will also be asked for the table prefix in the database. As we are installing Magento on localhost, it is not that important. But when you are going to create a practical store online, always fill this field with something weird and unpredictable like any randomly generated number as it will save you from SQL injection hacking.

Second box on this step asks you the base URL which will be used by your customers to browse the e-store. Moreover, the admin backend link will also be given here. You can also enable mod_rewrite, an Apache module to create custom links for better search engine optimization. Mod_rewrite is offered in most hosting solutions. You can also enable SSL here.

The last option is session storage. If you are on a shared hosting solution, then I will suggest you to choose file system as choosing MySQL database can put a heavy load on your servers. However, using MySQL to store session data is good from a security point of view.

Step 4:

Last step in the Magento installation Wizard is to create the admin user. You will have to put your first, last name, e-mail, username and passwords. Magento will ask you for the encryption key as it encrypts all the data.

In case you want to decrypt it; you will have to give the encryption key. Leave this field empty and Magento will use some random key for this purpose which will be given to you in next step.

Keep this key in safe place as it is very important.

At this point we have successfully installed Magento on our localhost. As a last step, you will be asked whether you want to go to the front or backend.

Front-end: it is the website which will be shown to the user upon access.

Back-end: it is your admin dashboard. Here you will manage your e-store.

Front-end

We will first get familiarized with the front-end and then come back to the back-end. This is how our default/empty store looks like.

For now, we have no products and an empty store so we will head up to the live demo on Magento’s official website.

Let’s start from the header.

On the left side of the header, there is Magento logo which is actually the logo of your online shop.  Later on, we will see how to customize it.

On the right side of the header, there is a search bar, a default welcome message after that, and some login/sign up links. You can also change your language here.

Category Bar: Magento uses categories to group same products. Each product should have at least one category. You can also use sub-categories for different products. Each category has its own page which you can customize from the back-end.

There are two sidebars on the demo store. Left sidebar is showing some offers and a popular tag block while right sidebar is showing your cart and the community poll.

The main content area is showing the landing page image and popular products of the store.

There are two other pages worth mentioning.

Category Page: This page shows up when a buyer clicks on a category link. It allows a buyer to sort products by position, name and price. Buyer can also choose the number of the products showing up on each page. Another feature of this page is grid and list view.

Product Page: This page shows up when a user clicks on a product to buy it. It contains short description of the product, a long description, price, and different images of the product just like Amazon.

Magento also has features for comparing products with each other and related products too. Now let’s move to our installation and have a look at the back-end (the admin area).

Back-end

Point your browser to http://locahost/magento/admin to login into the back-end. You will see a login area. Put your login information here which you created in step 2 of Magento installation wizard.

Here is how it looks like.

The following screenshots show you the Magento admin menu. We will explain each item separately and after that, we will create the e-store.

Dashboard: Gives an overview of your sales, orders and everything between them like customers, top products, etc. with the help of dynamic graphs.

The next tab is "sales". Let’s explore it.

Orders: All the orders by your customers are placed here. You can hold or unhold orders from this panel. You can also place new orders. Please keep in mind that it will be a temporary record and you can cancel these orders. At this step, the payment for the specific order is not yet confirmed.

Invoices: Invoice is the receipt of the payment for a specific order. After creating an invoice, the temporary order will be set as a permanent order and you will not be able to cancel it.

Shipments:  All the shipped products are placed here.

Credit Memo: Holds the records for refunded payments. For example; if you shipped a product to a customer and the customer demanded the refund after that, the specific record will lie under this tab.

Terms & Conditions: You can apply specific terms and conditions to your e-commerce store here.

Taxes: A very important tab in managing your e-commerce store. You can apply specific taxes with respect to the specific products and locations. A lot can be written on this feature but it will go beyond the scope of this guide.

The next tab in Magento backend is called catalog. Everything related to the products are inside this tab.

Manage Products: You can see all the products of your store. New products can also be created from here.

Manage Categories: Category management can be done under this tab.

Manage Attributes: Create different attributes on specific products. Explanation of attribute is mentioned below

What are Attributes?

An Attribute is a specific property of a product. For example: "resolution" and "color" of a high definition LCD monitor are attributes of that specific product. Products can also be grouped with the help of attributes.

Difference between Categories and Attributes

A very important concept in handling Magento like a pro is to understand the difference between categories and attributes. Categories are the main navigation menu of your e-store. For example: if you are selling computer related accessories, mouse, keyboards, processors can be categories and you can apply attributes like cache, clock speed, bus speed, price and so for the processor category. 

URL Rewrite Management: This is an awesome feature in Magento with respect to search engine optimization. You can change any link in your e-store to get a better place in search engines.

Search: This tab allows you to see what keywords were searched by your customers. It also tells you how many times a search has been made.

Tags: You can set tags for each product here. Tags are usually keywords which are good for SEO.

Google Base: An advanced feature. You will have to understand Google base before using this. Here is good explanation of Google Base.

Google Sitemap: You can generate the sitemap of your e-store for submitting it to the Google’s webmaster tools (another great feature when it comes to SEO).

The First Product

Now, we are able to create our first product as you have understood all the basic steps in maintaining Magento. After creating our demo e-store, I will explain you the remaining features. So let’s do it now.

Creating our first product

Each product should sit inside a category. Otherwise, it will not appear on your store. So, we will first create a category named "Mouse".

How to create a category in Magento?

The default store comes with an empty category named "default category". All the categories should be placed as sub-categories to this default category otherwise you will be unable to see them. Following screenshot shows the right method to add a category in Magento.

Let’s take a look at our first category.

You can choose the name + description to be displayed on category pages, the default image for the category and other options. Active option must be set to "yes". You will also be given the option here to set the meta keywords and description for this category which will appear on search engine listings.

When you will save the category, it will not appear under default category. You can do so by drag'n drop functionality.

Creating our first product with Magento

So, we have a category to group products. We are going to add the product now.

You will be asked to select the attribute set and type of the product.

Types of products:

1. Single Products can be sold individually. You can also group a single product with other single products using "group products".
2. Group Products contain many single products. They can be added to a customer’s cart with a single click. For example you can bundle an Apple magic mouse with a Macbook.
3. Configurable products allow customers to change different properties of a product.  For example: a customer can increase the ram of a specific processor if it is a configurable product.
4. Virtual Products are those products which are not physical. You can add additional warranties to this product.
5. Bundled Products are much like grouped products. There is not a big difference. Take a computer for example. You can remove monitor, graphics card and some other accessories from this product.
6. Downloadable products are pretty much self explanatory. An example is "premium themes". When a customer purchases such a product, he will be sent an e-mail with the product download link.

We will create a "single product" now.

You will have to mention the name of the product, short description and long description.

Following screenshot gives you the look of "New Product Tab". There are 10 tabs on the left menu. I will explain only those who are necessary to get started.

SKU: is an abbreviation of "Stock Keeping Unit". It’s a general term used in stocking items. What you need to learn is that each product in your store should have a unique SKU. In simplest word, it is an identifier for products.

Weight: weight for the product which can be important in calculating the shipping.

This window will show some additional tabs depending on the "attribute set" selected. The manufacturer and color fields are actually a part of the default attributes set.

Magento has the feature of generating RSS feeds and newsletters which include new products. Moreover, the new products also show up on homepage. In the next two fields, you can choose the period for which a product will be marked as "new".

You can enable or disable a product. If the product is set to be disabled, Magento will not show it on the front-end.

Visibility: allows you to choose the pages on which you want to show the product.

Price: The fields here are pretty self-explanatory. Special price allows you to give the customers discount for some days. Just like a sale on Christmas. This feature is for discounts and promotions.

Next tab is Meta Descriptions which is used for SEO of your store. You can set Meta title, keywords and Meta description here.

4th tab is Images. You can upload product photos here. By default, there are three types of images which Magento uses.

And here they are:

Small: shows up on category page

Thumbnail: shows up in shopping cart and

Base Image:  shows up on product page

Lets move to 5th tab.

Design tab allows you to customize the view of the product page. You can choose from different page layouts built in with Magento.

Inventory Tab allows you to set the quantity of number of products available in the store.

Category tab for selecting the category for your product . This is crucial. You will not be able to see your product until you select one category.

At this point you have a fully functional product and you can see your product on category pages. But we will take a look on remaining important tabs on creating a new product page.

Related Products tab allows you to select related products just like Amazon.

Up-Sells: Under this tab, you can select recommended products which the customer should buy instead of the one which we created now. The up-sells products can be of better quality and also expensive.

Cross-Sells: The products you want to show a customer on the shopping cart page before a user checks out can be set here.

Product Reviews: Ratings and product reviews for a specific product can be managed here.

Product Tags: You can set product tags here.

Customers Tagged Products: In Magento, customers can also tag products. They are shown under this tab.

Custom Options:  You can add custom options for a product here. Like attributes, you can’t group custom options and each product has its own custom options. You can add text fields, radio buttons and other form fields for custom forms here. This is an advanced feature.

Let’s move to the front-end and see how our e-store looks like.

The home page is showing no products. In other words, Magento is still showing the default e-store layout . We will change it in the next part of this guide. Click on the "Mouse" tab in category menu and we will see the category page as below.

Select the Apple Magic Mouse product which we just created and now you will see the product page.

We’ve created our first product. But there is still so much to cover on Magento. Although we can’t cover all in this guide, I will give you an overview of all the features. So let’s move back to Magento' s back-end.

Customers: You can manage all the customers here. Magento allows shoppers to register for easy shopping. They don’t need to give their shipping addresses again and again. This can be done by shoppers.

However, you can create customers and customer groups to apply different discounts from the back-end. You can also view the online customers on that specific time. Everything about them is managed here.

Promotions: Product sales can be managed here. There are two types of promotions. "Catalog price rules" apply on the whole e-store while "shopping cart price rules" only apply during the checkout process.

Newsletters: Magento has the built in functionality to handle newsletters. You can create newsletter templates here and also see the customers who have signed up to receive them. The full-featured newsletter system allows you to create templates for your newsletters. Then you just have to insert the necessary information and you are done.

Content Management System Capabilities of Magento

Magento also has CMS capabilities. You can create static pages, static blocks and polls here. We will take an in-depth look at these features when we will customize the layout of our store.

Reports: You can get all type of reports here. Magento offers more than 20 types of reports which help you to get every detail of your store.

System: Holds the settings for the administrator account and the general settings of your store.

You can set roles of users, cache management, currency rate, etc. here.

Until now, we have taken an overview of all the backend features. I have tried my best to cover the most important features of Magento.

In the next part of this guide we will move to the front-end and will customize the default layout of Magento. We will see what content blocks are and how we can change the basic features.

Go to: The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2).

Author: Saad Bassi

Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.

He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.

Books On Magento:

• The Definitive Guide to Magento
  
• Magento 1.3: PHP Developer's Guide
  
• Magento 1.3 Theme Design
  

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

PSDs are created by different designers & they can be browsed simply with prev-next buttons.

Also, they are tagged (including the colors) which will make finding similar items easy once the number of files get bigger.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Web Elements Kit (PSD) For Designing Faster
• Web Applications Classic Button Set
• Sweetie: Cute And Clear Icons
• Scalable CSS-Based Breadcrumbs
• Review: PSD To HTML By PSD2HTML

There are no images or JavaScript in the implementations but uses the :before and/or :after pseudo-elements to produce basic shapes.

The HTML remains semantic however we should remember that CSS3 is not fully supported by all major browsers & we may again require JavaScript to add this support (like IE7.js).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Use CSS3 Pseudo Selectors With IE: ie-css3.js
• Test Drive IE9 With The Preview Release
• HTML 5 And CSS3 Cheat Sheets Collection
• Font Squirrel Presents Free Fonts, @font-face Kits & Generator
• eCSStender: A JavaScript Library To Take Control Of Your CSS

The kit comes as a .PSD file which is completely built with shape objects (in some cases converted into SmartObjects).

It includes the most frequently web design objects like buttons, forms, pagination, tabs, breadcrumbs & much more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Web Elements Kit (PSD) For Designing Faster
• Web Applications Classic Button Set
• Sweetie: Cute And Clear Icons
• Scalable CSS-Based Breadcrumbs
• Review: PSD To HTML By PSD2HTML

It is a very useful application specially when trying to decide "which font to use" for a specific text as it can "display outputs of a custom text with various fonts" in a grid.

The application has support for TrueType, OpenType & Adobe Type1 fonts.

NexusFont can help installing/uninstalling fonts, finding duplicates, anti-aliasing, renaming & more.

Also, it can export the preview lists as images which is a nice feature when sharing the options with clients, colleagues, etc.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Free Fonts Showcase: Font Squirrel
• Windows 2008 Hosting Discount Offer: Easy CGI
• Typeface Sharing: Open Font Library
• Typedia: Encyclopedia of Typefaces
• Turn Your Handwriting Into Fonts: YourFonts

It is a free & web-based application, from the makers of popular Preloaders.net, that enables you to customize various popular icon sets online.

Iconizer allows you to select an icon from a list of well-categorized icon sets and:

• select the foreground/background color
• size of it
• file type to be created
• add an animation
• resize it & more..

Although the application is very useful, what would be even better is "selecting the whole icon set" & ability to customizing it in bulk.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Get Color Palette By Uploading An Image
• Quality Patterns From DinPattern
• Free Web Development Icons From Icojoy
• Free Weather Icons Collection
• Free W3C Validation Icons (With PSD File)

The kit consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

It comes in .AI, .SVG, .PDF & .EPS vector formats and completely free for personal + commercial use.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Icons For Multi-Touch Interfaces: Gesturecons
• Free Icon Set In AI, EPS, PDF & XAR Formats
• 19 Creative And Free Fonts In Vector Formats
• Free Weather Icons Collection
• Free Vector Arrow Icons

The overlay information is actually created from the data of people who visit Google (which won't be wrong to call it an average).

The tool is perfect for learning what percentage of the visitors are seeing the most important parts at initial load & what are they missing.

When you move the mouse, a rectangle which follows the mouse pointer enables us to interact with the website. And, optionally, the opacity level can be changed.

But, like mentioned, it is created with the data from google.com & will work for websites that target average internet users. It would be great to see this integrated into Google Analytics creating a custom overlay.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Tips For Faster Websites By Google
• Test Your Website Design In Different Browsers In Minutes
• Search-Based Keyword Tool From Google
• Opera Unite: Browser Becomes A Server
• Obituary For IE6

On the other hand, RSS subscribers are very valuable loyal readers which follow the website regularly.

So, for a website, it is very important to analyze "how visitors become RSS readers" like:

• from which websites do they reach to yours
• which page of yours is the one that gains you most subscribers, etc.

Google Analytics, besides all the simplicity it offers, has a very functional event tracking method for analyzing custom events which we will be using to track new RSS subscriptions and see how to analyzing them deeper.

Part 1 – Applying Event Tracking Code

There are currently 2 different versions of Google Analytics tracking code used:

• The standard tracking (gaJsHost)
• Asynchronous tracking – beta (_gaq)

The asynchronous tracking code has a major advantage over the standard version's event tracking which is: it will be able to track the clicks even if tha page is not fully loaded.

Codes for both versions will be mentioned.

No JavaScript frameworks version

Standard tracking

The standard Google Analytics event tracking code uses the _trackEvent method as follows

_trackEvent(category, action, opt_label, opt_value)

The code added to our RSS link will look like:

<a href="http://feeds2.feedburner.com/webresourcesdepot" onclick="pageTracker._trackEvent('rss', 'clicked')"Subscribe To Our RSS Feed</a>

You may have realized that we have used only 2 of the variables and didn't include opt_label & opt_value as it is optional.

Asynchronous tracking

The Google Analytics asynchronous tracking code uses the _gaq.push function to call the _trackEvent method:

<a href="http://feeds2.feedburner.com/webresourcesdepot" onclick="_gaq.push(['_trackEvent', 'rss', 'clicked'])">Subscribe To Our RSS Feed</a>

jQuery Version

Standard tracking

Let's assume that we have added the class="rss" to our RSS links for making it easier to find the clicked items:

jQuery('.rss').click(function() {
    pageTracker._trackEvent('rss', 'clicked');
});

Asynchronous tracking

jQuery('.rss').click(function() {
    _gaq.push(['_trackEvent', 'rss', 'clicked']);
});

MooTools Version

Again, we're thinking that the class="rss" is added to our RSS links.

Standard Tracking

$('.rss').addEvent('click', function(){
    pageTracker._trackEvent('rss', 'clicked');
});

Asynchronous tracking

$('.rss').addEvent('click', function(){
    _gaq.push(['_trackEvent', 'rss', 'clicked']);
});

Part 2 – Analyzing Events With Google Analytics

After we placed the event tracking as defined above, Google Analytics starts to collect that data and displays is under the Content>Event Tracking" menu.

We can easily see howmany clicks our RSS links gets everyday easily. It is even possible to use the optional values of the tracking codes and track RSS subscriptions with multiple labels like: mainRSSButton, footerRSSLink, etc.

In order to findout which visitors convert to RSS subscribers, "Custom Reporting" is exactly what we need.

Let's create 2 custom reports to see:

• which content results in more RSS subscribers
• visitors coming from which websites become subscribers

Which content results in more RSS subscribers:

• Click "Custom Reporting>Create new custom report".
• Select "Content>Total Events" as the metric.
• Select "Content>Page Title (or Page if your page titles don't define the content)" as the dimension. A good idea would be adding a 2nd dimension like "Traffic Sources>Keyword" to findout the keywords that forwarded users to the page.
• Give the report a name by clicking "edit" at the top of the "Create new custom report" & save the report.

Visitors coming from which websites become RSS subscribers:

• Click "Custom Reporting>Create new custom report".
• Select "Content>Total Events" as the metric.
• Select "Traffic Sources>Source" as the dimension. A good idea would be adding a 2nd dimension like "Content>Page Title (or Page if your page titles don't define the content)" to findout the most popular contents from that referrer that ended up in a new subscribers.
• Give the report a name by clicking "edit" at the top of the "Create new custom report" & save the report.

Both reports are very similar but they offer you the data from different point of views.

Now, you know which type of posts convert to RSS subscribers & which websites are referring you new RSS subscribers.

And, you got the point. There are 100s of possibilities in creating reports. It is totally up to what you are in need of.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• FeedCount-Like Google Analytics Counter
• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• What You See Is What You Ajax: WaveMaker