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.
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.
Customise your Theme
To access the Theme styling page, simply click on the theme you wish to modify.
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.
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).
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.
Furthermore, clicking on any element triggers the opening of the style configurations panel on the right screen.
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.
Remember to frequently save your changes; once you leave this dashboard, all changes will be lost.
Advanced Options
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.
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.
Options:
Set current theme as default theme
Delete this theme
Change settings: Theme name can be changed and assigned to a specific organization/publication.
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.
Last updated
