{"id":32903,"date":"2018-09-12T12:37:20","date_gmt":"2018-09-12T04:37:20","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=32903"},"modified":"2024-06-10T12:11:23","modified_gmt":"2024-06-10T04:11:23","slug":"styling-displays","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/","title":{"rendered":"Styling Displays"},"content":{"rendered":"\n<p class=\"intro-text\">This article describes the styling properties of each component in the Display <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/><\/a> group in IFS OI Explorer Studio. 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<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 class=\"table-toc\" 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-1\"><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-2\"><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-3\"><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-4\"><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-5\"><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-6\"><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-7\"><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-8\"><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-9\"><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-10\"><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-11\"><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-12\"><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-13\"><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-14\"><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-15\"><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-16\"><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-17\"><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-18\"><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-19\"><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-20\"><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-21\"><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-8\"><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-23\"><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-24\"><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-25\"><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-26\"><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\">Info Button<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/info-button\/\">Info 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>Info Button <\/strong>in design mode.<\/p>\n<table class=\"table-toc\" style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41295 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-style-overview.png\" alt=\"\" width=\"138\" height=\"116\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-style-overview.png 138w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-style-overview-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-style-overview-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-style-overview-48x40.png 48w\" sizes=\"auto, (max-width: 138px) 100vw, 138px\" \/><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Info Button you can change the alignment within the container, as well as the button style: colour, background color and size.<\/p>\n<p><strong>1. Alignment<\/strong>: Set the alignment of the Info Button within the container, 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><strong>2. Button Style<\/strong>: Set the style of the Info Button.<\/p>\n<ul>\n<li>Colour<\/li>\n<li>Background Colour<\/li>\n<li>Sizer<\/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><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41293 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-size.png\" alt=\"\" width=\"98\" height=\"91\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-size.png 98w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-size-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-size-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-size-48x45.png 48w\" sizes=\"auto, (max-width: 98px) 100vw, 98px\" \/><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41294 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size.png\" alt=\"\" width=\"481\" height=\"146\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size.png 481w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size-150x46.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-size-48x15.png 48w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/><\/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 and the background colour of the button<\/strong><\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41291 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-colours.png\" alt=\"\" width=\"89\" height=\"78\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-colours.png 89w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-colours-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-colours-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/using-info-button-colours-48x42.png 48w\" sizes=\"auto, (max-width: 89px) 100vw, 89px\" \/><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41292 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours.png\" alt=\"\" width=\"489\" height=\"159\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours.png 489w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Colours-48x16.png 48w\" sizes=\"auto, (max-width: 489px) 100vw, 489px\" \/><\/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 alignment<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Alignment-applied.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41289 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Alignment-applied.png\" alt=\"\" width=\"111\" height=\"94\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Alignment-applied.png 111w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Alignment-applied-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Alignment-applied-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-Button-Alignment-applied-48x41.png 48w\" sizes=\"auto, (max-width: 111px) 100vw, 111px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41290 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments.png\" alt=\"\" width=\"474\" height=\"151\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments.png 474w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Info-button-Alignments-48x15.png 48w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\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-31\"><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-32\"><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-33\"><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-34\"><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-35\"><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-36\"><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-37\"><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-38\"><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-39\"><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-40\"><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-41\"><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-42\"><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-43\"><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-44\"><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-45\"><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-46\"><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-47\"><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-48\"><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-49\"><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-50\"><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-51\"><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-52\"><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>&nbsp;<\/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-53\"><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-54\"><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-55\"><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-56\"><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-57\"><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-58\"><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-59\"><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-60\"><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-61\"><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-62\"><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-63\"><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>&nbsp;<\/p>\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-64\"><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-65\"><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-66\"><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<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-67\"><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-68\"><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-69\"><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-70\"><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-71\"><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-72\"><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-73\"><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-74\"><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-75\"><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-76\"><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-77\"><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-78\"><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-79\"><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-80\"><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-81\"><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-82\"><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-83\"><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-84\"><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-85\"><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-86\"><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-87\"><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-88\"><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-89\"><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-90\"><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-91\"><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-92\"><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-93\"><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-94\"><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-95\"><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-96\"><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-97\"><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-98\"><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-99\"><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-100\"><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-101\"><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-102\"><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-103\"><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-104\"><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-105\"><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-106\"><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-107\"><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-108\"><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-109\"><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-110\"><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-111\"><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-112\"><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-113\"><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-114\"><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-115\"><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=\"note\"><strong>Note:<\/strong> Writing Mode and Text Orientation styling added in version 4.13.<\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the <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-116\"><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<li>Writing Mode<\/li>\n<li>Text Orientation<\/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\/2023\/07\/Snag_1577e95e.png\" rel=\"lightbox-117\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-62475\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_1577e95e.png\" alt=\"\" width=\"217\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_1577e95e.png 247w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_1577e95e-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_1577e95e-30x48.png 30w\" sizes=\"auto, (max-width: 217px) 100vw, 217px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5.png\" rel=\"lightbox-118\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-62476 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5-600x447.png\" alt=\"\" width=\"600\" height=\"447\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5-600x447.png 600w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5-768x572.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5-150x112.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5-48x36.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2023\/07\/Snag_15784dd5.png 804w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/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> 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>Wind Vane<\/strong> in display mode.<\/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-119\"><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 of the dial. By default, this is transparent.<\/p>\n<p><strong>3. Needle Colour<\/strong>: Change 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>: Change 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 Zone. By default, this is dark grey when inactive and red when 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 colours 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-120\"><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-121\"><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-122\"><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-123\"><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-124\"><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-125\"><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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-needle-style.png\" rel=\"lightbox-126\"><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-127\"><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> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-warn-active.png\" rel=\"lightbox-128\"><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-129\"><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 colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-inactive.png\" rel=\"lightbox-130\"><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> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-active.png\" rel=\"lightbox-131\"><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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/wind-danger-style.png\" rel=\"lightbox-132\"><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-133\"><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-134\"><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>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page lists the display 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\/explorer-styles\/styling-displays\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":17346,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[442,488],"class_list":["post-32903","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-display","tag-styles","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32903","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=32903"}],"version-history":[{"count":4,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32903\/revisions"}],"predecessor-version":[{"id":67119,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32903\/revisions\/67119"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17346"}],"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=32903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=32903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=32903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}