Skin Customisation

In this section, you will learn about how to customise the ANYpay Checkout Skin

Checkout Page Structure

The Checkout Pages are structured in three main parts

  1. Header
  2. Payment Section
  3. Footer

Default Skin

The default skin that will configured against each account will be with PXP's branding as shown below.

Checkout Selection Screen where you are presented to select your payment methodCheckout Selection Screen where you are presented to select your payment method

Checkout Selection Screen where you are presented to select your payment method

Checkout Payment Screen where you are requested to enter your chosen payment informationCheckout Payment Screen where you are requested to enter your chosen payment information

Checkout Payment Screen where you are requested to enter your chosen payment information

Custom Skin

Should the Merchant wish to customise the the look & feel of ANYpay Checkout, they can do so by configuring their requirements within a theme file, called the theme.less which is in CSS format.

Below is the contents of the theme.less file and all of the parameters and sections which can be customised.

It is assumed that the developer will have some CSS knowledge.
For more information, please see https://www.w3schools.com/css/default.asp

For customisations requested on the merchant's behalf, please contact the Sales team to request professional services.

@import "..\..\variables.less";
@import "..\..\base.less";

@site-background-color:#FFFFFF;
@primary-accent-color:#030A3A;
@secondary-accent-color:#0C6EFD;

@primary-font-color:#646F79;
@primary-header-color:#FFFFFF;

@inverted-font-color:#dddddd;
@inverted-header-color:#eeeeee;

@item-background-color1: #888888;
@item-background-color2: #FFFFFF;

@error-field-border-color: #ff0000;
@error-field-background-color: #ffcccc;

@infobox-offset-top:0px;
@border-radius: 5px;

button.button-pay{background-color:@primary-accent-color}

.selectedPaymentMethodLogo
{
    border: 2px solid @primary-accent-color
}

button.button-custom {
    background-color:@primary-accent-color;
    border-bottom:1px solid @primary-accent-color;
}
    
.button-custom:hover {
    background-color:@primary-accent-color;
    border-bottom:1px solid @primary-accent-color;
}
    
.button-custom:active {
    background-color:@primary-accent-color;
    border-bottom:1px solid @primary-accent-color;
}

.form .section .select-group .select.error{
        border: 1px solid #e0635b;
    }

body{
    background-color:@site-background-color;
}

h1
{
    font-size: 36px;
}

h2
{
    font-size: 30px;
}

h3
{
    font-size: 24px;
}

h4
{
    font-size: 18px;
}

h5
{
    font-size: 14px;
}

/*define header appearence*/
/*Uncomment your chosen option*/
//.header_noHeader();
//.header_logoWithTextCentered();
//.header_logoWithTextLeft();
//.header_logoNoTextCentered();
.header_logoNoTextLeft();

/*define header appearence when Checkout is loaded in an iFrame*/
/*Uncomment your chosen option*/
//.header_inIframe_showFullHeader();
.header_inIframe_hideFullHeader();
//.header_inIframe_hideBannerOnly();
//.header_inIframe_hideInfoboxOnly();


//***Exit Button Options***
//.backlinkIcon(@iconfont:'icomoon-ultimate', @iconchar:'\e1d7', @iconsize:3em, @posTopValue:1em, @posRightValue:2em )
//.backlinkIcon();

//Shows text (e.g. 'Exit') instead of icon. 
//.backlinkText(@fontsize:1em, @posTopValue:1em, @posRightValue:2em)
.backlinkText(1.6em, 0.3em, 1em);

//.pageBanner( @pb-back:#0D522E, @ph-back:#0D522E, @font-color:#FFFFFF, @topPadOuter:1em, @bottomPadOuter:3em, @topPadInner:1em, @bottomPadInner:1em)
.pageBanner(@primary-header-color, @primary-header-color, @primary-accent-color, 1em, 1em, 1em, 1em);

//.infoboxcontainer( @ic-back:transparent, @ib-back:#dddddd, @font-color:#333333, @topPadOuter:1em, @bottomPadOuter:1em, @topPadInner:1em, @bottomPadInner:1em)
.infoboxcontainer(   @item-background-color2, @item-background-color2, #212529, 0em, 0em, 1em, 1em);

//.infobox(@pos:-40px, @padding:1em 0, @border-radius:5px, @font-size:1.3em, @font-color:#333)
.infobox(@infobox-offset-top, 1em 0, @border-radius, 1.2em, @primary-font-color);

//.line(  @lback:#ddd, @font-color:#666, @font-size:1.1em, @border:2px solid #bbb )
.line(@item-background-color2, @primary-font-color, 1.1em, 2px solid @inverted-header-color );
.lineSelected(  @primary-accent-color,@inverted-font-color, 1.1em, 2px solid @inverted-font-color,@site-background-color);

//.paymentmethods(@pmlogoback:#ccc, @pmlogopadding-top-bottom:1em, @pmtextback:#222, @pmtextcolor:#fff, @borderradius:5px, @pmtextfontsize:0.8em)
.paymentmethods(@item-background-color2, 1em, @primary-accent-color, @inverted-font-color, @border-radius, 0.9em );
.hideFeesAndLimits();

//.footer(  @fback:#0D522E, @height:5em, @margin:1.5em 0 0.5em, @font-size:1.1em, @color:#FFFFFF, @iconspace:42px, @iconspaceborderradius:50%, @topicon-font:'FontAwesome',@topiconchar:'\f077', @topiconsize:2em )
.footer();

.footer_inIframe_hideFooter();

.validationSummary();
.errorField(@errormain: @error-field-border-color, @errorsoft: @error-field-background-color);

.exitConfirmModal();

.deleteConfirmModal();

div.container.padSides{
    padding-left:10px;
    padding-right:10px;
}

.backLinkInternal {
    padding-top:1em;
    display:block;
    a{
        color: @primary-accent-color;
        font-size: 1.1em;
        text-decoration:none;
    }
    a:before {
      font-family: 'FontAwesome';
      speak: none;
      -webkit-font-smoothing: antialiased;
      content: "\f060";
      padding-right:0.5em;
  
    }
}

.forwardLinkInternal {
    padding-top:1em;
    display:block;
    a{
        color: @primary-accent-color;
        font-size: 1.1em;
        text-decoration:none;
    }
    a:before {
      font-family: 'FontAwesome';
      speak: none;
      -webkit-font-smoothing: antialiased;
      content: "\f061";
      padding-right:0.5em;
  
    }
}

.modal {
    margin-left: 0px;
    display: none;
    position: fixed;
    z-index: 1050 !important;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8)
    url(../Images/modal.gif)
    scroll
    50% 50%
    no-repeat;
    opacity: 0.80;
    -ms-filter: progid:DXImageTransform..Microsoft.Alpha(opacity=80);
    filter: alpha(opacity=80)
 }
 
 body.loading {
    overflow: hidden;
 }

 body.loading .modal {
    display: block;
 }

//.hidePaymentdetailHeaders();
.showPaymentdetailHeaders();

.disabled-button {
    background-color: @inverted-font-color !important;
    color: @primary-font-color;
}

.page-banner .pageHeader div.customerLogo img{
     max-height:56px;
}

.page-banner{
    border-bottom: 1px solid black;
}

div.line{
    border-radius: 5px;
    border: 0.13em solid @primary-accent-color;
    margin-bottom: 2px;
}

div.line span.select:before{
    color: @primary-accent-color;
}

footer table,
footer .footer-line {
    background-color: @primary-accent-color;
}

.logoback{
    border: 1px solid @primary-accent-color;
}

footer .footer-line a.go-top:before {
    color: @primary-accent-color;
}

.container .portfolio-container .work-post .work-post-content {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

h1, h2, h3, h4{
    color: #212529;
}

p, h5, h6{
    color: #646F79;
}

.backlink span.exitLinkText {
    line-height: 107%;
    border-width: 2px;
    top: 0.1em;
    right: 0.1em;
}

.page-banner .pageHeader {
    min-height: 29px !important;
}

@media (min-width: 400px){
    .page-banner .pageHeader div.customerLogo img {
        margin-left: -30px;
    }
}

div#formPaymentMethod {
    margin-top: -4px;
}

div.line span.select {
    vertical-align: middle !important;
}

.tooltip::after{
    background: @primary-accent-color !important;
}

button.button-pay {
    background-color: #0C6EFD;
}