Themes

Welcome to the Theme Dashboard, your central hub for managing and customising the visual styling of your app. Here, you can create, edit, and apply themes to ensure your app's design reflects your brand identity and aesthetic preferences.

Overview

On the Theme Dashboard, you will find all the themes you've created for your apps. If you've already created a project, you were prompted to choose from the available templates. The chosen template will then appear on your theme dashboard as one of the themes. This template serves as the primary styling option for your app.

Moreover, you'll have the flexibility to add more themes, allowing you to tailor the styling options for text and images on individual articles/pages of your app to your liking.

Youtube vi deo tutorial

Themes Dashboard

---

Creating a Theme

To create a new theme, simply click on the "Create Theme" button located in the top right corner of the dashboard. You'll be prompted to assign it a name and associate it with a project within your Organisation.

Create a Theme

---

Customise your Theme

To access the Theme styling page, simply click on the theme you wish to modify.

Select a theme to style

This action will open up the Theme page, where you can make your desired modifications. Here, you can customize various styling options for text and images, including headings, paragraphs, font styles, font sizes, background colours, alignment, padding, and more.

Theme Page

Remember to frequently save your changes; once you leave this dashboard, all changes will be lost.

Navigating Element Selection and Style Customisation:

Left Panel - Element Selection

The Element Selection panel offers a variety of text and image styles that you can utilise for your app. These styles include headings (h1, h2), paragraphs (p), and image alignments (img-left, img-full-width).

Element Selection

Simply click on any text or image element, and the corresponding UI format will be displayed on the screen. For instance, clicking on "h1" will reveal the chosen font and size applied to it. This panel acts as a reference point for selecting desired styles.

Styles for images & Text

Furthermore, clicking on any element triggers the opening of the style configurations panel on the right screen.

Click Element to style

Right Panel - Style Customisation

The Style Customisation panel empowers you to refine and adjust the appearance of text and image elements selected from the Theme Selection panel. Here, you can fine-tune various attributes such as fonts, colors, alignment, padding, and more. The changes made in this panel directly affect the styling of the elements chosen from the left-hand screen, providing real-time customization capabilities.

Style Configuration

Remember to frequently save your changes; once you leave this dashboard, all changes will be lost.

---

Advanced Options

Advanced Options

1. Add New Style: Create new styling options for text and images by specifying style names, choosing text or image types, and applying classes, IDs, or tags.

Add New Style

1. Edit CSS: Click on the "Advanced CSS" button to access and edit the CSS. This option allows users with CSS knowledge to further customize text and images based on the styles defined in the Theme Dashboard. You can also apply custom CSS to new styles added to the theme.

Advanced CSS

1. Options:

• Set current theme as default theme

• Delete this theme

• Change settings: Theme name can be changed and assigned to a specific organization/publication.

Theme Settings

Additional Resources

---

• Choosing a font for your app: https://www.justinmind.com/ui-design/best-font-mobile-app

• Choose the right colour for your app: https://www.goodbarber.com/blog/how-to-choose-the-right-colors-for-your-mobile-app-a1167/

Important Information

It's essential to note the relationship between the Theme Dashboard and the Article Dashboard. All styling decisions made in the Theme section will be applied to the individual articles/pages of your app. By defining the theme's styling here, you can easily apply consistent styling to all text and images within your app's content.

How to Use This Section

To access the Theme Dashboard, simply navigate to the Main Dashboard and click on the Themes tab. From there, you can create, edit, and manage themes to customise the visual styling of your app according to your preferences.