Learning Is Fun

Talks on Web Technology and Better Product Development

JavaScript: Div & Element hide & show cross-browser script solution

January17

Hello Guys,

Today I was working in a project where I had to add element hide and show depending on the condition. For example, if the client wants to contact by phone, the phone DIV element or area appears. If not, the phone DIV element hide quickly. I was writing scripts for this. But to my surprise, I noticed that none of them are cross-browser supporting. When one scripting working in few browsers, the same script is not working in other browsers. So, I struggled to come up with the cross-browser solution and at last, I succeeded. You can use this code in your form whenever you need to show and hide elements dynamically in JavaScript. This script is a kind of Contact Us form.

So, what am I gonna do? I am going to share my small script so that you can save your time I you find my this article by Google search or any other search.

OK!
No more introduction. Let us start.

Download:

I suggest you first download the script and take a look.
http://www.tanzilo.com/demo/code/hide_show/hide_show.zip

Features:

  1. It is a totally CSS-based and table-less scripting
  2. I have used phpMailer version 2.3 and it works for PHP 5 and/or 6 version
  3. JavaScript used as you already know

CSS Code:

<style type="text/css">
	body
	{
		font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	#contactForm
	{
		width:500px; height:auto; float:left; clear:both;
	}
	#contactForm INPUT, OPTION, TEXTAREA
	{
		font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	#formRow
	{
		width:500px; float:left; padding:3px 0px 0px 0px;
	}
	#columnLeft
	{
		width:250px; height:auto; float:left;
	}
	#columnRight
	{
		width:250px; height:auto; float:left;
	}
	#formOutput
	{
	}
	#errorMessage
	{
		color:#FF0000; font-weight:bold;
	}
	#successMessage
	{
		color:#009900; font-weight:bold;
	}
	#formRowForum
	{
		width:500px; float:left; padding:3px 0px 0px 0px;
	}
	#formRowDatabase
	{
		width:500px; float:left; padding:3px 0px 0px 0px;
	}
	#formRowUsers
	{
		width:500px; float:left; padding:3px 0px 0px 0px;
	}
	#formRowProvider
	{
		width:500px; float:left; padding:3px 0px 0px 0px;
	}
	#formRowCurrentSpecs
	{
		width:500px; float:left; padding:3px 0px 0px 0px;
	}
</style>

HTML Code:

<form id="contact_form" name="contact_form" method="post" action="">
    <div id="contactForm">
    	<div id="formRow">
        	<div id="columnLeft">Name:</div>
        	<div id="columnRight"><input name="name" type="text" value="<?php echo $_SESSION['name']; ?>" /></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Email:</div>
        	<div id="columnRight"><input name="email" type="text" value="<?php echo $_SESSION['email']; ?>" /></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Best method to contact you:</div>
        	<div id="columnRight">
            	<select name="contact_method" id="contact_method" onchange="displayContactMethod();">
          			<option value="Please Select One">Please Select One</option>
          			<option value="Phone">Phone</option>
        		</select>
                <div id="phoneNoDiv">Phone No: <input name="phone" id="phone" type="text" value="<?php echo $_SESSION['phone'] ;?>" /></div>
			</div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Will this server host a vBulletin site?</div>
        	<div id="columnRight">
            	<select name="host_vb" id="host_vb" onchange="controlServerHostOptions();">
          			<option value="No">No</option>
          			<option value="Yes">Yes</option>
        		</select>
			</div>
        </div>
    	<div id="formRowForum">
        	<div id="columnLeft">Forum Link:</div>
        	<div id="columnRight"><input name="forum_link" type="text" value="<?php echo $_SESSION['forum_link'] ;?>" /></div>
        </div>
    	<div id="formRowDatabase">
        	<div id="columnLeft">Current size of database:</div>
        	<div id="columnRight"><input name="size" type="text" value="<?php echo $_SESSION['size']; ?>" /></div>
        </div>
    	<div id="formRowUsers">
        	<div id="columnLeft">Average concurrent users:</div>
        	<div id="columnRight"><input name="users" type="text" value="<?php echo $_SESSION['users']; ?>" /></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Do you currently have a dedicated server?</div>
        	<div id="columnRight">
            	<select name="server" id="server" onchange="controlCurrentHostOptions();">
          			<option value="No">No</option>
          			<option value="Yes">Yes</option>
        		</select>
			</div>
        </div>
    	<div id="formRowProvider">
        	<div id="columnLeft">Current Provider:</div>
        	<div id="columnRight"><input name="current_provider" type="text" value="<?php echo $_SESSION['current_provider']; ?>" /></div>
        </div>
    	<div id="formRowCurrentSpecs">
        	<div id="columnLeft">Current Server Specs:</div>
        	<div id="columnRight"><textarea name="current_specs" cols="30" rows="5"><?php echo $_SESSION['current_specs'] ;?></textarea></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Are there any specs you must have with your new server
            or additional notes you would like us to consider?</div>
        	<div id="columnRight"><textarea name="specs" cols="30" rows="5"><?php echo $_SESSION['specs']; ?></textarea></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Time frame to purchase</div>
        	<div id="columnRight"><input name="time" type="text" value="<?php echo $_SESSION['time']; ?>" /></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Do you have a budget we need to consider?</div>
        	<div id="columnRight"><input name="budget" type="text" value="<?php echo $_SESSION['budget']; ?>" /></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">Anti Spam Question: How much is: 5+5+3=?</div>
        	<div id="columnRight"><input name="total" type="text" /></div>
        </div>
    	<div id="formRow">
        	<div id="columnLeft">&nbsp;</div>
        	<div id="columnRight">
            	<input name="submit" type="submit" value="Submit" />
                <input name="reset" type="reset" />
        	</div>
        </div>
    </div>
</form>

JavaScript Code:

	function displayContactMethod()
	{
		var id = 'phone';
		var contatMethod = document.contact_form.contact_method.value;
		if(contatMethod == "Phone")
		{
			displayDiv('phoneNoDiv')
		}
		else
		{
			hideDiv('phoneNoDiv');
			document.contact_form.phone.value = '';
		}
	}
	function initialHiddenDivs()
	{
		var divID_1 = 'phoneNoDiv';
		var divID_2 = 'formRowForum';
		var divID_3 = 'formRowDatabase';
		var divID_4 = 'formRowUsers';
		var divID_5 = 'formRowProvider';
		var divID_6 = 'formRowCurrentSpecs';
		hideDiv(divID_1);
		hideDiv(divID_2);
		hideDiv(divID_3);
		hideDiv(divID_4);
		hideDiv(divID_5);
		hideDiv(divID_6);
	}
	function hideDiv(id)
	{
		if (document.getElementById) { // DOM3 = IE5, NS6
			document.getElementById(id).style.display = 'none';
		}
		else {
			if (document.layers) { // Netscape 4
				document.id.display = 'none';
			}
			else { // IE 4
				document.all.id.style.display = 'none';
			}
		}
	}
	function displayDiv(id)
	{
		if (document.getElementById) { // DOM3 = IE5, NS6
			document.getElementById(id).style.display = 'block';
		}
		else {
			if (document.layers) { // Netscape 4
				document.id.display = 'block';
			}
			else { // IE 4
				document.all.id.style.display = 'block';
			}
		}
	}
	function controlServerHostOptions()
	{
		var host_vb = document.contact_form.host_vb.value;
		if(host_vb == "Yes")
		{
			displayDiv('formRowForum');
			displayDiv('formRowDatabase');
			displayDiv('formRowUsers');
		}
		else
		{
			hideDiv('formRowForum');
			hideDiv('formRowDatabase');
			hideDiv('formRowUsers');
			document.contact_form.forum_link.value = '';
			document.contact_form.size.value = '';
			document.contact_form.users.value = '';
		}
	}
	function controlCurrentHostOptions()
	{
		var server = document.contact_form.server.value;
		if(server == "Yes")
		{
			displayDiv('formRowProvider');
			displayDiv('formRowCurrentSpecs');
		}
		else
		{
			hideDiv('formRowProvider');
			hideDiv('formRowCurrentSpecs');
			document.contact_form.current_provider.value = '';
			document.contact_form.current_specs.value = '';
		}
	}

PHP Code:

	<?php		
		if($_POST)
		{
			$name 				= trim($_POST['name']);
			$email 				= trim($_POST['email']);
			$contact_method 	= trim($_POST['contact_method']);
			$phone 				= trim($_POST['phone']);
			$host_vb 			= trim($_POST['host_vb']);
			$forum_link 		= trim($_POST['forum_link']);
			$size 				= trim($_POST['size']);
			$users 				= trim($_POST['users']);
			$server 			= trim($_POST['server']);
			$current_provider 	= trim($_POST['current_provider']);
			$current_specs 		= trim($_POST['current_specs']);
			$specs 				= trim($_POST['specs']);
			$time 				= trim($_POST['time']);
			$budget 			= trim($_POST['budget']);
			$total	 			= trim($_POST['total']);
			$_SESSION['name']				= $name;
			$_SESSION['email']				= $email;
			$_SESSION['contact_method']		= $contact_method;
			$_SESSION['phone']				= $phone;
			$_SESSION['host_vb']			= $host_vb;
			$_SESSION['forum_link']			= $forum_link;
			$_SESSION['size']				= $size;
			$_SESSION['users']				= $users;
			$_SESSION['server']				= $server;
			$_SESSION['current_provider']	= $current_provider;
			$_SESSION['current_specs']		= $current_specs;
			$_SESSION['specs']				= $specs;
			$_SESSION['time']				= $time;
			$_SESSION['budget']				= $budget;
			if($total != 13)
			{
					echo '<div id=errorMessage>Anti Spam Question is wrong!<br />
					Please sum up and type the current result of: 5+5+3=?</div>';
			}
			else

			{
				$emailBody = '';
				if(!empty($name))
				{
					$emailBody .= 'Name : ' . $name . chr(10);
				}
				if(!empty($email))
				{
					$emailBody .= 'Email : ' . $email . chr(10);
				}
				if(!empty($contact_method))
				{
					$emailBody .= 'Best method to contact you : ' . $contact_method . chr(10);
				}
				if(!empty($phone))
				{
					$emailBody .= 'Phone : ' . $phone . chr(10);
				}
				if(!empty($host_vb))
				{
					$emailBody .= 'Will this server host a vBulletin site? : ' . $host_vb . chr(10);
				}
				if(!empty($forum_link))
				{
					$emailBody .= 'Forum Link : ' . $forum_link . chr(10);
				}
				if(!empty($size))
				{
					$emailBody .= 'Current size of database : ' . $size . chr(10);
				}
				if(!empty($users))
				{
					$emailBody .= 'Average concurrent users : ' . $users . chr(10);
				}
				if(!empty($server))
				{
					$emailBody .= 'Do you currently have a dedicated server? : ' . $server . chr(10);
				}
				if(!empty($current_provider))
				{
					$emailBody .= 'Current Provider : ' . $current_provider . chr(10);
				}
				if(!empty($current_specs))
				{
					$emailBody .= 'Current Server Specs : ' . $current_specs . chr(10);
				}
				if(!empty($specs))
				{
					$emailBody .= 'Are there any specs you must have with your
								   new server or additional notes you would
								   like us to consider? : ' . $specs . chr(10);
				}
				if(!empty($time))
				{
					$emailBody .= 'Time frame to purchase : ' . $time . chr(10);
				}
				if(!empty($budget))
				{
					$emailBody .= 'Do you have a budget we need to consider? : ' . $budget . chr(10);
				}
				include_once('php5Mailer/class.phpmailer.php');
				$mail = new PHPMailer();
				$body = $emailBody;
				$body = eregi_replace("[\]",'',$body);
				$subject = eregi_replace("[\]",'',$subject);
				$mail->From = $email;
				$mail->FromName = $name;
				$mail->Subject = "New Email from $name ($email)";
				// optional, comment out and test
				$mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; 
				$mail->Body = nl2br($body);
				$mail->AddAddress("todd@urljet.com", "Todd");
				$mail->IsHTML(true);
				if(!$mail->Send())
				{
					echo '<div id=errorMessage>Failed to send mail</div>';
				}
				else 
				{
					echo '<div id=successMessage>Mail sent</div>';
					$_SESSION['name']				= '';
					$_SESSION['email']				= '';
					$_SESSION['contact_method']		= '';
					$_SESSION['phone']				= '';
					$_SESSION['host_vb']			= '';
					$_SESSION['forum_link']			= '';
					$_SESSION['size']				= '';
					$_SESSION['users']				= '';
					$_SESSION['server']				= '';
					$_SESSION['current_provider']	= '';
					$_SESSION['current_specs']		= '';
					$_SESSION['specs']				= '';
					$_SESSION['time']				= '';
					$_SESSION['budget']				= '';
				}	
			}
		}
	?>

Once again I would like to remind you that you first download this small script from the above download link and take a look at the whole script.

That is all for now, Dude!

Thank you for reading.

posted under JavaScript, PHP | 3 Comments »

WordPress: adding a custom option box and developing file upload plugin

January15

Hello Buddy,

One of my clients wanted to show thumbnail photo beside the post text as below. So, I had to make a plugin so that the admin can post the thumbnail when he is writing the post or can edit when editing the post. Take a look at the thumbnail’s position below.

Thus, recently I solved a plugin problem in one of my wordpress works although it was small. You know you may sometimes need to add a custom field in your wordpress posting/writing/editing area. To check what I am saying, take a look at the following image:

Adding such a box is extremely easy using the wordpress’s builtin add_meta function. But does file upload works i.e. if you upload the file, will it work? The answer is straight – “NO”. But why? The reason is also simple. If you want to upload a file, your form should have “enctype=”multipart/form-data” in the form opening such as

	<form name="post" action="post.php" method="post" id="post" enctype="multipart/form-data">

But the problem is – if you open the source code of text editor tool as following,

you will see that it does not have “enctype=”multipart/form-data” unfortunately. It looks exactly like this in my wordpress 2.7 version if I open the wp-admin/edit-form-advanced.php file at line # 520.

	<form name="post" action="post.php" method="post" id="post">

Not funny? Huh?

So, to cope up with this situation, I had to add “enctype=”multipart/form-data” in the form although I do not like changing the core files. Why do not I like to change the core files? The answer simple. Because whenever there is an update, the client have to update the file everytime. The client may not like it or may even forget it. Anyway, after change, it looks like this:

	<form name="post" action="post.php" method="post" id="post" enctype="multipart/form-data">

OK. Lemme show you step by step what to do if you want to add a file upload plugin.

Step One: Change the “wp-admin/edit-form-advanced.php” file

Open this file from the mentioned location and change the following line in the file:

	<form name="post" action="post.php" method="post" id="post">

to this line:

	<form name="post" action="post.php" method="post" id="post" enctype="multipart/form-data">

Step Two: Write you plugin

Here goes mine:

<?php
	/*
	Plugin Name: Bag Thumbnail
	Plugin URI: http://www.tanzilo.com/
	Description: This plugin helps you to set thumbnail image of your bags.
	Author: Tanzil Al Gazmir
	Version: 1.0
	Author URI: http://www.tanzilo.com/
	*/
	function init_bag_review_thumb_widget()
	{
		global $wpdb;
		$result = mysql_list_tables(DB_NAME);
		$current_table = array();
		while($row = mysql_fetch_row($result))
		{
			$current_tables[] = $row[0];
		}
		$myNewDatabaseTable = $wpdb->prefix . 'bag_thumb';
		if(!in_array($myNewDatabaseTable, $current_tables))
		{
			mysql_query("
			CREATE TABLE IF NOT EXISTS `" . $myNewDatabaseTable . "` (
			`id` int(11) NOT NULL auto_increment,
			`post_id` int(11) NOT NULL,
			`image_name` varchar(255) NOT NULL,
			PRIMARY KEY  (`id`)
			);
			");
		}
		/*
		// Now I am going to delete all unnecessary thumb images by scanning the
		// whole directory
		*/
		$sqlQuery = "SELECT image_name FROM " .$wpdb->prefix . "bag_thumb; ";
		$fileArray = $wpdb->get_col($sqlQuery);
		$fileArray[] = 'no_thumb.jpg';
		if ($handle = opendir('../bag_thumb/'))
		{
			// This is the correct way to loop over the directory.
			while (false !== ($file = readdir($handle)))
			{
				if(is_file('../bag_thumb/' . $file))
				{
					if(!in_array($file, $fileArray))
					{
						unlink('../bag_thumb/' . $file);
					}
				}
			}
			closedir($handle);
		}
	}
	// This function tells WP to add a new "meta box"
	function add_bag_photo_box()
	{
		add_meta_box(
			'bag_photo', // id of the <div> we'll add
			'Add Bag Thumbnail Photo', //title
			'add_bag_photo', // callback function that will echo the box content
			'post', // where to add the box: on "post", "page", or "link" page
			'normal',
			'high' 
		);
	}
	// This function echoes the content of our meta box
	function add_bag_photo()
	{
		echo
			'<label> Select a thumbnail (150px by 100px) photo for this bag<br />
			 <input type="file" name="bag_thumbnail_photo" id="bag_thumbnail_photo" />
			 </label>
			 <input name="bag_thumbnail_set" type="hidden" id="bag_thumbnail_set" value="yes" />
			';
	}
	function bag_thumbnail_plugin_save_postdata()
	{
		$fileArray = array();
		global $wpdb;
		$file = $_FILES['bag_thumbnail_photo'];
		$fileName = $_FILES['bag_thumbnail_photo']['name'];
		$basename = '';
		if(!empty($fileName))
		{
			if(isAllowedExtension($_FILES['bag_thumbnail_photo']['name']))
			{
				$postID = $_POST['post_ID'];
				# Do uploading here
				$basename = basename( $_FILES['bag_thumbnail_photo']['name']);
				$basename = str_replace(' ', '_', $basename);
				$basename = str_replace('-', '_', $basename);
				$basename = strtolower($basename);
				$basename = $_POST['post_ID'] . '_' . $basename;
				$target_path = '../bag_thumb/';
				$target_path = $target_path . $basename; 
				$sqlQuery = "DELETE FROM " . $wpdb->prefix . "bag_thumb WHERE post_id=$postID;";
				$wpdb->query($sqlQuery);
				move_uploaded_file($_FILES['bag_thumbnail_photo']['tmp_name'], $target_path);
				// adding record in the database
				$sqlQuery = "INSERT INTO " .
				$wpdb->prefix . "bag_thumb(post_id, image_name)
				VALUES($postID, '$basename')";
				$wpdb->query($sqlQuery);
			}
		}
	}
	function isAllowedExtension($fileName)
	{
		$allowedExtensions = array("png", "gif", "jpg", 'jpeg');
		return in_array(end(explode(".", $fileName)), $allowedExtensions);
	}
	// This starts whenever the plugin is loaded
	add_action("plugins_loaded", "init_bag_review_thumb_widget");
	// Hook things in, late enough so that add_meta_box() is defined
	if (is_admin())
	{
		/* Use the admin_menu action to define the custom boxes */
		add_action('admin_menu', 'add_bag_photo_box');
	}
	/* Use the save_post action to do something with the data entered */
	add_action('save_post', 'bag_thumbnail_plugin_save_postdata');
?>

Please notice that I dynamically delete any unnecessary file using the PHP’s unlink() function.

Step Three: get your image name from the database

I have placed the following code in my functions.php file.

<?php
	if(!function_exists('getBagThumbName'))
	{
		function getBagThumbName($postID)
		{
			global $wpdb;
			$sqlQuery = 'SELECT image_name FROM ' . $wpdb->prefix . 'bag_thumb WHERE post_id=' . $postID . ';';
			$fileName = $wpdb->get_var($sqlQuery);
			$fileName = trim($fileName);
			$fileURL = get_option('siteurl') . '/bag_thumb/' . $fileName;
			if(!empty($fileName))
			{
				return $fileURL;
			}
			else

			{
				return (get_option('siteurl') . '/bag_thumb/no_thumb.jpg');
			}
		}
	}
?>

Step Four: Link with the index.php or single.php or wherever you want

See how I placed the thumbnail image source in the code of index.php and single.php file.

	<div id="singlePostAdRight">
		<a href="#postContentAnchor"><img src="<?php
		global $post;
		echo getBagThumbName($post->ID); ?>" class="singlePostThumb" border="0" /></a>
	</div>

Step Five: Test

Now you need to test and we are done!

You can also download my little plugin if you want from here:
http://www.tanzilo.com/demo/code/bag-thumb/bag-thumb.zip

Thank you for reading.

posted under PHP, Wordpress | 26 Comments »

WordPress: display posts by category ID. Solution with code & example.

January6

Hello Guy!

Often in many blogging sites, you will see two or three columns of the most important categories. Recently I had to do this for a blog. It was a little bit cumbersome and time consuming. So, I would like to share the solution so that you can kill the time waste trying yourself in case you do not know how to do it. In this solution, I show 5 posts at maximum from my chosen three categories.

OK.
Let us start and let me show how to do it.

Step One: See the sample what would be the output

In the above image, you will notice that the first category has enough posts, so it can fetch 5 (five) posts for us. But in second column and third column, there are only three posts because those categories do not have more than three posts. And what I want to say at this point is – although we will try to get 5 posts from each category, we will not get enough in case that category has less than 5 (five) posts and this is done automatically.

Step Two: Adding custom function

<?php
	if(!function_exists('postListByCategory'))
	{
		function categoryNameByCategoryID($categoryID = 0)
		{
			global $wpdb;
			$sqlQuery = 'SELECT name FROM ' . $wpdb->prefix . "terms WHERE term_id=$categoryID";
			return $wpdb->get_var($sqlQuery);
		}
	}
	if(!function_exists('postListByCategory'))
	{
		function postListByCategoryID($categoryID = 0)
		{
			$outputString = '';
			query_posts('orderby=name&amp;order=asc&amp;cat=' . $categoryID . '&amp;showposts=5');
			$outputString .= '<ul>' . chr(10);
			while (have_posts()) : the_post();
				$permaLink = get_permalink();
				$permaLink = trim($permaLink);
				if(!empty($permaLink))
				{
					$outputString .= '<li>' . chr(10);
					$outputString .= '<a href="' . get_permalink() . '">' . get_the_title($post->ID) . '</a><br />' . chr(10);
					$outputString .= '<small>' . get_the_time('D M jS Y') .'</small>' . chr(10);
					$outputString .= '</li>' . chr(10);
				}
			endwhile;
			$outputString .= '</ul>' . chr(10);
			return $outputString;
		}
	}
?>

Now open the functions.php file inside your theme directory and insert these two functions. If there is none, create a functions.php file. And at this point, please remember that all the functions and coding in this file are automatically added during the code execution.

Note that the function names are self descriptive.

Step Three: Embed code in your file(s)

Now open your footer.php file or any other file and add this code. In 99% cases, you may need to customize this small piece of code. The first three lines are category IDs.

<?php
	$firstColumnCategoryID  = 1;
	$secondColumnCategoryID = 30;
	$thirdColumnCategoryID  = 31;
?>
	<div id="bottomThreeColumns">
		<div id="bottomColumn">
			<div id="bottomColumnTop">&nbsp;<?php echo categoryNameByCategoryID($firstColumnCategoryID); ?></div>
			<?php echo postListByCategoryID($firstColumnCategoryID); ?>
		</div>
		<div id="bottomColumn">
			<div id="bottomColumnTop">&nbsp;<?php echo categoryNameByCategoryID($secondColumnCategoryID); ?></div>
				<?php echo postListByCategoryID($secondColumnCategoryID); ?>
		</div>
		<div id="bottomColumnThird">
			<div id="bottomColumnTop">&nbsp;<?php echo categoryNameByCategoryID($thirdColumnCategoryID); ?></div>
			<?php echo postListByCategoryID($thirdColumnCategoryID); ?>
		</div>
	</div>

Step Four: Link your CSS code

#bottomThreeColumns
{
	width:940px; min-height:100px; margin:0 auto; clear:both;
}
#bottomThreeColumns UL
{
	margin:0px 0px 30px 0px; padding:0px;
}
#bottomThreeColumns LI
{
	list-style:none; border-bottom:#EEEEEE solid 1px; margin:7px 0px 0px 4px;
}
#bottomThreeColumns LI A
{
	text-decoration:none; color:#000000;
}
#bottomThreeColumns LI A:hover
{
	text-decoration:underline;
}
#bottomThreeColumns SMALL
{
	font-style:italic; line-height:25px; padding:0px 0px 0px 4px;
}
#bottomColumn
{
	float:left; width:300px; margin:20px 20px 0px 0px;
}
#bottomColumnThird
{
	float:left; width:300px; margin:20px 0px 0px 0px;
}
#bottomColumnTop
{
	width:300px; height:26px; background:#5FB8EB; color:#FFFFFF;
	line-height:25px; font-weight:bold;
}

I have put the above CSS code in my style.css file. In 99% cases, you may need to customize according to your requirements.

Step Five: Test everything by opening the link

Now test you code and we are done!

Thank you for reading.

posted under PHP, Wordpress | 8 Comments »