Look & Feel

Navigate to WP Mobile Pack > Look & Feel to customize your mobile app theme by:

• Choosing color schemes & fonts

• Adding your logo and app icon

• Upload your cover

• Setup "Add To Home Screen"

1. Customize Color Schemes and Fonts

The color scheme will impact the following sections within the mobile app theme:

1. Headlines and primary texts

2. Article background

3. Article border

4. Secondary texts - dates and other messages

5. Category label color

6. Category text color

7. Buttons

8. Side menu background

9. Form inputs text

10. Cover text color

You have the possibility to choose from the predefined color schemes or create your own. When selecting the fonts, please notice how it impacts the overall readability of the application (Headlines, Subtitles, Paragraphs).

WordPress Mobile Pack FREE currently comes equiped with the following fonts:

• Roboto Light Condensed,

• Crimson Roman,

• Open Sans Condensed Light,

• Roboto Condensed Bold,

• Roboto Condensed Regular,

• Roboto Slab Light,

• Helvetica Neue Light Condensed,

• Helvetica Neue Bold Condensed,

• Gotham Book.

2. Customize Your App's Logo and Icon

You can also personalize your app by adding your own logo and icon. The logo will be displayed on the home page of your progressive web app, while the icon will be used when readers add your app to their homescreen.

Both logo & icon should be in a .png format with a transparent background and should not exceed 1MB. For the icon we recommend a size of 256 x 256 px.

3. Customize Your App's Cover

OBLIQ theme comes with 6 abstract covers that are randomly displayed on the loading screen to give your app a magazine flavor. You can further personalize it by uploading your own cover. Your cover will be used in portrait and landscape modes, so choose something that will look good on different screen sizes. We recommend using a square image of minimum 500 x 500 px. The file size for uploaded images should not exceed 1MB.

If you want to keep displaying random covers (not just one) but need to replace the default images, you can do so by uploading your own covers here: /wp-content/plugins/wordpress-mobile-pack/frontend/images/

Make sure that you keep the same naming standard: pattern-1.jpg, pattern-2, pattern-3, etc.

By default there are 6 covers, but if you need to extend that number, you need to operate a small change:

1. Open the following file: /wp-content/plugins/wordpress-mobile-pack/frontend/themes/app1/template.php

2. Find the line that writes: defaultCover: "<?php echo $app_settings['cover'] != '' ? $app_settings['cover'] : $frontend_path."images/pattern-".rand(1, 6).".jpg";;?>",

3. Replace rand(1, 6) with rand(1, your-number-of-covers), where "your-number-of-covers" should be a number matching the total number of images available in the above mentioned folder (/wp-content/plugins/wordpress-mobile-pack/frontend/images/)

4. Add to Home Screen

In order for your app to prompt users with a web app install banner we first have to make sure certain conditions are met.

1. Your site needs to be on "https" - browsers will not register the service worker unless it is served through "https".

2. Make sure your icon is uploaded correctly. You can check this by opening your app in Chrome dev tools (in mobile device mode), opening the "Application" tab and looking in the "Manifest" section. You should see your icon in different sizes, you may need to refresh a few times or clear your cache. If you do not see your icon in different sizes as shown bellow, you need to re-upload it.
3. Once you have established that your manifest contains multiple sizes for your icon of type 'image/png', you need to copy the 'sw.js' file contained in the WP Mobile Pack plugin directory to the root of your domain. Go to the "Look and Feel" page and scroll down to the "Add To Home Screen" section. Check the "Service Worker Installed" box and click "Save".
4. Now we can check to see if the service worker is registered. Back in Chrome dev tools in the "Application" tab, click on the "Service Worker" section. You may need to clear your cache and refresh a few times after which you should see that the service worker has registered. Now users who visit your App at least twice with at least 5 minutes between visits, will be prompted to add to home screen.
5. If you are using the PRO version and have push notifications active you have to do one last step so that they can work together with Add to Home Screen. Go inside the OneSignal plugin directory and open the "sdk_files" directory. Edit the following files one by one: "OneSignalSDKUpdaterWorker.js" & "OneSignalSDKWorker.js". In both of them right above the line that says:

   echo "importScripts('https://cdn.onesignal.com/sdks/OneSignalSDK.js');";

   insert the following line:

   echo "importScripts('https://your-domain.com/sw.js');";

   Remember to replace "your-domain" with the name of your actual domain.