Clearent Hosted Payment Page

Styling / Branding

Overview Security Considerations Configuration Styling / Branding Examples

Designed with branding in mind

The Clearent Hosted Payments Page was designed to provide an easy to use interface that blends well with any website:

We went one step further and designed our Hosted Payment Pay so that it was easy to style and brand to match your website.

Many other solutions use embedded element style tags that make if very difficult for developers to target and style a specific element. All of the elements of the Hosted Payment Page popup have exposed ids or class names that make is easy to style the popup to match your site. Each of these classes and ids are easily discoverable using your favorite browser's developer toolbar. Of course, we are always here to help!

<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>