{"id":32904,"date":"2017-11-08T12:50:07","date_gmt":"2017-11-08T04:50:07","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=32904"},"modified":"2024-06-10T12:13:30","modified_gmt":"2024-06-10T04:13:30","slug":"styling-time-pickers","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-time-pickers\/","title":{"rendered":"Styling Time Pickers"},"content":{"rendered":"\n<p class=\"intro-text\">This article describes the styling properties of each component in the Time <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/timeicon_sm.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1865\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/timeicon_sm.png\" alt=\"\" width=\"18\" 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\">Current Date\/Time Toggle<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/\">Current Date\/Time Toggle tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Current Date\/Time Toggle<\/strong> in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18417\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base.png\" alt=\"toggle-base\" width=\"331\" height=\"134\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-base-48x19.png 48w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the colour of the toggle, and the alignment.<\/p>\n<p><strong>1. Current Date\/Time Toggle Rectangle<\/strong>: Change the colour of the box.<\/p>\n<ul>\n<li>Current Date\/Time Toggle Rectangle Colour<\/li>\n<\/ul>\n<p><strong>2. Current Date\/Time Toggle Tick<\/strong>: Change the colour of the tick.<\/p>\n<ul>\n<li>Current Date\/Time Toggle Tick Colour<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Current Date\/Time Toggle by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the colour of the box and the tick<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18418\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style.png\" alt=\"toggle-style\" width=\"36\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-style-24x22.png 24w\" sizes=\"auto, (max-width: 36px) 100vw, 36px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18419\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop.png\" alt=\"toggle-prop\" width=\"415\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop.png 415w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-prop-48x17.png 48w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the alignment of the control<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18420\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align.png\" alt=\"toggle-align\" width=\"208\" height=\"59\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align.png 208w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-48x14.png 48w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18421\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop.png\" alt=\"toggle-align-prop\" width=\"409\" height=\"134\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/toggle-align-prop-48x16.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker tutorial,<\/a> <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Date Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18423\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base.png\" alt=\"date-base\" width=\"318\" height=\"130\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-base-48x20.png 48w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Date Picker, and the alignment.<\/p>\n<p><strong>1. Date Picker Bottom Border<\/strong>: Change the border below the date.<\/p>\n<ul>\n<li>Date Picker Bottom Border Colour<\/li>\n<li>Date Picker Bottom Border Size<\/li>\n<li>Date Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>2. Date Picker Font<\/strong>: Change the font that shows the date.<\/p>\n<ul>\n<li>Date Picker Font Size<\/li>\n<li>Date Picker Font Family<\/li>\n<li>Date Picker Font Colour<\/li>\n<li>Date Picker Font Weight<\/li>\n<li>Date Picker Font Alignment<\/li>\n<li>Date Picker Font Underline<\/li>\n<li>Date Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Date Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18424\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style.png\" alt=\"date-border-style\" width=\"110\" height=\"40\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style.png 110w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-style-48x17.png 48w\" sizes=\"auto, (max-width: 110px) 100vw, 110px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18425\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop.png\" alt=\"date-border-prop\" width=\"414\" height=\"138\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18426\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style.png\" alt=\"date-font-style\" width=\"100\" height=\"37\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style.png 100w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-style-48x18.png 48w\" sizes=\"auto, (max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18427\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop.png\" alt=\"date-font-prop\" width=\"409\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/date-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date\/Time Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-picker\/\">Date\/Time Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Date\/Time Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18430\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base.png\" alt=\"dt-base\" width=\"429\" height=\"138\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base.png 429w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-base-48x15.png 48w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Date\/Time Picker, and the alignment.<\/p>\n<p><strong>1. Date Time Picker Bottom Border<\/strong>: Change the border below the date.<\/p>\n<ul>\n<li>Date Time Picker Bottom Border Colour<\/li>\n<li>Date Time Picker Bottom Border Size<\/li>\n<li>Date Time Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>2. Date Time Picker Font<\/strong>: Change the font that shows the date.<\/p>\n<ul>\n<li>Date Time Picker Font Size<\/li>\n<li>Date Time Picker Font Family<\/li>\n<li>Date Time Picker Font Colour<\/li>\n<li>Date Time Picker Font Weight<\/li>\n<li>Date Time Picker Font Alignment<\/li>\n<li>Date Time Picker Font Underline<\/li>\n<li>Date Time Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Date\/Time Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18431\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style.png\" alt=\"dt-border-style\" width=\"214\" height=\"32\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style.png 214w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-style-48x7.png 48w\" sizes=\"auto, (max-width: 214px) 100vw, 214px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18432\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop.png\" alt=\"dt-border-prop\" width=\"411\" height=\"133\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18433\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style.png\" alt=\"dt-font-style\" width=\"205\" height=\"27\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style.png 205w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-style-48x6.png 48w\" sizes=\"auto, (max-width: 205px) 100vw, 205px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18434\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop.png\" alt=\"dt-font-prop\" width=\"412\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/dt-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date\/Time Range Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/\">Date\/Time Range Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Date\/Time Range Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18441 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base.png\" width=\"698\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base.png 698w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-base-48x11.png 48w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"50%\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Date\/Time Range Picker, and the alignment.<\/p>\n<p><strong>1. Date Time Range Picker Bottom Border<\/strong>: Change the border below the date.<\/p>\n<ul>\n<li>Date Time Range Picker Bottom Border Colour<\/li>\n<li>Date Time Range Picker Bottom Border Size<\/li>\n<li>Date Time Range Picker Bottom Border Style<\/li>\n<\/ul>\n<\/td>\n<td width=\"50%\">\n<p><strong>2. Date Time Range Picker Font<\/strong>: Change the font that shows the date.<\/p>\n<ul>\n<li>Date Time Range Picker Font Size<\/li>\n<li>Date Time Range Picker Font Family<\/li>\n<li>Date Time Range Picker Font Colour<\/li>\n<li>Date Time Range Picker Font Weight<\/li>\n<li>Date Time Range Picker Font Alignment<\/li>\n<li>Date Time Range Picker Font Underline<\/li>\n<li>Date Time Range Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Date\/Time Range Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18437\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style.png\" alt=\"range-border-style\" width=\"485\" height=\"43\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style.png 485w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-150x13.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-style-48x4.png 48w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18438\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop.png\" alt=\"range-border-prop\" width=\"411\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop.png 411w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18439\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style.png\" alt=\"range-font-style\" width=\"482\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style.png 482w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-36x2.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-style-48x3.png 48w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18440\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop.png\" alt=\"range-font-prop\" width=\"410\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/range-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Duration Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/duration-picker\/\">Duration Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Duration Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-18443 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1.png\" width=\"330\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-base1-48x24.png 48w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Duration Picker, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Change the font that shows the duration.<\/p>\n<ul>\n<li>Duration Picker Font Size<\/li>\n<li>Duration Picker Font Family<\/li>\n<li>Duration Picker Font Colour<\/li>\n<li>Duration Picker Font Weight<\/li>\n<li>Duration Picker Font Alignment<\/li>\n<li>Duration Picker Font Underline<\/li>\n<li>Duration Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>2. Duration Picker Bottom Border<\/strong>: Change the border below the duration.<\/p>\n<ul>\n<li>Duration Picker Bottom Border Colour<\/li>\n<li>Duration Picker Bottom Border Size<\/li>\n<li>Duration Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Duration Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18444\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style.png\" alt=\"duration-border-style\" width=\"76\" height=\"34\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style.png 76w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-style-48x21.png 48w\" sizes=\"auto, (max-width: 76px) 100vw, 76px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18445\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop.png\" alt=\"duration-border-prop\" width=\"414\" height=\"136\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-border-prop-48x16.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18446\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style.png\" alt=\"duration-font-style\" width=\"110\" height=\"50\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style.png 110w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-style-48x22.png 48w\" sizes=\"auto, (max-width: 110px) 100vw, 110px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18447\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop.png\" alt=\"duration-font-prop\" width=\"418\" height=\"281\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop.png 418w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/duration-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Month Picker<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/\">Month Picker tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the style properties of <strong>Month Picker <\/strong>in design mode. The component is aligned in a grid cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18451\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base.png\" alt=\"month-base\" width=\"325\" height=\"147\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-base-48x22.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>Change the font and bottom border of the Month Picker, and the alignment.<\/p>\n<p><strong>1. Base Style<\/strong>: Change the font that shows the month.<\/p>\n<ul>\n<li>Month Picker Font Size<\/li>\n<li>Month Picker Font Family<\/li>\n<li>Month Picker Font Colour<\/li>\n<li>Month Picker Font Weight<\/li>\n<li>Month Picker Font Alignment<\/li>\n<li>Month Picker Font Underline<\/li>\n<li>Month Picker Font Text Case<\/li>\n<\/ul>\n<p><strong>2. Month Picker Bottom Border<\/strong>: Change the border below the month.<\/p>\n<ul>\n<li>Month Picker Bottom Border Colour<\/li>\n<li>Month Picker Bottom Border Size<\/li>\n<li>Month Picker Bottom Border Style<\/li>\n<\/ul>\n<p><strong>3. Alignment<\/strong>: Align the Month Picker by giving it X and Y co-ordinates, or by using an alignment option, such as <em>Top-Left<\/em>. In the screenshot, you can see the component in relation to the grid cell.<\/p>\n<ul>\n<li>Alignment<\/li>\n<li>X Offset<\/li>\n<li>Y Offset<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\"><strong>Custom Style<\/strong><\/td>\n<td><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the bottom border<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18454\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style.png\" alt=\"month-font-style\" width=\"90\" height=\"35\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style.png 90w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-style-48x19.png 48w\" sizes=\"auto, (max-width: 90px) 100vw, 90px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18455\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop.png\" alt=\"month-border-prop\" width=\"409\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-prop-48x15.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\n<p><em><strong>EXAMPLE: Change the font<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18452\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style.png\" alt=\"month-border-style\" width=\"144\" height=\"47\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style.png 144w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-border-style-48x16.png 48w\" sizes=\"auto, (max-width: 144px) 100vw, 144px\" \/><\/a><\/p>\n<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18453\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop.png\" alt=\"month-font-prop\" width=\"413\" height=\"278\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/month-font-prop-48x32.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"page-subheading\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page lists the time 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-time-pickers\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":17346,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[348,488],"class_list":["post-32904","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-date-and-time-pickers","tag-styles","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32904","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=32904"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32904\/revisions"}],"predecessor-version":[{"id":67121,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32904\/revisions\/67121"}],"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=32904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=32904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=32904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}