Overview

You want to create a specific design for an app feature different from the Global Design which is used across the app. This article shows how you can achieve this by enabling the Custom Design functionality to override the Global Design. 

Diagnosis

You need to create a separate design for a specific App Feature that will not conform with the Global Design already (created in the design phase of your app's lifecycle). This feature's design may call for something unique compared to the rest of the features' design (eg a unique background image or adjust the color scheme) and thus cannot be shared across all the app. 

For such cases you can use the Custom Design, which appears within the Build option of the app dashboard under each feature. This way you can create the customized design of your preference for the features you wish. 

Back to top

Solution

1. Navigate to Create -> Build -> <Feature_you_wish_to_customize_the_design_for> ->Custom Design and click Enable (In the example below, we selected an Info-3-Tier).

2. Choose navigation Buttons. 

Customize the button that appears next to your feature in the list view.

• Show Icon: Toggle on to display a feature icon.
• Icon Color: Select the feature icon color.
• Text Color: Select the Button Name text color.

3. Choose Screen Styling

Customize the in-feature header, background, and style.

• Choose Color Scheme: Choose from our modern color schemes. Use the Custom Color settings to customize colors on an individual basis.
• Header Background: Click the icon to select the Header Background Color, set the Image Overlay Opacity, and select or upload a header Background Image.
• Header Text and Color: Select the feature header text color.
• Header Text Shadow Color: Select the feature header text shadow color.
• Screen Background: Click the icon to select the feature background image and enable/disable the Blur Effect. You can select or upload a Screen Background Image here.
  Note: On the Info-Tier feature the Screen Background image applies to the Comment tab and not to the Description tab.  
  
• Font: Select the font for the in-feature content.
• List Color Theme: Select a color theme for the feature or customize each color setting individually below.
  • Section Name: Select the Bar and Text colors for the Section Name.
  • Odd Row: Select the Bar and Text colors for Odd Rows.
  • Even Row: Select the Bar and Text colors for Even Rows.
• Button Text Color: Select the in-feature Button Text Color.
• Button Background Color: Select the in-feature Button Background Color.

4. Once settings have been adjusted as desired, click Save at the top to apply the custom design model.

Note: This can be reverted back to the Global Design at any point by clicking Use Global Design > Save.

Back to top

Testing

Now the specific feature which you have enabled the Custom Design for will not inherit the Global Design settings and will appear exactly as per the Custom Design you created.

Back to top

Related Articles

• Feature Compatibility List