If you are adding custom header, side bar, or footer regions of your checkout pages, and you are editing and uploading a custom CSS file to style those page elements, you need to be sure you are applying the styles only to those areas or tags. For example, if your custom side bar region has links and you add the following line to the bottom of your CSS file.

a { }

then all links on the page, not just the ones in your custom regions, will be red. This is due to the cascading nature of stylesheets, where the last valid style associated with the tag is applied unless you write your style sheet to apply the style only to certain classes or IDs.

The same thing applies if you are not uploading a custom CSS, but using the default or global styles instead. Your elements will have the same styles applied if the default stylesheet references the same tags without being specific.

Use class and ID

In the example above, you could correct all links from having the style applied by specifying a class for those links to which you wish to apply a specific style. You would first need to specify a class for links in your side bar (or links that you wish to style differently from others). Within your code, you would add the class name as follows:

<a href="refund_policy.html" class="sidenav">Our Refund Policy</a>

Then, in the stylesheet, you would need to specify that you wish to style all sidenav class links with a particular style such as:

a.sidenav { }

Now, only links where you have applied the class of sidenav will appear in red. All other links, unless specified with a class or ID, will receive the style for links (<a> tags) as outlined in your stylesheet.

You can also use an ID instead of a class. You would use an ID when you want to apply a specific style only to one element in your code. Instead of using class=class-name, you'd use id=id-name. Learn more about IDds.

Use inline styles

You can also correct this problem by using inline styles. With inline styles, you apply any style attributes within the tag itself such as

<a href="refund_policy.html" style="color: red">Our Refund Policy</a>

Inline styles do have drawbacks, the largest of which is you have to edit these styles individually when making any changes rather than editing them in one location with a referenced stylesheet. Adding inline styles also increases the size of the page taking somewhat longer to download (though the difference should not be noticeable to buyers unless you are adding styles to each tag).

Learn more about inline styles.

Use a stylesheet embedded in the HEAD

You can also embed a stylesheet in the HEAD section of your document. By embedding a stylesheet in the HEAD section of your page, you can keep the default or global styles stylesheet applied by Checkout & Registration Manager, and the styles you wish to use for your custom checkout regions (header, sidebar, footer) completely separate.

Note however, that any style you apply in the embedded stylesheet will be applied to the entire page unless your embedded stylesheet uses IDs or classes specific to your custom regions. As with the example above, if you apply a style to links (<a> tags), you will need to specify a class or ID for each link in your checkout regions, or your style may override the style applied to links within the main body of your checkout pages.

Add an embedded stylesheet

1. Sign in to your My Services page.
2. Click the Store link.
   
3. Go to Checkout & Registration Manager.
   
4. Go to Page Configuration.
   
5. Select the tab for the page on which you wish to add your embedded stylesheet.
   
6. Scroll down to the Advanced Settings section and paste your stylesheet code into the HTML Head Section field.
   
7. Save the page and repeat for any other pages to which you wish to add the embedded stylesheet.
   
8. Publish your Order Settings when ready.