{"id":32907,"date":"2018-11-05T12:06:15","date_gmt":"2018-11-05T04:06:15","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=32907"},"modified":"2024-06-10T12:14:28","modified_gmt":"2024-06-10T04:14:28","slug":"styling-controls","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-controls\/","title":{"rendered":"Styling Controls"},"content":{"rendered":"\n<p class=\"intro-text\">This article describes the styling properties of each component in the Control <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1840\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" alt=\"Controls\" width=\"18\" height=\"16\" \/><\/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\">Action Button<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/action-button\/\">Action Button<\/a>\u00a0tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the <span style=\"color: #000000;\"><b>Action Button\u00a0<\/b><\/span>in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41937\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles.png\" alt=\"\" width=\"219\" height=\"153\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles.png 219w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles-150x105.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-styles-48x34.png 48w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Action Button, you can style the text, border, and background of the button.\u00a0<\/p>\n<p><strong>1. Base Style<\/strong>: The styling of the text on the button.<\/p>\n<ul>\n<li>Action Button Font Size<\/li>\n<li>Action Button Font Family<\/li>\n<li>Action Button Font Colour<\/li>\n<li>Action Button Font Weight<\/li>\n<li>Action Button Text Case<\/li>\n<\/ul>\n<p><strong>2. Button Style<\/strong>: Colour of the button and its border.<\/p>\n<ul>\n<li>Action Button Border Radius<\/li>\n<li>Action Button\u00a0Background Colour<\/li>\n<li>Action Button Border Colour<\/li>\n<li>Action Button Border Width<\/li>\n<li>Action Button Border Style<\/li>\n<\/ul>\n<p><strong>2. Button Style (Hovered)<\/strong>: Colour of the button background when the user hovers over it.<\/p>\n<ul>\n<li>Hovered Action Button\u00a0Background Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Design Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Base Text Styles<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style-text.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41927\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style-text.png\" alt=\"\" width=\"150\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style-text.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style-text-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style-text-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style-text-48x16.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41928\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles.png\" alt=\"\" width=\"480\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles.png 480w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-text-base-styles-48x21.png 48w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border and background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41930 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1.png\" alt=\"\" width=\"150\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-48x16.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41931\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting.png\" alt=\"\" width=\"492\" height=\"209\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting.png 492w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-style1-setting-48x20.png 48w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Hover<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41932\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover.png\" alt=\"\" width=\"150\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-48x16.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41933\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style.png\" alt=\"\" width=\"521\" height=\"62\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style.png 521w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-150x18.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-36x4.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-48x6.png 48w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Hover + no border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-noborder.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41935\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-noborder.png\" alt=\"\" width=\"150\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-noborder.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-noborder-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-noborder-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-noborder-48x16.png 48w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41934\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder.png\" alt=\"\" width=\"531\" height=\"286\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder.png 531w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder-150x81.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/button-hover-style-noborder-48x26.png 48w\" sizes=\"auto, (max-width: 531px) 100vw, 531px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Combo Box<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Combo Box<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17773 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box.png\" width=\"309\" height=\"187\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box.png 309w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Style-Properties-of-Combo-Box-48x29.png 48w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the base text, the border between the selected option and the list of options, and the aligment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears above the line (the <em>Selected Option<\/em>).<\/p>\n<ul>\n<li>Combo Box Font Size<\/li>\n<li>Combo Box Font Family<\/li>\n<li>Combo Box Font Colour<\/li>\n<li>Combo Box Font Weight<\/li>\n<li>Combo Box Font Alignment<\/li>\n<li>Combo Box Underline<\/li>\n<li>Combo Box Text Case<\/li>\n<\/ul>\n<p><strong>2. Combo Box Bottom Border<\/strong>: Style the line that separates the <em>Selected Option<\/em> from the list of values.<\/p>\n<ul>\n<li>Combo Box Bottom Border Colour<\/li>\n<li>Combo Box Bottom Border Size<\/li>\n<li>Combo Box Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Combo Box by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18074 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border.png\" width=\"177\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border.png 177w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-150x138.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Border-48x44.png 48w\" sizes=\"auto, (max-width: 177px) 100vw, 177px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18073 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border.png\" width=\"408\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Bottom-Border-48x16.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Aligned middle center<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18070 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt.png\" width=\"241\" height=\"142\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt.png 241w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignmen-Stylingt-48x28.png 48w\" sizes=\"auto, (max-width: 241px) 100vw, 241px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18071 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment.png\" width=\"418\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment.png 418w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Combo-Box-Alignment-48x16.png 48w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Hotspot<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hotspot\/\">Hotspot<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the\u00a0<strong>Hotspot<\/strong> in design mode. The component is normally used on a Precision Layout.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31698\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style.png\" alt=\"\" width=\"328\" height=\"99\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-style-48x14.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Hotspot, you can style the border and the background; these are only visible in design mode.<\/p>\n<p><strong>1. Border<\/strong>: The colour, width, and style of the border.<\/p>\n<ul>\n<li>Border Colour<\/li>\n<li>Border Width<\/li>\n<li>Border Style<\/li>\n<\/ul>\n<p><strong>2. Background<\/strong>: Style colour of the background that appears in design mode.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Design Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border Colour<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31699\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31704\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit.png\" alt=\"\" width=\"459\" height=\"32\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit.png 459w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-colour-edit-48x3.png 48w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border Width<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31700\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31705\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit.png\" alt=\"\" width=\"458\" height=\"35\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-width-edit-48x4.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Border Style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31702\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31706\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit.png\" alt=\"\" width=\"458\" height=\"32\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-border-style-edit-48x3.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Background Colour<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31703\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour.png\" alt=\"\" width=\"227\" height=\"68\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour.png 227w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-48x14.png 48w\" sizes=\"auto, (max-width: 227px) 100vw, 227px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31707\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit.png\" alt=\"\" width=\"462\" height=\"35\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit.png 462w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hotspot-background-colour-edit-48x4.png 48w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Selection List<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Selection List\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/selection-list\/\">Selection List<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the <strong>Selection List<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td width=\"250\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17637 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide.png\" width=\"450\" height=\"220\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide.png 450w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Selection-List-Styling-Guide-48x23.png 48w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<\/td>\n<td width=\"750\">\n<p><strong>1. Base Style<\/strong><\/p>\n<p>Style the text that appears in the list.<\/p>\n<p><strong>2. Selection List Separator<\/strong><\/p>\n<p>Style the line that separates the items.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Stylised font for the list items<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18065 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling.png\" width=\"362\" height=\"213\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling.png 362w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Styling-48x28.png 48w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18064 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style.png\" width=\"422\" height=\"278\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/New-Selection-List-Style-48x32.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Option Links<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Option Links\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/\">Option Links<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Option Links<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17780 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties.png\" width=\"316\" height=\"158\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Styling-Properties-48x24.png 48w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the base text, the line below the selected option, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears below the <em>Selected Option<\/em>.<\/p>\n<ul>\n<li>Option Links Font Size<\/li>\n<li>Option Links Font Family<\/li>\n<li>Option Links Font Colour<\/li>\n<li>Option Links Font Weight<\/li>\n<li>Option Links Font Alignment<\/li>\n<li>Option Links Underline<\/li>\n<li>Option Links Text Case<\/li>\n<\/ul>\n<p><strong>2. Option Links Bottom Border<\/strong>: Style the underline of the <em>Selected Option<\/em>.<\/p>\n<ul>\n<li>Option Links Bottom Border Colour<\/li>\n<li>Option Links Bottom Border Size<\/li>\n<li>Option Links Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Option Links Box by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled base style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18083 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled.png\" width=\"195\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled.png 195w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-150x38.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styled-48x12.png 48w\" sizes=\"auto, (max-width: 195px) 100vw, 195px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18084 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling.png\" width=\"422\" height=\"275\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling.png 422w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Font-Styling-48x31.png 48w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styled Bottom Border: grey, dotted, thick<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-18081 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled.png\" width=\"183\" height=\"57\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled.png 183w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-Styled-48x15.png 48w\" sizes=\"auto, (max-width: 183px) 100vw, 183px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18082 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border.png\" width=\"416\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/Option-Links-Bottom-Border-48x16.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Text Input<\/h2>\n<p class=\"left-bar\">Related: <a title=\"Text Input\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-input\/\">Text Input<\/a> tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of the\u00a0<strong>Text Input<\/strong> in display mode. The component is aligned on a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-29473 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1.png\" alt=\"\" width=\"386\" height=\"86\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1.png 386w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-150x33.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Text-Input-Styling-1-48x11.png 48w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Style the text, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the text that appears in the text input.<\/p>\n<ul>\n<li>Text Input Font Size<\/li>\n<li>Text Input Font Family<\/li>\n<li>Text Input Font Colour<\/li>\n<li>Text Input Font Weight<\/li>\n<li>Text Input Text Case<\/li>\n<\/ul>\n<p><strong>2. Alignment<\/strong>: Align the Text Input by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the text input component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Styling the text and alignment <\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-29467 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input.png\" alt=\"\" width=\"343\" height=\"67\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input.png 343w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-150x29.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Custom-Styling-of-Text-Input-48x9.png 48w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-29468 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design.png\" alt=\"\" width=\"473\" height=\"366\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design.png 473w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-150x116.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/08\/Costom-Styling-of-Text-Input-in-Design-48x37.png 48w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>This page lists the control 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-controls\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":17346,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[488],"class_list":["post-32907","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-styles","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32907","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=32907"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32907\/revisions"}],"predecessor-version":[{"id":67122,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32907\/revisions\/67122"}],"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=32907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=32907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=32907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}