4 Replies Latest reply on Mar 3, 2017 4:30 PM by Bozzy-Oracle

    CSS To Override the Page Break Icon

    Bozzy-Oracle

      Hi.

       

      I have been trying with zero success to override the colour of the page break icon in an interactive report region using the theme roller.

       

       

      Anyone managed to achieve this? If so how?

       

      Many thanks,

       

      Clive

        • 1. Re: CSS To Override the Page Break Icon
          Mahmoud_Rabie

          Hi

           

          Just add this custom CSS to your Theme Roller

          .a-IRR-controlsIcon {
                    color: white;
                    background-color: red;
          }
          
          

           

          Regards

          Mahmoud

          • 2. Re: CSS To Override the Page Break Icon
            Bozzy-Oracle

            Hi Mahmoud.

             

            Thanks  - I tried that but it didn't work. I also tried:

             

            .a-IRR-controlsIcon { 

                          color: white !important; 

                          background-color: red !important; 

             

            But that didn't work either...

            • 3. Re: CSS To Override the Page Break Icon
              fac586

              Bozzy-Oracle wrote:

               

              I have been trying with zero success to override the colour of the page break icon in an interactive report region using the theme roller.

               

               

               

              IR Control Panel control colours are specified by a set of rules in the IRR.css style sheet:

               

              .a-IRR-controls-item--savedReport a.a-IRR-controlsLabel:hover {
                background-color: #ecf5fd; }
              .a-IRR-controls-item--savedReport .a-IRR-controls-cell:nth-child(2) {
                background-color: #4AA4EC; }
              .a-IRR-controls-item--search a.a-IRR-controlsLabel:hover {
                background-color: #ecf5fd; }
              .a-IRR-controls-item--search .a-IRR-controls-cell:nth-child(2) {
                background-color: #4AA4EC; }
              .a-IRR-controls-item--filter a.a-IRR-controlsLabel:hover {
                background-color: #dcf9ec; }
              .a-IRR-controls-item--filter .a-IRR-controls-cell:nth-child(2) {
                background-color: #24CB7F; }
              .a-IRR-controls-item--controlBreak a.a-IRR-controlsLabel:hover {
                background-color: #e6f0f7; }
              .a-IRR-controls-item--controlBreak .a-IRR-controls-cell:nth-child(2) {
                background-color: #3B83BD; }
              .a-IRR-controls-item--groupBy a.a-IRR-controlsLabel:hover {
                background-color: #e6f0f7; }
              .a-IRR-controls-item--groupBy .a-IRR-controls-cell:nth-child(2) {
                background-color: #3B83BD; }
              .a-IRR-controls-item--highlight a.a-IRR-controlsLabel:hover {
                background-color: #fff0cd; }
              .a-IRR-controls-item--highlight .a-IRR-controls-cell:nth-child(2) {
                background-color: #FFBE2A; }
              .a-IRR-controls-item--flashback a.a-IRR-controlsLabel:hover {
                background-color: #d5d9dc; }
              .a-IRR-controls-item--flashback .a-IRR-controls-cell:nth-child(2) {
                background-color: #9EA7AD; }
              .a-IRR-controls-item--chart a.a-IRR-controlsLabel:hover {
                background-color: #85b4d9; }
              .a-IRR-controls-item--chart .a-IRR-controls-cell:nth-child(2) {
                background-color: #3B83BD; }
              .a-IRR-controls-item--pivot a.a-IRR-controlsLabel:hover {
                background-color: #d5d9dc; }
              .a-IRR-controls-item--pivot .a-IRR-controls-cell:nth-child(2) {
                background-color: #9EA7AD; }
              .a-IRR-controls-item--invalidSettings a.a-IRR-controlsLabel:hover {
                background-color: #f4f5f6; }
              .a-IRR-controls-item--invalidSettings .a-IRR-controls-cell:nth-child(2) {
                background-color: #BDC3C7; }
              .a-IRR-controls-item--inactiveSettings a.a-IRR-controlsLabel:hover {
                background-color: #f4f5f6; }
              .a-IRR-controls-item--inactiveSettings .a-IRR-controls-cell:nth-child(2) {
                background-color: #BDC3C7; }
              

               

              Your override rules should therefore target the container cell span rather than the icon element itself, using the .a-IRR-controls-item--control-type .a-IRR-controls-cell:nth-child(2) selector pattern:

               

              .a-IRR-controls-item--controlBreak :nth-child(2).a-IRR-controls-cell {
                background-color: #000;
              }
              

               

              This is quite simple to determine using the browser's developer tools (even those on Internet Explorer).

              • 4. Re: CSS To Override the Page Break Icon
                Bozzy-Oracle

                Hi and thanks for the response.

                 

                I have been using the Inspect Element and Firebug to determine most of the elements that I can adjust. However I can't seem to spot the elements you have described. I am (as you have probably guessed) not an expert at CSS.

                 

                I tried experimenting by including

                 

                .a-IRR-controls-item--controlBreak :nth-child(2).a-IRR-controls-cell { 

                  background-color: #000

                }

                 

                but this didn't change anything.

                 

                Clive