The standard UI allows you to specify many aspects of customisation, however when more extensive customisations are required, then using CSS script can provide many more options. 

In the "Manage Content" section there is a button for providing CSS customisations;

 

Once the CSS script button has been clicked you will need to ensure that the "Keep this field empty" has been de-selected;

You can now supply script that will allow more extensive customisations of the form designs.  These customisations include;

  • Changing the background images used in various sections, and behind various images.
  • Changing the colours, sizes and styles of the default fonts used.
  • Repositioning the contents and separations of the various sections of the page being customised.


In order to perform these types of CSS customisations you need to be aware of the following main CSS sections;

Manage ContentScriptNotes
Page Header

.page-header  {}

This section can adjust the height, margins and style of the top section of the page.
Page Header Middle

.page-header-middle {}}

Centre section of the page header.
Page header Right

.page-header-right {}

Right corner of the page header.
Header Left

.page-header-image {}

Size, placement and background of the image displayed in the "Header Left" section.

Header Middle

.page-header-middle {}

Control the font colour and style of the text in the "Header Middle" section. 
Header Right

.page-header-right {}

Control the font colour and style of the text in the "Header Right" section.
Content Header Top.content-header-image {}Size, placement and background of the image displayed in the "Content Header Top" section.
Content Header Bottom.content-header {}Control the font colour and style of the text in the "Content Header Bottom" section.
Content Middle.content-middle ()Control the section where credentials are entered.
Content Footer.content-footer {}Control the font colour and style of the text in the "Content Footer" section.
Page Footer.page-footer {}Control the font colour and style of the text in the "Page Footer" section.
Page Footer Left.page-footer-left {}Left corner of the page footer.
Page Footer Right.page-footer-right {Right corner of the page footer.


The following diagram illustrates examples of how each of these areas can be customised;


CSS
.page-header {
font-weight: bold;
height: 100px;
max-width=100%;
background-color: white;
Color: black;
}

.page-header-image { 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 300px 150px;
max-width: 200px;
max-height: 150px;
Color: black;
}

.page-header-middle {
font-size: 20px;
font-weight: bold;
vertical-align: middle;
Color: blue;
}

.page-header-right {
font-size: 20px;
font-weight: bold;
vertical-align: middle;
Color: blue;
}

.content-header { 
width: 100%;
height: 100px;
Color: blue;
}

.content-header-image { 
background-size: 300px 100px;
width: 250px;
max-height: 90px;
}

.content-footer {
margin-bottom:16px;
font-weight: normal;
color: blue;
}

.page-footer {
background-color: #BF1A2C;
font-size: 10px;
color: Blue;
max-height: 100%;
max-width=100%;
}
  • No labels