How To Create a Mobile Theme¶

Vinyl does a great job of automatically converting any app to be mobile friendly. That said, there may be instances where you want more granular control over the mobile presentation of an app. Like how standard Themes work in Vinyl, a Mobile Theme can be applied site wide or more specifically to a page in an app. This article will provide information on how Mobile Themes work in Vinyl as well as step through the basic configuration for creating a Mobile theme for an app.

How Mobile Themes Work in Vinyl¶

• Mobile themes are themes that get called in when Vinyl detects you are using a mobile device (note they apply to mobile only - not iPad or tablet devices).
• Mobile themes are set up in the same way as standard themes - most notably they have a Base theme, and the Base theme is what determines when and where a Mobile theme gets called and applied. A Mobile theme must have a Base theme in order to work, and wherever that Base theme is used (either as an application wide theme or just a specific page level theme), the Mobile theme will be called in addition.
• Mobile themes get applied "on top" of other pre-existing themes, they don't replace them, so in order for any styles from a Mobile theme to be applied, they need to be more specific than any pre-existing styles that are getting applied from other themes already on the page.
  

Site Wide Mobile Themes¶

An app named "Budget Calculator" has its Base theme set as "App Base Theme", meaning that theme applies across the entire application. In addition, there is a Mobile theme called "Mobile Theme" - and the Base theme for this mobile theme is set as the "App Base Theme". In this scenario, the Mobile theme will be active across the entire application, as every page uses the "App Base Theme".

Page Specific Mobile Themes¶

An app named "Budget Calculator" has a page called "Home", which has a page-level theme applied called "Home Page Theme" - meaning this theme only applies on the "Home" page. In addition, there is a Mobile theme called "Home Page Mobile Theme" - and the Base theme for this Mobile theme is set as the "Home Page Theme". In this scenario, the Mobile theme will only be active on the "Home" page of the application, as it only gets called in on pages that use the "Home Page Theme", which in this case is only the "Home" page.

How to Create a Mobile Theme¶

An example of when you may want to use a Mobile theme is to add padding to outer containers on mobile so that all the app pages have a bit more space to breathe.

Step 1: Create a Mobile Theme¶

When you're ready to create a Mobile theme for an app, we will assume that you have an existing app theme already configured. This app theme should be used as the Base Theme for your Mobile theme.

1. Navigate to Look & Feel for your app
2. Select Mobile from Theme Type
3. Click the +Theme button
4. Assign a Theme Name. For example: Theme Mobile
5. Set the Base Theme value to the main Theme the app is using. For example: Themes Exercise
6. Confirm or set the Collection to a Collection your app has access to. For example: NorthwindsTraining
7. Set the Type to Mobile
8. Click Save

9. Add any mobile specific Style(s) needed. For example:

   • Select Panel as Component
   • Click + Style from Styles panel
   • Set Area to Container
   • Set Style Type to Spacing
   • Under Values, set 3-Padding to the desired setting. For example: 2em
   • Click Save

Step 2: Associate Mobile Theme to App¶

In this step you will associate the Mobile theme to the app. For this example we want the Mobile theme to appear site wide, so we will confirm that the Base theme is the theme associated with our app.

1. Navigate to the App Workbench
2. Under App Settings, check that the Theme value is set to the Base theme used by your Mobile theme created in Step 1
3. Return to the application view, refresh the web browser and test