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!
<![CDATA[
<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>
]]>