This article is a guide to changing your app's Theme colors and understanding 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.
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.
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.
5. Quick Guide
Here is a quick guide on customizing your theme colors:
For specific changes on design, please refer to the list below and click on the hyperlinks to view the examples:
- UPGRADE button for paid products
- Bullet for Multipricing Plan Selection
- Highlight box for Multipricing Plan
- Check marks on Feature List widget
- Terms of Use
- Privacy Policy
- Action buttons
- Community icon and labels for no. of channels & members
- Tracking icon
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
- 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
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
- 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
- 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)
- 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
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. You can request this feature improvement on Canny.
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.
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.