9 Replies Latest reply on May 22, 2018 1:44 PM by Soukaina IDRISSI

    How to customize the header title of region

    Soukaina IDRISSI

      Hi everyone,

      I want to know how can i add a hero-region-icon next to header title of each region ?

       

       

      Thank you for help.

        • 1. Re: How to customize the header title of region
          fac586

          Soukaina IDRISSI wrote:

           

          I want to know how can i add a hero-region-icon next to hearder title of each region ?

          I would suggest creating a custom region template comprising composite mark-up and template options from the existing Hero and Standard regions.

          • 2. Re: How to customize the header title of region
            Soukaina IDRISSI

            Yes, i did it,like:

            <div class="t-Region #REGION_CSS_CLASSES#" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
            <div class="t-Region-header">
              <div class="t-Region-headerItems t-RegionOrs-headerItems--title">
                <div class="t-HeroRegion-col t-HeroRegionOrs-col--left">
                  <span class="t-HeroRegionOrs-icon t-Icon #ICON_CSS_CLASSES# u-color-9"></span>
                  <h2 class="t-Region-title" id="#REGION_STATIC_ID#_heading">#TITLE#</h2>
                </div>
               </div>
                
              <div class="t-Region-headerItems t-Region-headerItems--buttons">#COPY##EDIT#<span class="js-maximizeButtonContainer"></span></div>
            </div>
            <div class="t-Region-bodyWrap">
               <div class="t-Region-buttons t-Region-buttons--top">
                <div class="t-Region-buttons-left">#PREVIOUS#</div>
                <div class="t-Region-buttons-right">#NEXT#</div>
               </div>
               <div class="t-Region-body">
                 #BODY#
                 #SUB_REGIONS#
               </div>
               <div class="t-Region-buttons t-Region-buttons--bottom">
                <div class="t-Region-buttons-left">#CLOSE##HELP#</div>
                <div class="t-Region-buttons-right">#DELETE##CHANGE##CREATE#</div>
               </div>
            </div>
            </div>
            

            with this css code:

            .t-HeroRegionOrs-icon {
                border-radius: 4px;
                text-align: center;
                padding-top: 4px;
                height: 24px;
                width: 24px;
            }
            .t-HeroRegionOrs-col{
            height: 24px;
            }
            .t-RegionOrs-headerItems--title {
                text-align: left;
                padding-top: 12px;
                --padding-right: 10px;
                padding-left: 10px;
                padding-bottom: 10px;
            }
            

             

            but i want to custom the color icon and the background of the hero region, but i dont know how

            • 3. Re: How to customize the header title of region
              Mahmoud_Rabie

              Hi Soukaina

               

              Please take a look at this demo

              https://apex.oracle.com/pls/apex/f?p=64364:5

              test/test

               

              Does it achieve your requirements?

               

              Regards

              Mahmoud

              • 4. Re: How to customize the header title of region
                fac586

                Soukaina IDRISSI wrote:

                 

                Yes, i did it,like:

                1. <divclass="t-Region#REGION_CSS_CLASSES#"id="#REGION_STATIC_ID#"#REGION_ATTRIBUTES#>
                2. <divclass="t-Region-header">
                3. <divclass="t-Region-headerItemst-RegionOrs-headerItems--title">
                4. <divclass="t-HeroRegion-colt-HeroRegionOrs-col--left">
                5. <spanclass="t-HeroRegionOrs-icont-Icon#ICON_CSS_CLASSES#u-color-9"></span>
                6. <h2class="t-Region-title"id="#REGION_STATIC_ID#_heading">#TITLE#</h2>
                7. </div>
                8. </div>
                9. <divclass="t-Region-headerItemst-Region-headerItems--buttons">#COPY##EDIT#<spanclass="js-maximizeButtonContainer"></span></div>
                10. </div>
                11. <divclass="t-Region-bodyWrap">
                12. <divclass="t-Region-buttonst-Region-buttons--top">
                13. <divclass="t-Region-buttons-left">#PREVIOUS#</div>
                14. <divclass="t-Region-buttons-right">#NEXT#</div>
                15. </div>
                16. <divclass="t-Region-body">
                17. #BODY#
                18. #SUB_REGIONS#
                19. </div>
                20. <divclass="t-Region-buttonst-Region-buttons--bottom">
                21. <divclass="t-Region-buttons-left">#CLOSE##HELP#</div>
                22. <divclass="t-Region-buttons-right">#DELETE##CHANGE##CREATE#</div>
                23. </div>
                24. </div>
                25. </div>

                with this css code:

                1. .t-HeroRegionOrs-icon{
                2. border-radius:4px;
                3. text-align:center;
                4. padding-top:4px;
                5. height:24px;
                6. width:24px;
                7. }
                8. .t-HeroRegionOrs-col{
                9. height:24px;
                10. }
                11. .t-RegionOrs-headerItems--title{
                12. text-align:left;
                13. padding-top:12px;
                14. --padding-right:10px;
                15. padding-left:10px;
                16. padding-bottom:10px;
                17. }

                but i want to custom the color icon and the background of the hero region, but i dont know how

                 

                Having seen what you are actually trying to do, I think a better approach is just to work with a copy of the Standard region template and combine the existing functionality provided by the Show Region Icon and Accent template options through the use of a new template option and some custom Theme Roller CSS.

                 

                1. Create a copy of the Standard region template called Standard + Hero Icon.

                 

                2. Add a new template option to the Standard + Hero Icon template:

                 

                Sequence: 40

                Group: - not part of a group -

                Display name: Hero Icon

                Option Identifier: HERO_ICON

                CSS classes: t-Region--heroIcon

                 

                3. Click on Theme Roller in the Developer Toolbar, expand the Custom CSS section, and add these custom style rules:

                 

                .t-Region--heroIcon > .t-Region-header {
                  background-color: unset;
                  color: unset;
                }
                .t-Region--heroIcon > .t-Region-header .t-Icon {
                  border-radius: 2px;
                }
                .t-Region--heroIcon.t-Region--accent1 > .t-Region-header .t-Icon {
                    background-color: #309FDB;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent2 > .t-Region-header .t-Icon {
                    background-color: #13B6CF;
                    color: #e4f9fd
                }
                .t-Region--heroIcon.t-Region--accent3 > .t-Region-header .t-Icon {
                    background-color: #2EBFBC;
                    color: #f0fcfb
                }
                .t-Region--heroIcon.t-Region--accent4 > .t-Region-header .t-Icon {
                    background-color: #3CAF85;
                    color: #f0faf6
                }
                .t-Region--heroIcon.t-Region--accent5 > .t-Region-header .t-Icon {
                    background-color: #81BB5F;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent6 > .t-Region-header .t-Icon {
                    background-color: #DDDE53;
                    color: #2a2a08
                }
                .t-Region--heroIcon.t-Region--accent7 > .t-Region-header .t-Icon {
                    background-color: #FBCE4A;
                    color: #443302
                }
                .t-Region--heroIcon.t-Region--accent8 > .t-Region-header .t-Icon {
                    background-color: #ED813E;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent9 > .t-Region-header .t-Icon {
                    background-color: #E95B54;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent10 > .t-Region-header .t-Icon {
                    background-color: #E85D88;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent11 > .t-Region-header .t-Icon {
                    background-color: #CA589D;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent12 > .t-Region-header .t-Icon {
                    background-color: #854E9B;
                    color: #f6f0f8
                }
                .t-Region--heroIcon.t-Region--accent13 > .t-Region-header .t-Icon {
                    background-color: #5A68AD;
                    color: #fff
                }
                .t-Region--heroIcon.t-Region--accent14 > .t-Region-header .t-Icon {
                    background-color: #AFBAC5;
                    color: #313a44
                }
                .t-Region--heroIcon.t-Region--accent15 > .t-Region-header .t-Icon {
                    background-color: #6E8598;
                    color: #fff
                }
                

                 

                The page will automatically preview the changes. Click Save As, enter a name for the customised theme style, set it as current, and close the theme Roller.

                 

                When the new Standard + Hero Icon template is applied to a region:

                 

                • Check the Show Region Icons template option to show the specified icon.
                • Select the Hero Icon template option to render the icon with a background cartouche.
                • The Accent options in this template are now used to set the color of the hero icon, not the overall region header.

                 

                There is a demonstration of this on page 586 of your Custom Region application.

                • 5. Re: How to customize the header title of region
                  Soukaina IDRISSI

                  i did your steps but i get this result

                  result.png

                  its different, think because im using v5.1.0

                  • 6. Re: How to customize the header title of region
                    fac586

                    Soukaina IDRISSI wrote:

                     

                    i did your steps but i get this result

                    result.png

                    its different, think because im using v5.1.0

                     

                    Change the first two rules in the CSS to:

                     

                    [class*="t-Region--accent"].t-Region--heroIcon > .t-Region-header {
                      background-color: unset;
                      color: unset;
                    }
                    .t-Region--heroIcon > .t-Region-header .t-Icon {
                      border-radius: 2px;
                      padding: 4px;
                      width: 24px;
                      height: 24px;
                      background-color: #0572ce;
                      color: #fff;
                    }
                    

                     

                    See 5.1-compatible version using Universal Theme 1.1 in application 95857.

                     

                    This isn't the first time this has happened. To avoid wasted effort on all sides, please ensure that any examples you create on apex.oracle.com are using the same theme, version, and theme style as the target application.

                    • 7. Re: How to customize the header title of region
                      Soukaina IDRISSI

                      But in this example, the REGION_CSS_CLASSES is also applied to buttons section of region-header.

                      result_.png

                      how can i do to remove it ?

                      • 8. Re: How to customize the header title of region
                        fac586

                        Soukaina IDRISSI wrote:

                         

                        But in this example, the REGION_CSS_CLASSES is also applied to buttons section of region-header.

                        result_.png

                        how can i do to remove it ?

                        Add another rule to the Theme Roller CSS:

                         

                        [class*="t-Region--accent"].t-Region--heroIcon:not(.t-Region--textContent) > .t-Region-header .t-Button--noUI, .t-Region--accent9:not(.t-Region--textContent) > .t-Region-header .t-Button--link {
                          color: unset;
                        }
                        

                         

                        and change the selectors in the accent color rules to better target the region icon:

                         

                        .t-Region--heroIcon .t-Region-headerIcon > .t-Icon {
                          border-radius: 2px;
                          padding: 4px;
                          width: 24px;
                          height: 24px;
                          background-color: #0572ce;
                          color: #fff;
                        }
                        .t-Region--heroIcon.t-Region--accent1 .t-Region-headerIcon > .t-Icon {
                            background-color: #309FDB;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent2 .t-Region-headerIcon > .t-Icon {
                            background-color: #13B6CF;
                            color: #e4f9fd
                        }
                        .t-Region--heroIcon.t-Region--accent3 .t-Region-headerIcon > .t-Icon {
                            background-color: #2EBFBC;
                            color: #f0fcfb
                        }
                        .t-Region--heroIcon.t-Region--accent4 .t-Region-headerIcon > .t-Icon {
                            background-color: #3CAF85;
                            color: #f0faf6
                        }
                        .t-Region--heroIcon.t-Region--accent5 .t-Region-headerIcon > .t-Icon {
                            background-color: #81BB5F;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent6 .t-Region-headerIcon > .t-Icon {
                            background-color: #DDDE53;
                            color: #2a2a08
                        }
                        .t-Region--heroIcon.t-Region--accent7 .t-Region-headerIcon > .t-Icon {
                            background-color: #FBCE4A;
                            color: #443302
                        }
                        .t-Region--heroIcon.t-Region--accent8 .t-Region-headerIcon > .t-Icon {
                            background-color: #ED813E;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent9 .t-Region-headerIcon > .t-Icon {
                            background-color: #E95B54;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent10 .t-Region-headerIcon > .t-Icon {
                            background-color: #E85D88;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent11 .t-Region-headerIcon > .t-Icon {
                            background-color: #CA589D;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent12 .t-Region-headerIcon > .t-Icon {
                            background-color: #854E9B;
                            color: #f6f0f8
                        }
                        .t-Region--heroIcon.t-Region--accent13 .t-Region-headerIcon > .t-Icon {
                            background-color: #5A68AD;
                            color: #fff
                        }
                        .t-Region--heroIcon.t-Region--accent14 .t-Region-headerIcon > .t-Icon {
                            background-color: #AFBAC5;
                            color: #313a44
                        }
                        .t-Region--heroIcon.t-Region--accent15 .t-Region-headerIcon > .t-Icon {
                            background-color: #6E8598;
                            color: #fff
                        }
                        
                        
                        • 9. Re: How to customize the header title of region
                          Soukaina IDRISSI

                          Thank you a lot fac586, and Mr Mahmoud for help .