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.
image1_tips.jpg
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.
image2_tips.jpg
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.
image3_tips.jpg
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.
image4_tips.jpg
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.
image5_tips.jpg
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.
image6_tips.jpg
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.
image7_tips.jpg
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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Get excited for SQL Saturday 2022! Join our Microsoft MVP speakers Rez and Eric to learn how you can use the Power Platform in conjunction with Dataverse for Teams to create apps and solve your business automation challenges. Register now: https://hubs.ly/Q01nc9dm0

2

During the next episode of the #PixelMillWebinars, our #UI/UX experts break down:

- #PowerApp UI/UX best practices & common pitfalls
- #Figma best practices for PowerApps
- Converting from Figma to PowerApps
- See a PowerApp design in action!
https://hubs.ly/Q01n4gDJ0

In the next episode of the #PixelMillWebinars, our #UI / #UX experts break down:

- #PowerApp #UI / #UX best practices & common pitfalls
- #Figma best practices for #PowerApps
- Converting from #Figma to #PowerApps
- See a #PowerApp design in action!

http://ow.ly/nf9250KKYNM

In the next episode of the #PixelMillWebinars, our branding and #UI/#UX experts will show you how to elevate your #PowerApp experience without #coding.

Join us on 9/29 at 11am PST to see how you can apply custom #UI to #PowerApps designed in #Figma.

http://ow.ly/oWpI50KKCr0

Working in a hybrid environment allows us to collaborate with people from all over the world. Check out this quick video and learn how to navigate language barriers when using Teams! #workthewayyouwant

https://hubs.ly/Q01lbPZG0

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch