Text Styles

Umajin has a style editor labelled the ‘Styles Inspector’ which can be used to set styles that will apply globally across your project. There is an existing default style which can be altered as required and then you can add as many other styles as you wish for Headings, Captions, Labels etc.

By default all text is set to the default style. If you want to change the default style across the project you can change the text settings in the ‘Styles Inspector’.

The ‘Styles Inspector’ is accessed from the ‘File’ menu dropdown under ‘Styles’. It can also be accessed using the pencil icon beside the ‘Base style’ dropdown under the ‘Text Style’ heading in the ‘Properties Inspector’ of any page that has a text component on it. The ‘Base Style’ dropdown also provides options to ‘Create a Style’ and ‘Organize Styles’.

If you change any settings in the default style setup, the trouble is that all our heading, body and button text will change as well – so what you need to do is to create separate, new styles. Click the ‘plus’ button to the right of ‘Add new style’ and you can quickly create a new style for Headings, body text, button text, caption text or whatever, and then using the ‘Base style’ dropdown back in the component’s ‘Property Inspector’, you can quickly apply whichever style is appropriate.

Changing and Adding Styles

All Components with text will have the default style applied automatically, as shown in the screenshot below.style_1

By changing the default font size, all components with that style applied, anywhere in the application, will reflect that change. The change seen below is an increase in the font size from 7.5 to 11.5.

style_2

You can create new styles using the + button on the Styles Inspector. Naming them appropriately will make it easy to select them from the dropdown of styles you create and apply them across your App in the right places. In the screenshot below we show a Heading style we have created.

style_3

Overriding a Text Style

When you have set a text style you can also override it for a specific instance on a component. Change the settings as you wish in the component’s ‘Properties Inspector’ under the ‘Text Style’ heading (size, color, opacity, font, alignment). The label on the Component’s ‘Properties Inspector’ under the ‘Text Style’ heading will change to italic and a small plus icon will display to indicate you have changed a text property. The text will change accordingly for this page only.

specific style edit

If you want to revert it back to the original settings just click the refresh arrow, beside the pencil icon.

If you change a property in the main ‘Styles Inspector’ editor, however, this style change will then become global across your whole project.

How to Add Fonts

When you want to add your own fonts to an App

  1. Go to the File menu
  2. Go to ‘Open Resources Folder
  3. Copy any OTF (Open Type Fonts) or TTF (True Type Fonts) font files into the Fonts folder
  4. Make sure you have the rights to embed the fonts.