Archive for the Web Design Category

In case you didn’t know, let me be the one to tell you. The Official Wordpress Themes Directory is back live again and updated with all new free themes for your wordpress “crazies” like me. No more searching those random affiliate ad heavy websites for new themes. The official theme directory for Wordpress should be pretty well updated with everything from here on.

Tip: RSS Subscribe to the Newest Themes

A simple little tip that will help you stay up to date on all the latest new themes that come in through the directory. When you go to the themes directory, click on the “Newest Themes” link located on the right hand side of the page. You will notice now you have an option to subscribe to this page via RSS. That way, you can see all the new themes right as they are coming in and stay ahead of everyone else on the goods!

Contribute Through Voting

Help the community know which themes are the best by using the 5 star voting system and voting each theme you come across. This will help everyone as a Wordpress community sift through the bad and the good. This will only take you not even a second as you are browsing the different themes, so just do it and help the rest of us out!

Many of you i’m sure are accustomed to dealing with many of the open source ecommerce/shopping cart applications and might understand what i’m about to explain to you. It’s so hard to find any good free templates/themes for any of these ecommerce applications. Most of them, especially OScommerce and Zen Cart are absolutely hideous looking right out of the box.

Free Ecommerce Theme from CSS Creme

CSS creme has put together a free CSS ecommerce template that looks pretty nice. It’s simple and coded together well so that you can customize it and use your imagination on top of what is already put together. If you are using an open source application like me, you will need to apply this template to your theme and make your customizations. But I know with me that this will save me some serious time on a few projects of mine.

Instead of recreating the wheel everytime I make a shopping cart website, I can build off an already CSS/XHTML built template and make my customizations after that. The free template comes with 3 pages:

  • Product Listing Template
  • Product Detail Template
  • Form Template (contact us)

That way you have enough to build off of with your Zen Cart theme or OScommerce theme or even Ubercart theme. This also could be a benefit if you are just putting together a quick shopping cart for a friend or relative for free, and you don’t have much time to put something elaborate together. Just throw this CSS template together with your theme and you are good to go.

Have you been to Barack Obama’s website and seen the cool slideshow that he has on his home page? There is actually a splash page that you have to go through first, before you get to the home page. But then you will see it. It looks like this:

Have a Slideshow on your site just like Barack’s!

Well guess what. Thanks to our friend Guillermo Rauch over at devthought.com, you can now have the same slideshow for free! Guillermo has put together a script in Mootools using a bunch of CSS to give you the same type of look and feel and cool slideshow effects that Barack has on his website. The script is fantastic looking and very lightweight so it doesn’t slow loading time up too much. See the Demo Here.

The Creation

Here is a little bit more of an explanation of the slideshow. “I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)

The Code

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used. The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.

The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly. You can download the files for this slideshow at Guillermo’s Blog at devthought.com

Slideshow 2 is an open source Mootools slideshow class for streaming and animating the presentation of images. It’s definitely one of the better looking slideshow’s out there. A very impressive look is given to your images in a much more professional manner. Here’s a screenshot of what it looks like (without mootools of course)

You can choose from a variety of different effects of course which gives you some good flexibility on how you want it to end up looking. The cool thing is that you can input your slideshow via HTML with one simple line of code. The example they give is this:

new Slideshow('show', ['1.jpg', '2.jpg', '3.jpg'], { controller: true, hu: ‘images/’ });

Here are the features as listed in the blog article that featured this tool from webresourcesdepot.com:

  • Dynamic resizing - Slideshow can accommodate any size presentation.
  • Thumbnails - intelligent, auto-scrolling, tracking, etc.
  • Full-featured controller - completely style-able with CSS.
  • Animated captions - plain text or formatted with HTML.
  • Fully accessible - Slideshow can be controlled with access keys.
  • Automagic slideshows - create slideshows from existing HTML images.
  • Varied hyperlinking options - allows for mashups with Lightbox, Slimbox, etc.
  • CSS slide transitions - designed in stylesheets, not javascript,
    allow for an infinite combination of effects (plus support for all
    Robert Penner transitions)
    .
  • Unobtrusive and degradable - Slideshow even functions with Javascript turned off!

So if you are looking for a cool javascript slideshow to add some spice to your website then try this one out. There is some good documentation to help you along the way in customizing it to fit your needs. Enjoy!

Oh boy have I been looking for something like this for a long long time! And I am just thrilled that it is Open Source! The Open Source world delivers again. This time with a flash Product Color Changer. Click on the link to see a demo of what it actually does. Basically this tool enables you to present the color variations of your product in simple and nifty way.

An Ecommerce Solution like None Other
I can’t tell you how many people over the years have asked me to build them functionality inn their ecommerce store similar to Nike and their shoe store. I’m not sure if they still have it, but in the past Nike would allow you to customize your shoe by color and a few other things. A very neat function that helps give the customer a better ability to “Shop” on your shopping cart website.

Below is just a screenshot of what this script does. Oh by the way, the script uses XML so that you can easily embed it into any CMS or Ecommerce solution.



Download the Open Source Product Color Changer!

A new plugin is out called the iWPhone Wordpress Plugin and Theme. The plugin automatically reformats your blog’s content for optimized viewing on the Apple iPhone and iPod touch. It detects the iPhone/iPod touch’s User Agent and serves up the content
with the special theme only to iPhone and iPod touch visitors, all
other browsers will view your WordPress blog with your current theme.

The “iWPhone WordPress Plugin and Theme” displays an optimized version
of your blog’s content, formatted perfectly to fit the iPhone/iPod
touch’s screen - no zooming in to read the content is necessary.

Demo Sites
If you have an iPhone or iTouch you can point your browswer to http://www.grokdotcom.com/ or to http://www.bazaarblog.com/ to see the live plugin in action.

Feature List

  • Formats your blog content for optimized viewing on the iPhone and iPod touch.
  • Automatically detects the iPhone/iPod touch’s Safari browser and
    only displays the custom theme to iPhone and iPod touch visitors, other
    visitors get your standard theme.
  • Simple iPhone/iPod-like theme with common interface elements that compliments the iPhone/iPod touch’s internal applications.
  • Images larger then 300 pixels wide are automatically scaled down to fit the iPhone/iPod touch optimized width.

Upcoming Features/Wish List

  • A clickable link or button that allows site visitors to switch between iPhone/iPod touch theme and normal site theme.
  • Ability to show Categories and Pages
  • Search functionality
  • An admin configuration screen that allows easy changing of various settings like header, footer and link colors.
  • A mechanism to gracefully remove/hide all content-types not
    currently supported on the iPhone/iPod touch (flash embeds and other
    non-supported formats/plugins)
  • An admin version (wp-admin) that allows WordPress administration and posting within the iWPhone interface
  • wp-cache compatibility

Tip for Designers & Developers - iPhoney
iPhoney is a free program that allows you as a designer or developer to see your work you are creating for the iPhone without actually needing an iPhone. Check out the website here… http://www.marketcircle.com/iphoney/