{"id":17347,"date":"2016-08-01T15:54:22","date_gmt":"2016-08-01T07:54:22","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=17347"},"modified":"2024-06-10T12:19:50","modified_gmt":"2024-06-10T04:19:50","slug":"styles","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/","title":{"rendered":"Styling Components"},"content":{"rendered":"\n<p class=\"left-bar\">This article describes the styling properties of each component. For an overview of how styling works, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/\">Overview of Styles in IFS OI Explorer<\/a>.<\/p>\n<h1 class=\"page-subheading3\">Hierarchies<\/h1>\n<h2 class=\"page-subheading\">Breadcrumb<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/breadcrumb\/\">Breadcrumb tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Breadcrumb<\/strong> in design mode (which is indicative of display mode).<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17861 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style.png\" width=\"693\" height=\"138\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style.png 693w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-150x30.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-48x10.png 48w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">What You Can Change<\/p>\n<p class=\"intro-text\">With the Breadcrumb, you can change the styles relating to font and alignment. As the breadcrumb contains links, the middle nodes will always show the inherited blue hyperlink colour (#67809F).<\/p>\n<p class=\"intro-text\"><strong>1. Base Style<\/strong>: Style the text that appears in the list.<\/p>\n<ul>\n<li>Font Size<\/li>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Weight<\/li>\n<li>Font Alignment<\/li>\n<li>Underline<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>2. Alignment<\/strong>: Set the alignment of the breadcrumb within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<p class=\"no-toc-heading\">\nExample: Changing the Breadcrumb Alignment<\/p>\n<table class=\"table-toc\" style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Design Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17868\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style.png\" alt=\"breadcrumb-align1-style\" width=\"600\" height=\"56\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style.png 692w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-48x5.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17869\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop.png\" alt=\"breadcrumb-align1-prop\" width=\"417\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop.png 417w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-48x16.png 48w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example: Changing the Breadcrumb Padding<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Design Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17871\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style.png\" alt=\"breadcrumb-align2-style\" width=\"686\" height=\"62\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style.png 686w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-48x4.png 48w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17872\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop.png\" alt=\"breadcrumb-align2-prop\" width=\"416\" height=\"141\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-150x51.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-48x16.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example: Changing the Breadcrumb Font<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Design Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17874 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style.png\" width=\"692\" height=\"63\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style.png 692w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-48x4.png 48w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17873 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop.png\" width=\"415\" height=\"278\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Entity Selector<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Entity Selector <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17737\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base.png\" alt=\"entity-selector-base\" width=\"377\" height=\"369\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base.png 377w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-150x147.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-48x48.png 48w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Entity Selector, you can change the styles relating to the text, and the line that separates each entity. The check boxes, search boxes, and drop-down list will remain the inherited grey colour (#737373).<\/p>\n<p><strong>1. Base Style: <\/strong>Style the text that appears in the list.<\/p>\n<ul>\n<li>Entity Selector Font Size<\/li>\n<li>Entity Selector Font Family<\/li>\n<li>Entity Selector Font Colour<\/li>\n<li>Entity Selector Font Weight<\/li>\n<li>Entity Selector Font Alignment<\/li>\n<li>Entity Selector Underline<\/li>\n<li>Entity Selector Text Case<\/li>\n<\/ul>\n<p><strong>2. Entity Separator: <\/strong>Style the line that separates the text.<\/p>\n<ul>\n<li>Entity Selector Line Colour<\/li>\n<li>Entity Selector Line Size<\/li>\n<li>Entity Selector Line Style<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text in the entity list and filter<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17832 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style.png\" width=\"302\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style.png 302w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-41x48.png 41w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17833 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties.png\" width=\"364\" height=\"281\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties.png 364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-150x116.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-48x37.png 48w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the separator lines in the entity list<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17834\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style.png\" alt=\"entity-selector-custom-separator-style\" width=\"302\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style.png 302w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-41x48.png 41w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17835\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties.png\" alt=\"entity-selector-custom-separator-properties\" width=\"364\" height=\"153\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties.png 364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-48x20.png 48w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Hierarchy<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Hierarchy <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17911\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1.png\" alt=\"hierarchy-style-base1\" width=\"305\" height=\"177\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1.png 305w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-48x28.png 48w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Hierarchy you can change the styles relating to the text in the tree list. The filter will remain the inherited grey colour.<\/p>\n<p><strong>1. Hierarchy Font Style: <\/strong>Style the text that appears in the list.<\/p>\n<ul>\n<li>Hierarchy Font Size<\/li>\n<li>Hierarchy Font Family<\/li>\n<li>Hierarchy Font Colour<\/li>\n<li>Hierarchy Font Weight<\/li>\n<li>Hierarchy Font Alignment<\/li>\n<li>Hierarchy Underline<\/li>\n<li>Hierarchy Text Case<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text in the tree list<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17912\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font.png\" alt=\"hierarchy-style-font\" width=\"311\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-48x31.png 48w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17913\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props.png\" alt=\"hierarchy-style-font-props\" width=\"414\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-48x32.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Hierarchy Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy-picker\/\">Hierarchy Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Hierarchy Picker <\/strong>in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17897 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1.png\" width=\"398\" height=\"131\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1.png 398w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-48x16.png 48w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Hierarchy Picker you can change the styles relating to the text, alignment, and the line below the drop-down list. The drop-down arrow will remain the inherited dark grey colour.<\/p>\n<p><strong>1. Hierarchy Picker Bottom Border: <\/strong>Style the line below the drop-down list.<\/p>\n<ul>\n<li>Hierarchy Picker Line Colour<\/li>\n<li>Hierarchy Picker Line Size<\/li>\n<li>Hierarchy Picker Line Style<\/li>\n<\/ul>\n<p><strong>2. Hierarchy Picker Font: <\/strong>Style the text that appears in the list.<\/p>\n<ul>\n<li>Hierarchy Picker Font Size<\/li>\n<li>Hierarchy Picker Font Family<\/li>\n<li>Hierarchy Picker Font Colour<\/li>\n<li>Hierarchy Picker Font Weight<\/li>\n<li>Hierarchy Picker Font Alignment<\/li>\n<li>Hierarchy Picker Underline<\/li>\n<li>Hierarchy Picker Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Set the alignment of the Hierarchy Picker within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17891\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style.png\" alt=\"hierarchy-picker-font-style\" width=\"190\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style.png 190w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-48x37.png 48w\" sizes=\"auto, (max-width: 190px) 100vw, 190px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17893\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props.png\" alt=\"hierarchy-picker-font-props\" width=\"420\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props.png 420w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-48x32.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Border of the drop-down list<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17890\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style.png\" alt=\"hierarchy-picker-border-style\" width=\"98\" height=\"39\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style.png 98w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style-48x19.png 48w\" sizes=\"auto, (max-width: 98px) 100vw, 98px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17892\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props.png\" alt=\"hierarchy-picker-border-props\" width=\"430\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props.png 430w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-48x15.png 48w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h1 class=\"page-subheading3\">Charts<\/h1>\n<h2 class=\"page-subheading\">Bullet Graph<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/bullet-graph\/\">Bullet Graph tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Bullet Graph<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17953\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base.png\" alt=\"bullet-graph-base\" width=\"335\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-48x23.png 48w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Bullet Graph you can change the colour of the bar indicating the actual value, and the target line.<\/p>\n<p><strong>1. Actual Bar<\/strong>: Set the colour of the value bar.<\/p>\n<ul>\n<li>Actual Background Colour<\/li>\n<\/ul>\n<p><strong>2. Target<\/strong>: Style the line indicating the target.<\/p>\n<ul>\n<li>Target Line Colour<\/li>\n<li>Target Line Thickness<\/li>\n<li>Target Line Style<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Actual bar<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17954\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style.png\" alt=\"bullet-actual-style\" width=\"200\" height=\"69\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style.png 200w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-48x17.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17955\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop.png\" alt=\"bullet-actual-prop\" width=\"408\" height=\"61\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-48x7.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Target line<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17956\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style.png\" alt=\"bullet-target-style\" width=\"200\" height=\"70\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style.png 200w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-150x53.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-48x17.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17957\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop.png\" alt=\"bullet-target-prop\" width=\"408\" height=\"130\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-48x15.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Chart<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Chart tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows a discrete chart (left) and continuous chart (right) in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18396\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base.png\" alt=\"chart-base\" width=\"906\" height=\"451\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base.png 906w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-768x382.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-48x24.png 48w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Chart you can change the appearance of the axes, gridlines, legend, tooltip, and hairline.<\/p>\n<p><strong>1. Axis Ticks<\/strong>: Style the text along the X and Y axes.<\/p>\n<ul style=\"columns: 2;\">\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<li>Axis Ticks Underline<\/li>\n<li>Axis Ticks Text Case<\/li>\n<\/ul>\n<p><strong>2. Axis Label<\/strong>: Style the label text for the X axis.<\/p>\n<ul style=\"columns: 2;\">\n<li>Axis Label Font Family<\/li>\n<li>Axis Label Font Colour<\/li>\n<li>Axis Label Font Size<\/li>\n<li>Axis Label Font Weight<\/li>\n<li>Axis Label Underline<\/li>\n<li>Axis Label Text Case<\/li>\n<\/ul>\n<p><strong>3. Legend<\/strong>: Style the text inside the legend.<\/p>\n<ul style=\"columns: 2;\">\n<li>Legend Font Family<\/li>\n<li>Legend Font Colour<\/li>\n<li>Legend Font Size<\/li>\n<li>Legend Font Weight<\/li>\n<li>Legend Underline<\/li>\n<li>Legend Text Case<\/li>\n<\/ul>\n<p><strong>4. Tooltip<\/strong>: Style the text inside the tooltip popup in discrete charts.<\/p>\n<ul style=\"columns: 2;\">\n<li>Tooltip Font Family<\/li>\n<li>Tooltip Font Colour<\/li>\n<li>Tooltip Font Size<\/li>\n<li>Tooltip Font Weight<\/li>\n<li>Tooltip Underline<\/li>\n<li>Tooltip Text Case<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>5. Hairline<\/strong>: Style the appearance of the hairline in continuous charts.<\/p>\n<ul style=\"columns: 2;\">\n<li>Hairline Colour<\/li>\n<li>Hairline Thickness<\/li>\n<li>Hairline Style<\/li>\n<li>\u00a0<\/li>\n<\/ul>\n<p><strong>6. Hairline Popup<\/strong>: Style the text inside the hairline popup in continuous charts.<\/p>\n<ul style=\"columns: 2;\">\n<li>Hairline Font Family<\/li>\n<li>Hairline Font Colour<\/li>\n<li>Hairline Font Size<\/li>\n<li>Hairline Font Weight<\/li>\n<li>Hairline Underline<\/li>\n<li>Hairline Text Case<\/li>\n<\/ul>\n<p><strong>7. Gridline<\/strong>: Style the vertical and horizontal lines on the chart canvas.<\/p>\n<ul style=\"columns: 2;\">\n<li>Gridline Colour<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<p><strong>8. Line Series, Bar Series, Area Series, Dot Series<\/strong>: Style the trace on the chart canvas.<\/p>\n<ul style=\"columns: 2;\">\n<li>Line Series Opacity<\/li>\n<li>Line Series Thickness<\/li>\n<li>Line Series Style<\/li>\n<li>Bar Series Opacity (also applies to stacked bar charts)<\/li>\n<li>Area Series Opacity<\/li>\n<li>Dot Series Opacity<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis ticks<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18398\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style.png\" alt=\"chart-axis-ticks-style\" width=\"414\" height=\"300\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-150x109.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-48x35.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18399\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop.png\" alt=\"chart-axis-ticks-prop\" width=\"409\" height=\"238\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-48x28.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis label<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18400\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style.png\" alt=\"chart-axis-label-style\" width=\"409\" height=\"302\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-48x35.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18401\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop.png\" alt=\"chart-axis-label-prop\" width=\"409\" height=\"236\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-48x28.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the legend<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18402\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style.png\" alt=\"chart-legend-style\" width=\"407\" height=\"304\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style.png 407w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-150x112.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-48x36.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18403\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop.png\" alt=\"chart-legend-prop\" width=\"410\" height=\"238\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-48x28.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the tooltip in a discrete chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18404\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style.png\" alt=\"chart-tt-style\" width=\"408\" height=\"284\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-48x33.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18405\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop.png\" alt=\"chart-tt-prop\" width=\"409\" height=\"236\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-48x28.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the hairline and hairline popup in a continuous chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18406\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style.png\" alt=\"chart-hairline-style\" width=\"355\" height=\"295\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-48x40.png 48w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18407\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop.png\" alt=\"chart-hairline-prop\" width=\"414\" height=\"385\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-48x45.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the gridlines<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18408\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style.png\" alt=\"chart-grid-style\" width=\"331\" height=\"294\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-150x133.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-48x43.png 48w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18409\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop.png\" alt=\"chart-grid-prop\" width=\"416\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-48x16.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the opacity of the trace in a bar chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18410\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity.png\" alt=\"chart-bar-opacity\" width=\"412\" height=\"279\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-48x33.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18411\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop.png\" alt=\"chart-bar-opacity-prop\" width=\"416\" height=\"67\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-48x8.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the style of the trace in a line chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18412\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style.png\" alt=\"chart-line-style\" width=\"329\" height=\"292\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-150x133.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-48x43.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18413\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop.png\" alt=\"chart-line-prop\" width=\"407\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop.png 407w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-48x16.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Embedded Trend<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embedded-trend\/\">Embedded Trend<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Embedded Trend<\/strong><b> <\/b>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26725 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled.png\" alt=\"\" width=\"838\" height=\"480\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled.png 838w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-768x440.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-150x86.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-48x27.png 48w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" colspan=\"2\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Embedded Trend you can change the appearance of the axes, gridlines, legend, tooltip, and hairline.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p><strong>1. Axis Ticks<\/strong>: Style of the text along the X and Y axes.<\/p>\n<ul>\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<br \/>\n(Tip: if you change this, the Y Axis colour no longer corresponds to the selected series.)<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<\/ul>\n<p><strong>2. Hairline<\/strong>: Style the hairlines.<\/p>\n<ul>\n<li>Hairline Colour<\/li>\n<li>Hairline Style<\/li>\n<\/ul>\n<p><strong>3. Hairline Popup<\/strong>: Style the text inside the hairline popup.<\/p>\n<ul>\n<li>Hairline Popup Font Family<\/li>\n<li>Hairline Popup Font Colour<\/li>\n<li>Hairline Popup Font Size<\/li>\n<li>Hairline Popup Font Weight<\/li>\n<li>Hairline Popup Text Case<\/li>\n<\/ul>\n<\/td>\n<td>\n<p>&nbsp;<\/p>\n<p><strong>4. Gridline<\/strong>: Style the vertical and horizontal grid lines.<\/p>\n<ul>\n<li>Gridline Colour<br \/>\n(Tip: select an opacity of 0 for transparent gridlines.)<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<p><strong>5. Line Series<\/strong>: Style the trace lines on the embedded trend.<\/p>\n<ul>\n<li>Line Series Opacity<\/li>\n<li>Line Series Thickness<\/li>\n<li>Line Series Style<\/li>\n<\/ul>\n<p><strong>6. Legend Icons<\/strong>:<\/p>\n<ul>\n<li>Background Colour<\/li>\n<li>Border Colour<\/li>\n<\/ul>\n<p><strong>7. Legend Text<\/strong>: Style the legend text<\/p>\n<ul>\n<li>Font<\/li>\n<li>Font Size<\/li>\n<li>Font Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis ticks<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26730 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2.png\" rel=\"lightbox-44\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26735 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the hairline<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26759 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1.png\" rel=\"lightbox-46\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26760 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1.png\" alt=\"\" width=\"532\" height=\"115\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1.png 532w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-48x10.png 48w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the gridline style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26728 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2.png\" rel=\"lightbox-48\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26734 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the line series style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1.png\" rel=\"lightbox-49\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26727 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2.png\" rel=\"lightbox-50\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26731 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the legend icons style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1.png\" rel=\"lightbox-51\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26763 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2.png\" rel=\"lightbox-52\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26732 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Performance Curve<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/performance-curve\/\">Performance Curve tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Performance Curve<\/strong><b> <\/b>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview.png\" rel=\"lightbox-53\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26378\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview.png\" alt=\"\" width=\"506\" height=\"477\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview.png 506w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-150x141.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-48x45.png 48w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Performance Curve\u00a0you can change the colour of the dots\u00a0indicating the actual data points, and the highlight colour.<\/p>\n<p><strong>1. Axis Ticks<\/strong>: Set the style of the label text.<\/p>\n<ul>\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<li>Axis Ticks Text Case<\/li>\n<\/ul>\n<p><strong>2. Gridline<\/strong>: Style the vertical and horizontal grid lines.<\/p>\n<ul>\n<li>Gridline Colour<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<p><strong>3. Line Series<\/strong>: Set the style of the curve lines.<\/p>\n<ul>\n<li>Line Series Opacity<\/li>\n<li>Line Series Thickness<\/li>\n<li>Line Series Style<\/li>\n<\/ul>\n<p><strong>4. Dot Series<\/strong>: Style the dots\u00a0indicating the data values.<\/p>\n<ul>\n<li>Dot Series Opacity<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis text style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis.png\" rel=\"lightbox-54\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26376\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis.png\" alt=\"\" width=\"198\" height=\"96\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis.png 198w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-48x23.png 48w\" sizes=\"auto, (max-width: 198px) 100vw, 198px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks.png\" rel=\"lightbox-55\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26377\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks.png\" alt=\"\" width=\"460\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks.png 460w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-48x22.png 48w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the style of the gridlines<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid.png\" rel=\"lightbox-56\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26379\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid.png\" alt=\"\" width=\"160\" height=\"77\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid.png 160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-48x23.png 48w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines.png\" rel=\"lightbox-57\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26380\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines.png\" alt=\"\" width=\"463\" height=\"133\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines.png 463w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-48x14.png 48w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the\u00a0style of the curves<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line.png\" rel=\"lightbox-58\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26381\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line.png\" alt=\"\" width=\"157\" height=\"70\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line.png 157w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-48x21.png 48w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series.png\" rel=\"lightbox-59\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26382\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series.png\" alt=\"\" width=\"458\" height=\"131\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-48x14.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the\u00a0style of the dots<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot.png\" rel=\"lightbox-60\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26383\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot.png\" alt=\"\" width=\"157\" height=\"71\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot.png 157w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-48x22.png 48w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series.png\" rel=\"lightbox-61\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26384\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series.png\" alt=\"\" width=\"456\" height=\"57\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series.png 456w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-150x19.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-48x6.png 48w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Treemap<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/treemap\/\">Treemap<\/a>\u00a0tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Treemap<\/strong>\u00a0in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1.png\" rel=\"lightbox-62\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20773 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1.png\" width=\"439\" height=\"440\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1.png 439w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-48x48.png 48w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Treemap you can change the colours of the nodes, and the label text for the nodes.<\/p>\n<p><strong>1. Base Style<\/strong>: Set the style of the label text.<\/p>\n<ul>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Font Weight<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p><strong>2. Interpolated Colours<\/strong>:\u00a0The colours of the nodes are determined by the interpolation between 2 colours - the Minimum Colour and Maximum Colour. As the value approaches the specified minimum value, the node colour more closely resembles the Minimum Colour, and as the value approaches the specified maximum value, the node colour more closely resembles the Maximum Colour.<\/p>\n<ul>\n<li>Minimum Colour<\/li>\n<li>Maximum Colour<\/li>\n<\/ul>\n<p><em>Tip: You will usually get a nicer looking treemap if your minimum and maximum colours are the same hue but different brightness (e.g. light blue and dark blue) or are next to each other on the colour wheel (e.g. red and yellow or green and blue). The values you specify for minimum and maximum will also affect how the colours are interpolated.<\/em><\/p>\n<p><strong>3. Set Colours<\/strong>:\u00a0\u00a0The colour of the node when the value is below the minimum value or above the maximum value.<\/p>\n<ul>\n<li>Below Minimum\u00a0Colour<\/li>\n<li>Above Maximum\u00a0Colour<\/li>\n<\/ul>\n<p><strong>4. Aggregate Colour<\/strong>: The colour of the node when two or more nodes have been combined.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Label Text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style.png\" rel=\"lightbox-63\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20767\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style.png\" alt=\"treemap-font-style\" width=\"189\" height=\"142\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style.png 189w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-150x113.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-48x36.png 48w\" sizes=\"auto, (max-width: 189px) 100vw, 189px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop.png\" rel=\"lightbox-64\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20768\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop.png\" alt=\"treemap-font-prop\" width=\"413\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-48x24.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Interpolated Minimum and Maximum\u00a0Colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style.png\" rel=\"lightbox-65\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20762\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style.png\" alt=\"treemap-interp-style\" width=\"172\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-48x38.png 48w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop.png\" rel=\"lightbox-66\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20769\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop.png\" alt=\"treemap-interp-prop\" width=\"413\" height=\"102\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-48x12.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Set Minimum and Maximum Colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style.png\" rel=\"lightbox-67\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20771\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style.png\" alt=\"treemap-minmax-style\" width=\"172\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-48x38.png 48w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop.png\" rel=\"lightbox-68\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20770\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop.png\" alt=\"treemap-set-prop\" width=\"413\" height=\"96\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-48x11.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Aggregate Colour<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style.png\" rel=\"lightbox-69\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20766\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style.png\" alt=\"treemap-agg-style\" width=\"172\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-48x38.png 48w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop.png\" rel=\"lightbox-70\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20772\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop.png\" alt=\"treemap-agg-prop\" width=\"413\" height=\"36\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-150x13.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-48x4.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h1 class=\"page-subheading3\">Displays<\/h1>\n<h2 class=\"page-subheading\">Comments Button<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/comments-button\/\">Comments Button tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Comments Button <\/strong>in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1.png\" rel=\"lightbox-71\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17935 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1.png\" width=\"152\" height=\"225\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1.png 152w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1-101x150.png 101w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/comment-base1-32x48.png 32w\" sizes=\"auto, (max-width: 152px) 100vw, 152px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Comments Button you can change the size and colour of the button, as well as its alignment within the cell.<\/p>\n<p><strong>1. Base Style<\/strong>: Set the size of the button.<\/p>\n<ul>\n<li>Button Size<\/li>\n<\/ul>\n<p><strong>2. Border Colour<\/strong>: Set the colour of the border of the button. You can choose different colours for comments are available or unavailable.<\/p>\n<ul>\n<li>Available Comments Border Colour<\/li>\n<li>Empty Comments Border Colour<\/li>\n<\/ul>\n<p><strong>3. Fill Colour<\/strong>: Set the colour of the button fill. You can choose different colours for comments are available or unavailable.<\/p>\n<ul>\n<li>Available Comments Fill Colour<\/li>\n<li>Empty Comments Fill Colour<\/li>\n<\/ul>\n<p><strong>4. Alignment<\/strong>: Set the alignment of the Comments Button within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the size of the button<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-big.png\" rel=\"lightbox-72\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17941\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-big.png\" alt=\"button-big\" width=\"55\" height=\"49\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-big.png 55w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-big-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-big-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-big-48x43.png 48w\" sizes=\"auto, (max-width: 55px) 100vw, 55px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop.png\" rel=\"lightbox-73\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17936\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop.png\" alt=\"button-size-prop\" width=\"420\" height=\"67\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop.png 420w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-size-prop-48x8.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the colour of the button when there are no comments<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow.png\" rel=\"lightbox-74\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17937\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow.png\" alt=\"button-yellow\" width=\"43\" height=\"37\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow.png 43w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-36x31.png 36w\" sizes=\"auto, (max-width: 43px) 100vw, 43px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop.png\" rel=\"lightbox-75\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17939\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop.png\" alt=\"button-yellow-prop\" width=\"414\" height=\"101\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-yellow-prop-48x12.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the colour of the button when comments are available<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green.png\" rel=\"lightbox-76\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17938\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green.png\" alt=\"button-green\" width=\"44\" height=\"37\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green.png 44w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-36x30.png 36w\" sizes=\"auto, (max-width: 44px) 100vw, 44px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop.png\" rel=\"lightbox-77\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17940\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop.png\" alt=\"button-green-prop\" width=\"415\" height=\"103\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/button-green-prop-48x12.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Data Label<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Data Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Data Label<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties.png\" rel=\"lightbox-78\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17843 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties.png\" width=\"365\" height=\"114\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties.png 365w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-48x15.png 48w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the text, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears in the data label.<\/p>\n<ul>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Font Weight<\/li>\n<li>Underline<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p><strong>2. Alignment<\/strong>: Align the Data Label by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the data label component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: The text uses Sans-Serif font, bold, orange, and underlined<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Styled.png\" rel=\"lightbox-79\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17844 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Styled.png\" width=\"80\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Styled.png 80w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Styled-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Styled-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Styled-48x31.png 48w\" sizes=\"auto, (max-width: 80px) 100vw, 80px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1.png\" rel=\"lightbox-80\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17847 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1.png\" width=\"474\" height=\"263\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1.png 474w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1-150x83.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-1-48x27.png 48w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Gauge<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Gauge\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/gauge\/\">Gauge<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the Gauge in display mode. The style properties are numbered and described in the table below.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1.png\" rel=\"lightbox-81\"><img loading=\"lazy\" decoding=\"async\" width=\"853\" height=\"374\" class=\"alignnone wp-image-18104\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1.png\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1.png 853w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1-768x337.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Style-Properties-1-48x21.png 48w\" sizes=\"auto, (max-width: 853px) 100vw, 853px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%; padding-left: 5px;\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p><strong>1. Gauge Radius:<\/strong> Set the gauge size in pixels.<\/p>\n<p><strong>2. Gauge Target Background Colour:<\/strong> Set the background colour for the target segment.<\/p>\n<p><strong>3. Gauge Primary Background Colour:<\/strong> Set the background colour for the primary segments.<\/p>\n<p><strong>4. <\/strong><strong>Gauge Secondary Background Colour:<\/strong> Set the background colour for the secondary segments. When the value is in a secondary alarm state, these segments take on the alarm indicator secondary colour (see <strong>10<\/strong>).<\/p>\n<p><strong>5. <\/strong><strong>Gauge Tertiary Background Colour:<\/strong> Set the background colour for the tertiary segments. When the value is in a tertiary alarm state, these segments take on the alarm indicator tertiary colour (see <strong>10<\/strong>).<\/p>\n<p><strong>6. Value:<\/strong> Set the font properties, text case, and underlining of the value: <em>Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case<\/em><\/p>\n<p><strong>7. Units:<\/strong> Set the font properties, text case, and underlining of the units: <em>Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case<\/em><\/p>\n<p><strong>8. Label: <\/strong>Set the font properties, text case, and underlining of the label: <em>Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case<\/em><\/p>\n<\/td>\n<td style=\"width: 50%;\"><strong>9. Data Indicator:<\/strong> The data indicator appears in a square background, as a cross if there is <strong>No Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16295\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> or as an exclamation mark if there is <strong>Low Confidence Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png\" width=\"18\" height=\"17\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol-24x23.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> .<\/p>\n<p>Set the style properties to size, position and colours of the data indicator: <em>Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour<\/em><\/p>\n<p><strong>10. Alarm Indicator: <\/strong>The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a <strong>fixed<\/strong> shape and <strong>styled<\/strong> colour, depending on whether it is primary (an inverted triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17546\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>), secondary (a square <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17547\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> ) or tertiary (a triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17700\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Uncoloured-Tertiary-Alarm-Indicator-1.png\" width=\"18\" height=\"16\" \/>).<\/p>\n<p>Set the style properties to defined the size, position, and the colours for primary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17543\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>, secondary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17544\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> and tertiary alarms <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17545\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Tertiary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/> of the alarm indicator: <em> Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.<br \/>\n<\/em><em>Note:<\/em> The section and table below describe how these colours also affect the gauge's background colours.<\/p>\n<p><strong>11. Value Indicator:<\/strong> Set the size (width) and colour of the value indicator: <em>Value Indicator Size, Value Indicator Target Colour<\/em><\/p>\n<p><strong>12. Limits:<\/strong> Set the style properties define the font properties, position, text case, and underlining of the limits: <em>Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset<\/em><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Here are some examples of how the gauge background colours change with the different alarm states. Note how the gauge's secondary and tertiary background colours change to the secondary and tertiary alarm colours, respectively. During a primary alarm state, the target area's envelope band changes to the primary alarm colour.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>No Alarm<\/strong><\/td>\n<td><strong>Primary Alarm<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm.png\" rel=\"lightbox-82\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18112 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm.png\" width=\"472\" height=\"273\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm.png 472w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-No-Alarm-48x28.png 48w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary.png\" rel=\"lightbox-83\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18113 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary.png\" width=\"474\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary.png 474w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Primary-48x28.png 48w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><strong>Secondary Alarm<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary.png\" rel=\"lightbox-84\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18114 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary.png\" width=\"472\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary.png 472w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Secondary-48x28.png 48w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><strong>Tertiary Alarm<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary.png\" rel=\"lightbox-85\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18115 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary.png\" width=\"473\" height=\"274\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary.png 473w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-Gauge-in-Tertiary-48x28.png 48w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties <\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Small gauge, with blue background colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled.png\" rel=\"lightbox-86\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18141 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled.png\" width=\"473\" height=\"275\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled.png 473w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styled-48x28.png 48w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling.png\" rel=\"lightbox-87\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18144 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling.png\" width=\"422\" height=\"218\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-1-Styling-48x25.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Large, grey-on-blue Data Indicator<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled.png\" rel=\"lightbox-88\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18140 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled.png\" width=\"488\" height=\"317\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled.png 488w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled-150x97.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styled-48x31.png 48w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling.png\" rel=\"lightbox-89\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18143 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling.png\" width=\"418\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling.png 418w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-2-Styling-48x20.png 48w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Large Alarm Indicator, coloured dark red for Tertiary<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled.png\" rel=\"lightbox-90\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18139 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled.png\" width=\"477\" height=\"327\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled.png 477w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled-150x103.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Gauge-Example-3-Styled-48x33.png 48w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling.png\" rel=\"lightbox-91\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18142 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling.png\" width=\"422\" height=\"205\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Example-3-Styling-48x23.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Hyperlink<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Hyperlink\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/\">Hyperlink<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Hyperlink<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties.png\" rel=\"lightbox-78\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17843 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties.png\" width=\"365\" height=\"114\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties.png 365w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Data-Label-Style-Properties-48x15.png 48w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the text, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the hyperlink text.<\/p>\n<ul>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Font Weight<\/li>\n<li>Underline<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p><strong>2. Alignment<\/strong>: Align the hyperlink by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled base style font, underline and text case<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1.png\" rel=\"lightbox-93\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18193 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1.png\" width=\"200\" height=\"43\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1.png 200w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-1-48x10.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1.png\" rel=\"lightbox-94\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18195 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1.png\" width=\"438\" height=\"243\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1.png 438w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1-150x83.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-1-48x27.png 48w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Aligned middle left<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2.png\" rel=\"lightbox-95\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18192 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2.png\" width=\"257\" height=\"118\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2.png 257w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Styled-2-48x22.png 48w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2.png\" rel=\"lightbox-96\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18194 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2.png\" width=\"428\" height=\"142\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2.png 428w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Hyperlink-Style-2-48x16.png 48w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Level Meter<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Level Meter\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/level-meter\/\">Level Meter<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows style properties of the Level Meter in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px; width: 50%;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter.png\" rel=\"lightbox-97\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18912 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter.png\" width=\"496\" height=\"506\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter.png 496w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Level-Meter-48x48.png 48w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p><strong>1. Meter Height:<\/strong> Set the meter height in pixels.<\/p>\n<p><strong>2. Meter Width:<\/strong> Set the meter width in pixels.<\/p>\n<p><strong>3. <\/strong><strong>Meter Target Background Colour:<\/strong> Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see <strong>11<\/strong>).<\/p>\n<p><strong>4. <\/strong><strong>Meter Primary Background Colour:<\/strong> Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see <strong>11<\/strong>). <em>(Note:<\/em> In the screenshot, the colour is <em>transparent<\/em>.)<\/p>\n<p><strong>5. Meter Secondary Background Colour: <\/strong>Set the background colour for the secondary band areas.<\/p>\n<p><strong>6. Meter Tertiary Background Colour: <\/strong>Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see <strong>11<\/strong>).<\/p>\n<\/td>\n<td style=\"width: 50%;\">\n<p><strong>7. Value:<\/strong> Set the font properties, text case, and underlining of the value: <em>Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case<\/em><\/p>\n<p><strong>8. Units:<\/strong> Set the font properties, text case, and underlining of the units: <em>Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case<\/em><\/p>\n<p><strong>9. Label: <\/strong>Set the font properties, text case, and underlining of the label: <em>Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case<\/em><\/p>\n<p><strong>10. Data Indicator:<\/strong> The data indicator appears in a square background, as a cross if there is <strong>No Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16295\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> or as an exclamation mark if there is <strong>Low Confidence Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png\" width=\"18\" height=\"17\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol-24x23.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> .<\/p>\n<p>Set the style properties to size, position and colours of the data indicator: <em>Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour<\/em><\/p>\n<p><strong>11. Alarm Indicator: <\/strong>The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a <strong>fixed<\/strong> shape and <strong>styled<\/strong> colour, depending on whether it is primary (an inverted triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17546\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>), secondary (a square <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17547\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> ) or tertiary (a triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17700\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Uncoloured-Tertiary-Alarm-Indicator-1.png\" width=\"18\" height=\"16\" \/>).<\/p>\n<p>Set the style properties to defined the size, position, and the colours for primary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17543\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>, secondary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17544\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> and tertiary alarms <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17545\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Tertiary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/> of the alarm indicator: <em> Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.<br \/>\n<\/em><em>Note:<\/em> The section and table below describe how these colours also affect the meter's background colours.<\/p>\n<p><strong>12. Value Indicator:<\/strong> Set the size (width) and colour of the value indicator: <em>Value Indicator Size, Value Indicator Target Colour<\/em><\/p>\n<p><strong>13. Limits:<\/strong> Set the style properties define the font properties, position, text case, and underlining of the limits: <em>Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset<\/em><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Here are some examples of how the meter background colours change with the different alarm states. Note how the level meter's secondary and tertiary background colours change to the secondary and tertiary alarm colours, respectively. During a primary alarm state, the target area's envelope band changes to the primary alarm colour.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>No Alarm<\/strong><\/td>\n<td><strong>Primary Alarm<\/strong><\/td>\n<td><strong>Secondary Alarm<\/strong><\/td>\n<td><strong>Tertiary Alarm<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm.png\" rel=\"lightbox-98\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17972 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm.png\" width=\"160\" height=\"253\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm.png 160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm-95x150.png 95w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-with-no-alarm-30x48.png 30w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm.png\" rel=\"lightbox-99\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17973 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm.png\" width=\"164\" height=\"255\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm.png 164w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm-96x150.png 96w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-primary-alarm-31x48.png 31w\" sizes=\"auto, (max-width: 164px) 100vw, 164px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm.png\" rel=\"lightbox-100\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17974 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm.png\" width=\"165\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm.png 165w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm-101x150.png 101w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-secondary-alarm-32x48.png 32w\" sizes=\"auto, (max-width: 165px) 100vw, 165px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm.png\" rel=\"lightbox-101\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17975 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm.png\" width=\"172\" height=\"254\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm-102x150.png 102w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Meter-with-tertiary-alarm-33x48.png 33w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties <\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Small Level Meter with green background colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2.png\" rel=\"lightbox-102\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18021 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2.png\" width=\"156\" height=\"160\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2.png 156w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-2-48x48.png 48w\" sizes=\"auto, (max-width: 156px) 100vw, 156px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3.png\" rel=\"lightbox-103\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18033 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3.png\" width=\"417\" height=\"248\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3.png 417w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Small-Green-Level-Meter-3-48x29.png 48w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Large, grey-on-blue Data Indicator<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode.png\" rel=\"lightbox-104\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17595 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode.png\" width=\"149\" height=\"243\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode.png 149w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode-92x150.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/New-Data-Indicator-in-run-mode-29x48.png 29w\" sizes=\"auto, (max-width: 149px) 100vw, 149px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3.png\" rel=\"lightbox-105\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18032 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3.png\" width=\"421\" height=\"180\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3.png 421w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Grey-on-Blue-Data-Indicator-3-48x21.png 48w\" sizes=\"auto, (max-width: 421px) 100vw, 421px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><em><strong>EXAMPLE: Primary, Secondary and Tertiary Alarm Indicators<\/strong><\/em><\/td>\n<td width=\"450\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td width=\"500\">\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><em>Primary<\/em><\/td>\n<td><em>Secondary<\/em><\/td>\n<td><em>Tertiary<\/em><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1.png\" rel=\"lightbox-106\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-18055 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1.png\" width=\"148\" height=\"228\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-2-1-31x48.png 31w\" sizes=\"auto, (max-width: 148px) 100vw, 148px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1.png\" rel=\"lightbox-107\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18056 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1.png\" width=\"143\" height=\"229\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1.png 143w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1-94x150.png 94w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-3-1-30x48.png 30w\" sizes=\"auto, (max-width: 143px) 100vw, 143px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1.png\" rel=\"lightbox-108\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18057 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1.png\" width=\"147\" height=\"225\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1-98x150.png 98w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styled-1-31x48.png 31w\" sizes=\"auto, (max-width: 147px) 100vw, 147px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"400\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1.png\" rel=\"lightbox-109\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18059 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1.png\" width=\"407\" height=\"230\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1.png 407w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Alarm-Indicator-Styling-1-48x27.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Meter<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/meter\/\">Meter tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the Meter in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px; width: 50%;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base.png\" rel=\"lightbox-110\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18489\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base.png\" alt=\"meter-base\" width=\"517\" height=\"367\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base.png 517w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-base-48x34.png 48w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td style=\"width: 50%;\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p><strong>1. Base Style:<\/strong> Style the tick values on the meter.<\/p>\n<ul>\n<li>Tick Value Font Family<\/li>\n<li>Tick Value Font Colour<\/li>\n<li>Tick Value Font Size<\/li>\n<li>Tick Value Font Weight<\/li>\n<li>Tick Value Underline<\/li>\n<\/ul>\n<p><strong>2. Measure 1 Colour:<\/strong> Set the colour of the first band of measure.<\/p>\n<p><strong>3. Measure 2 Colour<\/strong><strong>:<\/strong> Set the colour of the second band of measure.<\/p>\n<p><strong>4. Measure 3 Colour<\/strong><strong>:<\/strong> Set the colour of the third band of measure.<\/p>\n<p><strong>5. Measure 4 Colour:<\/strong> Set the colour of the fourth band of measure.<\/p>\n<p><strong>6. Measure 5 Colour:<\/strong> Set the colour of the fifth band of measure.<\/p>\n<p><strong>7. Arc Thickness:<\/strong> Set the width of the meter arc.<\/p>\n<p><strong>8. Needle Colour, Needle Thickness:<\/strong> Set the colour and width of the needle indicating the current value.<\/p>\n<p><strong>9. Tick Colour, Tick Thickness: <\/strong>Set the colour and width of the ticks for the values.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the base style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style.png\" rel=\"lightbox-111\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18490\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style.png\" alt=\"meter-value-style\" width=\"297\" height=\"161\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style.png 297w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style-150x81.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-style-48x26.png 48w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop.png\" rel=\"lightbox-112\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18491\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop.png\" alt=\"meter-value-prop\" width=\"412\" height=\"196\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop-150x71.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-value-prop-48x23.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the measure colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style.png\" rel=\"lightbox-113\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18493\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style.png\" alt=\"meter-colours-style\" width=\"297\" height=\"158\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style.png 297w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style-150x80.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-style-48x26.png 48w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop.png\" rel=\"lightbox-114\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18492\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop.png\" alt=\"meter-colours-prop\" width=\"415\" height=\"210\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-colours-prop-48x24.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the needle and ticks<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2.png\" rel=\"lightbox-115\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18495\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2.png\" alt=\"meter-needle-style2\" width=\"298\" height=\"156\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2.png 298w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-style2-48x25.png 48w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop.png\" rel=\"lightbox-116\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18496\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop.png\" alt=\"meter-needle-prop\" width=\"414\" height=\"210\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-needle-prop-48x24.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the arc and needle thickness<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style.png\" rel=\"lightbox-117\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18499\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style.png\" alt=\"meter-arc-style\" width=\"292\" height=\"156\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style.png 292w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style-150x80.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-style-48x26.png 48w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop.png\" rel=\"lightbox-118\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18500\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop.png\" alt=\"meter-arc-prop\" width=\"410\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/meter-arc-prop-48x24.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Paging Control<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/paging-control\/\">Paging Control tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Paging Control <\/strong>in display mode.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base.png\" rel=\"lightbox-119\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18390\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base.png\" alt=\"paging-base\" width=\"617\" height=\"71\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base.png 617w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base-150x17.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base-36x4.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-base-48x6.png 48w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">What You Can Change<\/p>\n<p class=\"intro-text\">With the Paging Control, you can change the styles relating to font and alignment. As the control contains links, the clickable arrows will always show the inherited blue hyperlink colour (#67809F) and inactive arrows will be greyed out.<\/p>\n<p class=\"intro-text\"><strong>Base Style<\/strong>: Style the text in the control.<\/p>\n<ul>\n<li>Paging Control Font Size<\/li>\n<li>Paging Control Font Family<\/li>\n<li>Paging Control Font Colour<\/li>\n<li>Paging Control Font Weight<\/li>\n<li>Paging Control Font Alignment<\/li>\n<li>Paging Control Underline<\/li>\n<li>Paging Control Text Case<\/li>\n<\/ul>\n<p class=\"no-toc-heading\">Example: Changing the Paging Control Font<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Display Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style.png\" rel=\"lightbox-120\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18391\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style.png\" alt=\"paging-style\" width=\"594\" height=\"55\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style.png 594w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-style-48x4.png 48w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop.png\" rel=\"lightbox-121\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18389\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop.png\" alt=\"paging-prop\" width=\"413\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/paging-prop-48x32.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Pressure Meter<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Pressure Meter\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pressure-meter\/\">Pressure Meter<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the Pressure Meter in display mode. The style properties are numbered and described in the table below.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px; width: 50%;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter.png\" rel=\"lightbox-122\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18913 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter.png\" width=\"496\" height=\"506\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter.png 496w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Pressure-Meter-48x48.png 48w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p><strong>1. Meter Height:<\/strong> Set the meter height in pixels.<\/p>\n<p><strong>2. Meter Width:<\/strong> Set the meter width in pixels.<\/p>\n<p><strong>3. <\/strong><strong>Meter Target Background Colour:<\/strong> Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see <strong>11<\/strong>).<\/p>\n<p><strong>4. <\/strong><strong>Meter Primary Background Colour:<\/strong> Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see <strong>11<\/strong>). <em>(Note:<\/em> In the screenshot, the colour is <em>transparent<\/em>.)<\/p>\n<p><strong>5. Meter Secondary Background Colour: <\/strong>Set the background colour for the secondary band areas.<\/p>\n<p><strong>6. Meter Tertiary Background Colour: <\/strong>Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see <strong>11<\/strong>).<\/p>\n<\/td>\n<td style=\"width: 50%;\">\n<p><strong>7. Value:<\/strong> Set the font properties, text case, and underlining of the value: <em>Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case<\/em><\/p>\n<p><strong>8. Units:<\/strong> Set the font properties, text case, and underlining of the units: <em>Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case<\/em><\/p>\n<p><strong>9. Label: <\/strong>Set the font properties, text case, and underlining of the label: <em>Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case<\/em><\/p>\n<p><strong>10. Data Indicator:<\/strong> The data indicator appears in a square background, as a cross if there is <strong>No Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16295\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> or as an exclamation mark if there is <strong>Low Confidence Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png\" width=\"18\" height=\"17\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol-24x23.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> .<\/p>\n<p>Set the style properties to size, position and colours of the data indicator: <em>Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour<\/em><\/p>\n<p><strong>11. Alarm Indicator: <\/strong>The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a <strong>fixed<\/strong> shape and <strong>styled<\/strong> colour, depending on whether it is primary (an inverted triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17546\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>), secondary (a square <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17547\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> ) or tertiary (a triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17700\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Uncoloured-Tertiary-Alarm-Indicator-1.png\" width=\"18\" height=\"16\" \/>).<\/p>\n<p>Set the style properties to defined the size, position, and the colours for primary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17543\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>, secondary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17544\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> and tertiary alarms <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17545\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Tertiary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/> of the alarm indicator: <em> Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.<br \/>\n<\/em><em>Note:<\/em> The section and table below describe how these colours also affect the meter's background colours.<\/p>\n<p><strong>12. Value Indicator:<\/strong> Set the size (width) and colour of the value indicator: <em>Value Indicator Size, Value Indicator Target Colour<\/em><\/p>\n<p><strong>13. Limits:<\/strong> Set the style properties define the font properties, position, text case, and underlining of the limits: <em>Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset<\/em><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Here are some examples of how the meter background colours change with the different alarm states. Note how the pressure meter's secondary and tertiary background colours change to the secondary and tertiary alarm colours, respectively. During a primary alarm state, the target area's envelope band changes to the primary alarm colour.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>No Alarm<\/strong><\/td>\n<td><strong>Primary Alarm<\/strong><\/td>\n<td><strong>Secondary Alarm<\/strong><\/td>\n<td><strong>Tertiary Alarm<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example.png\" rel=\"lightbox-123\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18164 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example.png\" width=\"156\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example.png 156w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example-98x150.png 98w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-No-Alarm-Example-31x48.png 31w\" sizes=\"auto, (max-width: 156px) 100vw, 156px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example.png\" rel=\"lightbox-124\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18167 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example.png\" width=\"160\" height=\"239\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example.png 160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example-100x150.png 100w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Primary-Example-32x48.png 32w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example.png\" rel=\"lightbox-125\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18166 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example.png\" width=\"154\" height=\"237\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example.png 154w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Secondary-Example-31x48.png 31w\" sizes=\"auto, (max-width: 154px) 100vw, 154px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example.png\" rel=\"lightbox-126\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18165 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example.png\" width=\"136\" height=\"238\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example.png 136w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example-86x150.png 86w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Tertiary-Example-27x48.png 27w\" sizes=\"auto, (max-width: 136px) 100vw, 136px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">\u00a0<\/p>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 10px;\" width=\"400\"><strong>Custom Style Properties <\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"500\">\n<p><em><strong>EXAMPLE: Small pressure meter, with green background colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1.png\" rel=\"lightbox-127\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17684 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1.png\" width=\"169\" height=\"182\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1.png 169w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1-139x150.png 139w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-1-45x48.png 45w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\" width=\"400\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour.png\" rel=\"lightbox-128\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17683 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour.png\" width=\"442\" height=\"254\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour.png 442w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour-150x86.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-meter-size-and-colour-48x28.png 48w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"350\">\n<p><em><strong>EXAMPLE: Styled Units and Label<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2.png\" rel=\"lightbox-129\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17685 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2.png\" width=\"155\" height=\"252\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2.png 155w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2-92x150.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-2-30x48.png 30w\" sizes=\"auto, (max-width: 155px) 100vw, 155px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\" width=\"550\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2.png\" rel=\"lightbox-130\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17729 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2.png\" width=\"420\" height=\"495\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2.png 420w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2-127x150.png 127w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Style-Properties-2-41x48.png 41w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Large grey-on-blue data indicator, with a Y Offset<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1.png\" rel=\"lightbox-131\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18307 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1.png\" width=\"171\" height=\"241\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1.png 171w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1-106x150.png 106w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styled-3-1-34x48.png 34w\" sizes=\"auto, (max-width: 171px) 100vw, 171px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3.png\" rel=\"lightbox-132\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18308 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3.png\" width=\"439\" height=\"184\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3.png 439w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pressure-Meter-Styling-3-48x20.png 48w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Status Indicator<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/\">Status Indicator tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"note\">Note that before version 4.5.4 you could also set the icon colours in the style. In version 4.5.4 and later, the colour for a state is set in Studio, along with the icon shape.<\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Status Indicator<\/strong> in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator.png\" rel=\"lightbox-133\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36073 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator.png\" alt=\"\" width=\"309\" height=\"219\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator.png 309w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Styling-a-Status-Indicator-48x34.png 48w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Status Indicator you can change the size of the icon, as well as its alignment. Note that size and alignment can be overridden in Studio.<\/p>\n<p><strong>1. Base Style<\/strong>: Set the size of the indicator.<\/p>\n<ul>\n<li>Size<\/li>\n<\/ul>\n<p><strong>2. Alignment<\/strong>: Set the alignment of the indicator within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Run or Design Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the size of the indicator<\/strong><\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36141 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-Display.png\" alt=\"\" width=\"251\" height=\"108\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-Display.png 251w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-Display-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-Display-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-Display-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-Display-48x21.png 48w\" sizes=\"auto, (max-width: 251px) 100vw, 251px\" \/><\/p>\n<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36142 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size.png\" alt=\"\" width=\"509\" height=\"80\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size.png 509w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Size-48x8.png 48w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the alignment of the indicator<\/strong><\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36140 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Alignment-Display.png\" alt=\"\" width=\"233\" height=\"97\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Alignment-Display.png 233w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Alignment-Display-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Alignment-Display-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Alignment-Display-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-Alignment-Display-48x20.png 48w\" sizes=\"auto, (max-width: 233px) 100vw, 233px\" \/><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment.png\" rel=\"lightbox-134\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36143 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment.png\" alt=\"\" width=\"498\" height=\"149\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment.png 498w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-alignment-48x14.png 48w\" sizes=\"auto, (max-width: 498px) 100vw, 498px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Status Tile<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/\">Status Tile tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Status Tile<\/strong> in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design.png\" rel=\"lightbox-135\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19946 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design.png\" width=\"502\" height=\"264\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design.png 502w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-in-Design-48x25.png 48w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Status Tile you can change the fonts family, as well as the separate fonts for title, value and description. You can also change the colour that the tile takes on under different conditions.<\/p>\n<p><strong>1. Base Style<\/strong>: Set the font family for all fonts used in the status tile.<\/p>\n<ul>\n<li>Font Family<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p><strong>2. Under Limit, On Limit, Over Limit, Default<\/strong>: Set the colour of the status tile according to the value in relation to the limit.<\/p>\n<ul>\n<li>On Limit Colour<\/li>\n<li>Over Limit Colour<\/li>\n<li>Under Limit Colour<\/li>\n<li>Default Colour<\/li>\n<\/ul>\n<p><strong>3. Title<\/strong>: Set the title font and text case.<\/p>\n<ul>\n<li>Title Font Size<\/li>\n<li>Title Font Colour<\/li>\n<li>Title Font Weight<\/li>\n<li>Title Font Alignment<\/li>\n<li>Title Text Case<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>4. Value<\/strong>: Set the value font and text case.<\/p>\n<ul>\n<li>Value Font Size<\/li>\n<li>Value Font Colour<\/li>\n<li>Value Font Weight<\/li>\n<li>Value Font Alignment<\/li>\n<li>Value Text Case<\/li>\n<\/ul>\n<p><strong>5. Description<\/strong>: Set the description font and text case.<\/p>\n<ul>\n<li>Description Font Size<\/li>\n<li>Description Font Colour<\/li>\n<li>Description Font Weight<\/li>\n<li>Description Font Alignment<\/li>\n<li>Description Text Case<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\"><strong>Note<\/strong> that the colour of the status tile is the only indicator of whether the value is over, under or equal to the limit. Therefore, if you add a style with different colours, you need to be sure that users can interpret these. Either keep these similar to the base colours (blue for under, green for equal, red for over, grey for unknown) or communicate what the styled colours signify.<\/p>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Run or Design Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the font family of the status tile<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1.png\" rel=\"lightbox-136\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19955 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1.png\" width=\"281\" height=\"208\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1.png 281w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-1-48x36.png 48w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1.png\" rel=\"lightbox-137\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19957 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1.png\" width=\"452\" height=\"79\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1.png 452w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1-150x26.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-1-48x8.png 48w\" sizes=\"auto, (max-width: 452px) 100vw, 452px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the under limit colour of the status tile<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2.png\" rel=\"lightbox-138\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19956 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2.png\" width=\"290\" height=\"210\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2.png 290w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2-150x109.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styled-Example-2-48x35.png 48w\" sizes=\"auto, (max-width: 290px) 100vw, 290px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2.png\" rel=\"lightbox-139\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19958 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2.png\" width=\"444\" height=\"80\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2.png 444w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2-150x27.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Styles-Example-2-48x9.png 48w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Tank<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/tank\/\">Tank tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Tank <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base.png\" rel=\"lightbox-140\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17943\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base.png\" alt=\"tank-style-base\" width=\"370\" height=\"271\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base.png 370w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base-150x110.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-style-base-48x35.png 48w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Tank you can change the colour of the tank and the thickness of the tank outline.<\/p>\n<p><strong>1. Tank<\/strong>: Style the outer container of the tank.<\/p>\n<ul>\n<li>Tank Outline Colour<\/li>\n<li>Tank Outline Thickness<\/li>\n<li>Tank Top Colour<\/li>\n<li>Tank Front Colour<\/li>\n<\/ul>\n<p><strong>2. Content<\/strong>: Set the colour of the fill.<\/p>\n<ul>\n<li>Content Front Colour<\/li>\n<li>Content Top Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the tank's outline<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1.png\" rel=\"lightbox-141\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-32826 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1.png\" alt=\"\" width=\"224\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1.png 224w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1-150x117.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Thick-outline-1-48x38.png 48w\" sizes=\"auto, (max-width: 224px) 100vw, 224px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config.png\" rel=\"lightbox-142\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-32823 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config.png\" alt=\"\" width=\"497\" height=\"116\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config.png 497w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Tank-config-48x11.png 48w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the tank's container<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style.png\" rel=\"lightbox-143\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17947\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style.png\" alt=\"tank-outer-style\" width=\"207\" height=\"158\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style.png 207w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-style-48x37.png 48w\" sizes=\"auto, (max-width: 207px) 100vw, 207px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop.png\" rel=\"lightbox-144\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17948\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop.png\" alt=\"tank-outer-prop\" width=\"409\" height=\"168\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-outer-prop-48x20.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the tank's fill<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style.png\" rel=\"lightbox-145\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17949\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style.png\" alt=\"tank-fill-style\" width=\"205\" height=\"156\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style.png 205w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-style-48x37.png 48w\" sizes=\"auto, (max-width: 205px) 100vw, 205px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop.png\" rel=\"lightbox-146\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17950\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop.png\" alt=\"tank-fill-prop\" width=\"408\" height=\"95\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tank-fill-prop-48x11.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Target Bar<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-bar\/\">Target Bar tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Target Bar<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base.png\" rel=\"lightbox-147\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17970\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base.png\" alt=\"target-bar-base\" width=\"371\" height=\"197\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base.png 371w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base-150x80.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-base-48x25.png 48w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Target Bar you can change the colour of the bar when it is over or under target, and the target line.<\/p>\n<p><strong>1. Under Target<\/strong>: Set the colour of the bar when the value is below the target value.<\/p>\n<ul>\n<li>Below Target Background Colour<\/li>\n<\/ul>\n<p><strong>2. Over Target<\/strong>: Set the colour of the bar when the value is above the target value.<\/p>\n<ul>\n<li>Above Target Background Colour<\/li>\n<\/ul>\n<p><strong>3. Target Line<\/strong>: Style the line indicating the target.<\/p>\n<ul>\n<li>Line Colour<\/li>\n<li>Line Thickness<\/li>\n<li>Line Style<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the bar colour for below target<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style.png\" rel=\"lightbox-148\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17980\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style.png\" alt=\"target-bar-below-style\" width=\"178\" height=\"75\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style.png 178w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-style-48x20.png 48w\" sizes=\"auto, (max-width: 178px) 100vw, 178px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop.png\" rel=\"lightbox-149\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17982\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop.png\" alt=\"target-bar-below-prop\" width=\"412\" height=\"60\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-below-prop-48x7.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the bar colour for above target<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style.png\" rel=\"lightbox-150\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17981\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style.png\" alt=\"target-bar-above-style\" width=\"171\" height=\"70\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style.png 171w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-style-48x20.png 48w\" sizes=\"auto, (max-width: 171px) 100vw, 171px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop.png\" rel=\"lightbox-151\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17983\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop.png\" alt=\"target-bar-above-prop\" width=\"412\" height=\"62\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop-150x23.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-above-prop-48x7.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the Target line<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1.png\" rel=\"lightbox-152\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17984 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1.png\" width=\"175\" height=\"77\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1.png 175w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-style1-48x21.png 48w\" sizes=\"auto, (max-width: 175px) 100vw, 175px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1.png\" rel=\"lightbox-153\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17985 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1.png\" width=\"409\" height=\"133\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/target-bar-line-prop1-48x16.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Target Label<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-label\/\">Target Label tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Target Label<\/strong> in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base.png\" rel=\"lightbox-154\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17997\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base.png\" alt=\"tar-label-base\" width=\"362\" height=\"173\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base.png 362w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-base-48x23.png 48w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Target Label you can change both the text and label when it is over or under target.<\/p>\n<p><strong>1. Target<\/strong>: Style the text inside the label.<\/p>\n<ul>\n<li>Target Font Family<\/li>\n<li>Target Font Size<\/li>\n<li>Target Font Weight<\/li>\n<li>Target Underline<\/li>\n<li>Target Alignment<\/li>\n<li>Target Text Case<\/li>\n<li>Target Separation (distance between the value\/units and the label)<\/li>\n<li>Target Horizontal Padding (padding within the label)<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p><strong>2. Good Target, Bad Target<\/strong>: Set the colour of the text and label when the value is above and below the target value.<\/p>\n<ul>\n<li>Good Target Background Colour<\/li>\n<li>Good Target Font Colour<\/li>\n<li>Bad Target Background Colour<\/li>\n<li>Bad Target Font Colour<\/li>\n<\/ul>\n<p><strong>3. Actual<\/strong>: Style the text representing the actual value.<\/p>\n<ul>\n<li>Actual Font Family<\/li>\n<li>Actual Font Colour<\/li>\n<li>Actual Font Size<\/li>\n<li>Actual Font Weight<\/li>\n<li>Actual Underline<\/li>\n<li>Actual Alignment<\/li>\n<li>Actual Text Case<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>4. Units<\/strong>: Style the text representing the units of measure.<\/p>\n<ul>\n<li>Units Font Family<\/li>\n<li>Units Font Colour<\/li>\n<li>Units Font Size<\/li>\n<li>Units Font Weight<\/li>\n<li>Units Underline<\/li>\n<li>Units Alignment<\/li>\n<li>Units Text Case<\/li>\n<\/ul>\n<p><strong>5. Alignment<\/strong>: Set the alignment of the Target Label within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the text inside the label, with generous horizontal padding but no separation between the label and units<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text.png\" rel=\"lightbox-155\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18000\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text.png\" alt=\"tar-label-text\" width=\"163\" height=\"39\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text.png 163w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-48x11.png 48w\" sizes=\"auto, (max-width: 163px) 100vw, 163px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop.png\" rel=\"lightbox-156\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18001\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop.png\" alt=\"tar-label-text-prop\" width=\"407\" height=\"310\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop.png 407w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-text-prop-48x37.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the colours of the label and label text for above and below target<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-good.png\" rel=\"lightbox-157\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18003\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-good.png\" alt=\"tar-label-good\" width=\"135\" height=\"40\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-good.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-good-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-good-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-good-48x14.png 48w\" sizes=\"auto, (max-width: 135px) 100vw, 135px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad.png\" rel=\"lightbox-158\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18002\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad.png\" alt=\"tar-label-bad\" width=\"125\" height=\"36\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad.png 125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-48x14.png 48w\" sizes=\"auto, (max-width: 125px) 100vw, 125px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop.png\" rel=\"lightbox-159\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18004\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop.png\" alt=\"tar-label-bad-prop\" width=\"416\" height=\"210\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-bad-prop-48x24.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the Actual text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual.png\" rel=\"lightbox-160\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18005\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual.png\" alt=\"tar-label-actual\" width=\"160\" height=\"55\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual.png 160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-48x17.png 48w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop.png\" rel=\"lightbox-161\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18006\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop.png\" alt=\"tar-label-actual-prop\" width=\"409\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-actual-prop-48x32.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the Units text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit.png\" rel=\"lightbox-162\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18007\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit.png\" alt=\"tar-label-unit\" width=\"133\" height=\"37\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit.png 133w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-48x13.png 48w\" sizes=\"auto, (max-width: 133px) 100vw, 133px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop.png\" rel=\"lightbox-163\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18008\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop.png\" alt=\"tar-label-unit-prop\" width=\"408\" height=\"273\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-label-unit-prop-48x32.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Target Variance Bar<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-variance-bar\/\">Target Variance Bar tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Target Variance Bar<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2.png\" rel=\"lightbox-164\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17989 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2.png\" width=\"359\" height=\"315\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2.png 359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2-150x132.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-base2-48x42.png 48w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Target Variance Bar you can change the colour of the bar when it is over or under target, and the target line.<\/p>\n<p><strong>1. Above Target Background Colour<\/strong>: Set the colour of the bar when the value is above the target value.<\/p>\n<p><strong>2. Above Target Tooltip Colour<\/strong>: Set the colour of the tooltip when the value is above the target value.<\/p>\n<p><strong>3. Below Target Background Colour<\/strong>: Set the colour of the bar when the value is below the target value.<\/p>\n<p><strong>4. Below Target Tooltip Colour<\/strong>: Set the colour of the tooltip when the value is below the target value.<\/p>\n<p><strong>5. Target Line<\/strong>: Style the line indicating the target.<\/p>\n<ul>\n<li>Target Line Colour<\/li>\n<li>Target Line Thickness<\/li>\n<li>Target Line Style<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td>\n<p><em><strong>EXAMPLE: Changing the bar and tooltip colours for below target<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below.png\" rel=\"lightbox-165\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17991\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below.png\" alt=\"tar-var-bar-below\" width=\"139\" height=\"103\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below.png 139w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-48x36.png 48w\" sizes=\"auto, (max-width: 139px) 100vw, 139px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop.png\" rel=\"lightbox-166\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17993\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop.png\" alt=\"tar-var-bar-below-prop\" width=\"411\" height=\"100\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-below-prop-48x12.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the bar and tooltip colours for above target<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above.png\" rel=\"lightbox-167\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17990\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above.png\" alt=\"tar-var-bar-above\" width=\"135\" height=\"105\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-48x37.png 48w\" sizes=\"auto, (max-width: 135px) 100vw, 135px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop.png\" rel=\"lightbox-168\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17992\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop.png\" alt=\"tar-var-bar-above-prop\" width=\"411\" height=\"98\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-above-prop-48x11.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Changing the Target line<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-style.png\" rel=\"lightbox-169\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17994\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-style.png\" alt=\"tar-var-bar-line-style\" width=\"37\" height=\"72\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-style.png 37w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-style-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-style-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-style-25x48.png 25w\" sizes=\"auto, (max-width: 37px) 100vw, 37px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop.png\" rel=\"lightbox-170\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17995\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop.png\" alt=\"tar-var-bar-line-prop\" width=\"409\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/tar-var-bar-line-prop-48x16.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Temperature Meter<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Temperature Meter\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/temperature-meter\/\">Temperature Meter<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the Temperature Meter in display mode. The style properties are numbered and described in the table below.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px; width: 50%;\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter.png\" rel=\"lightbox-171\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18914 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter.png\" width=\"510\" height=\"506\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter.png 510w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styling-Temperature-Meter-48x48.png 48w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p><strong>1. Meter Height:<\/strong> Set the meter height in pixels.<\/p>\n<p><strong>2. Meter Width:<\/strong> Set the meter width in pixels.<\/p>\n<p><strong>3. <\/strong><strong>Meter Target Background Colour:<\/strong> Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see <strong>11<\/strong>).<\/p>\n<p><strong>4. <\/strong><strong>Meter Primary Background Colour:<\/strong> Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see <strong>11<\/strong>). <em>(Note:<\/em> In the screenshot, the colour is <em>transparent<\/em>. )<\/p>\n<p><strong>5. Meter Secondary Background Colour: <\/strong>Set the background colour for the secondary band areas.<\/p>\n<p><strong>6. Meter Tertiary Background Colour: <\/strong>Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see <strong>11<\/strong>).<\/p>\n<\/td>\n<td style=\"width: 50%;\">\n<p><strong>7. Value:<\/strong> Set the font properties, text case, and underlining of the value: <em>Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case<\/em><\/p>\n<p><strong>8. Units:<\/strong> Set the font properties, text case, and underlining of the units: <em>Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case<\/em><\/p>\n<p><strong>9. Label: <\/strong>Set the font properties, text case, and underlining of the label: <em>Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case<\/em><\/p>\n<p><strong>10. Data Indicator:<\/strong> The data indicator appears in a square background, as a cross if there is <strong>No Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16295\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/No-Data-icon-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> or as an exclamation mark if there is <strong>Low Confidence Data<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16318\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png\" width=\"18\" height=\"17\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/Low-Confidence-Symbol-24x23.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> .<\/p>\n<p>Set the style properties to size, position and colours of the data indicator: <em>Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour<\/em><\/p>\n<p><strong>11. Alarm Indicator: <\/strong>The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a <strong>fixed<\/strong> shape and <strong>styled<\/strong> colour, depending on whether it is primary (an inverted triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17546\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>), secondary (a square <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17547\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Uncoloured-Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> ) or tertiary (a triangle <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17700\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Uncoloured-Tertiary-Alarm-Indicator-1.png\" width=\"18\" height=\"16\" \/>).<\/p>\n<p>Set the style properties to defined the size, position, and the colours for primary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17543\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Primary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/>, secondary <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17544\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png\" width=\"18\" height=\"18\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Secondary-Alarm-Indicator-24x24.png 24w\" sizes=\"auto, (max-width: 18px) 100vw, 18px\" \/> and tertiary alarms <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17545\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Tertiary-Alarm-Indicator.png\" width=\"18\" height=\"16\" \/> of the alarm indicator: <em> Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.<br \/>\n<\/em><em>Note:<\/em> The section and table below describe how these colours also affect the meter's background colours.<\/p>\n<p><strong>12. Value Indicator:<\/strong> Set the size (width) and colour of the value indicator: <em>Value Indicator Size, Value Indicator Target Colour<\/em><\/p>\n<p><strong>13. Limits:<\/strong> Set the style properties define the font properties, position, text case, and underlining of the limits: <em>Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset<\/em><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Here are some examples of how the meter background colours change with the different alarm states. Note how the temperature meter's secondary and tertiary background colours change to the secondary and tertiary alarm colours, respectively. During a primary alarm state, the target area's envelope band changes to the primary alarm colour.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>No Alarm<\/strong><\/td>\n<td><strong>Primary Alarm<\/strong><\/td>\n<td><strong>Secondary Alarm<\/strong><\/td>\n<td><strong>Tertiary Alarm<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example.png\" rel=\"lightbox-172\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18160 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example.png\" width=\"157\" height=\"244\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example.png 157w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-No-Alram-Example-31x48.png 31w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example.png\" rel=\"lightbox-173\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18161 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example.png\" width=\"164\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example.png 164w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example-103x150.png 103w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Primary-Alarm-Example-33x48.png 33w\" sizes=\"auto, (max-width: 164px) 100vw, 164px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example.png\" rel=\"lightbox-174\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18162 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example.png\" width=\"161\" height=\"239\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example.png 161w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example-101x150.png 101w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Secondary-Alarm-Example-32x48.png 32w\" sizes=\"auto, (max-width: 161px) 100vw, 161px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example.png\" rel=\"lightbox-175\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18163 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example.png\" width=\"164\" height=\"245\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example.png 164w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example-100x150.png 100w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temp-Tertiary-Alarm-Example-32x48.png 32w\" sizes=\"auto, (max-width: 164px) 100vw, 164px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"500\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 10px;\" width=\"400\"><strong>Custom Style Properties <\/strong><\/td>\n<\/tr>\n<tr style=\"border-top: 1px solid #cccccc;\">\n<td style=\"padding-left: 10px;\" width=\"500\">\n<p><em><strong>EXAMPLE: Small temperature meter, with green background colours<\/strong><\/em><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\" width=\"400\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"border-bottom: 1px solid #cccccc;\" width=\"500\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1.png\" rel=\"lightbox-176\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18179 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1.png\" width=\"198\" height=\"171\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1.png 198w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1-150x130.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-1-1-48x41.png 48w\" sizes=\"auto, (max-width: 198px) 100vw, 198px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"border-bottom: 1px solid #cccccc;\" width=\"400\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Meter-Meter-Style.png\" rel=\"lightbox-177\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17670 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Meter-Meter-Style-400x234.png\" width=\"400\" height=\"234\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"350\"><em><strong>EXAMPLE: Small, black-on-blue Data Indicator<\/strong><\/em><\/td>\n<td style=\"padding-left: 10px;\" width=\"550\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"border-bottom: 1px solid #cccccc;\" width=\"500\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2.png\" rel=\"lightbox-178\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17662 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2.png\" width=\"167\" height=\"240\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2.png 167w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2-104x150.png 104w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-2-33x48.png 33w\" sizes=\"auto, (max-width: 167px) 100vw, 167px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"border-bottom: 1px solid #cccccc;\" width=\"400\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Meter-Data-Indicator-Style.png\" rel=\"lightbox-179\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17668 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Meter-Data-Indicator-Style-400x167.png\" width=\"400\" height=\"167\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Large Alarm Indicator, coloured orange for Primary<\/strong><\/em><\/p>\n<\/td>\n<td style=\"padding-left: 10px;\" width=\"450\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px; border-bottom: 1px solid #cccccc;\" width=\"500\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1.png\" rel=\"lightbox-180\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18181 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1.png\" width=\"203\" height=\"246\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1.png 203w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1-124x150.png 124w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styled-3-1-40x48.png 40w\" sizes=\"auto, (max-width: 203px) 100vw, 203px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"border-bottom: 1px solid #cccccc;\" width=\"400\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3.png\" rel=\"lightbox-181\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18176 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3.png\" width=\"422\" height=\"208\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Temperature-Styling-3-48x24.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Text Label<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the\u00a0<strong>Text Label<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties.png\" rel=\"lightbox-182\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17803 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties.png\" width=\"327\" height=\"86\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties-150x39.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/TExt-Label-Style-properties-48x13.png 48w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the text, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears in the text label.<\/p>\n<ul>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Font Weight<\/li>\n<li>Underline<\/li>\n<li>Text Case<\/li>\n<li>Text Label Bottom Border Colour<\/li>\n<li>Text Label Bottom Border Size<\/li>\n<li>Text Label Bottom Border Style<\/li>\n<\/ul>\n<p><strong>2. Alignment<\/strong>: Align the Text Label by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the text label component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the text and bottom border <\/strong>(note that the bottom border is on the component border)<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style.png\" rel=\"lightbox-183\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18086 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style.png\" width=\"253\" height=\"55\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style.png 253w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style-150x33.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style-252x55.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Styled-Text-Style-48x10.png 48w\" sizes=\"auto, (max-width: 253px) 100vw, 253px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling.png\" rel=\"lightbox-184\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18087 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling.png\" width=\"417\" height=\"348\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling.png 417w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Text-Label-Styling-48x40.png 48w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Wind Vane<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/wind-vane\/\">Wind Vane<\/a>\u00a0tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the <strong>Wind Vane<\/strong>\u00a0in display mode.\u00a0<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"width: 50%;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles.png\" rel=\"lightbox-185\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20062\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles.png\" alt=\"wind-vane-styles\" width=\"547\" height=\"411\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles.png 547w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles-150x113.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-vane-styles-48x36.png 48w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/a><\/td>\n<td style=\"width: 50%;\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Wind Vane, you can change the colours of the dial and zones, and style the text.<\/p>\n<p><strong>1. Dial Border Colour<\/strong>: Change the colour of the outline of the dial. By default, this is grey.<\/p>\n<p><strong>2. Dial Background Colour<\/strong>: Change the colour of the background\u00a0of the dial. By default, this is transparent.<\/p>\n<p><strong>3. Needle Colour<\/strong>:\u00a0Change the colour of the needle and the min\/max\/average semi-circle. By default, this is blue.<\/p>\n<p><strong>4. Warning Colours<\/strong>:\u00a0Change the colour of the Warning Zone. By default, this is light grey when inactive and yellow when active.<\/p>\n<ul>\n<li>Warning Colour<\/li>\n<li>Warning Inactive Colour<\/li>\n<\/ul>\n<p><strong>5. Danger Colours<\/strong>: Change the colour of the Danger\u00a0Zone. By default, this is dark\u00a0grey when inactive and red\u00a0when active.<\/p>\n<ul>\n<li>Danger Colour<\/li>\n<li>Danger Inactive Colour<\/li>\n<\/ul>\n<p><strong>6. Font<\/strong>: Change the colour of the text indicating North.<\/p>\n<ul>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Label Font<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Here are some examples of how the wind vane\u00a0colours change with the different states. During a warning or danger state, the dial outline and zone colours change to the corresponding warning or danger colour.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Normal State<\/strong><\/td>\n<td><strong>Warning State<\/strong><\/td>\n<td><strong>Danger State<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state.png\" rel=\"lightbox-186\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20068\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state.png\" alt=\"wind-default-state\" width=\"179\" height=\"199\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state.png 179w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-default-state-43x48.png 43w\" sizes=\"auto, (max-width: 179px) 100vw, 179px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state.png\" rel=\"lightbox-187\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20070\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state.png\" alt=\"wind-warning-state\" width=\"179\" height=\"199\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state.png 179w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warning-state-43x48.png 43w\" sizes=\"auto, (max-width: 179px) 100vw, 179px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state.png\" rel=\"lightbox-188\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20067\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state.png\" alt=\"wind-danger-state\" width=\"179\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state.png 179w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state-134x150.png 134w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-state-43x48.png 43w\" sizes=\"auto, (max-width: 179px) 100vw, 179px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the dial border and background colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1.png\" rel=\"lightbox-189\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20101 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1.png\" width=\"180\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1.png 180w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-43x48.png 43w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1.png\" rel=\"lightbox-190\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20103 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1.png\" width=\"412\" height=\"96\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-dial1-style-1-48x11.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the needle and semi-circle colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle.png\" rel=\"lightbox-191\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20075\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle.png\" alt=\"wind-needle\" width=\"181\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle.png 181w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-136x150.png 136w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-43x48.png 43w\" sizes=\"auto, (max-width: 181px) 100vw, 181px\" \/><\/a><\/p>\n<\/td>\n<td>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style.png\" rel=\"lightbox-192\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20076\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style.png\" alt=\"wind-needle-style\" width=\"409\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style-150x12.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style-48x4.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the warning colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive.png\" rel=\"lightbox-193\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20077\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive.png\" alt=\"wind-warn-inactive\" width=\"180\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive.png 180w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-inactive-43x48.png 43w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active.png\" rel=\"lightbox-194\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20079\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active.png\" alt=\"wind-warn-active\" width=\"181\" height=\"199\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active.png 181w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active-136x150.png 136w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active-44x48.png 44w\" sizes=\"auto, (max-width: 181px) 100vw, 181px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style.png\" rel=\"lightbox-195\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20080\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style.png\" alt=\"wind-warn-style\" width=\"413\" height=\"66\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-style-48x8.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the danger\u00a0colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive.png\" rel=\"lightbox-196\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20082\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive.png\" alt=\"wind-danger-inactive\" width=\"181\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive.png 181w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive-136x150.png 136w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive-43x48.png 43w\" sizes=\"auto, (max-width: 181px) 100vw, 181px\" \/><\/a>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active.png\" rel=\"lightbox-197\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20081\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active.png\" alt=\"wind-danger-active\" width=\"180\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active.png 180w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active-43x48.png 43w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/a><\/p>\n<\/td>\n<td>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style.png\" rel=\"lightbox-198\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20083\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style.png\" alt=\"wind-danger-style\" width=\"408\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style-150x25.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style-48x8.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font.png\" rel=\"lightbox-199\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20086\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font.png\" alt=\"wind-font\" width=\"185\" height=\"201\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font.png 185w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-138x150.png 138w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-44x48.png 44w\" sizes=\"auto, (max-width: 185px) 100vw, 185px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style.png\" rel=\"lightbox-200\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20088\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style.png\" alt=\"wind-font-style\" width=\"408\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-font-style-48x16.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h1 class=\"page-subheading3\">Time<\/h1>\n<h2 class=\"page-subheading\">Current Date\/Time Toggle<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/\">Current Date\/Time Toggle tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Current Date\/Time Toggle<\/strong> in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base.png\" rel=\"lightbox-201\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18417\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base.png\" alt=\"toggle-base\" width=\"331\" height=\"134\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-48x19.png 48w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the colour of the toggle, and the alignment.<\/p>\n<p><strong>1. Current Date\/Time Toggle Rectangle<\/strong>: Change the colour of the box.<\/p>\n<ul>\n<li>Current Date\/Time Toggle Rectangle Colour<\/li>\n<\/ul>\n<p><strong>2. Current Date\/Time Toggle Tick<\/strong>: Change the colour of the tick.<\/p>\n<ul>\n<li>Current Date\/Time Toggle Tick Colour<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Current Date\/Time Toggle by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the colour of the box and the tick<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style.png\" rel=\"lightbox-202\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18418\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style.png\" alt=\"toggle-style\" width=\"36\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style-24x22.png 24w\" sizes=\"auto, (max-width: 36px) 100vw, 36px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop.png\" rel=\"lightbox-203\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18419\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop.png\" alt=\"toggle-prop\" width=\"415\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-48x17.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the alignment of the control<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align.png\" rel=\"lightbox-204\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18420\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align.png\" alt=\"toggle-align\" width=\"208\" height=\"59\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align.png 208w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-48x14.png 48w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop.png\" rel=\"lightbox-205\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18421\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop.png\" alt=\"toggle-align-prop\" width=\"409\" height=\"134\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-48x16.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker tutorial,<\/a> <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Date Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base.png\" rel=\"lightbox-206\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18423\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base.png\" alt=\"date-base\" width=\"318\" height=\"130\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-48x20.png 48w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Date Picker, and the alignment.<\/p>\n<p><strong>1. Date Picker Bottom Border<\/strong>: Change the border below the date.<\/p>\n<ul>\n<li>Date Picker Bottom Border Colour<\/li>\n<li>Date Picker Bottom Border Size<\/li>\n<li>Date Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>2. Date Picker Font<\/strong>: Change the font that shows the date.<\/p>\n<ul>\n<li>Date Picker Font Size<\/li>\n<li>Date Picker Font Family<\/li>\n<li>Date Picker Font Colour<\/li>\n<li>Date Picker Font Weight<\/li>\n<li>Date Picker Font Alignment<\/li>\n<li>Date Picker Font Underline<\/li>\n<li>Date Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Date Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style.png\" rel=\"lightbox-207\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18424\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style.png\" alt=\"date-border-style\" width=\"110\" height=\"40\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style.png 110w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style-48x17.png 48w\" sizes=\"auto, (max-width: 110px) 100vw, 110px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop.png\" rel=\"lightbox-208\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18425\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop.png\" alt=\"date-border-prop\" width=\"414\" height=\"138\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style.png\" rel=\"lightbox-209\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18426\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style.png\" alt=\"date-font-style\" width=\"100\" height=\"37\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style.png 100w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style-48x18.png 48w\" sizes=\"auto, (max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop.png\" rel=\"lightbox-210\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18427\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop.png\" alt=\"date-font-prop\" width=\"409\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date\/Time Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-picker\/\">Date\/Time Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Date\/Time Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base.png\" rel=\"lightbox-211\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18430\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base.png\" alt=\"dt-base\" width=\"429\" height=\"138\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base.png 429w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-48x15.png 48w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Date\/Time Picker, and the alignment.<\/p>\n<p><strong>1. Date Time Picker Bottom Border<\/strong>: Change the border below the date.<\/p>\n<ul>\n<li>Date Time Picker Bottom Border Colour<\/li>\n<li>Date Time Picker Bottom Border Size<\/li>\n<li>Date Time Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>2. Date Time Picker Font<\/strong>: Change the font that shows the date.<\/p>\n<ul>\n<li>Date Time Picker Font Size<\/li>\n<li>Date Time Picker Font Family<\/li>\n<li>Date Time Picker Font Colour<\/li>\n<li>Date Time Picker Font Weight<\/li>\n<li>Date Time Picker Font Alignment<\/li>\n<li>Date Time Picker Font Underline<\/li>\n<li>Date Time Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Date\/Time Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style.png\" rel=\"lightbox-212\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18431\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style.png\" alt=\"dt-border-style\" width=\"214\" height=\"32\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style.png 214w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-48x7.png 48w\" sizes=\"auto, (max-width: 214px) 100vw, 214px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop.png\" rel=\"lightbox-213\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18432\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop.png\" alt=\"dt-border-prop\" width=\"411\" height=\"133\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style.png\" rel=\"lightbox-214\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18433\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style.png\" alt=\"dt-font-style\" width=\"205\" height=\"27\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style.png 205w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-48x6.png 48w\" sizes=\"auto, (max-width: 205px) 100vw, 205px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop.png\" rel=\"lightbox-215\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18434\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop.png\" alt=\"dt-font-prop\" width=\"412\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date\/Time Range Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/\">Date\/Time Range Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Date\/Time Range Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base.png\" rel=\"lightbox-216\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18441 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base.png\" width=\"698\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base.png 698w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-48x11.png 48w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"50%\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Date\/Time Range Picker, and the alignment.<\/p>\n<p><strong>1. Date Time Range Picker Bottom Border<\/strong>: Change the border below the date.<\/p>\n<ul>\n<li>Date Time Range Picker Bottom Border Colour<\/li>\n<li>Date Time Range Picker Bottom Border Size<\/li>\n<li>Date Time Range Picker Bottom Border Style<\/li>\n<\/ul>\n<\/td>\n<td width=\"50%\">\n<p><strong>2. Date Time Range Picker Font<\/strong>: Change the font that shows the date.<\/p>\n<ul>\n<li>Date Time Range Picker Font Size<\/li>\n<li>Date Time Range Picker Font Family<\/li>\n<li>Date Time Range Picker Font Colour<\/li>\n<li>Date Time Range Picker Font Weight<\/li>\n<li>Date Time Range Picker Font Alignment<\/li>\n<li>Date Time Range Picker Font Underline<\/li>\n<li>Date Time Range Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Date\/Time Range Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style.png\" rel=\"lightbox-217\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18437\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style.png\" alt=\"range-border-style\" width=\"485\" height=\"43\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style.png 485w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-150x13.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-48x4.png 48w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop.png\" rel=\"lightbox-218\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18438\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop.png\" alt=\"range-border-prop\" width=\"411\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style.png\" rel=\"lightbox-219\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18439\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style.png\" alt=\"range-font-style\" width=\"482\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style.png 482w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-36x2.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-48x3.png 48w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop.png\" rel=\"lightbox-220\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18440\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop.png\" alt=\"range-font-prop\" width=\"410\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Duration Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/duration-picker\/\">Duration Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Duration Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1.png\" rel=\"lightbox-221\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18443 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1.png\" width=\"330\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-48x24.png 48w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Duration Picker, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Change the font that shows the duration.<\/p>\n<ul>\n<li>Duration Picker Font Size<\/li>\n<li>Duration Picker Font Family<\/li>\n<li>Duration Picker Font Colour<\/li>\n<li>Duration Picker Font Weight<\/li>\n<li>Duration Picker Font Alignment<\/li>\n<li>Duration Picker Font Underline<\/li>\n<li>Duration Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>2. Duration Picker Bottom Border<\/strong>: Change the border below the duration.<\/p>\n<ul>\n<li>Duration Picker Bottom Border Colour<\/li>\n<li>Duration Picker Bottom Border Size<\/li>\n<li>Duration Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Duration Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style.png\" rel=\"lightbox-222\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18444\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style.png\" alt=\"duration-border-style\" width=\"76\" height=\"34\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style.png 76w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style-48x21.png 48w\" sizes=\"auto, (max-width: 76px) 100vw, 76px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop.png\" rel=\"lightbox-223\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18445\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop.png\" alt=\"duration-border-prop\" width=\"414\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style.png\" rel=\"lightbox-224\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18446\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style.png\" alt=\"duration-font-style\" width=\"110\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style.png 110w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style-48x22.png 48w\" sizes=\"auto, (max-width: 110px) 100vw, 110px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop.png\" rel=\"lightbox-225\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18447\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop.png\" alt=\"duration-font-prop\" width=\"418\" height=\"281\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop.png 418w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Month Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/\">Month Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Month Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base.png\" rel=\"lightbox-226\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18451\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base.png\" alt=\"month-base\" width=\"325\" height=\"147\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-48x22.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Month Picker, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Change the font that shows the month.<\/p>\n<ul>\n<li>Month Picker Font Size<\/li>\n<li>Month Picker Font Family<\/li>\n<li>Month Picker Font Colour<\/li>\n<li>Month Picker Font Weight<\/li>\n<li>Month Picker Font Alignment<\/li>\n<li>Month Picker Font Underline<\/li>\n<li>Month Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>2. Month Picker Bottom Border<\/strong>: Change the border below the month.<\/p>\n<ul>\n<li>Month Picker Bottom Border Colour<\/li>\n<li>Month Picker Bottom Border Size<\/li>\n<li>Month Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Month Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style.png\" rel=\"lightbox-227\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18454\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style.png\" alt=\"month-font-style\" width=\"90\" height=\"35\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style.png 90w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style-48x19.png 48w\" sizes=\"auto, (max-width: 90px) 100vw, 90px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop.png\" rel=\"lightbox-228\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18455\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop.png\" alt=\"month-border-prop\" width=\"409\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-48x15.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style.png\" rel=\"lightbox-229\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18452\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style.png\" alt=\"month-border-style\" width=\"144\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style.png 144w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style-48x16.png 48w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop.png\" rel=\"lightbox-230\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18453\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop.png\" alt=\"month-font-prop\" width=\"413\" height=\"278\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h1 class=\"page-subheading3\">Tables<\/h1>\n<h2 class=\"page-subheading\">Data Table<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/\">Data Table tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Data Table <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base.png\" rel=\"lightbox-231\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18360\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base.png\" alt=\"data-table-base\" width=\"578\" height=\"363\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base.png 578w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/data-table-base-48x30.png 48w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Data Table you can change the background and text appearance, in all rows.<\/p>\n<p><strong>1. Header Row<\/strong>: Style the colour of the header row. Includes both the column heading and the filter.<\/p>\n<ul>\n<li>Header Row Background Colour<\/li>\n<\/ul>\n<p><strong>2. Header Cell<\/strong>: Style the appearance of the text for the column headings.<\/p>\n<ul style=\"columns: 2;\">\n<li>Header Cell Font Family<\/li>\n<li>Header Cell Font Colour<\/li>\n<li>Header Cell Font Size<\/li>\n<li>Header Cell Font Weight<\/li>\n<li>Header Cell Alignment<\/li>\n<li>Header Cell Underline<\/li>\n<li>Header Cell Text Case<\/li>\n<li>Header Cell Border Colour<\/li>\n<li>Header Cell Border Size<\/li>\n<li>Header Cell Border Style<\/li>\n<li>Header Cell Padding<\/li>\n<\/ul>\n<p><strong>3. Filter Cell<\/strong>: Set the spacing around the filter box.<\/p>\n<ul>\n<li>Filter Cell Padding<\/li>\n<\/ul>\n<p><strong>4. Filter Field<\/strong>: Style the appearance of the cells.<\/p>\n<ul style=\"columns: 2;\">\n<li>Filter Field Font Family<\/li>\n<li>Filter Field Font Colour<\/li>\n<li>Filter Field Font Size<\/li>\n<li>Filter Field Font Weight<\/li>\n<li>Filter Field Alignment<\/li>\n<li>Filter Field Underline<\/li>\n<li>Filter Field Text Case<\/li>\n<li>Filter Field Border Colour<\/li>\n<li>Filter Field Border Size<\/li>\n<li>Filter Field Border Style<\/li>\n<li>Filter Field Padding<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>5. Body Row, Body Row Odd, Body Row Even, Body Cell<\/strong>: Style the appearance of the rows and text in the table. See example below for colours.<\/p>\n<ul style=\"columns: 2;\">\n<li>Body Row Background Colour<\/li>\n<li>Body Row Height<\/li>\n<li>Body Row Even Background Colour<\/li>\n<li>Body Row Odd Background Colour<\/li>\n<li>Body Cell Font Family<\/li>\n<li>Body Cell Font Colour<\/li>\n<li>Body Cell Font Size<\/li>\n<li>Body Cell Font Weight<\/li>\n<li>Body Cell Alignment<\/li>\n<li>Body Cell Underline<\/li>\n<li>Body Cell Text Case<\/li>\n<li>Body Cell Border Colour<\/li>\n<li>Body Cell Border Size<\/li>\n<li>Body Cell Border Style<\/li>\n<li>Body Cell Padding<\/li>\n<\/ul>\n<p><strong>6. Footer Row<\/strong>: Style the appearance of the row containing the aggregation.<\/p>\n<ul>\n<li>Footer Row Background Colour<\/li>\n<li>Footer Row Height<\/li>\n<\/ul>\n<p><strong>7. Footer Cell<\/strong>: Style the aggregation text.<\/p>\n<ul style=\"columns: 2;\">\n<li>Footer Cell Font Family<\/li>\n<li>Footer Cell Font Colour<\/li>\n<li>Footer Cell Font Size<\/li>\n<li>Footer Cell Font Weight<\/li>\n<li>Footer Cell Alignment<\/li>\n<li>Footer Cell Underline<\/li>\n<li>Footer Cell Text Case<\/li>\n<li>Footer Cell Border Colour<\/li>\n<li>Footer Cell Border Size<\/li>\n<li>Footer Cell Border Style<\/li>\n<li>Footer Cell Padding<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the header background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header.png\" rel=\"lightbox-232\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18368\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header.png\" alt=\"table-header\" width=\"430\" height=\"184\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header.png 430w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-48x21.png 48w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop.png\" rel=\"lightbox-233\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18369\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop.png\" alt=\"table-header-prop\" width=\"419\" height=\"65\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop.png 419w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop-150x23.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-prop-48x7.png 48w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text and borders in the header row<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style.png\" rel=\"lightbox-234\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18371\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style.png\" alt=\"table-header-cell-style\" width=\"443\" height=\"227\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style.png 443w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-style-48x25.png 48w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop.png\" rel=\"lightbox-235\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18372\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop.png\" alt=\"table-header-cell-prop\" width=\"411\" height=\"417\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-header-cell-prop-48x48.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the padding around the filter cell<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style.png\" rel=\"lightbox-236\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18373\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style.png\" alt=\"filter-cell-padding-style\" width=\"459\" height=\"115\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style.png 459w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style-150x38.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-style-48x12.png 48w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop.png\" rel=\"lightbox-237\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18374\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop.png\" alt=\"filter-cell-padding-prop\" width=\"411\" height=\"61\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/filter-cell-padding-prop-48x7.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text and borders in the filter field<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1.png\" rel=\"lightbox-238\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18377 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1.png\" width=\"439\" height=\"172\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1.png 439w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-style1-48x19.png 48w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1.png\" rel=\"lightbox-239\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18378 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1.png\" width=\"406\" height=\"416\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1.png 406w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/table-filter-cell-prop1-48x48.png 48w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the colours of the rows - note that Body Row Background Colour will not show if both Body Row Even and Body Row Odd are set<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style.png\" rel=\"lightbox-240\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18379\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style.png\" alt=\"body-row-colour-style\" width=\"447\" height=\"171\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style.png 447w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-style-48x18.png 48w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop.png\" rel=\"lightbox-241\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18380\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop.png\" alt=\"body-row-colour-prop\" width=\"409\" height=\"249\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-row-colour-prop-48x29.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the body cell text and borders<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style.png\" rel=\"lightbox-242\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18381\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style.png\" alt=\"body-cell-style\" width=\"445\" height=\"181\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style.png 445w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-style-48x20.png 48w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop.png\" rel=\"lightbox-243\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18382\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop.png\" alt=\"body-cell-prop\" width=\"405\" height=\"416\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop.png 405w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/body-cell-prop-48x48.png 48w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the footer cell colour, text and borders<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style.png\" rel=\"lightbox-244\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18383\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style.png\" alt=\"footer-style\" width=\"463\" height=\"260\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style.png 463w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-style-48x27.png 48w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props.png\" rel=\"lightbox-245\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18384\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props.png\" alt=\"footer-props\" width=\"411\" height=\"529\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props-117x150.png 117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/footer-props-37x48.png 37w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Pivot Table<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pivot-table\/\">Pivot Table tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Pivot Table <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2.png\" rel=\"lightbox-246\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18470\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2.png\" width=\"950\" height=\"441\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2.png 1193w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2-768x357.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Style-Properties-2-48x22.png 48w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Because the Pivot Table can have several levels, its helpful to give these different background colours so that its easy to see subtotals at a glance. As well as being able to style these background colours, you can style the cell text appearance, and also the configuration panel.<\/p>\n<p><strong>1. Cell<\/strong>: Style the font and border style of all cells in the table.<\/p>\n<ul style=\"columns: 2;\">\n<li>Cell Font Family<\/li>\n<li>Cell Font Colour<\/li>\n<li>Cell Font Size<\/li>\n<li>Cell Font Weight<\/li>\n<li>Cell Alignment<\/li>\n<li>Cell Underline<\/li>\n<li>Cell Text Case<\/li>\n<li>Cell Border Colour<\/li>\n<li>Cell Border Size<\/li>\n<li>Cell Border Style<\/li>\n<li>Horizontal Cell Padding<\/li>\n<li>Vertical Cell Padding<\/li>\n<\/ul>\n<p><strong>2. Cell Background Colour<\/strong>: Style the background colour for the column headers and for all detail cells (the lowest level in the pivot table). If more than five levels are used in the pivot table, the higher levels (six and up) take on this property as well.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>3. Cell Level 1<\/strong>: Style the background colour for level 1, and also for detail row sub-totals.<\/p>\n<ul style=\"columns: 2;\">\n<li>Cell Level 1 Background Colour<\/li>\n<\/ul>\n<\/td>\n<td width=\"450\">\n<p><strong>4. Cell Level 2<\/strong>: Style the background colour for level 2.<\/p>\n<ul style=\"columns: 2;\">\n<li>Cell Level 2 Background Colour<\/li>\n<\/ul>\n<p><strong>5. Cell Level 3<\/strong>: Style the background colour for level 3.<\/p>\n<ul style=\"columns: 2;\">\n<li>Cell Level 3 Background Colour<\/li>\n<\/ul>\n<p><strong>6. Cell Level 4<\/strong>: Style the background colour for level 4.<\/p>\n<ul style=\"columns: 2;\">\n<li>Cell Level 4 Background Colour<\/li>\n<\/ul>\n<p><strong>7. Cell Level 5<\/strong>: Style the background colour for level 5.<\/p>\n<ul style=\"columns: 2;\">\n<li>Cell Level 5 Background Colour<\/li>\n<\/ul>\n<p><strong>8. Config Panel<\/strong>: Style the configuration panel.<\/p>\n<ul style=\"columns: 2;\">\n<li>Config Panel Font Family<\/li>\n<li>Config Panel Font Colour<\/li>\n<li>Config Panel Font Size<\/li>\n<li>Config Panel Font Weight<\/li>\n<li>Config Panel Alignment<\/li>\n<li>Config Panel Underline<\/li>\n<li>Config Panel Text Case<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Styling the cell level background colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1.png\" rel=\"lightbox-247\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18477\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1.png\" width=\"445\" height=\"383\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1.png 573w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1-150x129.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-1-48x41.png 48w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1.png\" rel=\"lightbox-248\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18479 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1.png\" width=\"406\" height=\"381\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1.png 406w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1-150x141.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Table-Styling-1-1-48x45.png 48w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Styling the cell text and borders<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2.png\" rel=\"lightbox-249\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18482\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2.png\" width=\"445\" height=\"190\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2.png 567w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-styled-2-48x20.png 48w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2.png\" rel=\"lightbox-250\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18483 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2.png\" width=\"413\" height=\"491\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2-126x150.png 126w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-2-40x48.png 40w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Styling the Configuration Panel<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3.png\" rel=\"lightbox-251\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18485\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3.png\" width=\"445\" height=\"384\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3.png 568w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3-150x129.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styled-3-48x41.png 48w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3.png\" rel=\"lightbox-252\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18486 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3.png\" width=\"405\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3.png 405w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3-150x103.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Pivot-Styling-3-48x33.png 48w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1 class=\"page-subheading3\">Layouts<\/h1>\n<h2 class=\"page-subheading\">Grid Layout<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Grid Layout <\/strong>in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base.png\" rel=\"lightbox-253\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17915\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base.png\" alt=\"grid-style-base\" width=\"290\" height=\"241\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base.png 290w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-48x40.png 48w\" sizes=\"auto, (max-width: 290px) 100vw, 290px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Grid Layout you can change the background colour and styles relating to the cells.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the page background.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<p><strong>2. Cells<\/strong>: Style the appearance of the cells.<\/p>\n<ul>\n<li>Cell Background Colour<\/li>\n<li>Cell Border Colour<\/li>\n<li>Cell Border Width<\/li>\n<li>Cell Border Style<\/li>\n<li>Cell Margin<\/li>\n<li>Cell Padding<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the page background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1.png\" rel=\"lightbox-254\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17932 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1.png\" width=\"236\" height=\"241\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-48x48.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" rel=\"lightbox-255\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17919\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" alt=\"grid-style-bg-props\" width=\"410\" height=\"66\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-48x8.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the appearance of the cells<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell.png\" rel=\"lightbox-256\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17918\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell.png\" alt=\"grid-style-cell\" width=\"222\" height=\"225\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell.png 222w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-48x48.png 48w\" sizes=\"auto, (max-width: 222px) 100vw, 222px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop.png\" rel=\"lightbox-257\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17920\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop.png\" alt=\"grid-style-cell-prop\" width=\"410\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-48x28.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Precision Layout<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Precision Layout <\/strong>in design mode, with a component added to show the cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base.png\" rel=\"lightbox-258\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17924\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base.png\" alt=\"precision-style-base\" width=\"298\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base.png 298w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-150x122.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-48x39.png 48w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Precision Layout you can change the background colour and styles relating to the cells containing the added components.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the page background.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<p><strong>2. Cells<\/strong>: Style the appearance of the cells.<\/p>\n<ul>\n<li>Cell Background Colour<\/li>\n<li>Cell Border Colour<\/li>\n<li>Cell Border Width<\/li>\n<li>Cell Border Style<\/li>\n<li>Cell Padding<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Design Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the page background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1.png\" rel=\"lightbox-259\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17927 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1.png\" width=\"236\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-48x48.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" rel=\"lightbox-255\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17919\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" alt=\"grid-style-bg-props\" width=\"410\" height=\"66\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-48x8.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the appearance of the cells<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1.png\" rel=\"lightbox-261\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17925 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1.png\" width=\"236\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-48x48.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1.png\" rel=\"lightbox-262\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17926 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1.png\" width=\"414\" height=\"206\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-48x24.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h1 class=\"page-subheading3\">Controls<\/h1>\n<h2 class=\"page-subheading\">Combo Box<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Combo Box<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box.png\" rel=\"lightbox-263\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17773 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box.png\" width=\"309\" height=\"187\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box.png 309w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-48x29.png 48w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the base text, the border between the selected option and the list of options, and the aligment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears above the line (the <em>Selected Option<\/em>).<\/p>\n<ul>\n<li>Combo Box Font Size<\/li>\n<li>Combo Box Font Family<\/li>\n<li>Combo Box Font Colour<\/li>\n<li>Combo Box Font Weight<\/li>\n<li>Combo Box Font Alignment<\/li>\n<li>Combo Box Underline<\/li>\n<li>Combo Box Text Case<\/li>\n<\/ul>\n<p><strong>2. Combo Box Bottom Border<\/strong>: Style the line that separates the <em>Selected Option<\/em> from the list of values.<\/p>\n<ul>\n<li>Combo Box Bottom Border Colour<\/li>\n<li>Combo Box Bottom Border Size<\/li>\n<li>Combo Box Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Combo Box by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border.png\" rel=\"lightbox-264\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18074 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border.png\" width=\"177\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border.png 177w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-150x138.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-48x44.png 48w\" sizes=\"auto, (max-width: 177px) 100vw, 177px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border.png\" rel=\"lightbox-265\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18073 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border.png\" width=\"408\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-48x16.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Aligned middle center<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt.png\" rel=\"lightbox-266\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18070 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt.png\" width=\"241\" height=\"142\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt.png 241w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-48x28.png 48w\" sizes=\"auto, (max-width: 241px) 100vw, 241px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment.png\" rel=\"lightbox-267\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18071 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment.png\" width=\"418\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment.png 418w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-48x16.png 48w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Hotspot<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hotspot\/\">Hotspot<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the\u00a0<strong>Hotspot<\/strong> in design mode. The component is normally used on a Precision Layout.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style.png\" rel=\"lightbox-268\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31698\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style.png\" alt=\"\" width=\"328\" height=\"99\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-48x14.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Hotspot, you can style the border and the background; these are only visible in design mode.<\/p>\n<p><strong>1. Border<\/strong>: The colour, width, and style of the border.<\/p>\n<ul>\n<li>Border Colour<\/li>\n<li>Border Width<\/li>\n<li>Border Style<\/li>\n<\/ul>\n<p><strong>2. Background<\/strong>: Style colour of the background that appears in design mode.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Design Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border Colour<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour.png\" rel=\"lightbox-269\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31699\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit.png\" rel=\"lightbox-270\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31704\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit.png\" alt=\"\" width=\"459\" height=\"32\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit.png 459w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-48x3.png 48w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border Width<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width.png\" rel=\"lightbox-271\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31700\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit.png\" rel=\"lightbox-272\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31705\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit.png\" alt=\"\" width=\"458\" height=\"35\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-48x4.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border Style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style.png\" rel=\"lightbox-273\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31702\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit.png\" rel=\"lightbox-274\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31706\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit.png\" alt=\"\" width=\"458\" height=\"32\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-48x3.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Background Colour<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour.png\" rel=\"lightbox-275\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31703\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit.png\" rel=\"lightbox-276\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31707\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit.png\" alt=\"\" width=\"462\" height=\"35\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit.png 462w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-48x4.png 48w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Selection List<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Selection List\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/selection-list\/\">Selection List<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the <strong>Selection List<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td width=\"250\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide.png\" rel=\"lightbox-277\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17637 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide.png\" width=\"450\" height=\"220\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide.png 450w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-48x23.png 48w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<\/td>\n<td width=\"750\">\n<p><strong>1. Base Style<\/strong><\/p>\n<p>Style the text that appears in the list.<\/p>\n<p><strong>2. Selection List Separator<\/strong><\/p>\n<p>Style the line that separates the items.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Stylised font for the list items<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling.png\" rel=\"lightbox-278\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18065 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling.png\" width=\"362\" height=\"213\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling.png 362w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-48x28.png 48w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style.png\" rel=\"lightbox-279\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18064 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style.png\" width=\"422\" height=\"278\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-48x32.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Option Links<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Option Links\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/\">Option Links<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Option Links<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties.png\" rel=\"lightbox-280\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17780 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties.png\" width=\"316\" height=\"158\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-48x24.png 48w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the base text, the line below the selected option, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears below the <em>Selected Option<\/em>.<\/p>\n<ul>\n<li>Option Links Font Size<\/li>\n<li>Option Links Font Family<\/li>\n<li>Option Links Font Colour<\/li>\n<li>Option Links Font Weight<\/li>\n<li>Option Links Font Alignment<\/li>\n<li>Option Links Underline<\/li>\n<li>Option Links Text Case<\/li>\n<\/ul>\n<p><strong>2. Option Links Bottom Border<\/strong>: Style the underline of the <em>Selected Option<\/em>.<\/p>\n<ul>\n<li>Option Links Bottom Border Colour<\/li>\n<li>Option Links Bottom Border Size<\/li>\n<li>Option Links Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Option Links Box by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled base style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled.png\" rel=\"lightbox-281\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18083 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled.png\" width=\"195\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled.png 195w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-150x38.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-48x12.png 48w\" sizes=\"auto, (max-width: 195px) 100vw, 195px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling.png\" rel=\"lightbox-282\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18084 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling.png\" width=\"422\" height=\"275\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-48x31.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled Bottom Border: grey, dotted, thick<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled.png\" rel=\"lightbox-283\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18081 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled.png\" width=\"183\" height=\"57\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled.png 183w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-48x15.png 48w\" sizes=\"auto, (max-width: 183px) 100vw, 183px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border.png\" rel=\"lightbox-284\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18082 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border.png\" width=\"416\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-48x16.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Text Input<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Text Input\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-input\/\">Text Input<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the\u00a0<strong>Text Input<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1.png\" rel=\"lightbox-285\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-29473 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1.png\" alt=\"\" width=\"386\" height=\"86\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1.png 386w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-150x33.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-48x11.png 48w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the text, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears in the text input.<\/p>\n<ul>\n<li>Text Input Font Size<\/li>\n<li>Text Input Font Family<\/li>\n<li>Text Input Font Colour<\/li>\n<li>Text Input Font Weight<\/li>\n<li>Text Input Text Case<\/li>\n<\/ul>\n<p><strong>2. Alignment<\/strong>: Align the Text Input by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the text input component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the text and alignment <\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input.png\" rel=\"lightbox-286\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-29467 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input.png\" alt=\"\" width=\"343\" height=\"67\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input.png 343w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-150x29.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-48x9.png 48w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design.png\" rel=\"lightbox-287\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-29468 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design.png\" alt=\"\" width=\"473\" height=\"366\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design.png 473w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-150x116.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-48x37.png 48w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h1 class=\"page-subheading3\">Simple Shapes<\/h1>\n<h2 class=\"page-subheading\">Simple Line<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Simple Line\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/simple-line\/\">Simple Line<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Simple Line<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/simple-line-properties.png\" rel=\"lightbox-288\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18210 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/simple-line-properties.png\" width=\"140\" height=\"105\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/simple-line-properties.png 140w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/simple-line-properties-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/simple-line-properties-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/simple-line-properties-48x36.png 48w\" sizes=\"auto, (max-width: 140px) 100vw, 140px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the line. The directions and corners are applied in design time.<\/p>\n<p><strong>Line<\/strong>: Style the line colour and thickness.<\/p>\n<ul>\n<li>Colour<\/li>\n<li>Thickness (can be overridden in Studio)<\/li>\n<li>Line Style (can be overridden in Studio)<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Two styled simple lines<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines.png\" rel=\"lightbox-289\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31954 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines.png\" alt=\"\" width=\"380\" height=\"248\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines.png 380w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Two-Simple-Lines-48x31.png 48w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style.png\" rel=\"lightbox-290\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-31953 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style.png\" alt=\"\" width=\"496\" height=\"155\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style.png 496w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/10\/Simple-LIne-Style-48x15.png 48w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page lists all the components in IFS OI Explorer and how they can be styled.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":300,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[488],"class_list":["post-17347","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-styles","Version-4-5-3","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=17347"}],"version-history":[{"count":3,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17347\/revisions"}],"predecessor-version":[{"id":67126,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17347\/revisions\/67126"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/18269"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=17347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=17347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=17347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}