Archive for the ‘Tutorials’ Category
WordPress Year in Review: The Best Tutorials of 2011
Wednesday, January 4th, 2012
The following round up of tutorials is my latest article written for WPTuts+. It contains the following sections of tutorials:
- Theme Development Related Tutorials
- Plugins Related
- WordPress Security Related
- Data Analysis
- Troubleshooting and Debugging WordPress
- WordPress Post Management Related
- Looking forward to 2012
Here is a preview of the article.
Theme Development Related
Deploy Your WordPress Blog to the Cloud
For the last decade, hosting a large scale web application has been a daunting task, reserved only for experts. Not anymore; when Amazon opened its server architecture, everything changed. Computer hardware moved to the cloud, and became available to any and all developers. In this tutorial, we will install WordPress in the cloud.
WordPress Security Related
Quick Tip: Backing Up Your Blog with VaultPress
As with almost every other web app, WordPress stores information in a database. There’s always a chance that your data could be lost or corrupted, and it’s wise to have a solid backup strategy in place. This is where VaultPress enters the scene to save the day, providing complete backup and security for your WordPress site.
Check out the complete list of the best tutorials of 2011 by visiting my latest article at WPTuts+. Also do leave your suggestions and feed backs. Would love to know what kind of tutorials and round ups you would like to read in the future.
Tags: about wordpress, best of wordpress, future of wordpress, how to wordpress, how to wordpress website, tutorial, why wordpress, word press, Wordpress, wordpress 3
Posted in Blog, Tutorials | No Comments »
Quick Tip: Backing Up Your Blog with VaultPress
Sunday, July 10th, 2011
Introduction
VaultPress is the latest product from Automattic (the creators of WordPress.com) which provides around the clock, complete backup of your WordPress blog. It performs a synchronization of every post, comment, media file, revision and dashboard setting across at least two separate cloud services.
If that is not enough, they provide continuous security, disaster recovery and also help you in the migration of your blog to a new host. All this sounds interesting, and if you want to start backing up and securing your blog right away, then this Quick Tip will have you set up in five minutes!.
This quick tip is one of my tutorials at WPTuts+ Check out the complete tutorial here.
Tags: Backup, Quick tip, Vaultpress, Wordpress
Posted in Blog, Tutorials | 14 Comments »
40+ Stunning WordPress Portfolio Themes
Thursday, July 7th, 2011
This is my first round up ever. What better way to write my first round up post than to display a list of the best WordPress themes out there for portfolio purposes. This list consists of the most stunning WordPress portfolio themes both free and premium ones. This is also my latest post at WPTuts+
Boldly
Boldly is a beautiful theme for portfolio with an amazing slider at the top. It has all the qualities of a premium theme and has loads of customization options at the backend.
Preview | Download
Wordfolio
Wordfolio is an award winning wordpress portfolio theme. It has this unique innovative concept of displaying the featured work, which impresses the visitor within seconds. It’s totally worth the price.
Preview | Buy
To check out the remaining awesome 38 themes and their download links, visit my latest post at WPTuts+. Also do leave your suggestions and feed backs. Would love to know what kind of tutorials and round ups you would like to read in the future.
Tags: Download, Free, Portfolio, Premium, Round Up, Themes, Wordpress
Posted in Blog, Tutorials | 4 Comments »
Quick Tip: Using Shortcodes in Theme Development
Wednesday, July 6th, 2011
Envato just launched their latest tuts+ site WPTuts+. This site is completely dedicated to wordpress and I am sure I will be writing many tutorials there in the future 
. This is one of the quick tips I wrote for WPTuts+ which briefly explains how you can use the powerful shortcodes feature provided by WordPress.
Introduction
Shortcodes have many benefits if used properly in theme files. If you are familiar with preprocessor macros in C / C ++, then shortcodes can serve a somewhat similar function in WordPress. The basic purpose of using a shortcode is to replace the placeholder with your own custom piece of HTML code when the server sends the page to the client side. The steps involved in creation and implementation of shortcodes are as follows…
You can check out the complete quick tip at the new WPTuts+ site . Do share your comments and views regarding this quick tip and also any suggestions for tutorials you would like to read .
Tags: Quick tip, Shortcodes, Theme Development, Wordpress
Posted in Blog, Tutorials | 1 Comment »
Create a Multi-Layout Portfolio with WordPress
Thursday, June 2nd, 2011
My latest tutorial for NetTuts discusses about how we can use WordPress as a CMS and flex it to our needs to create a stunning portfolio with multiple layouts. In this tutorial, we are going to extensively use powerful features of WordPress, such as custom posts, custom taxonomies, and we’ll also write a function to fetch our own custom excerpts. This is what we are going to create
The multi-layout theme will function in such a way that the user can select between a grid and list layout.This is the basic design of how our portfolio site will appear in grid mode:
Once the user clicks on the list view control, the whole layout will smoothly change to a list view which will contain the title of the project, the tags associated with it, and a short description.
Check out the complete tutorial on Nettuts and get started on creating that cool portfolio you always wanted! Do share your creations, suggestions with us
Tags: CMS, Grunge, jQuery UI, Portfolio, Theme, Wordpress
Posted in Blog, Tutorials | 3 Comments »
Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery
Friday, April 22nd, 2011
Update 30th April, 2011: The WP e-Commerce Gold Cart Plugin got updated to a new version (v2.9.1). They did some changes in the gallery display method. Hence, I had to modify the code I posted earlier, so that it can work with the updated version of the Gold Cart Gallery.:
The Project
This project of mine required a gallery in the single product page and also the Cloud Zoom plugin enabled such that the users can have a zoomed view of the product's main image just by hovering over the image. The Gold Cart plugin for WP e-Commerce enabled the Gallery option but it provides the thickbox feature as the default option for previewing images.
The Problem
Even though the gallery was displaying the thumbnails perfectly well but there was some problem with it because after clicking on the thumbnail of the images in the gallery, the main product image was not being replaced. The Cloud Zoom plugin was activated on the main image of the product and without the option of the image being replaced by the images in the gallery, the whole point of implementing the gallery was pointless.
The Solution
So after doing a bit of research and finding no solution to replace the main image with the image being clicked in the gallery, I was forced to find another solution to the problem. Cloud Zoom is an awesome plugin and luckily it provides an option of implementing a gallery too, by just adding some classes and a complex rel attribute for the hyprlink tags of the images. This can be done in the following manner:
<html>
<head>
<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>
</head>
<body>
<!--
An anchor with class of 'cloud-zoom' should surround the small image.
The anchor's href should point to the big zoom image.
Any options can be specified in the rel attribute of the anchor.
Options should be specified in regular JavaScript object format,
but without the braces.
-->
<a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4">
<img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
</a>
<!--
You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
The anchor's href should point to the big zoom image.
In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
and also the small image to use (smallImage: /images/....)
-->
<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
<img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
<a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
<img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>
<a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
<img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
</body>
</html>
The details on the arguments for the Cloud Zoom plugin are provided here.
Now from the above example the main points to note are as follows:
- Class cloud-zoom in the main image's hyperlink tag.
- The href attribute of the hyperlink tag contains the link to the larger version of the main image.
- The rel attribute in the main image hyper link which provides the primary arguments for the plugin, which defines how the plugin will work.
- The hyperlink tag encloses the smaller version of the product main image.
- The class cloud-zoom-gallery in the hyperlink tag for the gallery thumbnails.
- The href attribute of the hyperlink tag contains the link to the larger version of the image.
- The arguments in the rel attribute for the hyperlink tag in the thumbnail gallery. It contains the id of the main image hyperlink, the link to the small version of the image.
- The gallery hyperlinks enclose the tiny thumbnail images of the gallery.
Hence, we basically need three versions of the images to implement the gallery.
- Large Version to enable zoom: Provided by the Gold Cart plugin itself.
- Medium version which is supposed to be the size of the main image for the single product page: We have to fetch from the database.
- Finally, the small tiny thumbnails for the gallery: Provided by the Gold Cart Plugin itself.
Now I am going to describe how to integrate this with the Gold Cart plugin and the required hack. First of all, after installing the Gold Cart Plugin, make sure that you have uploaded some images for the product and enabled the gallery in the settings. Also disable the lightbox feature.
After that make sure that the gallery is being displayed in the single product's page. Now lets do some code modification. Make sure you have backed up everything, specially the gold cart plugin before proceeding. Edit the gold_shopping_cart.php file and search for the function to display the gallery i.e. gold_shpcrt_display_gallery. In this function, go to the section which displays the gallery for versions above 3.8. This should start from the line number 308 (if you haven’t done any modifications to the code already). This is the original version of the code which displays the gallery:
$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
'post_type' => 'attachment',
'post_parent' => $product_id,
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
foreach ($attachments as $post) {
setup_postdata($post);
$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
$preview_link = wp_get_attachment_image_src( $post->ID, $size);
$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );
// always display the featured thumbnail first
if ( in_array( $post->ID, $featured_img ) )
array_unshift( $thumbnails, $link );
else
$thumbnails[] = $link;
}
}
$output .= implode( "\n", $thumbnails );
$output .= "</div>";
wp_reset_query();
Now this is the modified version of the above code:
$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
'post_type' => 'attachment',
'post_parent' => $product_id,
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
foreach ($attachments as $post) {
setup_postdata($post);
$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
$preview_link = wp_get_attachment_image_src( $post->ID, $size);
// ORIGNIAL $link to Represent gallery images with thickbox
//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );
// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );
// always display the featured thumbnail first
if ( in_array( $post->ID, $featured_img ) )
array_unshift( $thumbnails, $link );
else
$thumbnails[] = $link;
}
}
$output .= implode( "\n", $thumbnails ); // Imploding Array element as list items
$output .= "</div>"; // Ending list
wp_reset_query();
Now you can see from the above code that all we need to do is fetch a smaller version of the image (to display in the main image section) and modify the rel attributes such that the cloud zoom plugin activates the gallery feature too.
To enable the Cloud Zoom feature, edit the wpsc-single_product.php and modify the code where the image is displayed in a hyerplink tag. You can search it by the class product_image. You need to modify the rel attribute and add an id and a class to the hyperlink enclosing the image.
<a id="zoom1" rel="position: 'inside',smoothMove: 4" class="cloud-zoom" href="<?php echo wpsc_the_product_image(); ?>">
<img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
</a>
This is all you need to do to integrate the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Plugin's gallery. Also if you want to enable the jCarousel jQuery plugin on the gallery images, then you need to enclose the gallery hyperlink tags in list elements. For this you need to modify the code slightly such that the hyperlink tags are enclosed in an unordered list.
$output = '';
$product_name = get_the_title( $product_id );
$output .= "<ul class='wpcart_gallery jcarousel-skin-tango'><li>"; // Adding li tag to start implode array elements as list items
$args = array(
'post_type' => 'attachment',
'post_parent' => $product_id,
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
foreach ($attachments as $post) {
setup_postdata($post);
$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
$preview_link = wp_get_attachment_image_src( $post->ID, $size);
// ORIGNIAL $link to Represent gallery images with thickbox
//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );
// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );
// always display the featured thumbnail first
if ( in_array( $post->ID, $featured_img ) )
array_unshift( $thumbnails, $link );
else
$thumbnails[] = $link;
}
}
$output .= implode( "</li><li>", $thumbnails ); // Imploding Array element as list items
$output .= "</li></ul>"; // Ending list
wp_reset_query();
Conclusion
This method works pretty well for integrating the Cloud Zoom plugin with the WP e-Commerce Gold Cart gallery. But one drawback is that we are modifying the actual contents of the gold cart plugin and all the changes will be lost the day we update the WP e-Commerce gold cart plugin. Hence, I will try to make a plugin which enables this functionality rather than hard coding it in the plugin files.
Disclaimer: The above tutorial is meant to enable the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Gallery. I am not responsible if anything goes wrong and the shopping cart does not behave in the expected way. Please take proper backups before messing with any code of the theme or the plugin files.
Tags: Cloud Zoom, Gallery, Gold Cart, jQuery, Wordpress, WP e-Commerce
Posted in Blog, Tutorials | 31 Comments »
How to Create a FAQ Page with WordPress and Custom Post Types
Saturday, December 4th, 2010
I wrote a tutorial for NetTuts about how to use the ever popular Blogging/CMS platform WordPress, to create a dedicated FAQ section in the back-end using ‘Custom Post Types’. Then fetch those custom post types and display in the front end in a spiced up manner using jQuery and CSS3.
This is what the end product will look like.
When the user clicks on any of the FAQs, the page will scroll down automatically to the respective answer and highlight it.
Check out the complete tutorial on Nettuts and create some cool, interactive FAQs page for your own site. Do share your creations with us
Tags: CSS 3, Custom Post, FAQ, how to, jQuery, jQuery UI, Wordpress
Posted in Blog, Tutorials | 1 Comment »
Creating a Neon Blink Effect for your Forms using CSS3 and jQuery
Saturday, July 17th, 2010
Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.
Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.
In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.
Tags: CSS 3, Development, forms, how to, jQuery
Posted in Tutorials | 4 Comments »
How to Create a Cool Slide Out Panel with CSS3 only
Monday, July 5th, 2010
I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.
Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.
Don’t miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.
Tags: coding, CSS 3, Development, how to, tutorial
Posted in Tutorials | 6 Comments »
The ‘Select’ Problem After Using jqTransform and its Solution
Thursday, February 18th, 2010
The Project
In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.
The Problem
The drop down list control of the html form contains the ‘select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:
<form> <h4>Select Box Without jqTransform</h4> <div id="box-city" class="select-menus"> <label>City</label> <br/> <select name="select-country"> <option>Gotham</option> <option>New York City</option> <option>Smallville</option> </select> <div class="clear"></div> </div> </form>
What jqTransform does is, it scans the whole ‘select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ‘select’ tag and its content.
<form class="jqtransform jqtransformdone">
<h4>Select box with jqTransform and normal select change method</h4>
<div class="select-menus" id="box-name">
<label style="cursor: pointer;">Name</label>
<div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
<div>
<span style="width: 119px;">Batman</span>
<a class="jqTransformSelectOpen" href="#"></a>
</div>
<ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
<li><a index="0" href="#" class="selected">Batman</a></li>
<li><a index="1" href="#">Robin</a></li>
<li><a index="2" href="#">Superman</a></li>
<li><a index="3" href="#">Spiderman</a></li>
</ul>
<select name="select-country" class="jqTransformHidden" style="">
<option>Batman</option>
<option>Robin</option>
<option>Superman</option>
<option>Spiderman</option>
</select>
</div>
<div class="clear"></div>
</div>
</form>
This does not create a problem when we use the ‘select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.
This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.
// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
var value= $(this).val();
alert("Value Selected = "+value);
});
But after using the jqTransform plugin, the ‘select’ tag is no more there to apply the change method on.
The Solution
The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.
// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
var value= $("#box-age div.jqTransformSelectWrapper span").text()
alert("Value Selected = "+value);
return false; //prevent default browser action
});
Conclusion
This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.
Tags: CSS, forms, jqTransform, jQuery
Posted in Tutorials | 73 Comments »
Spice Up Your Twitter Feed Display Box Using CSS
Friday, October 23rd, 2009
For a very long time now there has been this trend of displaying tweets on the website’s sidebar, footer or the header. Many designers have designed ingenious ways of displaying the tweets by creating beautiful eye-catching illustrations containing them. The main purpose of making them visually attractive is so that the visitors can get interested and read the fresh updates that the site’s owner is providing. What this tutorial is going to do is enable to you to make your twitter feed display box interactive so that your visitors can go ‘wow! That’s pretty cool’ when they visit your site or read your feeds. So here it goes:
Step 1. How do I insert the feed in my website?
Inserting your twitter account’s feed in your website may become tricky. It’s a good thing there are so many tutorials out there which provide you with the knowledge of inserting these feeds easily. Here are some resources which will enable you to get the feeds from twitter onto your very own site:
1.Designing a Unique Page for Twitter Updates
2.10 Awesome Ways to Integrate Twitter With Your Website
3.Tweet!
WordPress users can use some awesome plugins to get their twitter feed on their site:
1.35 Awesome Twitter Plugins for WordPress
2.Juitter
3.jQuery Plugin For Twitter
Step 2. Creating the image sprite.
Now that you have successfully learned how to import the twitter feed, it’s time to configure the display area. For this tutorial, I am going to use the same design for the twitter box as I have used in this site’s footer i.e. a twitter bird staring at the tweets.
What our primary aim is that when ever the user hover’s over the twitter feed box, some action is going to take place. In our case the twitter bird will look towards the user.
You can create designs like this using various twitter icons made by some wonderful designers who love to share their work with the web community. Here is an ultimate source to these icons.
100+ Remarkably Beautiful Twitter Icons And Buttons (Always remember to ask the designer first before using these icons.)
Free vector icon set by ProductiveDreams.com
I have used the icons made by ProductiveDreams. After creating a simple box in photoshop. Place the normal twitter bird icon i.e. the one with the cross sectional view of the bird, at the bottom right side of the box such that the bird appears to be looking inside the box. Now paste the other twitter bird icon, the one which appears to be looking towards the viewer.
Then push the tilted bird icon above the older icon which you placed at the bottom right corner of the box such that it appears like a two headed twitter bird as shown below
Now hide the tilted twitter bird icon and properly mark a square containing the normal twitter bird using guide lines. Make sure that both the tilted and the normal bird fit properly in the same square made by the guidelines.
Crop the image with the normal twitter bird icon along the guidelines and open a new file and paste it there. Then check the height of the cropped image and increase the canvas size by that amount vertically. This is done so that you can paste the tilted twitter bird version on the same canvas to give the final touches to the image sprite.
Hide the normal twitter bird icon and make the other tilted bird visible. Then crop the image again along the guide lines just as you did for the previous image. Copy the image and paste it on the newly created canvas where you pasted the other image. Adjust the images so that they properly fit the whole canvas. Your image sprite is ready for use and should look like this:
Step 3. Coding the bird to life!
The html skeleton of the twitter feed box is going to be a simple one. There would be a main container div containing the twitter feed, the bird and an optional “Follow Me” link.
&lt;div id=&quot;twitter&quot;&gt; &lt;a href=&quot;http://twitter.com/SumeetChawla&quot; id=&quot;twitter-link&quot;&gt;Follow Me!&lt;/a&gt; &lt;div id=&quot;twitter-bird&quot;&gt;&lt;/div&gt; &lt;!--Your Twitter Feed Comes Here--&gt; &lt;/div&gt;
The CSS for the ‘#twitter’ container div is very simple. The ‘#twitter-bird’ div is going to contain the bird. It should have half the height of the original sprite we made because only one of the two images in the sprite will be displayed. Using CSS sprites is a good practice because it reduces server requests, hence decreases the load time and prevents the sudden flashes of the image when hovered upon for the first time.
The twitter bird div should be floated to the right and a negative margin should be assigned to it so that the bird appears to be some what outside the container div. Make the background position ‘top’ so that the normal twitter bird is displayed. To give the finishing touches to our twitter feed box, just change the background image position of the ‘twitter-bird’ div to ‘bottom’ when ever the user hovers over the container div.
#twitter {
color: #658097;
position: relative;
width: 332px;
height: 122px;
background-color: #1f1f1f;
border: 1px solid #414040;
background-position: left bottom;
background-repeat: no-repeat;
padding-left: 10px;
padding-top: 10px;
}
#twitter-bird{
background-image: url('images/twitter.jpg');
background-position:top;
position: relative;
float: right;
margin-top: 32px;
margin-right: -75px;
width: 101px;
height: 100px;
background-repeat: no-repeat;
}
#twitter:hover #twitter-bird {
background-position: bottom;
}
To see how the final result would look like, just scroll down to the footer at the bottom of this page.
Examples
Gopal Raju from ProductiveDreams has made his twitter feed look very lively and bright. The twitter bird is interactive in a very friendly and casual way. It winks and displays the total number of followers that he has.
Before Hovering:
After Hover:
This was the only site I could find which made the twitter feed box interactive. If you guys find any other site which follows this trend just post about it in the comment and I will make sure to add it here.
Tags: CSS, display feed, feed, how to, sprite, Twitter
Posted in Blog, Tutorials | 15 Comments »
How to Code an Overlapping Tabbed Main Menu
Wednesday, October 14th, 2009
There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! Written by Collis from NetTuts.com This ended up being the main inspiration for my site and while going through the tutorial I found Collis saying that:
” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build. “
So I tried coding one into html and after I succeeding thought of sharing it with you all.
Step 1.Gearing Up
So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. The above tutorial is very detailed and Collis does a great job in teaching how to build such a menu in photoshop. I have built one simple one specially for this tutorial.
Now let me specify that there are three states of the tab.The inactive state is grayish in colour, the active state is deep blue and the hover state is light steel blue colour. Hence, rather than slicing up three images for each tab, we can slice out an image sprite.
Step 2. Slicing The Tabs From the PSD
Align the tabs vertically using grids as shown in the image above. You can also align the tabs horizontally rather than vertically but then the CSS background image position will be accessed in a different way. The choice depends on person to person but both work perfectly. While cropping the image follow the guidelines properly and note that I have made the background transparent because we will be needing a transparent background if we need to overlap the tabs. Crop the image and save it for web in PNG24 format. One more point to note while slicing up the images is that the first tab i.e. the ‘Home’ tab should not be having any shadow on its left edge in the inactive state. Hence, for that specific tab we have to create another sprite without the shadows in it.
Step 3. Code Away
Now that our slicing is complete and we have all the images needed we can start coding our navigation bar. Just to make the example look good, I have constructed a sample featured content area layout with the overlapped navigation bar. The whole layout looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href="css/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page-wrap"> <ul id="main-nav"> <li class="current"><a href="index.html">Home</a></li> <li class="portfolio"><a href="portfolio.html">Portfolio</a></li> <li class="services"><a href="services.html">Services</a></li> <li class="about"><a href="about.html">About Us</a></li> <li class="contact"><a href="contact.html">Contact</a></li> </ul> <div class="clear"></div> <div id="featured"> <div id="featured-content"> </div> </div> </div> </body> </html>
Lets look at our main navigation menu. I have used a simple unordered list as any other navigation bar and styled it using a background image to the list’s hyperlink tag.
<ul id="main-nav"> <li class="current"><a href="index.html">Home</a></li> <li class="portfolio"><a href="portfolio.html">Portfolio</a></li> <li class="services"><a href="services.html">Services</a></li> <li class="about"><a href="about.html">About Us</a></li> <li class="contact"><a href="contact.html">Contact</a></li> </ul>
ul#main-nav li {
float: left;
position: relative;
display: inline;
}
Remember that we are using an image sprite for the tabs in which the top most tab represents the active state, the middle represents the inactive state and the bottom represents the hover state. Hence, we will use the ‘background-position’ property to properly place the images to their respective state as follows:
ul#main-nav li a {
position: relative;
width: 110px;
height: 29px;
display: block;
background-image: url('../images/tabs.png');
background-position: center center;
color: #44403b;
text-decoration: none;
font-size: 14px;
padding-top: 12px;
text-align: left;
padding-left: 30px;
font-weight: bold;
}
ul#main-nav li.home a {
background-image: url('../images/tab-home.png');
}
ul#main-nav li.current a {
background-position: top;
color: #ffffff;
}
ul#main-nav li a:hover {
background-position: bottom;
color: #ffffff;
}
ul#main-nav li.current a:hover {
background-position: top; /*To Prevent the Current tab from changing colour on hover*/
color: #ffffff;
}
You will notice that I have given a relevant class to each of the list elements and a class named ‘current’ to the tab which is for the current page. This is done so that I can assign different z-index values to each tab in an ascending order such that each tab lies at a higher z-axis than the tab following it. The tab with the class ‘current’ will lie at the highest order of the z-axis because it represents the current page and will always stay on top irrespective of it’s position in the list. Before applying the z-index values, make sure that the position attribute for the list element is set to relative. Without any positioning value the z-index property won’t work at all.
ul#main-nav li.current {
z-index: 100;
}
ul#main-nav li.home {
z-index: 100;
}
ul#main-nav li.portfolio {
z-index: 99;
}
ul#main-nav li.services {
z-index: 98;
}
ul#main-nav li.about {
z-index: 97;
}
ul#main-nav li.contact {
z-index: 96;
}
Even though we have assigned different z-index values to the tabs, they still don’t appear over lapped and will look like this:
To give the finishing touches to our navigation bar, we have to push each tab on top of the other. We have assigned the z-index values in descending order from left to the right. Hence, we will just push each tab starting from the right to about 20px to its left by adding a negative ‘margin-left’ property to the ‘ul#main-nav li’ and push the whole navigation bar unordered list to the left by adding a positive 20px ‘margin-left’ to nullify the left wards movement of the bar.
ul#main-nav {
margin-left: 20px;
}
ul#main-nav li {
float: left;
position: relative;
margin-left: -20px;
display: inline;
}
Mission Accomplished
After assembling all the css and the xhtml together, we will have our overlapped tabbed main navigation menu ready for use. This was my take on how to create this kind of a menu and am sure there are many better ways to do the same. I would be glad if you could share any other way of doing this or just discuss some improvements to this procedure itself.
Here are some site which use over lapping tabs as their main navigation menu:
ILove2Design.at
HiddenDepth.ie
HotCards.com
Tags: CSS, how to, menu, navigation, over lapped
Posted in Blog, Tutorials | 47 Comments »
-
-
Browse
- The 'Select' Problem After Using jqTransform and its Solution 73 comment(s)
- How to Code an Overlapping Tabbed Main Menu 47 comment(s)
- Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery 31 comment(s)
- Grunge Template 21 comment(s)
- iPhone Application Template 21 comment(s)
- Listify, Convert Raw Text To HTML Elements 17 comment(s)
- Business Template 16 comment(s)
-
-
