IN THIS ARTICLE

    IN THIS ARTICLE

      Text Theme

      Give every piece of text on your dashboard wireframe (titles, labels, KPI values, navigation, and more) a consistent, on-brand look with Text Themes.

      What is Text Theme?

      A Text Theme controls the font family, size, style (bold, italic, underline), color, and alignment of text across your dashboard. Text Themes work the same way as Color Themes and Effects Themes. Apply a ready-made theme, or customize your own and save it for reuse.

      Text Themes can be applied at two levels:

      • Project level: apply one font style to every screen in the project.
      • Element level: override the font style on a single element, such as a chart, KPI, or table, without changing the rest of the dashboard.

      How to Use?

      Project Level

      • Open a project and click 'Design' in the left menu panel.
      • Under 'Text Theme', click 'Change Text Theme'.

      • Browse the 'Default' tab for ready-made themes (for example, Default, Crisp, Bold, Vintage), each labeled for a light or dark background.
      • Hover over a theme card and click 'Apply' to use it as is, or 'Edit' to customize it first.
      • If you choose 'Edit', your changes preview live on the canvas in Preview Mode. Click 'Apply' in the top bar to save and use them, or 'Discard' to cancel.

      Element Level

      There are two ways to reach Text Theme options for a single element:

      Way 1: From the element's edit panel

      1. Select an element on the canvas to open its edit panel.
      2. Near the bottom of the left panel, expand 'Element Text Theme'. 
      3. This opens an Element Text editor for just that element, with options to customize font, size, style, alignment, color, and more. Choose the part of the element you want to style from the 'Item Name' dropdown. 
      4. Adjust the font, size, style, color, and alignment for that item. Changes apply directly to the element as you make them. Or click 'Reset to default' to match the project theme again.

      Way 2: From the floating toolbar

      1. Click any element on the canvas to select it.
      2. In the floating toolbar above the element, click the 'Theme & Customization' icon.
      3. Select 'Text Theme' from the menu. Color Theme and Effects Theme are also available from this menu.
      4. In the Element Editor panel, choose the part of the element you want to style from the 'Item Name' dropdown. For a KPI, this includes Title, Measured Value, Compared Value, Percentage Change, and Others.
      5.  Adjust the font, size, style, color, and alignment for that item. Changes apply directly to the element as you make them. Or click 'Reset to default' to match the project theme again.

      Tip: Whichever change you make most recently is the one that sticks. For example, if you customize an element, then apply a new project-level Text Theme, the project theme overrides that element's custom styling.

      How to Customize?

      Text Themes are broken down by dashboard section, so you can style each part independently:

      Header, Sidebar, Filters, KPI, Charts, Table, Textbox, Buttons, Shape Title, Image Title

      For each section, pick the specific item you want to edit (a header title, a KPI's title or value, a chart's axis or data label, and so on), then set:

      • Font: choose any font family.
      • Size: set the font size.
      • Style: None, Bold, Italic, or Underline.
      • Alignment: left, center, or right.
      • Color: pick a color or enter a hex code.

      Click 'Reset to Default' at any time to revert that item to the theme's original styling.

      Tip: Some elements, like dropdowns, navigation links, and “added value” fields, also include a Background Color option, since a white background does not always suit a dark or colored Text Theme.

      Tip: Within a KPI, most items support a Color field. Title, Measured Value, Compared Value, and Others can each have their text color set. Percentage Change is the exception. Its color is tied to whether the change is positive or negative (green or red), so it cannot be manually overridden.

      Tip: Some chart types have extra text fields. Gauge charts let you style the target and value labels. Funnel and Treemap charts let you style their data labels. Tables let you style Simple and Hierarchy layouts separately, for example, parent-row text versus row text.

      Naming and Saving Custom Text Themes

      When you select an existing text theme, you can preview it and click 'Apply' to use it as is. Once you customize an existing theme's font, size, style, alignment, or color, Mokkup treats it as a new custom theme. Here's how to name and save it so you can reuse it later: 

      1. Change the font, size, style, alignment, or color as you prefer, from the left panel.
      2. Click 'Save & Apply' at the top of the dashboard.
      3. Clicking it opens a pop-up where you name your new custom theme.
      4. To rename your custom theme later, click the pencil icon next to its name at the top of the panel.
      5.  If you try to navigate away with unsaved changes, Mokkup shows an “Unsaved theme changes” prompt, asking you to save and apply or discard them.
      6. Your saved custom theme appears under the 'Custom' tab and can be reused on any project.

      Shared Text Themes in Team Projects

      When you apply a custom Text Theme to a shared project, it becomes available to every collaborator on that project. Collaborators can apply and edit it as well.

      This was a complete guide to using Text Themes on Mokkup. For further questions, please ask our Chatbot or contact Support.

      Similar articles