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-size: 14px;
    font-family: "Aktiv Grotesk", Arial, Helvetica, sans-serif;
}

form {
    margin: 0 auto;
    min-width: 500px;
    max-width: 800px;
    padding: 40px 40px 80px;
}

.hide{
    display: none;
}

.clear{
    clear: both;
}

.requiredColor{
    color: #DA291C;
}

.badData{
    border:solid 1px #DA291C !important;    
}

.disabledField{
    opacity: 0.5;
    cursor: not-allowed !important;
}

.floatLeft{
    float:left;
}

.noLeftMargin {
    margin-left: 0 !important;
}

.noLeftPadding {
    padding-left: 0 !important;
}

.noTopPadding {
    padding-top: 0 !important;
}

div.modalOverlay {
    position: fixed;   
    background: rgba(0,0,0,0.2);
    height:100vh;
    width: 100%;
    z-index: 2147483647;
    background-image: url( '/images/loading-animation.gif' );
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 50px;
}

Container DIVs

/* The all parent container's sizing */
#hppContainer {
    position: absolute;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    overflow: scroll;
}

.headerBlock{
    background-color: #0D2240;
    padding: 10px 30px;
    border-top: 1px solid #aab1bb;
    border-bottom: 1px solid #aab1bb;
}

.informationBlock{
    margin:0px 0px 30px;
    padding: 30px 25px;
    background-color: #f8f8f8;
}

.userInformation{
    margin: 20px 0px;
}

Header Tag Controls

h1{
    font-size: 24px;
    font-family: "Gilroy", Arial, Helvetica, sans-serif;
    color: white;
}

h2{
    margin: 12px 0px 5px;
    font-size: 21px;
    font-family: "Aktiv Grotesk", Arial, Helvetica, sans-serif;
}
h2 > b {
    font-size: inherit;
}

h4,h5{
    margin:0px 0px 15px;
}

hr{
    color: #A4A9AD;
    margin: 15px 0 30px;
}

Button Controls

button{
    margin-right: 20px;
    font-size: 12pt;
    color:#fff;
    background-color: #41B5E4;
    border: none;
    height: 40px;
    line-height: 42px;
    width: 150px;
    cursor: pointer;
    float: left;
}
button:hover{
    background-color: #0D2240;
}

#submitButton{
    width: 175px;
}

.cancel_button{
    font-weight: normal !important;
    font-size: 1em !important;
    color: #3db5e6 !important;
    cursor: pointer;
    background:none;
    border:none;
    margin:0;
    padding:0;
    width: 100px;
    border: 1px solid #3db5e6;
}
.cancel_button:hover{
    background-color: white;
    color: #0D2240 !important;
    border: 1px solid #0D2240;
}

.ui-dialog .ui-dialog-buttonpane button:first-child{
    margin: 0 !important;
}

.documentLinks{    
    display: inline;
    cursor: pointer;
    font-size: 16px;
    color: #7c868f;
    border-bottom: 1px solid #7c868f;
}
.documentLinks:hover{
    color: #41B5E4;
    border-bottom: 1px solid #41B5E4;
}

Image Controls

#cardSprites img{
    padding: 0px 5px 5px;
    height: 26px;
    width: auto;
}

#cardSprites{
    margin-bottom: 15px;
    margin-top: 3px; 
    background: none;
    width: 48%;
}

#merchantLogo{
    height: 50px;
    width:auto;
    padding-bottom: 30px;
}

Form Controls

.container_full {
    width: calc(100% - 10px);
    padding: 10px 5px;
    float: left;
}

.container_threeQuarter {
    width: calc(75% - 10px);
    padding: 10px 5px;
    float: left;
}

.container_half {
    width: calc(50% - 10px);
    padding: 10px 5px;
    float: left;
}

.container_twoThird {
    width: calc(66.666% - 10px);
    padding: 10px 5px;
    float: left;
}

.container_third {
    width: calc(33.333% - 10px);
    padding: 10px 5px;
    float: left;
}

.container_quarter {
    width: calc(25% - 10px);
    padding: 10px 5px;
    float: left;
}

/* Standard appearance settings for all text form fields */
input[type="text"] {
    border: 1px solid #e8e8e8;
    border-radius: 0px;
    height: 40px;
    width: 100%;
    color: #333E48;
    text-indent: 16px;
    box-sizing: border-box;
    padding-bottom: 0px;
}

input[type=text]::placeholder
input[type=text]::-moz-placeholder
input[type=text]::-webkit-input-placeholder
input[type=text]:-ms-input-placeholder {
    color: #A2A9AE;
    font-size: 1em;
}

.formSelectField {
    width:100%;
    height:40px;
    display: block;
    text-align:left;
    border: none;
    border-radius: 0px;
    font-size: 1em;
    color: #7c858a;
    padding-left: 16px;
    padding-right: 50px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: "";
    background-color: rgba(230, 231, 232, 0.5);
    background-image: url('/images/dropdown_arrow.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: calc(100% - 1px);
}

option{    
    padding:2px 10px;
}


/* Custom checkbox controls and if it's checked or not */
.checkbox_container > input[type="checkbox"] {
    width: 1px; 
    height: 1px;
    -ms-transform: scale(0.1); /* IE */
    -moz-transform: scale(0.1); /* FF */
    -webkit-transform: scale(0.1); /* Safari and Chrome */
    -o-transform: scale(0.1); /* Opera */
    transform: scale(0.1);
    margin: 3px 4px;
    outline: none;
    border: none;
    background-color: transparent;
    opacity: 0.1;
    position: absolute;
}

.checkbox_container > input[type="checkbox"] + label {
    font-family: "Aktiv Grotesk", Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #7c858a;
    font-weight: normal !important;
    cursor: pointer;
}

.checkbox_container > input[type="checkbox"] + label span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -3px 5px 0 0;
    vertical-align:middle;
    background: #fff url('/images/checkbox.png') left top no-repeat;
    background-size: contain;
    cursor: pointer;
}

.checkbox_container > input[type="checkbox"]:focus + label span {
    -webkit-box-shadow: 0 0 5px rgba(162, 169, 174, 0.8);
    -moz-box-shadow: 0 0 5px rgba(162, 169, 174, 0.8);
    box-shadow: 0 0 5px rgba(162, 169, 174, 0.8);
}

.checkbox_container > input[type="checkbox"]:checked + label span {
    background: #fff url('/images/checkbox-selected.png') left top no-repeat;
    background-size:contain;
}

.checkbox_container > input[type="checkbox"]:checked  {
    opacity: 0.1;
}

input[type="checkbox"] + label {
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    margin: inherit;
    opacity: 1;
    pointer-events: auto;
    position: inherit;
    font-weight: 100;
}

.radio_container > input[type="radio"] {
    display: none;
}

.radio_container > input[type="radio"] + label {
    font-family: "Aktiv Grotesk", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #7c858a;
    opacity: 1;
    position: relative;
    margin: 0;
    cursor: pointer;
    pointer-events: initial;
}

.radio_container > input[type="radio"] + label span {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: -2px 5px 0 0;
    vertical-align:middle;
    background: url('/images/radio.png') left top no-repeat;
    background-size: contain;
    cursor: pointer;
    
}

.radio_container > input[type="radio"]:checked + label span {
    background: url('/images/radio-selected.png') left top no-repeat;
    background-size:contain;
}

textarea {
    resize: none;
    height:auto;
    width:100%;    
    box-sizing: border-box;
    padding:10px;
    border: 1px solid #e8e8e8;
    border-radius: 0px;
    color: #333e48;
}

Table Controls

.hppTable {
    width: 100%;
    min-width: 400px;
}

/* Color for the table header */
.hppTable thead{
    color: #333e48;        
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
}

.hppTable th {
    height: 50px;
    font-weight: bold;
    text-align: left;
}

.hppTable tr{
    border-bottom:1px solid #e8e8e8;
}

.hppTable tfoot tr {
    border-bottom: 0;
}

.hppTable tbody tr:last-child {
    border-bottom: 3px solid #333e48;
}

.hppTable tfoot tr:last-child {
    border-bottom: 0;
}

.hppTable td {
    padding: 15px 0;
    color: #333e48;
    text-align:left;
}

/* Hides the border for "total" and the total amount */
.hppTable tfoot td:nth-last-child(2) {
    width: 75%;
    text-align:right;
    padding-right: 30px;
    color: #333e48;
    font-weight: bold;
}
.hppTable tfoot td:nth-last-child(1){
    border-left:none;
}


#hppPreTaxTotal {
    width: calc(100% - 20px);
    text-align: right;
    float: right;
    padding-right: 10px;
}
.totalText{
    padding:8px 30px;
}
.totalText + td {
    padding: 10px 0;
}
.totalAmount{
    text-align:right; 
    padding: 0px 10px;
}
.dollarSign{
    padding: 12px 10px 12px 0;
    float: left;
}

.place_to_show_message {
    display: none;
}
tfoot .place_to_show_message td:last-child {
    border-left: 1px solid #e8e8e8;
    text-align: right;
}

Error Handling Controls

#headerMessageContainer {
    margin: 0 auto;
    width: 90%;
    padding: 0 5%;
    min-width: 530px;
    background-color: white;
    position: fixed;
    z-index: 50;
    transition: all .4s ease-out;
}

#headerMessage {
    margin: 30px;
    background-color: #DA291C;
    color: white;
    width: calc(100% - 90px);
    padding: 15px;
    vertical-align: middle;
}

#headerMessageContent ul {
    margin-left: 15px;
}


#exitIcon {
    background-image: url(/images/icon-close-white.png);
    background-repeat: no-repeat;
    background-size: 23px;
    background-position: top right;
    display: inline-block;
    width: 23px;
    height: 23px;
    content: "";
    float: right;
    cursor: pointer;
    margin-top: -1px;
}
#exitIcon:hover {
    background-image: url(/images/icon-close-gray-dk.png);
}

#errorIconMessage {
    width: 50%;
    padding: 0 5px 10px 0;
    float: left;
    height: 20px;
    min-width: 80%;
    vertical-align: middle;
}
#errorIconMessage span {
    height: 100%;
    line-height: 20px;
    vertical-align: top;
    display: inline-block;
}
#errorIconMessage span:nth-child(2) {
    margin-top: 3.5px;
}

#errorIcon {
    background-image: url(/images/icon-alert-white.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center bottom;
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "";
    margin-right: 15px;  
}

Placeholder Controls

.container_full label, .container_half label, .container_third label, 
.container_quarter label, .container_twoThird label, .container_threeQuarter label {
    opacity: 0;
    position:absolute;
    margin:15px 10px;
    font: 11px "Aktiv Grotesk", Arial, Helvetica, sans-serif;
    pointer-events: none;
    transition: all 0.1s ease-out;
}			
.formFieldInnerLabel label{
    transition: all 0.1s ease-out;
    position:absolute;				
    margin:5px 17px 3px;
    font: 11px "Aktiv Grotesk", Arial, Helvetica, sans-serif;
    color:#757575;
    opacity: 1;
}
.formFieldInnerLabel input[type="text"],
.formFieldInnerLabel select {
    font-family: "Aktiv Grotesk", Arial, Helvetica, sans-serif !important; 
    padding: 14px 2px 0 0;
    height: 40px !important;
    box-sizing: border-box;
}

.formFieldInnerLabel select {
    padding: 14px 50px 0 13px;
}

Search