1 2 Previous Next 16 Replies Latest reply: Feb 19, 2014 8:54 AM by ApexPhil RSS

    Changing the Title Colour in a Standard Report Region

    ApexPhil

      Is it possible to change the background colour of the region title without editing the theme's underlying CSS files?

       

      Changing the background colour of the region's content area is easily done by putting style="background-color: #<colour number>" in the Region Attributes field but I can't find how to do the same for the region's title bar.

        • 1. Re: Changing the Title Colour in a Standard Report Region
          fac586

          ApexPhil wrote:

           

          Is it possible to change the background colour of the region title without editing the theme's underlying CSS files?

           

          Changing the background colour of the region's content area is easily done by putting style="background-color: #<colour number>" in the Region Attributes field but I can't find how to do the same for the region's title bar.

          Depends on the APEX version, theme, and template. Most APEX 4.x region title bar backgrounds are specified either wholly or partly using CSS background sprite images applied to multiple elements, and/or CSS gradients. Certain theme designs are very difficult to modify effectively (Re: Expand the Background Image to Cover the Entire Region Title & Re: Navigation Region Menu too narrow - style="width:200px;"?). Almost all of them are tricky to override due to the CSS cascade and high selector specificity of the theme rules.

           

          APEX version/theme/region template(s)?

          • 2. Re: Changing the Title Colour in a Standard Report Region
            mihai.manolescu

            Just set the title of the region as: <div style="background-color:red;">REGION_TITLE</div> for example

             

            or if you want it dynamic <div style="background-color:&PX_MYCOLOR.;">REGION_TITLE</div>

            • 3. Re: Changing the Title Colour in a Standard Report Region
              ApexPhil

              It almost works but there seems to be a space to the left of REGION_TITLE which doesn't have the background colour applied.

              • 4. Re: Changing the Title Colour in a Standard Report Region
                fac586

                ApexPhil wrote:

                 

                It almost works but there seems to be a space to the left of REGION_TITLE which doesn't have the background colour applied.

                See remarks in my post above.

                • 5. Re: Changing the Title Colour in a Standard Report Region
                  Fanny__

                  Maybe set the padding attribute to 0 ?

                  Otherwise, Firebug is a great tool to analyse the .css styles applied in html files.

                  • 6. Re: Changing the Title Colour in a Standard Report Region
                    fac586

                    Fanny__ wrote:

                     

                    Maybe set the padding attribute to 0 ?

                    Otherwise, Firebug is a great tool to analyse the .css styles applied in html files.

                    It's more likely to be due to the presence of another element in the template...until we know which theme and template that is, all is mere speculation.

                    • 7. Re: Changing the Title Colour in a Standard Report Region
                      ApexPhil

                      It's Apex 4.2,  theme 25, template Standard Region.

                       

                      Fac586 I read the links you provided but the posts went over my head a little and I'm not using a background image.

                       

                      If it's not a simple thing I guess there's always the CSS files to look at.

                       

                      (BTW I'm not sure what fac586 is but assume it's in some way related to fac51 or fac200...nice)

                      • 8. Re: Changing the Title Colour in a Standard Report Region
                        Fanny__

                        By 'analyse the .css styles applied in html files' I mean all the styles, from css or else.

                        If you install Firebug you'll see the source, the order and hierarchy between values applied to the same element, and to elements containing or contained by it.

                        • 9. Re: Changing the Title Colour in a Standard Report Region
                          fac586

                          ApexPhil wrote:

                           

                          It's Apex 4.2,  theme 25, template Standard Region.

                           

                          Fac586 I read the links you provided but the posts went over my head a little and I'm not using a background image.

                          The theme 25 Standard Region template title bar is. The title bar background is specified by this rule:

                           

                           

                          section.uRegion>div.uRegionHeading {
                            display: table;
                            width: 100%;
                            border-spacing: 0;
                            border-collapse: collapse;
                            background-color: #f0f0f0;
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…gd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
                            background-size: 100%;
                            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(50%, #f0f0f0), color-stop(100%, #eaeaea));
                            background-image: -webkit-linear-gradient(top, #fafafa 0%,#f0f0f0 50%,#eaeaea 100%);
                            background-image: -moz-linear-gradient(top, #fafafa 0%,#f0f0f0 50%,#eaeaea 100%);
                            background-image: linear-gradient(top, #fafafa 0%,#f0f0f0 50%,#eaeaea 100%);
                            -webkit-border-radius: 3px 3px 0 0;
                            -moz-border-radius: 3px 3px 0 0;
                            border-radius: 3px 3px 0 0;
                            border-bottom: 1px solid #AAA;
                            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
                            -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
                            box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
                          }
                          
                          

                           

                           

                          and that gap you're seeing before the title is indeed padding applied to the title, from this rule:

                           

                          section.uRegion>div.uRegionHeading h1 {
                            display: table-cell;
                            vertical-align: middle;
                            font: bold 12px/36px "Helvetica Neue",Helvetica,Arial,sans-serif;
                            text-shadow: 0 1px 0 rgba(255,255,255,0.75);
                            padding: 0 0 0 8px;
                            color: #333;
                          }
                          
                          

                           

                          What is it exactly that you are trying to achive?

                          • 10. Re: Changing the Title Colour in a Standard Report Region
                            ApexPhil

                            What I want to do is change the background colour of the region title. When I tried Mihai's suggestion it worked apart from a small space to the left of the title which remained the default drab grey.

                             

                            I'd upload a picture to illustrate this but for some reason the site won't let me.

                             

                            In the example you posted I can see some padding. Perhaps that is what needs to change.

                            • 11. Re: Changing the Title Colour in a Standard Report Region
                              fac586

                              ApexPhil wrote:

                               

                              What I want to do is change the background colour of the region title.

                              For one region/page or all of them?

                              • 12. Re: Changing the Title Colour in a Standard Report Region
                                ApexPhil

                                Either would be fine. At the moment it's just one region but I think I'll ultimately want to do them all.

                                • 13. Re: Changing the Title Colour in a Standard Report Region
                                  fac586

                                  To override for a single region on a single page, assign the region a static ID and add the following style sheet to the page Inline CSS property, replacing static-region-id with that given to the region:

                                   

                                   

                                  section.uRegion#static-region-id>div.uRegionHeading {
                                    background: #ccff66; /* replace with required colour */
                                  }
                                  

                                   

                                   

                                  To override for all regions on a single page, add the following style sheet to the page Inline CSS property:

                                   

                                   

                                  section.uRegion>div.uRegionHeading {
                                    background: #ccff66; /* replace with required colour */
                                  }
                                  

                                   

                                   

                                  To override for all regions in the application, add the second style sheet to the Inline CSS property on all page templates.

                                  • 14. Re: Changing the Title Colour in a Standard Report Region
                                    ApexPhil

                                    Thanks. I tried both suggestions but neither changed anything.

                                     

                                    With the second one (all regions) I didn't assign a static ID and just pasted this into the page inline CSS.


                                    <span><span><span><span><span><span>

                                    section.uRegion>div.uRegionHeading {

                                    background: #ccff66; /* replace with required colour */ 

                                    }</span></span></span></span></span></span> 

                                     

                                    Is that correct? If so, there was no change at all.

                                    1 2 Previous Next