Also, if you stumbled upon this site in search of a lake tahoe web designer, check me out!

Go ahead and click here to help the children in Haiti Now!

First you have to explain what HEX codes are real quick. Pretty easy right? Six digit codes starting with the “#” sign that represent a specific color. Then you might send them to this site:

ColorPicker.com
Couldn’t be much simpler. A webpage with a color picker almost identical to what you see in Adobe Photoshop. The color you are “picking” shows up in the square to the right. Use the vertical box to browse the color spectrum, then fine tune the color tone and intensity in the large square. Finally get your six digit “hex” color code starting in the “#” symbol from the box at the top.

magento

After having used a couple different open source shopping cart solutions and feeling like they came up a little short, I decided to try Magento for a recent e-commerce enabled website. Overall, I am pretty impressed with the result. Magento has some solid development momentum behind it and they have already put lots of thought and time into their product. That said, “open source” or even commercial carts will have issues, bugs and hurdles to overcome. Here is a random list of issues and solutions I encountered during my tour of duty. Hopefully they can help you out with your own Magento experience.

Getting Started With Magento

So you’ve downloaded and installed the latest version of Magento and it’s running fine on your server. Now you want to start changing how it looks. The template system in Magento is a little different than others and is the target of some griping. First off, they have categorized the system into “stores” and then “store views” So you can run multiple stores on the same Magento installation. It’s a powerful feature, though I’m not sure how needed it is. The whole block of cheese is explained here in the designers guide. The second different thing is the files you will want to edit for your template ( Layouts, Templates and Skins files ) are stored deep in two different locations. So, browse to your local copy of Magento. In the root directory there are 2 folders to pay attention to. /app and /skin. The nuts and bolts, things like template files to change functionality and layout, localization files and layout files are stored in the /app folder. Graphical and design items such as css files and images are stored in the /skin directory. This Magento guide page explains it well.

The layout .xml files, ( /layout )  the localization files ( locale ) and the .phtml template files ( /template ) are located for the default theme in

/app/design/frontend/default/default/

The design related files like .css, .js and images are in

/skin/frontend/default/default/

YES, it’s a pain to navigate between these directories, especially via FTP, but after a while you won’t even have to think about it.

I wanted to try out a fresher theme than the default. The “Modern” theme is provided free at Magentocommerce.com. But nooo, you can’t simply download and install the theme. You are forced to use the “easy” download system built into Magento called “Magento Connect”. Found in the administration under system/magento connect/magento connect manager. Log in with your regular admin creds. Paste the extention key you got from the previous page in to the box and click install. Now cross your fingers. What’s supposed to happen is the theme is supposed to install dircetly onto your server, into the proper directories and everything. It’s a neat concept. Id rather have a manual install, as you need the local files later anyway. In any case, it did not work for me. I tried twice and it seemed to stall out, not installing all the needed files. So I finally found this page which actually had a .zip of the modern theme, though at version 1.1. So you could try that, it worked for me, or hunt for a newer copy of the modern theme, as Magento is up to 1.3 as of this posting.

So, using the above folder structure your folder structure would look like this:

/app/design/frontend/default/modern/
and
/skin/frontend/default/modern/

Enable the modern theme through Magento admin: System -> Configuration -> Design and under the Theme section, put “modern” for Templates, Skin, Layout and Default.

How to edit the Magento default “contact Us” page.

The default page is a PHTML page caled form.phtml

/app/design/frontend/default/[your-theme]/template/contacts/form.phtml

I took this chunk of code:

And made it into this chunk, which achieved all I needed to do. A quick hack, but it may get you started.

Magento won’t work with AOL!?!

Yep, AOL America Online strikes again. It happened that my client and all her friends and relatives were on AOL. So, while I had hours into the site and it appeared fine to me in IE and FF, to her it was “broken”. Apparently, on the IE 6 based AOL browser, the index.php page just refreshed when any link was clicked. I did some snooping and finally the good people on the Magento forums shed some light on the subject. (thread). Appearently AOL works through proxy servers which trip the alarms for Magento’s default settings for session validation. In other words, A user from AOL would appear to jump from IP address to IP address as the AOL proxy moved them around and Magento would see this as possible browser hijacking and stop the connection. So the following is a temporary hack at best.

Change the following settings in the admin
system / configuration / general / web / session validation settings

Validate REMOTE_ADDR “NO”

Validate HTTP_VIA “NO”

Validate HTTP_X_FORWARDED_FOR “NO”

Validate HTTP_USER_AGENT “YES”

Some people reported their sites working with only Validate Remote_addr turned off, but not for me, I had to disable the other two. Now, as these functions protect against session hijacking, it’s not really great to turn them off. Don’t display card details on the site. Hopefully there is a better fix in the future. Use at your own risk!

Edit the default Magento eMail Templates

How to edit the default Magento Email templates. The are stored in:
\app\locale\en_US\template\email\

Be aware that not all files in the folders need editing, and some templates have info in different spots, so be attentive.

Edit the following info:

replace alt=”Magento” with alt=”your store name”

replace Magento Demo Store with your store name

replace mailto:magento@varien.com with mailto:email@yourstore.com

replace dummyemail@magentocommerce.com with email@yourstore.com

replace (800) DEMO-STORE with (0800) YOUR STORE NUMBER

replace Monday – Friday, 8am – 5pm PST with your own store opening times and timezone

To replace the logo image, make a new image, (The default magento image is 169×49 for reference) name it logo_email.gif and put it here:
/skin/frontend/default/modern/images/logo_email.gif

You may also change aspects of the templates in the magento administration under
system –> transactional emails.

Clearing Your Magento Test Orders before going live

So, you are all set, everything works but you have a bunch of test orders you placed through the cart while trying everything out. As of this posting, Magento does not offer a way to fully delete orders. So the work around is to run an SQL query on the database, deleting the proper data, and reseting the store to “zero”.

Instead of running through all this I’m just going to link you to the site that helped me out, eliasenteractive.com

Be aware that you must replace the instances of YOUR_DB_NAME in the script with your actual database name.

Assigning Free Shipping on a Per Product Basis

I actually wrote a separate post about this. Click here to check it out now.

I hope these tips helped some of you out. Feel free to sign up and leave more tips, questions or set me right on a mistake I may have made in the comments.

Click to visit Smashing Magazine’s Free Vector Image Compilation

Edit: Whoa, If that wasn’t enough,
Here’s 50 more sites with free vector images, via HongKiat

A free image from MorgueFile

As a designer, often an occasion will arise where all of a sudden I need a certain image, of a certain subject, with certain colors and I need it fast. Project budgets, not to mention my own budget, don’t always allow me to pay for commercially licensed photography and images. Luckily for you and me, we have free stock photography websites.

As long as images have been for sale on the internet, images have been made available for free. And now there’s more places to get these images than ever. I’ve put together a list of my favorites below. Do you know of a good one that I missed? Drop it in the comments!

MorgueFile
Don’t be afraid to go to the Morgue! Weird name huh? From the site: “The term “morgue file” is popular in the newspaper business to describe the file that holds past issues flats. Although the term has been used by illustrators, comic book artist, designers and teachers as well.” Another good site. Note: This may not still be true for you by the time you read this, but as of the time of this posting, MorgueFile is undergoing a site re-design. In doing so, they are offering access to their entire archive of free images, without even registering or logging in.

Stock.xchng
It may have an awkward name and url (www.sxc.hu/) but this free stock photography site has been around for over 7 years and now has over 380,000 images in it’s bloated belly. A variety of searching options help you to find the image you are looking for. Be aware that the licence agreement that applies to all Stock.xching images has a few restrictions on usage. Read it before downloading.

Every Stock Photo
EveryStockPhoto.com has got a ton of images. Over 4 million of them. However, the images fall under a variety of different licensing agreements, including Creative Commons, GNU, public domain, and custom free licenses, so be sure to check out the license for the image you want before you run off to use it.

Open Photo
OpenPhoto.net is a smaller open source type site. Images are licensed on an individual basis by their owners. I’m not sure how many images are available, though a quick search did yield some good results. Also, no registration/login makes swooping in the grab a pic quick and easy.

Nations Illustrated
Nations Illustrated focus’ on scenic and landscape photography. You can search by geographic region. Great idea, but not a whole lot of images here yet (7,300). Still it might be worth checking out if you are in need of an outdoor shot from a specific part of the world.

PhotoRack
This site uses a basic sort of forum or messageboard style layout to browse images by category (Lifestyle, Nature, Food, Cooking etc..). They have over 27,000 images in 149 categories. This is another good site to zero in on an image you need and pick it up quick, as there are no logins or registration. The other great thing? “All pictures listed at PhotoRack are Free to use for personal and commercial projects. No limitations.”

If you are still hungry for more, check out this list of 30 free stock image websites.

The Rogue Easyweb main site.

A blog is born! January 14th, 2009. Fitting because my birthday is on the 17th, just a few days away. Close enough!

I hope to entertain as well as inform to the best of my ability on this site. I will be covering a range of topics related to design and web design. From code stuff, html, css, php, ajax etc. to design tips to news and more. I’m open to ideas and feedback. Drop me a line!

Enjoy!