Checkout Headers - Changing Colors Tutorial

Introduction

This tutorial will walk you through how to change the color for the main UltraCart checkout headers from red to another color. For example let's say your checkout branding currently looks like this:

Wouldn't it be nice if the red headers matched the green from the rest of the branding? Of course it would!

Identifying the HTML Color Code

The first step in changing the header color is to identify the HTML color code that we want to use. To do this we generally use a little utility called Pixie that you can download for free. After you launch pixie it will show you the color code of whatever pixel your mouse is hovering over as shown below.

So from this example we have the HTML color code #579412

Overriding the Default Screen Branding

Now all we have to do is override the default checkout stylesheet in our screen branding under:

At the bottom of the header place the style tag with the these two styles override:

<style type="text/css">
.ucColorHeader {
  font-family: Arial;
  font-weight: bold;
  font-size: 14px;
  color: #579412;
}
.ucColorSubHeader {
  font-family: Arial;
  font-weight: bold;
  font-size: 12px;
  color: #579412;
}
</style>

It should look like the screen shot below.

Final Result

Notice that the header has now changed color.