How to use the Theme section

Want your Branded App or Web App to match your brand identity and change the colors? 

In this article, you will learn how to use the theme section

 

IN THIS ARTICLE

1. Changing your theme

2. Access your Passion.io Dashboard

3. Templates and customizing colors

4. Customizing colors with a hex code

5. Quick Guide

6. Branding 

7. Frequently Asked Questions (FAQs)

 

How to use the Theme section

 

1. Changing your theme

When you sign in to your Passion.io account for the first time, you can define how your app should look like by selecting pre-defined templates.

Below are the steps to make changes to the theme of your app.

 

 

2. Access your Passion.io dashboard

On your Passion.io dashboard, click the Theme section (the one with the paint palette icon) located on the side panel.

1.png

Can't access your Passion.io account? Check this article for information on how to log in and access your account: How do I access my account to build an app?

 

 

3. Templates and customizing colors

Choose any of the ready-made palettes under Templates or customize the colors of your app by clicking on the Customize Colors tab.

2.png

 

4. Customizing colors with a hex code

You can manually input the hex code to change the color or click on the circle beside the Hex code to adjust it.

3.png

 

5. Quick Guide

Here is a quick guide on customizing your theme colors:

4.png

For specific changes on design, please refer to the list below and click on the hyperlinks to view the examples:

 

Primary Color

  • UPGRADE button for paid products
  • Bullet for Multipricing Plan Selection
  • Highlight box for Multipricing Plan
  • Check marks on the Feature List widget
  • Terms of Use
  • Privacy Policy
  • Action buttons
  • Community icon and labels for no. of channels & members
  • Tracking icon

 

 

Background

Note: When you click on Channels, Messages, or Members under Community, the tab automatically turns white. This is not a bug.  If you don't want those tabs to be invisible when clicked, you may opt for a Background that is off-white or colored

  • Overlay on Header Widget
  • Background on Feature List Settings
  • Background on FAQ widget
  • Background on Pricing Plan

 

 

Secondary Background

  • Multipricing box
  • Highlight box for Discover, Learn, Community, Tracking, and Profile icon
  • Color background of Communities and Community/Tracking icon
  • Color background for tracking visibility text

 

 

 

Caption

 

Note: A channel with new updates will remain highlighted so you will notice that the title and description would be different in color from those that you have already opened or clicked on. It is not a bug.

  • FAQ Text
  • Channels, Messages, and Members Tab
  • Channel Title and Description

 

 

Divider

  • The line below Pricing Plan price and "Products included"
  • The line below Multipricing Plan product description and "Products included" and check mark for product list

 

Text Color

  • Header Widget: Headline, Caption
  • Hero Image Title
  • Feature List Title, Text
  • Pricing Plan Widget: Small Headline, Main Headline
  • Multipricing Plan Name, Plan Description, Products included in the plan
  • Lesson Labels: Week/Day
  • Text inside lessons
  • Carousel Text
  • Login Page text
  • Discover, Learn, Community, Tracking, and Profile icon (when clicked)

 

Button Text

  • Text for action buttons of Header, Pricing, and Multipricing widgets

 

6. Branding 

The Branding tab allows you to:

  • Turn OFF the Passion Branding (only available for Ultimate)
  • Add a logo for your Authentication Screen, Welcome Screen, Loading Screen
  • Add a background image for Discover Page, Loading State Background
  • Add a Header for Sequence Overview

To know the minimum file size requirements, please refer to the following: 

  • Logo for Authentication Screen, Welcome Screen, Loading Screen - 110 x 110 px
  • Background for Discover Page, Loading State Background - 750 x 1336 px
  • Header for Sequence Overview - 657 x 289 px

5.png

 

7. Frequently Asked Questions (FAQs)

 

1. Can I change my theme colors anytime?

Yes, you can change your theme as you would like. 

 

2. What are the size requirements for Branding Assets?

Logo for Authentication Screen, Welcome Screen, Loading Screen: 110 x 110 px

Background for Discover Page, Loading State Background: 750 x 1336 px

Header for Sequence Overview: 657 x 289 px

 

3. Can I change the fonts in the app?

For now, the fonts in the app are as is.

 

4. Why doesn't YOUR LOGO update on the Welcome Screen even if I have already updated my Web app icon?

Your Welcome Screen logo can be updated in the Theme Section under Branding. The Web App Icon is different. Please read more here: How to use the Theme section 

 

5. "Wow! You got all our featured programs image" still appearing on the background. How do I change it?

This will only appear if the client has bought all your programs. On another note, you can add another pricing plan on your sales page that your client doesn't have access to so the regular Discover Page would still show up instead of the "Wow! You got all our featured programs image."

 

You can also replace this photo by going to the Branding Section > Background for Discover Page, Loading State Background and remove or upload a new photo.

 

6. Will my logo appear on the Web App?

Your logo will appear on the Window Tab when you access your Progressive Web App (PWA).

 

SUGGESTED ARTICLES

 

 

Still have questions that were left unanswered? Check out our other categories for more information or use the search bar on top to find specific keywords.

 

Screenshot_2021-05-07_081147.jpg

Not a PassionFighter yet? Click here to join us!

 

Note: Feedback to articles are anonymous so we will not be able to reach back out. For other concerns/questions, please use the contact form and we will get back to you as soon as possible.