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.

Webinar: Managing CSS in Expression Web

PixelMill is happy to announce our first in a long series of Webinars and Seminars for Expression Web and SharePoint Designer 2007.

One of the most anticipated features in Expression Web and SharePoint Designer 2007 is the integrated CSS editor use interface. In the session, Corrie Haffly, our resident expert will guide you through managing CSS in these new editors. The title says Expression Web, but the same techniques will also work in SharePoint Designer. Space is limited, so don't miss this opportunity.

Managing CSS in Expression Web
Expression Web comes with great new tools for managing and using CSS. Using Expression Web Beta, Corrie Haffly gives an overview of the new tools and some practical tips on how to use them.
Thurs., Dec 7, 2006
10:00 AM - 10:45 PM PST