Adding rollover images to WordPress menu

WordPress menus make it very easy to add navigation to your WordPress pages. You can have multiple menus on the same page. Although images for WordPress menus are not very SEO friendly and make it difficult to edit menu items, there are times when you would like to add background images to the menu. If you wish to use a specific font which is not rendered by the web, images are the best option.

To create a menu in wordpress, use <!--?php  wp_nav_menu( $args ); ?-->. For more information, see the WordPress codex on menus

Once you register the menus, you can see them on the wp-admin panel under Appearance->menus. Then add the pages you want on your navigation. Continue reading

US Flag – Using Canvas Tag

The canvas tag is a new HTML tag which is used to draw graphics using JavaScript. You can learn more about the canvas tag and its basic usage here. Since it is a relatively new tag, it does not render in all the browsers. For those browsers which do not support the canvas tag,  you would need a fallback image or code inside the canvas tag.

Here is the code to draw the US flag using the canvas tag mostly following the specs for the flag. See the final image.

Open an editor and create a new HTML5 document. You can copy the following code and save it as canvas_demo.html.

Continue reading

Aligning check boxes vertically in IE using CSS

I just finished working on a project and while I was in the final testing phase, I realized that there were some check boxes in a form that were not displaying correctly in IE. I found a few answers on Google but, these did not fit to my CSS styling properties and I needed a quick fix without redoing a bunch of CSS.

So, I came up with a simple solution of adding a class to the check boxes.

Here is the my form. Just a list of the days of the week. I need them to display one below the other.

<form id=”stylized” name=”email_reminders” method=”post”>
<label for=”repeat_sunday”>Repeat:</label>
<input type=”checkbox” name=”repeat_sunday” value=”1″ />Sunday<br />

<label for=”repeat_monday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_monday” value=”2″ />Monday<br />

<label for=”repeat_tuesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_tuesday” value=”3″ />Tuesday<br />

<label for=”repeat_wednesday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_wednesday” value=”4″ />Wednesday<br />

<label for=”repeat_thursday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_thursday” value=”5″ />Thursday<br />

<label for=”repeat_friday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_friday” value=”6″  />Friday<br />

<label for=”repeat_saturday”>&nbsp;</label>
<input type=”checkbox” name=”repeat_saturday” value=”7″ />Saturday<br />

</form>

 

Continue reading

Skype Extension for Firefox troublesome

I was working on a simple PHP form that would take in a phone number and other fields and add it to the database and eventually display it on the screen. As I was testing this form, I noticed that the phone number was getting added to the database but was not showing up on the screen. It seemed very weird. I could not see the phone number in PHPMyAdmin either. It showed up when I wanted to edit a record.

To make sure I did not have an error in my PHP code, I created a simple test.html with the following code in it:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Phone Test</title>
</head>

<body>
Phone Number: 123-234-3456
<br />
Another Phone Number: 980-989-9989
</body>
</html>

The first phone number did not show up but the second one was fine. If I replaced the dashes in the phone number with spaces, Continue reading

Displaying a static front page for your wordpress blog

Word press is one of the most popular content management systems out there. It is not only great for blogging, but also works really well for your portfolio. It can be easily tweaked and customized. There are a lot of free word press themes available for portfolio sites. If you are a web designer, you would definitely want to design one for yourself. Designing a word press theme and coding it up is very easy. (Check back for a tutorial on this).

Word press makes it very easy to maintain your site. Displaying your portfolio is a breeze with its many plugins.

Once you install word press and upload your theme, you need to change your settings to convert your site into a portfolio site. You can also have a blog as a part of your portfolio.

The first step would be to create all your pages by going to ‘Pages > Add New’.

If you wish to have your blogs displayed on the front page, Continue reading