Useful tips for finding and modifying your PixelMill template…

Having trouble finding a template for your existing or new website?

The first thing I tell PixelMill customers, when trying to choose a template, is to start by selecting your layout. Find the layout that will suit your needs the best, regardless of images and color. If you think a design will work perfect for you but it has the wrong image or coloring don’t worry the template can be changed with CSS or with custom services.

So how do I tell if I can make the changes myself or if I need to request PixelMill Custom Services? To determine if you can make the changes or you need to request Custom Services, take a look at the getting started page and see if it’s using CSS for color or is it using graphics. If it is using CSS for the colors you can make these changes with ease. If it is using graphics for some of the layout and coloring, you will need a graphics editor (possibly a specific one) to make the color changes.

Let’s look at a PixelMill Edition template to show how easy it is to recolor a template.

Here is a screenshot of the template we want to recolor. We want to change the red in the template to dark green to match our team colors.

When I click on the red section I see that the div is using the ID #body2. That is where I will need to change my red background to my green color. Expression Web makes it easy to select your color without having to know what your hex color is – however if you have a specific color you want to use to match your logo color or your exact team color you should have your hex color code handy. Here is a link about hex color codes.

I open my style sheet and look for the #body2 that my div tag is using. I already have my hex color code selected from my Color Schemer program. That color is #669933. To change my background color, I go to line 143 and change the background from #990000 to the #669933.

Here I have changed the color on my div id #body2 from red to green. Now every page on my website that used that #body2 tag has the new color applied.

Next I want to change my banner across the top from red to green. This is using an image for the coloring so I will open an image editor to modify the image. This is a PNG file that is in the source folder, so I can open with any image editor. For this example I am using Fireworks.

Here is the image opened in Fireworks. You can see on the right this image is made up of 2 layers. I am going to work with. The second layer is my red box that I want to change to green.

I select that layer, and then I change the color in the color selection box on my graphics editor.

When that is done I export my image back out to my images folder and now my background image has been changed on all of the pages on my website.

A design note…

You should have some knowledge of your graphics program to make this color change. If you are not comfortable with your graphics program or have not been properly introduced to one, check out one of Corrie’s webinars on photoshop.

This article shows a quick color change that our PixelMill customers can do to modify their PixelMill template. If you don’t feel you have the comfort level to make these changes don’t worry we can walk you through these changes (and more) with our one-on-one training and education ($25 per half hour of training/education) or signup to attend our webinars. If you think you need a bit more custom or work on your site, then please contact us and we will be happy to discuss your Custom Services request.

Templates load slowly in UK

We have had some UK customers notify us that some web sites built with web templates load very slowly.The same web site, viewed by someone in the US, loaded normally. In some of these situations, the issue seemed to be related to the way that the stylesheet was imported into the web site. Stylesheets imported using the @import method caused the site to load slowly... once the stylesheet was linked using a link statement, the site loaded fine.

I have posted a new support article to show you how to change the @import to a link statement. Please view Templates load slowly in UK. If you have any more information about this issue, please contact us at support@pixelmill.com.

Thanks to Linda Long for pointing out this issue.

Product Catalog - House Cleaning

Over the last two weeks, you may have seen a drop in the number of products in the PixelMill catalog. This update was due to two issues that prompted product removal and update.

1) Two Year Shelf-life - We have implemented a two year shelf-life on all products submitted to the PixelMill catalog. Standards and browser compatibility change often, and these changes can be significant over a two - four year period. To ensure that we continue to offer top-quality products at an excellent value, we felt it was important to remove (or update) products added to the catalog over two years ago.

2) SWFObject Code - An April update to Internet Explorer caused many Flash movies to stop working as expected. The ActiveX update requires users to click an ActiveX object once before it will work. This required us to find a solution that made the templates work correctly out-of-the-box. Therefore, we started the tedious process of updating nearly 2,000 products that used Flash movies. We temporarily provided a warning in the catalog to show which templates were affected, but we felt it was time to remove those products. Now, all products with Flash use the new SWFObject code, which provides an effective work-around to this problem. Please see our SWFObject support article for more about the problem and the solution we're using.

We apologize if this update has caused any inconviences, but we would prefer to sell a product we're confident will meet your expectations than sell an average product that needs additional work to function properly.