m-Power Theming
Note: This feature has since been deprecated.
Editor's Note: This feature is only available for dictionary's utilizing the Retro Theme
m-Power's Theming feature allows developers to customize the look and feel of their applications without the need to know CSS. The Theming feature applies changes to the dictionary Stylesheet directly from a styles editor interface. From the new styles editor you can work and instantly preview how the changes will look in your applications, all from within the same screen.
In this video I will show you how easy it is to utilize the Theming feature.
Getting Started
This feature is conveniently located in the Admin section, to begin, click the Admin icon.
Next click the Utilities icon. Then click m-Power Theming.
The new Theming feature allows you to create multiple style sheets. All style sheets you create will be listed here.
On the left side of the screen we have four icons; these icons are View, Update, Copy, and Delete. If you worked with maintainers before you will recognize these icons.
On the right side we have a link that reads: View Stylesheet, clicking this link will open the style sheet code page.
Creating a New StyleSheet For The Dictionary
Let’s create a new style sheet. Click the green plus sign. Let’s name it BLUETHEME. Select the device that will use these styles.
Background: Here you can create a gradient or solid color background for the application. Just pick the color you want to use from the color palette. Notice how the preview on the right side displays the changes automatically.
Title: Pick a color for the title background. Choose a font and font size. Choose from Normal, Bold, or Italic
Table header: Select a color for the background. Select a Font Color.
Data Styles: Here you can control the text inside the data cells. Select a Font Size, and a Font Style.
Header Styles: Here you can change the color of the main header. Select a color.
For purposes of keeping this video short, I will not cover all the styles, but you can go ahead and explore with other Styles on your own.
Click Save. Click View Stylesheet.
Here you see the styles in CSS code, select all the text and copy it.
Applying The New Styles To The Dictionary
Next we need to find the Stylesheet for the current dictionary.
Click Admin. Then click Edit Data Dictionary Files. Click the Servlet Style Sheet icon.
These are the current Styles being used by the dictionary; we will replace these with the new one you just created. As always we suggest you save this text file for backup purposes. Select all text and delete it, then paste the new CSS code. Click the Save icon.
Now, all applications in the current dictionary will use the new styles you just created.
Press F5 to reload the web page.
*NOTE: if you do not see the new styles, please clear the browser's cache. Most likely the browser is displaying the old style sheet.