Dynamic CSS Buttons

I was searching for buttons the other day that I could use for a project. I wanted something flexible, something that could easily be customized for any project. The buttons have to be dynamic and they need to be generated fairly quickly.

This means no buttons that contain text images, no buttons that contain color images. The text needs to be supplied from the source (HTML) as well as the background color from CSS.

This dynamic button needs to be generated on fly, with the flexibility to use it multiple times within a page or the whole website. This sounds like a tall order to me.

Enter a tutorial by Soh Tanaka, a web designer from Los Angeles that I found while searching online. He wrote “Liquid & Color Adjustable CSS Buttons.” The tutorial is actually quite good. He shares how a button can be quickly generated using the supplied anchor text and as well any CSS background color.

A couple of examples.

I love the buttons,  but I found a couple of issues. The buttons doesn’t really work as a Submit button. You’re going to have to use Javascript to send your form if you use this example. The other issues is you can’t really resize the button, since it’s constrained to single supplied image that’s generated for every button.

These buttons are definitely useful tools for creating sites, but it does have its limitations. One more thing, I want to try if this works with HTML4’s button tag as opposed to just using the input tag.

Password and Text Boxes Are Not Of Equal Length

Why is the password field smaller than the input field in Internet Explorer 8? It’s the same in previous versions of the browser? I was recently working on a project that required authentication. I styled the login page. Everything looked wonderful. Perfect as a matter of fact, until I opened IE8. Wicked ugly. My main gripe really is, why is the password field smaller than the input fields?

I did a quick search online and found a solution.

You can style the input field to a certain width, like in this example.

input { width:12em; }

I’m using em instead px, because it’s probably more accurate.

But, styling the input field, like the one above, will make changes to every input field on the site. So, the quick and dirty way to style a login page, is to use inline CSS. In this example, we will use two input fields of text and passwords with inline styling.

<form>
<input type=’text’ name=’username’ style=’width:12em’ />
<input type=’password’ name=’password’ style=’width:12em’ />
</form>

So, there you have it. A quick and dirty solution to the uneven password and text input fields in Internet Explorer 8. If you have any other solutions, please let me know. I’ll be happy to hear about it.

Switching Back To Yahoo Mail Classic

What’s wrong with Yahoo Mail? I’m talking about the New Yahoo Mail, that’s about two years old. Here’s the problem. Occasionally, when I try to open email, all I see is a blank page. I tried refreshing the page, closing the tabs, restarting the browser, but still the same results.

I thought it was just my computer, until I borrowed a friend’s laptop to check email. The same thing. Blank messages. It doesn’t happen all the time. Just a few messages here and there, but it’s enough to drive me nuts. So, I decided to switch back to Yahoo Mail Classic.

The Yahoo Mail Classic user interface instantly brought back memories. It works and that’s all I expect from an email service.

Add Google Maps To Your Posts

They say a picture is worth a thousand words. Adding a static map to your posts can make a world of difference. Your posts not only look good, but are informative and effective as well. Whether you are giving out directions or simply just showing off where in the world you were at one point, you can add great value and effectiveness to your posts. The good news is, adding Google Maps is not so difficult.

The Google Static Maps API

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. I will breakdown the URL piece by piece and explain.

The URL

http://maps.google.com/maps/api/staticmap?<em>parameters</em>

Required Parameters: Center, zoom, size and sensor. Examples.

center=101+Market+Street+San+Francisco  (enter address or latitude, longitude)
zoom=14 (from levels 1 to 20)
size=480x300 (map size in pixels)
sensor=false (use default 'false' unless using GPS locator)

Optional Parameters

Maptype: Roadmap, Satellite, Terrain or Hybrid.
Marker: See below.
Paths: See below.

Putting It All Together

We can string it all together using ampersand (&).

This URL:

http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&amp;zoom=14&amp;zoom=14&amp;size=480x300&amp;maptype=roadmap&amp;sensor=false

Produces this:
San Francisco

Finally, to add an image to your post, just add an HTML img tag. Example:

<img src=”http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&zoom=14&zoom=14&size=480×300&maptype=roadmap&sensor=false” 
alt=”San Francisco” />

There are other options that can be added such as Markers and Paths, but are a bit more involved. You can check out the rest from the Google Static API V2 Developer Guide.

Display Latest Twitter Status On Your Blog

Here’s a short little script that will display the latest Twitter status on your blog. I pulled the code from CSS-Tricks and modified it a bit. This little piece of code will pull-up the user’s latest Twitter status, time and source. You can also pull up the user’s name, screen name, location, url, followers, friends, favorites and more.

Here’s the snippet of code:

<?php
function getTwitterStatus($userid) {
  $url = “http://twitter.com/statuses/user_timeline/$userid.xml?count=1?;
  $xml = simplexml_load_file($url) or die(“could not connect”);
 
  foreach($xml->status as $status){
    echo $status->text;
    echo $status->created_at;
    echo $status->source;
    echo $status->user->name;
    echo date(“F j, Y, g:i a”,strtotime($status->user->created_at));
    echo $status->user->statuses_count;
    echo $status->user->followers_count;
    echo $status->user->friends_count;
    echo $status->user->favourites_count;
    echo $status->user->location;
    echo $status->user->time_zone;
    echo $status->user->url;
  }
}
?>

You can format the output anyway you want it. For readability purposes, I formatted the $status->user->created_at field with the date function. All the other variables are pretty much self-explanatory.

Add the function in ‘functions.php,’ then insert this code anywhere in your WordPress template.

getTwitterStatus("user");

Short URLs Lead To Dead Ends

What happens when you click on a failed short URL? You can’t go anywhere. You are stuck on an island. You can’t browse the main index page since the domain you are given is the domain of the URL shortener service. One way of finding the true URL is to check if the URL short service has a lookup function.

If it doesn’t, you’re pretty much dead on the water. That’s dilemma for short URLs. It works great when it does, but if it doesn’t, it’s useless. One more thing, clicking on a shortened URL sometimes requires a leap of faith since you don’t know what page you’ll be landing. This is especially troublesome for pages that contain malware and viruses.

If you are giving out short URLs, it always good practice to check if the short URL works. If you don’t trust other services, you can always start your own.

Create A WordPress Page With An External Link

I stumbled on a really neat trick of creating a WordPress Page that points to an external link. Big deal! Well, it’s a big deal because I didn’t think it was going to work at all, but apparently it does. Here are some background information about WordPress Pages. A WordPress Page is a basically blog post that resides outside of the chronological order of posts. Examples of WordPress Pages are the About, Archives and Contact Pages. These Pages are usually displayed on the sidebars of countless WordPress themes. They also appear at the header of some WordPress themes as the main navigation bar.

What if you want to create a link that will point to an external link.

Here’s the trick. Create a blank WordPress Page by accessing the Dashboard > Pages > Add New. Place in the title bar the following format.

<a href=”your-external-link-here”>Your Title</a>

It’s an odd looking title to have the HTML codes included in them. Normally, HTML codes in the title bar are suppressed or are removed, but apparently it works with the current WordPress release. That’s all you have to do. Even if you add text to the Page, you will not see the Page at all because it redirects to an external link. Sort of like a hijacked page. It’s a neat trick. Works great. I use it with my Twitter Page link. See the sidebar.

You can do the same if you want to point to an internal link in the same domain. Just edit the Page’s permalink to point to your internal link.

Google Font API

I had a little fun this morning playing around with Google Font API. With just a couple of quick codes on your webpage, blog or website, you can really style your sites using over a dozen beautiful fonts available from the Google Font Directory. The usage is pretty straightforward. See sample below. Just add a stylesheet reference in your header. Add some CSS elements in your stylesheets. Tada. Your done. Your website is now using Google’s web fonts. The advantage is you get a choice of high quality open source fonts, it works in most browsers, and it’s extremely easy to use.

Header

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

Stylesheet

body { font-family: ‘Tangerine’, serif; }

If you want a little bit more control, flexibility and speed, you can use Font Loader. It’s a little bit more involved. It requires the use of Javascipt. You can also take advantage of TypeKit.

Create A Website Based On One Color

Are you thinking of creating a website based on one color? One cool tool you can use is a Color Palette. This particular tool will create for you 10 shades of the base color with varying degrees of opacity. The top row emulates opacity over a white background, while the bottom emulates opacity over black background.

The opacity values are 100% opaque, 75%, 50%, 25% and 10% on the top row. The bottom row begins at 85% rather than 100% and continues on as the first. To make it more interesting, you can use different colors other than a white and black backgrounds. I use the color #365215 for this blog. Here is the varying shades of colors using this tool.

Create Your Own WordPress Breadcrumbs

Breadcrumbs in web terms are a chain of links that leads the user back to the main index page. This article will teach you how to manually create your own breadcrumbs within WordPress. You will place these codes in your WordPress themes just underneath your header, for example.

Create a Home

Let’s get started. Let’s create a home. Use this HTML and PHP code.

<a href=”<?php bloginfo(‘url’);?>”>Home</a>

Double Angle Quotation Marks

Let’s use a Guillemet or a Double Angle Quotation Mark to separate the links.

The symbol » equals to “&raquo;” in HTML.

Post and Page Titles

Let’s display the titles. The code for both post and page titles are the same.

<a href=”<?php echo get_permalink() ?>”><?php the_title(); ?></a>

All Together Now

<a href=”<?php bloginfo(‘url’);?>”>Home</a> &raquo; <a href=”<?php echo get_permalink() ?>”><?php the_title(); ?></a>

The Result

Home » Create Your Own WordPress Breadcrumbs

Just place this piece of code in your WordPress theme files: e.g. pages.php and single.php. For the main index.php page, you just need the Home link.

That’s it. Fairly easy.

You can get really elaborate by adding Categories, Months and Dates in your breadcrumb. Nevertheless, this article will get you started in the right direction.