But firstly I’d like to mention that as far as possible, do it the responsive way using the HTML5 and CSS3 media queries.

I believe every awesome developer would recommend the HTML5 Boilerplate so check out this HTML5 Boilerplate + FlexSlider template I made.

Now let’s take a look at the script that will automatically redirect a user to the mobile version of the site when he’s on mobile.

Wait, demo first.

Use a mobile device to view the demo! Like duh, you already knew that right.

Mobile Redirect JavaScript Snippet

This script was adapted from Local Streamer (thanks dude) and then modified to handle the case where users want to view the desktop site after redirected to the mobile site.

Here’s an overview of what this snippet does:

• Let’s say the desktop site is www.azharkamar.com/demos/mobile-redirect-javascript and the mobile site is m.azharkamar.com
• If the user opens www.azharkamar.com/demos/mobile-redirect-javascript via mobile, he will automatically be redirected to m.azharkamar.com.
• Now if the user then wants to view the desktop site from mobile, he will click a link at the footer (that says something like ‘Go Desktop Site’) and he will be directed to www.azharkamar.com, without getting stuck in a silly loop.
• One can go to and fro the desktop and the mobile site while using a mobile device without any problem.

Instructions

• Copy the script below and paste it in the default index file of your desktop site before the </head> tag.
• On line 5, the code refUrl.substr(7, 16) will simply remove the first 7 characters and then return the next 16 characters of refUrl.
• 7 is the amount of chars in http:// so don’t change this number unless your mobile site is using some other protocol. 16 is the number of characters in m.azharkamar.com so you’ll have to change this number accordingly. Here’s a string counter for people who don’t like counting.

<script>
//<![CDATA[
    var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
	var refUrl = document.referrer; // Get the URL where the user came from
	var prevUrl = refUrl.substr(7,16); // Create a substring after 'http://' and '.com'
        var mobileUrl = "m.azharkamar.com"; // String from mobile site URL; must match prevUrl

   // Run auto-redirect only if the user is on mobile and isn't from m.azharkamar.com
   if ((mobile) && !(prevUrl == mobileUrl)) {
        document.location = "http://m.azharkamar.com";
    }
 //]]>
</script>

Page and profile? What tha diff? They’ve got a teeny weeny bit of difference – The profile photo placement for the Facebook page timeline is 17 pixels lower than that of the Facebook profile. As for the cover photo, there’s no difference.

This little template contains 2 different main groups, the separated and combined masking for the cover and profile photo. You can learn more about it below.

Grab the PSD template now using the download link down there!

Instructions & Explanations

• Click the big black button above to download facebook_profile_page_timeline_template.psd
• You’ll see 2 main folders, separated and combined. The former contains the profile and cover photo asked separately. The separated folder contains both photo masks merged together to allow you to create the cool effect that you see in the image above, here and here.
• Then simply replace layers indicated in red with your own image.
• Within each folder, you will see another 2 folders named facebook profile and facebook page respectively. As stated above, the only difference is that the Facebook page’s profile photo is 17 pixels lower than the Facebook profile’s. I created 2 folders simply to ease your work.
• Once you’re happy with your new bombastic timeline design, just Save for Web & Devices (Ctrl + Shift + Alt + s) and export the slices selectively. You might need to right click Slice 5 and Bring to Front.

You might wanna post your masterpieces in the comments section.
Have fun!

So I plugged in Download Monitor on my client’s Wordpress site and off it went, doing it’s download-monitoring magic.

Until one day, one user reported a bug – certain files aren’t uploading successfully. Since I had experienced a similar issue before during my Joomla days, my mind instantly inclined towards the maximum file upload size issue.

After some lolcats and rage comics and serious troubleshooting, it was confirmed – The maximum file upload size was the culprit.

It was set to a low 8MB, hence when the user uploads files bigger than that, the process simply fails (unfortunately without an error message for the poor clueless user).

How to Increase the Maximum File Upload Size

After a few Google searches, I finally solved this with the help of WPBeginner.

Just follow the steps below in order. After completing each one, check whether the problem was fixed. Cause if step 1 solved the issue, you wouldn’t need to proceed to step 2, and so on. As for me, I had to go till step 3. ;(

1. Edit your Theme’s Functions.php

Copy these to your theme’s functions.php file, before the closing ?> tag. The file should be here /wp-content/themes/your-theme/functions.php.

@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

Now try uploading a big-sized file. Nothing happened? That’s pretty normal. Go on to the next step.

2. Create / Edit the php.ini file

This php.ini might be the culprit. Login to your FTP client and check if this file is in the root directory. If it is, append/edit as follows. If you can’t find the file in your root, chances are your site is hosted in a shared server hence you’ve gotta create one for yourself with the codes below.

upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

3. Add a Few Lines to the .htaccess File

This was the step that worked for me. If you’re here, chances are you’re feeling down, so I hope this one works for you too. If it doesn’t, you might wanna contact your hosting provider.

The .htaccess file is located in your site’s root directory.

Just copy these codes into the bottom of your .htaccess file, before # END WordPress.

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Alright. So… I had a web design project in hand at that time, so I started hunting for boilerplate themes and examples online (there weren’t many) and decided to just use the Initializr template, which is also featured in HTML5 Boilerplate. If you go to Initializr, you’ll notice there’s 3 options for you to get your templates. I tried all 3 and I personally found the Responsive one most convenient – Download the Responsive template.

I uploaded the files into my server and did a tiny bit of testing (view demo). The thing that impresses me most is the responsiveness of the template – Using just HTML5 and CSS3, this is probably the best feature of HTML5. Resize your browser to and fro, it’s fun.

Integrating FlexSlider with Initializr

The Initializr template is meant to be a simple one aimed at easing the kickoff to the HTML5 Boilerplate, hence it is free of fancy stuff like image carousels or drop down menus. But I needed a rotating image banner for my home page, so I did some research and found FlexSlider. I tried fitting FlexSlider into the Initializr template and after 30 minutes or so, it was working well!

View the demo and if you love it, download the source!

Explanations – The Technical Stuff

As promised, here’s how it was done:

1. Download FlexSlider here.
2. I selected only the files I needed and copied them into the H5BP Initializr folder. The files are flexslider.css, jquery.flexslider-min.js, all images, and some codes from demo.html that I will cover below.
3. The JavaScript onLoad function in the head of demo.html was copied into H5BP’s script.js.
4. Then copy <div id="container"> and everything within to H5BP’s index.html, right below <div id="main" class="wrapper clearfix">.
5. Some very minor CSS edits to flexslider.css were done to remove the border, reposition the left and right arrows, and improve the bottom margin of the circle buttons at the bottom.
6. View the code sheets below for further understanding. The lines highlighted in grey signify those that were added, for FlexSlider to work.

index.html

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>H5BP Initializr + FlexSlider</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="css/style.css">

    <!-- FlexSlider -->
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

	<script src="js/libs/modernizr-2.5.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

	<div id="header-container">
		<header class="wrapper clearfix">
			<h1 id="title">H5BP Initializr + FlexSlider</h1>
			<nav>
				<ul>
					<li><a href="http://azharkamar.com">Hello</a></li>
					<li><a href="http://azharkamar.com">Azhar Kamar</a></li>
					<li><a href="http://azharkamar.com">Here</a></li>
				</ul>
			</nav>
		</header>
	</div>
	<div id="main-container">
		<div id="main" class="wrapper clearfix">

        <!-- FlexSlider -->
        <div id="container">

		<!--=============================
		Markup for FADE animation
		=================================-->
		<div class="flexslider">
	    <ul class="slides">
	    	<li>
	    		<img src="img/inacup_samoa.jpg" width="1140" />
	    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
	    	</li>
	    	<li>
	    		<a href="http://flex.madebymufffin.com"><img src="img/inacup_pumpkin.jpg" width="1140" /></a>
	    		<p class="flex-caption">This image is wrapped in a link!</p>
	    	</li>
	    	<li>
	    		<img src="img/inacup_donut.jpg" width="1140" />
	    	</li>
	    	<li>
	    		<img src="img/inacup_vanilla.jpg" width="1140" />
	    	</li>
	    </ul>
	  </div>

		<!--============================
		Markup for SLIDE animation
		You need to add an extra container element for the overflow: hidden property on the slider

		Update your flexslider() function with the following properties:

		<script type="text/javascript">
			$(window).load(function() {
				$('.flexslider').flexslider({
				  animation: "slide",
				  controlsContainer: ".flex-container"
			  });
			});
		</script>
		=================================
		<div class="flex-container">
			<div class="flexslider">
		    <ul class="slides">
		    	<li>
		    		<img src="demo-stuff/inacup_samoa.jpg" />
		    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
		    	</li>
		    	<li>
		    		<a href="#"><img src="demo-stuff/inacup_pumpkin.jpg" /></a>
		    		<p class="flex-caption">This image is wrapped in a link!</p>
		    	</li>
		    	<li>
		    		<img src="demo-stuff/inacup_donut.jpg" />
		    	</li>
		    	<li>
		    		<img src="demo-stuff/inacup_vanilla.jpg" />
		    	</li>
		    </ul>
		  </div>
	 	</div>
		==================================-->
	</div>

			<article>
				<header>
					<h1>article header h1</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
				</header>
				<section>
					<h2>article section h2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
				</section>
				<section>
					<h2>article section h2</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
				</section>
				<footer>
					<h3>article footer h3</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
				</footer>
			</article>

			<aside>
				<h3>aside</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
			</aside>

		</div> <!-- #main -->
	</div> <!-- #main-container -->

	<div id="footer-container">
		<footer class="wrapper">
			<h3>footer</h3>
		</footer>
	</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<!-- FlexSlider -->
<script src="js/jquery.flexslider-min.js"></script>

<script src="js/script.js"></script>

<script>
	var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

</body>
</html>

I believe there are better ways to achieve this so if you do know, please share!
You might also wanna share your sites created using this in the comments section below.

Icons of various shapes and sizes have been incorporated in almost every website that I have built so far and I am particularly fond of minimalistic and clean icons.

So here’s a collection of a bunch of my favorite icon sets, just the way I like them – Clean, flat and simple.
And free!

As you know, the messages DIV element that shows a success or error message appears at the top of the page content by default. This isn’t good because it is displayed inline with the current content and therefore pushes the elements below it downwards and hence ruining the current layout of your store.

This can be improved by styling the messages element to display as absolute and to enhance it further, make it appear as if it is a modal dialog box. This way, the messages box will not interfere with the store layout and in addition enhance the user interface and experience.

Read on to find out how to enhance Magento’s default messages/notification box.
Note: This hack requires the modification of a Magento core file. Tested on Magento version 1.6.1.0.

Demo of Magento’s Default Messages Box

For those who wanna see how the default notification box looks like in Magento, follow these instructions:

1. Go to https://demo.magentocommerce.com/customer/account/login.
2. Fill up some bogus text into the Email Address and Password field under the Registered Customers box (e.g. aaa@aaa.com, 123456)
3. Click the Login button at the bottom right.
4. When the page has reloaded, you will notice a red box at the top with the error message Invalid login or password.

This, is the default messages box I’m talking about. I will now explain how to easily improve the way it looks and works.

Edit Your Theme’s Stylesheet

1. Navigate to your theme’s main stylesheet – /www/skin/frontend/default/your-theme/css/styles.css
2. Add these codes at the bottom of the stylesheet:

   #messages {
       margin: 100px 0 0 280px;
       position: absolute;
       text-align: center;
       width: 360px;
       z-index: 99;
   }
   
   .msgclose {
       color: #DF280A;
       float: right;
       font-family: Comic Sans MS;
       font-size: 14px;
       font-weight: bold;
       margin: 0 8px;
       text-decoration: none;
   }
   

3. Now look for the .error-msg, .success-msg, .note-msg, .notice-msg CSS selector and add this property to it:

   padding: 40px;

Edit Messages.php

1. Locate the Messages.php file here /www/cuppakiddo/app/code/core/Mage/Core/Block/Messages.php
2. Look for this line (use Ctrl+f in Dreamweaver):

   $html .= '<' . $this->_messagesSecondLevelTagName . ' class="' . $type . '-msg">';
   

   And add this code above it:

   $html .= '<a class="msgclose" href="#" onclick="document.getElementById('messages').style.visibility='hidden'">x</a>';
   

   What this piece of code does is simply display a close button (an ‘x’) and assign an onclick action to it that will close the notification box.

3. Now look for:

   $html .= '<' . $this->_messagesFirstLevelTagName . ' class="messages">';

   And replace it with:

   $html .= '<' . $this->_messagesFirstLevelTagName . ' id="messages">';

   We are changing the class to id because the onclick function will be looking for a messages ID, as shown above.

Done deal! An error message box should now look like so:

Good luck!

The simple idea in achieving this is to get the URL of the current page you’re at, and check if that URL matches the HREF (link) value of the corresponding link in the site navigation.

If there is a match, append a class (in our case, the .selected class) to signify the current menu item of that current page.

That’s all there is. Now let’s roll.

First, let’s view a simple demonstration of what we’re going to achieve.

View Demo

Now read on to find out how to do this.

The jQuery Function

Here’s the jQuery function that will run through all links and add a .selected class to the link.

$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav li a").each(function(){
          if($(this).attr("href") == pgurl)
          $(this).addClass("selected");
     })
});

The HTML Structure

Here’s how the HTML structure of your navigation menu should look like:

<ul id="nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="contact.html">Contact</a></li>
</ul>

The Final Product

Finally we add the jQuery function to the HTML, style it with some simple CSS and include the jQuery library script.

And we get this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.7.0/jquery.min.js"></script>

<style>
ul{list-style:none; margin:200px auto; text-align:center; padding:0}
ul li{display:inline;}
#nav{font-family:Arial, Helvetica, sans-serif; font-size:30px}
#nav li a{color:#999; text-decoration:none; font-weight:bold; padding:20px 50px}
#nav li a.selected{color:#ff3399; background:#f6f6f6}
#nav li a:hover{background:#f6f6f6}
</style>

<script>
$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav li a").each(function(){
          if($(this).attr("href") == pgurl)
          $(this).addClass("selected");
     })
});
</script>
</head>

<body>
     <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
     </ul>
</body>
</html>

In the demo that you see above, I duplicated 2 copies of the index.html file above and named them about.html and contact.html respectively.

And that’s all for today folks, have fun!

I’ve compiled a list of neat and classy user interface kits and other web elements in PSD format from a few great PSD resources. These high quality designs are carefully hand-picked according to my personal preference. I hope you like them too.

Enjoy!

Free PSD User Interfaces

Below are step by step instructions on how to edit your WordPress backend footer (the one on the left).

How to Modify WordPress Backend Footer

1. First, open your WordPress theme’s functions.php file. It should be in /wp-content/themes/your-theme/functions.php.
2. Now copy the script below and paste it at the bottom of your functions.php file right before the closing ?> tag. This code is exactly what I’m using for my client’s site, so change the text accordingly.

   function modify_footer_admin () {
     echo 'Designed by <a href="http://azharkamar.com">Azhar Kamar</a>. ';
     echo 'Powered by<a href="http://WordPress.org">WordPress</a>.';
   }
   
   add_filter('admin_footer_text', 'modify_footer_admin');
   

3. So now the footer of my backend looks like this:
   

That’s it. Good luck!

There are many web design techniques that we can use but for this post, I’ll focus on the usage of wavy background patterns. I realize that simple lines and curves can easily enhance the look of a webpage and this seems to work very effectively for me and my clients.

So here you go, a bunch of free hi-res wavy backgrounds for your design!

For the images in .JPG format, you can play around with the colors in Photoshop by using Color fill or adjusting the Hue/Saturation (there are many commands available) to get to the color that you want.

Backgrounds in .jpg Format

Backgrounds in .ai, .eps and .svg Format