Layout Royal

In this layout overview we’ll be taking a look at Layout Royal that you can find inside your app builder.

Here are the sections of this guide for quick reference.

Homepage Options
Layout Options
Previewing The Layout
Homepage Colors

Like with any other layout, you can choose to use this option from the layouts options panel by clicking the green change layout button from the homepage of the app builder when you are editing an app.

Homepage Options

This particular layout does not offer any homepage options.

Layout Options

There are a number of options available within the layout options for this layout.

The first option is for you to be able to set an image that will display for the top section of the app background. You need to provide a url for the image being used within the app and this can either come from the business website or from a file storage system like Amazon S3.

Please note that this url you supply will need to include the filetype in the url at the end with the file extension, an example would be https://4.bp.blogspot.com/-Kz4DIegglRE/XKbnj9OxjvI/AAAAAAAAGI4/YDoi-todU70aQbbDfcpSlghudXjPJK2RgCLcBGAs/s1600/Image_Profile.jpg note that this finished in .jpg which is what is necessary to display your image here.

You are able to adjust the height of the image shown on the app home page and this works on the measurement scale of VH which stands for Vertical Height. This acts as a percentage scale from the top down and so 70vh means the image will take up 70% of the screen size from the top down towards the bottom. Please note that this image is separate from the app background image.

Here’s a preview of the 70vh setup

You are able to provide a custom title text which displays on screen and in the option below, you can choose the size of that font in pixels (px).

You are able to provide a custom sub title text which displays on screen and in the option below, you can choose the size of that font in pixels (px).

This layout has two sections with elements that can be customised, we have simplified this with a ‘front screen’ and a ‘back screen’ as you can see in the image below.

CSS Customisations

There are some options you can customise within this particular layout to achieve a slightly different look or feel within the application.

If you wanted to do this you need to add this to your css panel under the colors menu option.

How to apply background of full height in Layout

/* Full Height Background - Layout Royal */
.layout.royal .royal_card .royal_up { background: none; }
.layout.royal .royal_card .royal_down { background: none; }
.layout.royal .royal_card {
 background-image: url(IMAGE_URL); 
 background-position: 50%;
 background-size: cover;
} 

.layout.royal .royal_card .royal_back { top: 0;}
.layout.royal #royal ion-content {
top: 15vh;  
bottom: 15vh;  
height: 70vh;
} 

Note: You have to change IMAGE URL in above CSS code to the one you want to use.

How to hide footer call, whatsapp, weblink icons

/* Hide Icons - Layout Royal */
.layout.royal .royal_card .royal_down { display: none; } 

How to change back screen top title background image

/* Change Background Top Title - Layout Royal */
.layout.royal .royal_on  .royal_up {  
background-image: url(IMAGE_URL); 
background-position: 50%;
background-size: cover;
}

Note: You have to change IMAGE URL in above CSS code to the one you want to use.

How to change back screen top title background color

/* Change Background Colour Top Title - Layout Royal */
.layout.royal .royal_on  .royal_up {
background: #ed145b !important;
} 

Note: You have to change Color Code in above CSS code.