Custom Gateway - Customer Support


Welcome to the Custom Gateway Support Portal

Here you can raise support tickets and read articles on common queries using the topic sections and search below

How to modify CSS for supported personalisation app layouts

Follow

You can modify app layouts using CSS. This gives you real control over how your app will look on screen - you should have knowledge of CSS before attempting this task

ACP2 & Garment2 layouts have an attribute called External CSS file in Layout Configuration

For a full tutorial please click on pdf tutorial attached

To apply your own css style, create css file then upload it onto a server (best upload it to folder where there are other css files used by website using the app) and enter path to css file into External CSS Path on App

Detailed below is an example file that shows you how to change the button style on an app - to get the updated CSS for your app simply add the app to a page on your website and view the CSS using your normal development tools  

Please note we can create bespoke apps or make CSS changes for you if you do nothave the skills to implement 

 

EXAMPLE CSS FILE (will change add to cart button):

#add-to-cart {

border: 1px solid #DD0000;

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

-moz-text-decoration-color: -moz-use-text-color;

-moz-text-decoration-line: none;

-moz-text-decoration-style: solid;

background-color: #E32219;

border-bottom-color: #A20D12;

border-radius: 10px;

border-bottom-style: solid;

border-bottom-width: 1px;

border-image-outset: 0 0 0 0;

border-image-repeat: stretch stretch;

border-image-slice: 100% 100% 100% 100%;

border-image-source: none;

border-image-width: 1 1 1 1;

border-left-color-ltr-source: physical;

border-left-color-rtl-source: physical;

border-left-color-value: #DD0000;

border-left-style-ltr-source: physical;

border-left-style-rtl-source: physical;

border-left-style-value: solid;

border-left-width-ltr-source: physical;

border-left-width-rtl-source: physical;

border-left-width-value: 1px;

border-right-color-ltr-source: physical;

border-right-color-rtl-source: physical;

border-right-color-value: #DD0000;

border-right-style-ltr-source: physical;

border-right-style-rtl-source: physical;

border-right-style-value: solid;

border-right-width-ltr-source: physical;

border-right-width-rtl-source: physical;

border-right-width-value: 1px;

border-top-color: #DD0000;

border-top-style: solid;

border-top-width: 1px;

box-shadow: 0 1px 0 rgba(1, 49, 69, 0.25), 0 1px 0 rgba(255, 255, 255, 0.4)

inset;

color: #FFFFFF;

}

Was this article helpful?
0 out of 1 found this helpful

Comments

  • Avatar
    Jeff Strickland

    When I go to App Layout and get screen that says no layouts found and there is no add button.