{"id":17346,"date":"2018-09-12T11:17:03","date_gmt":"2018-09-12T03:17:03","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=17346"},"modified":"2024-06-10T12:08:11","modified_gmt":"2024-06-10T04:08:11","slug":"explorer-styles","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/","title":{"rendered":"Overview of Styles in IFS OI Explorer"},"content":{"rendered":"<p class=\"intro-text\"><\/p>\n<p class=\"intro-text\">Sometimes, the built-in styles for components in IFS OI Explorer may not meet your organisation's needs. IFS OI Explorer therefore provides a way for you to modify some aspects of their appearance. The IFS OI Explorer mechanism for styling components uses a subset of CSS, presented in a user-friendly manner.<\/p>\n<p class=\"note\">Note: Only users who have been assigned the application role of Style Administrator are able to create, modify, and delete styles in IFS OI Explorer.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/security\/explorer-admin\/\">How to assign a user the Style Administrator role<\/a><\/p>\n<hr \/>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-17400 alignright\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent.png\" alt=\"StylesInComponent\" width=\"281\" height=\"221\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-48x38.png 48w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/a>A component's appearance is determined by its <em>style settings<\/em>. The exact style settings vary from component to component, but may include things like colour, font size, line width, etc. When you configure a component, you have the option of choosing from various predefined styles via the <strong>Style<\/strong> field.<\/p>\n<p class=\"left-bar-yellow\">These <strong><em>predefined styles<\/em><\/strong> are created on the <a href=\"#How_to_Style_a_Component\"><strong>Style Settings<\/strong><\/a> page, which you can get to by clicking the <strong>Styles<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17410 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleicon.png\" alt=\"style-icon\" width=\"12\" height=\"11\" \/> button on the Admin ribbon.<\/p>\n<p class=\"intro-text\">The Admin tab in IFS OI Explorer provides 2 functions related to styling:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17396 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab.png\" alt=\"stylestab\" width=\"540\" height=\"110\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab.png 540w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab-150x31.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylestab-48x10.png 48w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li><strong>Styles<\/strong>: The Styles button opens the Style Settings page, which allows you to create and modify styles for each component.<\/li>\n<li><strong>Style Constants<\/strong>: The Style Constants page allows you to create and modify constants for various style elements. E.g. You can specify a specific shade of red that is to be used whenever you want to style something in red.<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 id=\"Style_Constants\" class=\"page-subheading\">How to Create Style Constants<\/h2>\n<p class=\"intro-text\">Style constants provide a way to set a common style property across multiple components, and can be used in place of style properties. They allow you to change a common style in one place rather than across many styles.<\/p>\n<p class=\"intro-text\">Creating semantic style constants makes it easier to create different styles for various components, and to more easily change a style across the board for all components using that style. E.g. You can specify a style constant for a standard font. You can use that style constant in all style settings for all components, and then if you decide to change the standard font in the style constant, that change will be replicated through all the styles without you having to do anything else.<\/p>\n<p class=\"intro-text\">To set a style constant:<\/p>\n<p class=\"intro-text\">1. In the Admin tab of the Explorer ribbon, click <strong>Style Constants<\/strong>.<\/p>\n<p class=\"intro-text\">2. From the list on the left, click the <strong>Style Type <\/strong>you want to modify.<\/p>\n<p class=\"intro-text\">Style Types are categories of style that are used in the style settings. E.g. <em>Colour<\/em> can be used to set standard colours for styles such as Font Colour, Background Colour, Border Colour, etc.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17472 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1.png\" width=\"1013\" height=\"706\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1.png 1013w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1-768x535.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1-150x105.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant1-48x33.png 48w\" sizes=\"auto, (max-width: 1013px) 100vw, 1013px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Click the <strong>Add<\/strong> button to create a new style constant, or click the <strong>Edit<\/strong> button next to one of the existing style constants to modify it.<\/p>\n<p class=\"intro-text\">Here is the list of Style Types and what they affect:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 14%;\"><strong>Style Type<\/strong><\/td>\n<td style=\"height: 24px; width: 43%;\"><strong>What it is<\/strong><\/td>\n<td style=\"height: 24px; width: 43%;\"><strong>Used by style settings that...<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Alignment<\/strong><\/td>\n<td>Drop-down list with options for vertical and horizontal alignment.<\/td>\n<td>Control where an element is positioned inside a cell. In the style settings, this is part of the Alignment property group.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong> Border Style<br \/>\nLine Style <\/strong><\/td>\n<td style=\"height: 24px;\">Drop-down list allowing a solid, dashed, or dotted line.<\/td>\n<td style=\"height: 24px;\">Determine the style of a line. E.g. A border or target line.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Colour<\/strong><\/td>\n<td style=\"height: 24px;\">Hexadecimal value of a colour. Or click the colour picker icon to choose a colour.<\/td>\n<td style=\"height: 24px;\">Used by any style setting associated with colour.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong> Font Alignment<br \/>\nText Alignment <\/strong><\/td>\n<td style=\"height: 48px;\">Drop-down list with options for horizontal alignment.<\/td>\n<td style=\"height: 48px;\">Control the horizontal alignment of some text.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Font Family<\/strong><\/td>\n<td style=\"height: 24px;\">Drop-down list with options for the font family.<\/td>\n<td style=\"height: 24px;\">Control the font name of some text.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Font Size<\/strong><\/td>\n<td style=\"height: 24px;\">A number in either pixels or points. Must be a positive whole number.<\/td>\n<td style=\"height: 24px;\">Control the size of some text.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Font Weight<\/strong><\/td>\n<td style=\"height: 24px;\">Drop-down list to choose either normal or bold.<\/td>\n<td style=\"height: 24px;\">Control how thick the text should appear.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Number<\/strong><\/td>\n<td style=\"height: 24px;\">A positive whole number.<\/td>\n<td style=\"height: 24px;\">Used by style settings that require a numerical value. E.g. Opacity, Data Indicator size<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Offset<\/strong><\/td>\n<td style=\"height: 24px;\">A number in either pixels or points. Must be a positive whole number.<\/td>\n<td style=\"height: 24px;\">Control the position of an element in its container (e.g. grid cell), relative to its normal position. The normal position of an element is determined by its alignment (e.g. top-left). An X offset is the distance from the left, while a Y offset is the distance from the top.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Opacity<\/strong><\/td>\n<td style=\"height: 48px;\">A number between 0 and 1, where 0 means fully transparent and 1 means fully opaque.<\/td>\n<td style=\"height: 48px;\">Control the transparency of an element.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Size<\/strong><\/td>\n<td style=\"height: 24px;\">A number in either pixels or points. Must be a positive whole number.<\/td>\n<td style=\"height: 24px;\">Control the size of an element.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong> Text Case<br \/>\nText Transform <\/strong><\/td>\n<td style=\"height: 24px;\">Drop-down list with options for uppercase, lowercase, or capitalized text.<\/td>\n<td style=\"height: 24px;\">Control the capitalisation of some text.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar-yellow\">When you <strong>delete<\/strong> a style constant, the properties that use that style constant are reset to the inherited style.<\/p>\n<h3>Fonts Available for the Font Family Style Constants<\/h3>\n<p class=\"intro-text\">Explorer has five font families to choose from. These are:<\/p>\n<ul class=\"intro-text\">\n<li>Arial<\/li>\n<li>Calibri<\/li>\n<li>Segoe UI (replaces Sans-Serif)<\/li>\n<li>Times New Roman (replaces Serif)<\/li>\n<li>Verdana<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41302 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families.png\" alt=\"\" width=\"903\" height=\"418\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families.png 903w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families-768x356.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Font-Families-48x22.png 48w\" sizes=\"auto, (max-width: 903px) 100vw, 903px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">How to Style a Component<\/h2>\n<p class=\"intro-text\">When you configure a component in Studio, the page designer has the option of choosing from various predefined styles via the <strong>Style<\/strong> field (see screenshot below).<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-17400 alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent.png\" alt=\"StylesInComponent\" width=\"281\" height=\"221\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/StylesInComponent-48x38.png 48w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/a><\/p>\n<p class=\"intro-text\">These styles are created using <em>style settings<\/em>. Here we describe how to create these styles.<\/p>\n<p class=\"intro-text\">1. In the Admin tab of the Explorer ribbon, click <strong>Styles<\/strong>.<\/p>\n<p class=\"intro-text\">2. From the list on the left, click the <strong>component<\/strong> for which you want to add a new style or modify an existing style.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17401\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings.png\" alt=\"stylesettings\" width=\"1310\" height=\"641\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings.png 1310w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings-768x376.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings-1280x626.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/stylesettings-48x23.png 48w\" sizes=\"auto, (max-width: 1310px) 100vw, 1310px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. In the middle panel, click on one of the existing styles to modify it, or create a new style. You can create a new style by:<\/p>\n<ul class=\"intro-text\">\n<li>Clicking the <strong>Add<\/strong> button (best for starting from scratch), or<\/li>\n<li>Click the <strong>Duplicate<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17404 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/duplicateicon.png\" alt=\"duplicateicon\" width=\"22\" height=\"21\" \/> icon to copy an existing style and make minor modifications. Note that after clicking Duplicate, the focus will remain on the original style, you will need to click the duplicate copy to modify it.<\/li>\n<\/ul>\n<p class=\"intro-text\">4. In the panel on the right, make your changes and then click the <strong>Save<\/strong> button. Note that any style property that is left blank will inherit its style from the built-in property.<\/p>\n<p class=\"intro-text\">When naming your style, try to standardise on a naming convention to make it easier for page designers to choose the appropriate style. E.g. You might choose to prefix the styles with a theme name.<\/p>\n<p class=\"left-bar-yellow\">To make a style the <strong>default<\/strong> style for the component, click the check <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17456 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/defaultstyleicon.png\" alt=\"defaultstyleicon\" width=\"18\" height=\"14\" \/> icon next to the style name in the middle panel. This style will automatically be applied to new components by default, unless the page designer chooses a different style during page configuration.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<h3>Things to Look Out For<\/h3>\n<p class=\"intro-text\">When styling a component, you will be presented with a list of properties that you will be able to modify. Note that for some components, you will not be able to style every single aspect of that component.<\/p>\n<p class=\"instruct\">See the following section \"<a href=\"#List_of_Components\">List of Components<\/a>\" for tips on styling individual components.<\/p>\n<p class=\"intro-text\">You will usually have the option of choosing from a list of pre-defined values or manually typing in a value. When choosing from a list of values, the <a href=\"#Style_Constants\"><strong>Style Constants<\/strong><\/a> that have been defined for that property type are shown at the top of the list and are indicated by the paintbrush <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17410\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleicon.png\" alt=\"styleicon\" width=\"12\" height=\"11\" \/> icon.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17403\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant.png\" alt=\"styleconstant\" width=\"280\" height=\"93\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant.png 280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/styleconstant-48x16.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>List of Components<\/h3>\n<p class=\"intro-text\">Browse through the component grouping pages to find specific styling information on individual components:<\/p>\n<div id=\"col3\">\n<ul class=\"intro-text\">\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-charts\/\"><strong>Charts<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Bullet Graph<\/li>\n<li>Chart<\/li>\n<li>Embedded Trend<\/li>\n<li>Histogram<\/li>\n<li>Performance Curve<\/li>\n<li>Treemap<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\"><strong>Displays<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Comments Button<\/li>\n<li>Data Label<\/li>\n<li>Gauge<\/li>\n<li>Hyperlink<\/li>\n<li>Info Button<\/li>\n<li>Level Meter<\/li>\n<li>Meter<\/li>\n<li>Pressure Meter<\/li>\n<li>Simple Line<\/li>\n<li>Status Indicator<\/li>\n<li>Status Tile<\/li>\n<li>Tank<\/li>\n<li>Target Bar<\/li>\n<li>Target Label<\/li>\n<li>Target Variance Bar<\/li>\n<li>Temperature Meter<\/li>\n<li>Text Label<\/li>\n<li>Wind Vane<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-tables\/\"><strong>Tables<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Data Table<\/li>\n<li>Paging Control<\/li>\n<li>Pivot Table<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-time-pickers\/\"><strong>Time<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Current Date\/Time Toggle<\/li>\n<li>Date Picker<\/li>\n<li>Date\/Time Picker<\/li>\n<li>Date\/Time Range Picker<\/li>\n<li>Duration Picker<\/li>\n<li>Month Picker<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-controls\/\"><strong>Controls<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Action Button<\/li>\n<li>Combo Box<\/li>\n<li>Hotspot<\/li>\n<li>Option Links<\/li>\n<li>Selection List<\/li>\n<li>Text Input<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-hierarchies\/\"><strong>Hierarchies<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Breadcrumb<\/li>\n<li>Entity Selector<\/li>\n<li>Hierarchy<\/li>\n<li>Hierarchy Picker<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/\"><strong>Layouts<\/strong><\/a>\n<ul class=\"intro-text\">\n<li>Grid Layout<\/li>\n<li>Precision Layout<\/li>\n<li>Table Layout<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<h2 id=\"Style_Constants\" class=\"page-subheading\">Style Overrides<\/h2>\n<p class=\"intro-text\">In Studio, several of the components allow changes to the style's alignment. See how this is done for a Status Indicator:<\/p>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36231 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected.png\" alt=\"\" width=\"456\" height=\"148\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected.png 456w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/no-style-selected-48x16.png 48w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Here the Status Indicator does not have a selected style.<\/em><\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36238 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1.png\" alt=\"\" width=\"471\" height=\"215\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1.png 471w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Alignment-from-a-style-1-48x22.png 48w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Here the Status Indicator has a style with a bottom-left alignment.<\/em><\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36240 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2.png\" alt=\"\" width=\"460\" height=\"261\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2.png 460w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Override-the-style-2-48x27.png 48w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Here the Status Indicator alignment has been overriden (click on a box to do this).<\/em><\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36236 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2.png\" alt=\"\" width=\"710\" height=\"144\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2.png 710w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2-150x30.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Unstyled-component-2-48x10.png 48w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>You can also align an unstyled Status Indicator, as shown here.<\/em><\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36235 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key.png\" alt=\"\" width=\"361\" height=\"156\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key.png 361w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Key-48x21.png 48w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Click the information icon if you are unsure to see the key for style alignment, and new alignment.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Components in which the visual portion does not stretch to fill a grid cell allow for alignment within Studio, including:<\/p>\n<div id=\"col3\">\n<ul class=\"intro-text\">\n<li>Breadcrumb<\/li>\n<li>Combo Box<\/li>\n<li>Comments Button<\/li>\n<li>Current Data\/Time Toggle<\/li>\n<li>Date Picker<\/li>\n<li>Date\/Time Picker<\/li>\n<li>Date\/Time Range Picker<\/li>\n<li>Duration Picker<\/li>\n<li>Data Label<\/li>\n<li>Hierarchy Picker<\/li>\n<li>Hyperlink<\/li>\n<li>Month Picker<\/li>\n<li>Options Links<\/li>\n<li>Status Indicator<\/li>\n<li>Target Label<\/li>\n<li>Text Label<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<p class=\"note\">Some of the components also allow for size override, including the Status Indicator (pictured above).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The IFS OI Explorer mechanism for styling user interface elements uses a subset of CSS, presented in a more user-friendly manner. This articles describes how to style components in IFS OI Explorer.<\/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\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":17351,"parent":300,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[666,488],"class_list":["post-17346","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-font","tag-styles","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17346","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=17346"}],"version-history":[{"count":4,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17346\/revisions"}],"predecessor-version":[{"id":67117,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17346\/revisions\/67117"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/17351"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=17346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=17346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=17346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}