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).

  • 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.

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. 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.

Last updated