{"id":4976,"date":"2013-02-21T15:27:47","date_gmt":"2013-02-21T21:27:47","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/legacy\/?page_id=4976"},"modified":"2019-04-22T17:00:05","modified_gmt":"2019-04-22T22:00:05","slug":"m-power-theming-plugin","status":"publish","type":"page","link":"https:\/\/www.mrc-productivity.com\/legacy\/deprecated-documentation\/m-power-theming-plugin","title":{"rendered":"m-Power Theming Plugin"},"content":{"rendered":"<h1>m-Power Theming<\/h1>\n<p><strong>Note:<\/strong> This feature has since been deprecated.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/ibD_5TRPt1E\" height=\"360\" width=\"640\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><br \/>\n<i>Editor&#39;s Note: This feature is only available for dictionary&#39;s utilizing the Retro Theme<\/i><\/p>\n<p class=\"scriptbutton\">\n<input id=\"script1\" class=\"toggleScript\" type=\"button\" value=\"Show Video Script\"><\/p>\n<p class=\"script script1\">\nm-Power&#39;s Theming feature allows developers to customize&nbsp;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.<\/p>\n<p>In this video I will show you how easy it is to utilize the Theming feature.<\/p>\n<p><strong>Getting Started<\/strong><\/p>\n<p>This feature is&nbsp;conveniently&nbsp;located in the Admin&nbsp;section, to begin, click the Admin icon.<\/p>\n<p>Next click the Utilities icon. Then click m-Power Theming.<\/p>\n<p>The new Theming feature allows you to create multiple style sheets. All style sheets you create will be listed here.<\/p>\n<p>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.<\/p>\n<p>On the right side we have a link that reads: View Stylesheet, clicking this link will open the&nbsp;style sheet&nbsp;code page.<\/p>\n<p><strong>Creating a New StyleSheet For The Dictionary<\/strong><\/p>\n<p>Let\u2019s create a new style sheet. Click the green plus sign. Let\u2019s name it BLUETHEME. Select the device that will use these styles.<\/p>\n<p><span style=\"text-decoration: underline;\">Background<\/span>: Here you can create a gradient or solid color background for the application. Just pick the color&nbsp;you&nbsp;want to use from the color palette. Notice how the preview on the right side displays the changes automatically.<\/p>\n<p><span style=\"text-decoration: underline;\">Title:<\/span> Pick a color for the title background. Choose a font and font size. Choose from Normal, Bold, or Italic<\/p>\n<p><span style=\"text-decoration: underline;\">Table header:<\/span> Select a color for the background. Select a Font Color.<\/p>\n<p><span style=\"text-decoration: underline;\">Data Styles:<\/span> Here you can control the text inside the data cells. Select a Font Size, and a Font Style.<\/p>\n<p><span style=\"text-decoration: underline;\">Header Styles:<\/span> Here you can change the color of the main header. Select a color.<\/p>\n<p>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.<\/p>\n<p>Click Save. Click View Stylesheet.<\/p>\n<p>Here you see the styles in CSS code, select all the text and copy it.<\/p>\n<p><strong>Applying The New Styles To The Dictionary<\/strong><\/p>\n<p>Next we need to find the Stylesheet for the current dictionary.<\/p>\n<p>Click Admin. Then click Edit Data Dictionary Files. Click the Servlet Style Sheet icon.<\/p>\n<p>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&nbsp;you&nbsp;save this text file for backup purposes. Select all text and delete it, then paste the new CSS code.&nbsp;Click&nbsp;the Save icon.<\/p>\n<p>Now, all applications in the current dictionary will use the new styles you just created.<\/p>\n<p>Press F5 to reload the web page.<\/p>\n<p>*NOTE: if you do not see the new styles, please clear the browser&#39;s cache. Most likely the browser is displaying the old style sheet.<br \/>\n&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>m-Power Theming Note: This feature has since been deprecated. Editor&#39;s Note: This feature is only available for dictionary&#39;s utilizing the Retro Theme m-Power&#39;s Theming feature allows developers to customize&nbsp;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":5724,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4976","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/4976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/comments?post=4976"}],"version-history":[{"count":36,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/4976\/revisions"}],"predecessor-version":[{"id":9379,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/4976\/revisions\/9379"}],"up":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/5724"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/media?parent=4976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}