{"id":32901,"date":"2017-11-08T09:26:14","date_gmt":"2017-11-08T01:26:14","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=32901"},"modified":"2024-06-10T12:15:23","modified_gmt":"2024-06-10T04:15:23","slug":"styling-hierarchies","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-hierarchies\/","title":{"rendered":"Styling Hierarchies"},"content":{"rendered":"\n<p class=\"intro-text\">This article describes the styling properties of each component in the Hierarchy <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1850\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" alt=\"\" width=\"20\" height=\"17\" \/><\/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\">Breadcrumb<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/breadcrumb\/\">Breadcrumb tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Breadcrumb<\/strong> in design mode (which is indicative of display mode).<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17861 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style.png\" width=\"693\" height=\"138\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style.png 693w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-150x30.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-base-style-48x10.png 48w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">What You Can Change<\/p>\n<p class=\"intro-text\">With the Breadcrumb, you can change the styles relating to font and alignment. As the breadcrumb contains links, the middle nodes will always show the inherited blue hyperlink colour (#67809F).<\/p>\n<p class=\"intro-text\"><strong>1. Base Style<\/strong>: Style the text that appears in the list.<\/p>\n<ul>\n<li>Font Size<\/li>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Weight<\/li>\n<li>Font Alignment<\/li>\n<li>Underline<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>2. Alignment<\/strong>: Set the alignment of the breadcrumb within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<p class=\"no-toc-heading\">\nExample: Changing the Breadcrumb Alignment<\/p>\n<table class=\"table-toc\" style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Design Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17868\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style.png\" alt=\"breadcrumb-align1-style\" width=\"600\" height=\"56\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style.png 692w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-style-48x5.png 48w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17869\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop.png\" alt=\"breadcrumb-align1-prop\" width=\"417\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop.png 417w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align1-prop-48x16.png 48w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example: Changing the Breadcrumb Padding<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Design Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17871\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style.png\" alt=\"breadcrumb-align2-style\" width=\"686\" height=\"62\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style.png 686w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-style-48x4.png 48w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17872\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop.png\" alt=\"breadcrumb-align2-prop\" width=\"416\" height=\"141\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-150x51.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-align2-prop-48x16.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Example: Changing the Breadcrumb Font<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong> Custom Style <br \/>\nin Design Mode <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17874 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style.png\" width=\"692\" height=\"63\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style.png 692w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-style-48x4.png 48w\" sizes=\"auto, (max-width: 692px) 100vw, 692px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style Properties <\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17873 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop.png\" width=\"415\" height=\"278\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/breadcrumb-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Entity Selector<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Entity Selector <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17737\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base.png\" alt=\"entity-selector-base\" width=\"377\" height=\"369\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base.png 377w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-150x147.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-base-48x48.png 48w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Entity Selector, you can change the styles relating to the text, and the line that separates each entity. The check boxes, search boxes, and drop-down list will remain the inherited grey colour (#737373).<\/p>\n<p><strong>1. Base Style: <\/strong>Style the text that appears in the list.<\/p>\n<ul>\n<li>Entity Selector Font Size<\/li>\n<li>Entity Selector Font Family<\/li>\n<li>Entity Selector Font Colour<\/li>\n<li>Entity Selector Font Weight<\/li>\n<li>Entity Selector Font Alignment<\/li>\n<li>Entity Selector Underline<\/li>\n<li>Entity Selector Text Case<\/li>\n<\/ul>\n<p><strong>2. Entity Separator: <\/strong>Style the line that separates the text.<\/p>\n<ul>\n<li>Entity Selector Line Colour<\/li>\n<li>Entity Selector Line Size<\/li>\n<li>Entity Selector Line Style<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text in the entity list and filter<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17832 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style.png\" width=\"302\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style.png 302w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-style-41x48.png 41w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17833 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties.png\" width=\"364\" height=\"281\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties.png 364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-150x116.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-base-properties-48x37.png 48w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the separator lines in the entity list<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17834\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style.png\" alt=\"entity-selector-custom-separator-style\" width=\"302\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style.png 302w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-style-41x48.png 41w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17835\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties.png\" alt=\"entity-selector-custom-separator-properties\" width=\"364\" height=\"153\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties.png 364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/entity-selector-custom-separator-properties-48x20.png 48w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Hierarchy<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Hierarchy <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17911\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1.png\" alt=\"hierarchy-style-base1\" width=\"305\" height=\"177\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1.png 305w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-base1-48x28.png 48w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Hierarchy you can change the styles relating to the text in the tree list. The filter will remain the inherited grey colour.<\/p>\n<p><strong>1. Hierarchy Font Style: <\/strong>Style the text that appears in the list.<\/p>\n<ul>\n<li>Hierarchy Font Size<\/li>\n<li>Hierarchy Font Family<\/li>\n<li>Hierarchy Font Colour<\/li>\n<li>Hierarchy Font Weight<\/li>\n<li>Hierarchy Font Alignment<\/li>\n<li>Hierarchy Underline<\/li>\n<li>Hierarchy Text Case<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text in the tree list<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17912\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font.png\" alt=\"hierarchy-style-font\" width=\"311\" height=\"200\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-48x31.png 48w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17913\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props.png\" alt=\"hierarchy-style-font-props\" width=\"414\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-style-font-props-48x32.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Hierarchy Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy-picker\/\">Hierarchy Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Hierarchy Picker <\/strong>in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17897 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1.png\" width=\"398\" height=\"131\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1.png 398w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-base1-48x16.png 48w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Hierarchy Picker you can change the styles relating to the text, alignment, and the line below the drop-down list. The drop-down arrow will remain the inherited dark grey colour.<\/p>\n<p><strong>1. Hierarchy Picker Bottom Border: <\/strong>Style the line below the drop-down list.<\/p>\n<ul>\n<li>Hierarchy Picker Line Colour<\/li>\n<li>Hierarchy Picker Line Size<\/li>\n<li>Hierarchy Picker Line Style<\/li>\n<\/ul>\n<p><strong>2. Hierarchy Picker Font: <\/strong>Style the text that appears in the list.<\/p>\n<ul>\n<li>Hierarchy Picker Font Size<\/li>\n<li>Hierarchy Picker Font Family<\/li>\n<li>Hierarchy Picker Font Colour<\/li>\n<li>Hierarchy Picker Font Weight<\/li>\n<li>Hierarchy Picker Font Alignment<\/li>\n<li>Hierarchy Picker Underline<\/li>\n<li>Hierarchy Picker Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Set the alignment of the Hierarchy Picker within the cell and the offsets for padding.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17891\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style.png\" alt=\"hierarchy-picker-font-style\" width=\"190\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style.png 190w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-style-48x37.png 48w\" sizes=\"auto, (max-width: 190px) 100vw, 190px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17893\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props.png\" alt=\"hierarchy-picker-font-props\" width=\"420\" height=\"277\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props.png 420w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-font-props-48x32.png 48w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Border of the drop-down list<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17890\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style.png\" alt=\"hierarchy-picker-border-style\" width=\"98\" height=\"39\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style.png 98w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-style-48x19.png 48w\" sizes=\"auto, (max-width: 98px) 100vw, 98px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17892\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props.png\" alt=\"hierarchy-picker-border-props\" width=\"430\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props.png 430w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/hierarchy-picker-border-props-48x15.png 48w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page lists the hierarchy 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-hierarchies\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":17346,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[86,488],"class_list":["post-32901","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-hierarchy","tag-styles","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32901","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=32901"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32901\/revisions"}],"predecessor-version":[{"id":67123,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32901\/revisions\/67123"}],"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=32901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=32901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=32901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}