Menu

Custom CSS Style Guide

The Hosted Payment Page can be styled within certain parameters to match your brand. Use this page as a reference guide to how you can overwrite the standard style to fit your own. 

You may modify any of the rules below, including ( in formatted order ):   

Controller Classes 
Container Sizing
Header Sizing 
Button Color and Design
Image Sizing
Form Field Sizing
Table Color and Design 

To Modify a Rule:                                 

  1. Log into https://my.basecommerce.com
  2. Navigate to your Settings
  3. Navigate to your Hosted Payments Page settings (this is a sub navigation item that only shows after clicking Settings)
  4. Create or Edit the Hosted Payment Page you would like to style
  5. Open CSS Customization tab
  6. Copy the styles from this guide to change into the custom CSS text area (making the edits that you see fit)
  7. Preview and save your changes

Control Classes

/* Set global properties here */
* {
    margin: 0;
    padding: 0;
    border-collapse:collapse;
    font-family:"Helvetica LT Std Roman", Helvetica;
}
 
.clear{
    clear:both;
}
 
.requiredColor{
    color:red;
}
 
.documentLinks{    
    display:inline;
    color:#194B7A;     
    cursor:pointer;
}
 
.floatLeft{
    float:left;
}
 
/* Floats the billing form information to the right */
.twoThirdRight{
    float:right;
    width:66%;
}
 
/* Floats the billing form headers to the left */
.thirdLeft{
    float:left;
    width:33%;
}

Container DIVs

/* The all parent container's sizing */
#hppContainer {
    margin: 50px auto;
    min-width: 650px;
    max-width: 800px;    
}
 
#transactionInformationBlock{
    margin:0px 0px 20px;
    padding:10px;
    border:1px solid black;
    border-radius:5px;
}
 
#customInformationBlock{
    margin:0px 0px 20px;
    padding:10px;
    border:1px solid black;
    border-radius:5px;
}
 
#userInformationBlock{
    padding:10px;
    border:1px solid black;
    border-radius:5px;
}
 
.userInformation{
    margin:20px 0px;
}

Header Tag Controls

h1{
    margin:0px 0px 5px;
    font-size: 26px;
}
 
h2{
    margin:12px 0px 5px;
    font-size: 21px;
}
 
h4{
    margin:0px 0px 15px;
}

Button Controls

/* Standard color and sizing for buttons */
button{
    float:right;
    margin-right:4.7%;
    font-size:12pt;
    color:#fff;            
    border:1px solid #304457;
    border-radius:5px;
    background-color:#14436e;
    height: 35px;
    width:150px;
}
 
/* Color for method buttons */
.methodButton{
    float:left;
    margin:10px 0px 5px;
    background-color:#5881A7;
    cursor: pointer;
}
 
/* Color for method button that has been clicked */
.activeMethod{
    background-color:#14436e;
}

Image Controls

img{
    padding: 5px;
    height:30px;
    width:auto;
}
 
#cardSprites{
    margin-right:-2.3%;
    margin-bottom: 10px;
}
/* Controls merchant logo size by height */
#merchantLogo{
    float:right;
    height:40px;
    width:auto;
}

Form Controls

/* Controls varying sizes of form fields to their respective divs size */
.formFieldFull{
    float:left;    
    margin:0 auto;
    padding:10px 2.5% 10px 4.7%;
    width:90%;
}
 
.formFieldHalf{
    float:left;
    margin: 0 auto;
    padding: 10px 2.5% 10px 4.8%;
    width: 41.1%;
}
 
.formFieldQuarter{
    float:left;
    margin: 0 auto;
    padding: 10px 2.5% 10px 4.8%;
    width: 17%;
}
/*                                                                      */
 
/* Standard appearance settings for all text form fields */
.formFieldFull input[type="text"], .formFieldHalf input[type="text"], .formFieldQuarter input[type="text"] {
    border:1px solid #cecece;
    border-radius:5px;    
    height:35px;
    width:100%;
    text-indent: 10px;
}
 
.formSelectField{            
    padding:5px 10px;
    border:1px solid #c7c7c7;    
    border-radius:4px;
    width:100%;
    height:35px;
    color:#808080;
    font-size:12px;    
    background-image: url('/images/baseCommerceGreyDropDown.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 28px 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align:left;
    text-indent: 0.01px;
    text-overflow: "";
}
 
/* Custom checkbox controls and if it's checked or not */
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label #checkboxSpan {
    display:inline-block;
    margin:-3px 10px 0 0;  
    background:url('/images/baseCommerceCheckBox.png') left top no-repeat;      
    height:17px;
    width:16px;        
    cursor:pointer;
    vertical-align:middle;    
    
}
input[type="checkbox"]:checked + label #checkboxSpan {
    background:url('/images/baseCommerceCheckedBox.png') left top no-repeat;
}
/*                                                       */

Table Controls

.hppTable {
    width:100%;
    min-width: 600px;
}
 
/* Color for the table header */
.hppTable thead{
    color:#ffffff;        
    border:1px solid #194b7a;
    background-color: #194b7a;
}
 
.hppTable th {    
    height:50px;
    font-weight:100;
}
 
.hppTable td{
    padding:10px;
    border:1px solid #cecece;
    text-align:left;
}
 
/* Right align "Total" */
.hppTable td:last-child{
    text-align:right;
}
 
/* Hides the border people "total" and the total amount */
.hppTable tfoot td:nth-last-child(2){
    border-right:none;
    text-align:right;
}
 
.hppTable tfoot td:nth-last-child(1){
    border-left:none;
}
/*                                                      */