Codepal

Posts Tagged ‘how to’

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 »

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.

<div id="twitter">
	<a href="http://twitter.com/SumeetChawla" id="twitter-link">Follow Me!</a>
	<div id="twitter-bird"></div>
	<!--Your Twitter Feed Comes Here-->
</div>

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 »