Introduction
With the introduction of the new landing page editor you can easily create visually appealing landing pages. The intuitive editor allows you to build a layout with rows, columns and different content blocks like text, images, and buttons. For all of those elements you can also apply some basic styling by easily changing certain parameters. For example, background color, text color or spaces between elements.
But if you wanted to apply more sophisticated styling the only way to do it was to download the HTML of the landing page, do the changes and then host the HTML somewhere else. With release 2002, you can now enter CSS code directly in your landing pages.
Before you read any further please also read the related post 'Styling Forms – Introduction' because it explains a lot of the basics. That post also includes links to other posts of my CSS series. Another recommended post is 'Styling Landing Pages with CSS' which explains all the options to use CSS in a Landing Page.
Important Note: Also please note that all CSS code I present here come without warranty - you need to try out for yourself and test everything thoroughly - especially for multiple screen sizes, devices or browsers! I would also recommend that you ensure you have a good understanding of HTML and CSS.
Inline Cascading Style Sheet (CSS)
In contrast to the CSS feature of the forms, we have decided to provide a small inline CSS editor for the landing page. This removes the need for an external server where you would store the CSS and thus makes it much more accessible to you. You find the CSS editor on the Page property panel, which you get if you click on the outmost area of your landing page:
To give you an example I will introduce the following CSS code:
.shadow {
box-shadow: 3px 3px 10px rgba(0,0,0,0.7);
}Using Custom CSS Classes
This code snippet adds a shadow effect on every HTML element that contains the class 'shadow'. So, how do you assign that class to an element in your landing page? To do this we have also provided the possibility to assign any number of CSS classes to a column element of the landing page (currently this is the only place):
After inserting the class name 'shadow':
You will see the shadow effect around the selected column:
Once you've assigned your custom CSS classes to one or more columns in your landing page, you can alter the CSS definition and all changes would become effective for all columns immediately.
However, there are certain styles that are already set with the settings in the property panel of various elements like rows, columns or blocks. Those properties have priority over any style you might apply in the CSS definition. There is one way to override those properties, but that also means that you won't be able to control that particular style attribute from the property panel anymore. If you still want to do this then you need to apply the '!important' option like in this example:
.shadow {
box-shadow: 3px 3px 10px rgba(0,0,0,0.7);
background-color: lightyellow !important;
}The result looks like this:
Styling using Standard CSS Classes
You are not limited to custom CSS classes that you assign to columns. Instead, you can also analyse the structure of the landing page HTML and identify any standard CSS classes that are used there. If you don't know how to do that I suggest you look at the previous post 'Styling Forms – Introduction' where I explained this in more detail.
A simple example for this is the enhancement of the first row to include a logo. Of course, this could also be done by adding a table in the header text element, adding the logo as a picture in the left table column and placing the text to the right column. Another way is to add a background image to the header row like this:
.LayoutRow:first-child {
background-image: url('https://gallodoro.com/_img/logo.png') !important;
background-repeat: no-repeat !important;
background-position-y: center !important;
background-position-x: 10px !important;
padding-left: 80px !important;
background-size: 70px !important;
}I won't explain what each statement does in detail because I assume that you should know about this already. Instead I just show you the result:
You can take this much further from here. I have one example that you can try - but you'll need to replace all image links (the links are just placeholders and do not work) with your own images.
/*
Style with spilled coffee beans
*/
/**************************************
Variables
***************************************/
:root { /* Color variant */
--color1: rgb(37, 18, 6);
--color1t: rgba(37, 18, 6, 0.8);
--color2: rgb(236, 218, 188);
--color2t: rgba(236, 218, 188, 0.9)
}
/**************************************
Theme
***************************************/
.sapLandingPage > div {
background-image: url('https://gallodoro.com/_img/spilled-coffee-beans.jpg') !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.LayoutRow {
padding-left: 50px !important;
padding-right: 50px !important;
}
.LayoutBlock-Text p, .LayoutBlock-Text li {
color: var(--color1) !important;
font-size: 16px;
}
/*=== Header =========================*/
.LayoutRow:first-child {
background-color: var(--color1t) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.LayoutRow:first-child .Text-Content {
color: var(--color2) !important;
}
.LayoutRow:first-child {
background-image: url('https://gallodoro.com/_img/logo.png') !important;
background-repeat: no-repeat !important;
background-position-y: center !important;
background-position-x: 10px !important;
padding-left: 80px !important;
background-size: 70px !important;
}
/*=== Body ===========================*/
.gdo_body, .gdo_form {
margin-bottom: 20px !important;
background-color: var(--color2t) !important;
box-shadow: 3px 3px 10px rgba(0,0,0,0.9);
}
.gdo_body .LayoutBlock-Text h3 {
color: var(--color1) !important;
font-weight: bolder;
}
/*=== Title =========================*/
.gdo_form .LayoutBlock-Text {
background-color: var(--color1) !important;
padding: 10px 0 !important;
}
.gdo_form .Text-Content {
background-color: transparent !important;
}
.gdo_form .LayoutBlock-Text h3 {
color: var(--color2) !important;
font-weight: bolder;
margin: 0 !important;
}
/*=== Separator =====================*/
.LayoutBlock-Divider .LayoutBlockContent > div > div {
border-color: var(--color1) !important;
}
/*=== Button ========================*/
.sapCpButton, .Button-Link {
background-color: var(--color1) !important;
color: var(--color2) !important;
}
/*=== Footer ========================*/
.LayoutRow:last-child {
background-color: var(--color1t) !important;
color: var(--color2) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.LayoutRow:last-child p {
color: var(--color2) !important;
}
/*=== Form =========================*/
.sapCpTextWidget,
.sapCpTextWidget h1,
.sapCpTextWidget h2,
.sapCpTextWidget h3,
.sapCpTextWidget p,
.sapCpTextWidget strong {
color: var(--color1) !important;
font-weight: bold;
padding-bottom: 0;
padding-top: 20px;
}
.sapCpTextWidget:first-child {
padding-top: 0 !important;
}
.sapCpLabel {
color: var(--color1) !important;
}
/*=== Thumbnails ===================*/
.gdo_thumbnails .Text-Content p {
color: var(--color2) !important;
text-shadow: 1px 1px 10px black;
font-weight: bold;
font-size: 20px !important;
}
/**************************************
Mobile Settings
***************************************/
@media (max-width : 800px ){
.sapLandingPage {
padding: 0 !important;
}
.LayoutRow {
padding: 0 !important;
}
.gdo_body {
margin-top: 20px !important;
}
.sapLandingPage h1,
.sapLandingPage h2,
.sapLandingPage h3
{
margin-top: 0px;
}
}
/**************************************
General Tweaks
***************************************/
.sapLandingPage > div {
background-position-x: center !important;
}
.sapCpDropDown {
width: 100% !important;
}
/**************************************
Corrections
***************************************/
.Text-Content p {
margin: 0;
}
.sapCpCheckBox + .sapCpLabel {
display: block;
}
Here I defined a set of primary and secondary colours and applied those to many different parts of the landing page. I also introduced 2 custom classes: 'gdo_body' for a body column (applied to the left column) and 'gdo_form' for the form column, which takes care of the sub-title styling ('Lottery Registration'). Again, please note that for all those settings that are set with the '!important' option you won't be able anymore to change the attribute in the property panel (as explained above). The result looks like this:
Special CSS for Mobile Screens
Currently you cannot apply different style properties in the editor for different screen sizes (desktop / mobile). This means that you need to make compromises for certain styles like paddings and margins. For example, if you specify a left and right padding of 50px for a row then the mobile preview will show that 50px on the reduced screen size is too much:
With CSS you can use media queries to address specific screen sizes. In my complex example above, there is the following section which solves the issue: |  |
Styling of an Embedded Form
As explained in the previous post 'Styling Forms – Introduction' you can also do CSS styling on the form and also assign custom CSS classes to single form fields. If you embed a form in a landing page you can of course also influence the form directly. That also means that you do not have to use the external CSS file feature of the form (with the need of transferring CSS files to another web server). You can use the inline CSS of the landing page instead. You can even use both options and override some styles from the form CSS with the landing page CSS.
To give you an example, I start with this simple CSS code:
.sapCpButtonWidget button {
box-shadow: 3px 3px 10px rgba(0,0,0,0.7);
}This code applies a shadow to any submit button on the form. In the example, I have also used an external CSS for the form that allows a side-by-side placement of two fields on the same line with the class 'inline50' by using the flex model. That class was assigned to the name fields and the country and region field. However, in the CSS file there is the attribute 'min-width: 150px', which in our case results in a normal placement of all fields each on one line. Now I can also use the following code to correct this for the current landing page:
.inline50, .inline50 select {
min-width: 50px !important;
}Since I need to override the settings in the external file of the form, I needed to use the '!important' option again. The result of both code snippets looks like this:
Conclusion
After reading this post you should be able to apply additional styling to your landing pages with a CSS stylesheet.
f you are looking for more posts on this topic please check the link list of other posts of my CSS series in my initial post 'Styling Forms – Introduction'.
- SAP Managed Tags:
3 Comments
| User | Count |
|---|---|
| 4 | |
| 3 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
