Firefox also champions the use of future CSS, which are CSS features that will only be seen by IE users at some time in the future. Ok, I made that up, but since Internet Explorer is playing the catchup game, I think it’s only fitting to point out an example.

Looking at some CSS basics…we have a way to draw a box around some content. It’s called the border property. The top, left, right and bottom sides of the box can be assigned diferent values for the width, style and color. Each of these values can be assigned separately or all at once.

Separately:

All together, in the order width, style, color:

If you want to have different widths, styles or colors for your box, then you’ll have to use the properties that target each side, like so:

That’s nice, but sometimes we really don’t want the square boxy look. Rounded corners are nice, aren’t they? Well, our Firefox users can see rounded corners for the same box that we’ve built for our menu. All we have to do is add one property to the menu, called the -moz-border-radius, and specify its size. IE simply ignores this property, so those boxes will show pointed corners.

.roundedbox {
-moz-border-radius:10px;
}

The 10 pixel radius is the size of the rounded corner. We probably want to add a little padding to the menu box so the content isn’t smashed against the border, so we’ll set that at 10 px, too.

Here’s a menu box that will show rounded corners in Firefox/Mozilla browsers:

There are ways to get the rounded corner look in IE browsers, but it’s a bit more work. For now, we’ll continue to use the -moz-border-radius property in appreciation of our Firefox users.

I considered writing my own php script where I would have separate pull-down boxes for the day, month and year to assure that there was no mistake as to the actual dates. That would take a little extra format massaging to create the date in MySQL format, so I looked for scripts that others had already written. Who wouldn’t?

Formatting dates can drive a person crazy. Does ’06-08-2000′ mean June 8th or the 6th of August? Writing for the Web should be universal. The month-day format that we tend to use in the U.S. is confusing to everybody else who uses the day-month format, and vice-versa.

Writing by hand I like to use this format ’12-Mar-2000′ so there is no ambiguity, but that format needs to be converted to ‘YYYY-MM-DD’ format when sending dates to MySQL.

So, what are my requirements for such a Date-Picker Script?

• easy, intuitive for the user
• easy for me with output in MySQL format (YYYY-MM-DD)
• unrestricted license would be nice

I tried a few different date picker scripts and decided upon SpiffyCalendar because it’s the most advanced, yet easily modified to suit my purposes. Also, there is an established support system via a Yahoo! user group. That’s really nice, and unexpected.

Here’s the scripts I tried and the pros and cons for each…most weren’t as user-friendly as SpiffyCalendar.

PHP Calendar

PROS
• I like the look of this calendar, but it’s difficult to determine how to modify the calendar other than for css of calendar appearance.
• Date output is already in MySQL format: YYYY-MM-DD

CONS
• Can’t select year from calendar unless you click back or forward to the actual month.
• Ugly and excessively long query strings in links.

DatePick

PROS
• I like the little calendar icon.

CONS
• Can’t select year from calendar unless you click back or forward to the actual month.
• Timestamp is included. Don’t need it.
• Relies on javascript and pop-up window to select date.
• Calendar doesn’t update well when moving from month to month. Part of the calendar doesn’t get loaded in so all days are not selectable. Have to manually widen window to see all days.
• Can’t select year directly, have to click through months to get to next year.
• No directions on how to modify output.

DateTimePick

PROS
• I like the little calendar icon.
• Can modify output via provided directions.

CONS
• Can’t select year from calendar unless you click back or forward to the actual month.
• Relies on javascript and pop-up window to select date.
• Calendar doesn’t update well when moving from month to month. Part of the calendar doesn’t get loaded in so all days are not selectable. Have to manually widen window to see all days.
• Can select year directly, but calendar doesn’t update well.

SpiffyCalendar

Sign up to the Yahoo! Group to download the script. Script used to be offered at the now defunct GeoCities. The above link is the first place I found it posted afterwards.

PROS
• Calendar pops into page, not a separate window.
• Can modify output via provided directions.
• Can get help at Yahoo! Groups.
• Unrestricted license.
• Can refresh page containing calendars as link is not modified after picking a date or two.
• Highlights holidays, although will have to remove Dec 1st developer’s birthday. (OK, modified holiday array in script on lines 86-87.)

CONS
• Format of date will have to be modified for MySQL. (OK, Added "cal1.dateFormat="yyyy-MM-dd"; after instantiation in header for calendar named ‘cal1′.)
• Relies on javascript.
• Had to modify the images folder location in the .js file to an absolute address, although things worked fine on my local server with a relative address.

I’m sure there are plenty of these date-picker scripts floating around the Web. Do you have a different one to share with us? Leave a comment!

Once installed, Colorzilla resides down in the left, bottom corner of Firefox. You’ll see a little eye dropper icon. Click the eyedropper and the mouse pointer changes to a cross hair. Hover over any spot on the page and the RGB and #hex values are noted at the bottom of your browser. Click again and the color values are stored temporarily until you click on the eyedropper again.

If you leave the current tab and come back you’ll note that the color values have disappeared from the bottom bar, but they’re not really gone. Right-click the eyedropper and you’ll be presented with a menu of choices.

Right-click menu for ColorZilla Firefox browser extension.

Have fun exploring all the features of ColorZilla, but take note that the details of the last color picked are ready for you to copy in your favorite format.

The Options menu has a hidden feature that you might want to check out:

ColorZilla Firefox browser extension options menu.

Right-click on the eyedropper, click on Options, then click on Statusbar Format…. Here, you can modify the information that you see in the bottom bar of the Firefox browser when you activate ColorZilla.

ColorZilla menu for statusbar formatting.

Now, along with color values, you can “see” elements of a webpage, their paths, URLs and distances to other page elements.

A great feature that I must point out is the Webpage DOM Color Analyzer that you can reach from the Options menu. Visit a page where you like the color scheme, right-click the eyedropper and choose the Webpage DOM Color Analyzer…. A window at the bottom of the screen will show the main colors of the page, but not from the images on the page. Clicking on any of the colors in the palette will show you the css rules that are using that color.

ColorZillla – what a neat way to explore a page and all its colors!

Don’t have a site yet? Post your widgets to iGoogle, a Google “homepage” that you can modify as you see fit. Click on the iGoogle link at the the top right of www.google.com and you’ll see a version of google that you can modify to your liking by arranging tabs and blocks of content.

Here’s the widget I’m talking about:

Try moving either color pointer and see the resulting color and #hex value in the top box.

On the widget’s page at widgetbox, look under Get Widget on the right side of the page. If you’re not familiar with some of the icons, just hover your mouse pointer to get a tool tip that tells you the name of the site that the icon represents. Click on “more…” to see other icons. Here, you can also choose your language and modify your widget, if possible. Code is available for WordPress blogs – just look for the big W in the icon list.

To post the widget at iGoogle, click on the big G icon. A small window pops up that directs you to click on the “Add Widget” button to open the iGoogle installer. When the installer page opens click on the “Add to Google” button. Your new iGoogle page opens with the new widget displayed. Drag and drop the widget into the place you prefer and make sure to sign in to Google to save your page.

Same thing with WordPress. Add your favorite widget to a post or put it in your sidebar.

The only catch here is to grab the right code. If you take the code from one of the icons presented, the widget will be in its default state. Should you modify or customize your widget – like I did with Farbtastic by changing the language to English and enlarging the widget to 300 x 300 px – make sure to click on the small “Get Widget” button that has a little checkmark – it’s right below the customize part of the Get Widget section. Post your customized widget and make sure it’s what you want before you finish up with widgetbox.

Click the Random button to see randomly chosen color schemes or input your own RGB or Hex value to start the color selection.

Copy the screen to save an image of the color scheme containing nine colors and their hex values.

But you don’t really need to download the software to pick up the color schemes that you like. Just hover your mouse pointer over the color blocks in your favorite color scheme and write down the #hex code from the tool tip. Now you’re all set to use your favorite new colors!

Better yet, sign up for a free account on ColorSchemer. For parting with an email address you’ll be able to build a personalized Favorite Schemes list. Once you sign up, go to the Scheme Gallery and browse to a scheme you like. You’ll see who made the scheme, the number of times its been downloaded, the scheme’s rating out of 5 stars (and how many people rated it), and a link called “Add Fav”. Click on Add Fav to put the scheme you like into your Favorite Schemes.

My Favorite Schemes will show what you have saved so far. What a nice service to allow us to collect these color schemes and save them for later.

Bookmark ColorSchemer!

Don’t miss the fantastic post on 140 Named Colors!

The first site I looked at for color schemes was ColourLovers and I came away duly impressed.

Colors, palettes and patterns can be viewed endlessly. Over 230,000 patterns and over half-a-million color palettes await your scores and comments.

The color community is thriving here with an active forum and lots of colors, patterns and palettes for free downloading.

Once you register with the site – it’s free – check out the palette maker. Under the Palette tab, click on Create New and start dragging colors from the color picker to the five spots just underneath Create a Palette. When you’re ready you can fill in some details for your final palette and add it to the community.

Colors are identified with their RGB and #hex equivalents, so it’s easy enough to plug those values into your css stylesheet or into The GIMP color picker when you need them.

There’s even more fun under the Patterns tab! Over a hundred patterns are ready for you to customize.

Colourlovers.com – what a wonderful site!

I have found a few tools that are extremely valuable for developing web pages. I’m sure these are very popular due to their ability of helping isolate and fix problems.

I prefer Firefox browser so these are my favorite browser add-ons and their features that I really like:

• Firebug – view divs onscreen, explore code and its output onscreen
• Web Developer Toolbar – one-click validation, resize screen to 800×600, disable cache, lots more – an army of tools
• Total Validator – validates complete with screenshots in various browsers
• ColorZilla – color picker, great view of css divs, zooms page

Care to add to my list? What do you use to help in your WordPress and web page design?

The content of the blog was untouched and it was apparently functioning as intended.

The stylesheet was resident in the theme folder and verified to contain css when I checked it using html-kit or another FTP program. I could download the stylesheet and see that everything appeared to be in there, including the commented-header required for a WordPress theme. If fact, WordPress did not report the theme as being broken – I guess it saw the file named style.css and figured the theme was kosher.

However, when viewed with any browser the unstyled output was seen. Also, validators sent to the blog could not find a stylesheet. What the ??

The really weird part of this story is that I downloaded the stylesheet and could use it on my local machine using the same version of WordPress and the stylesheet produced the desired design. Beyond that, I downloaded the entire theme, zipped it up and sent it to another WordPress fan to check out. He could see the design in all its glory on his development machine.

So, we figured it must be some server configuration that was interfering somehow. Totally vague, I know. At least the problem seemed to be isolated to the online server. I had already tried to upload a number of older versions of the stylesheet, but the style did not come back.

What I did notice, which lead me to a solution, was that in one of those validation reports another error was produced in that the favicon.ico file was reported missing. I verified that file was also resident in the theme and ok. That made two files that the validator could not find even though I could see they were indeed there.

Since the theme apparently worked fine on other systems I took the version that I had downloaded and renamed it. Then I uploaded said “new” theme to the themes directory and deleted the old theme. Exclaims of joy were now coming out of my office – it worked!

I don’t know how the stylesheet came to be corrupted, or if it even was, seeing the same problem with the favicon. The solution was to use a backup. It’s crazy that the backup in this case was the same theme that contained the corrupted file but the moral of the story is that performing backups are definitely worth the time it takes. If the files were corrupted I had backups ready to upload.

Backing up is so easy these days, especially with automated services like Mozy, it’s kinda dumb not to assure yourself that you can recover from gremlins that visit every now and then. Mozy gives you a free 2GB so get started on protecting your files today!

In my way of making things harder than necessary I stumbled upon something simple. At times nothing seems simple with CSS! Check it out.

Trying to style a particular post, based on whether it was a password-protected post or not, I found that using the category assigned could help – on the condition that one category name was reserved for the password-protected posts. Look at this piece of WordPress code:

<?php foreach((get_the_category()) as $cat)
{
echo $cat->category_nicename;
}
?>

Basically, what we are asking for here is to create an array that holds the names of the categories, and then return the nice names of each category in lowercase and with multiple words separated by hypens.

So, being able to assign category names on the fly gives us the ability to assign classes based on the category. Use the above PHP code snippet in the index.php, category.php and single.php files of your WP theme.

Remembering that we can assign more than one class to an xhtml feature, on line 5 or 6 in each of the 3 files replace

<div class="post"

with

<div id="post" class="post cat-<?php foreach((get_the_category()) as $cat)
{
echo $cat->category_nicename;
}
?>"

Now, in your stylesheet you can target classes like cat-owls, cat-hawks and cat-bald-eagles on your site about big birds.

The KISS part comes in where I was going through steps to create a page template to replace a Page that was already written so that I could style it differently than the rest of the blog. What? Instead of going through all that, all I needed to do was pick up the ID number of the “post” of that page. Duh!

How simple of me to forget that the pages, as well as the posts, that we write in WordPress are assigned ID numbers. Just use the #page-ID in your stylesheet! Oh yeah, pick up the ID numbers of posts and pages in the admin area under Manage/ Posts or Pages.