Extreme Makeover with ArtText and CSSEdit

Monday, May 25, 2009 | How To

Coming home to the Mac presented me with a couple of issues regarding PixoBebo. A fresh start means a really fresh start, so out with my favorite color lavender, and in with a muted earth tone and some colorful flowerage. How does a Mac user get a complete web site makeover? What are the best tools to use? Fortunately, my sordid affair with Windows did not diminish my ability to use my Mac.

Twin Tools

In my absence, my friend and former Mac360 workmate, Ron, maintained my site but agreed with me that a makeover was long over due.

The caveat? I would be in charge of the makeover. The content would remain intact, and all that would be required is to change the site’s logo and the CSS.

The tools I chose to make the change from lavender to earthy were ArtText and CSSEdit. If you do graphics and web page development on a Mac, you’ll enjoy using both applications.

Color Scheme

Neither ArtText or CSSEdit will help much with a color scheme so I scoured the web for inspiration.

I came upon Leandro Vieira’s jQuery lightBox plugin site. The earthy background color was perfect, and the green offset colors were unique.

For the logo I decided to go simple and chose a flowery scheme using ArtText and their built-in symbols and graphic images. The logo and color scheme took less than an hour to develop.

Layout & Features

Ron was busy working on an archive and search function for PixoBebo while I was given the task of making the site look pretty. And different.

The original PixoBebo layout was three columns, and mostly lavender. Some say, purple. Whatever. Using CSSEdit I could change the layout of the site without changing the original code.

That’s the beauty of CSSEdit.

This handy editor uses WebKit, the same engine used in Safari, to display web pages, live on the internet. CSSEdit then downloads the site’s CSS file, which you can edit and view the changes immediately in the built-in browser window.

How cool is that? So, I managed to change the layout, change the background color, add a new logo, modify the color scheme, and all without changing any of the original site until I was ready.

Old Is New Again

Changing and tweaking the CSS files took longer than I expected since we had to make a few layout changes to accommodate the new Archive link and the Search links.

How much longer? All freakin’ day longer.

CSSEdit allows for one bad habit. Constant non-destructive tweaks. It’s endless. Notice the multiple hues of brown for the background, header, footer, and navigation bar.

Just the right mixture of green, more green, different green, and a little splash of lavender (purple) took hours to select.

In the end, PixoBebo looks better; fresher, more inviting, less ominous, friendlier and easier to navigate, yet with more features than the previous version.

What Up, Sister?

The end result is a leaner, cleaner platform for Mac software reviews, news and commentary on all things digital in my Mac life.

And, yes, it’s a Mac life once again. I’m at home on my old MacBook Pro, relinquished by my love, Wil. A new 24-inch iMac is waiting for me at the Apple temple on 5th Avenue.

Life is good. Now it’s time to write about what’s new.