Styling Your Brand on the Payment Page

Clearent’s Hosted Payments solution allows you to style your brand on the payment page using elements from your browser’s developer toolbar.

The following example code includes class and id to style the payment page with your desired branding:

<style>
          .Clearent-header {
            height: 90px;
            background-color: #E8F2FE;
            border-radius: 5px 5px 0 0;
          }
          .Clearent-merchant-logo {
            background-image: url('images/logo_gears.png');
            background-size: 100px 100px;
            background-repeat: no-repeat;
            height: 100px;
            width: 100px;
            float: left;
          }
          .Clearent-title {
            margin-top: 5px;
            margin-left: 10px;
            float: left;
            font-size: 30px;
            font-weight: bold;
            color: #fff;
            /* offset-x | offset-y | blur-radius | color */
            text-shadow: 1px 1px 3px black;
          }
          .Clearent-body {
            clear: both;
            padding-top: 0px;
          }
          .Clearent .glyphicon {
            color: #888;
            font-weight: bold;
          }
          .Clearent .input-group-addon {
            border-color: #337AB7;
          }
          .Clearent .form-control {
            border-color: #337AB7;
          }
          .Clearent-cancel,
          .Clearent-submit {
            text-transform: lowercase;
          }
          .Clearent-submit {
            border-color: #ccc;
            background-color: #E8F2FE;
            color: #000;
            /* offset-x | offset-y | blur-radius | color */
            text-shadow: 1px 1px 3px #fff;
          }
          .Clearent-submit:hover {
            background-color: #fff;
          }
</style>