12 Replies Latest reply: Feb 29, 2012 12:27 PM by maceyah RSS

    Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.

    Joe Upshaw
      We have a need (on a single screen) to greatly compress a report display. To do this, we shrink the font size, get rid of padding, etc. and this results in a much more compact display of the data. We are doing this by placing the following in the Report Region Header (It's an IRR):
      <style type="text/css">
      table.apexir_WORKSHEET_DATA th {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold; vertical-align: bottom;}
      table.apexir_WORKSHEET_DATA th div {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold;}
      table.apexir_WORKSHEET_DATA td { padding:0px 1px 0px 1px; BORDER-LEFT: #ddd 1px solid; white-space: nowrap;  font-size:10px; }
      table.apexir_WORKSHEET_DATA a { text-decoration: none; border-bottom:1px dashed; }
      .look1 {padding:0px 1px 0px 1px;}
      .look2 {padding:0px 1px 0px 1px;}
      </style>
      Under 4.1.0 and in theme Scarlet 21, this is doing exactly what we want. However, under 4.1.1 with the Cloudy theme much, but, not all of these style settings are being ignored. For example, the "nowrap" appears to be taking affect but, all of the others appear to be being ignored. Looking in the source for the page generated under 4.1.1, I do see the class apexir_WORKSHEET_DATA so; I'm not sure what the problem is.

      This is actually a bigger deal than it sounds like for the client so; I would appreciate any help.

      Thanks,

      -Joe

      Edited by: Joe Upshaw on Feb 28, 2012 5:48 AM
        • 1. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
          fac586
          Use a web inspector tool to determine which rules are being applied and overridden.

          What browsers/versions are you using?

          Why are you using this theme? It's only been available for a week, which seems like rapid adoption. My (limited) experience with it so far indicates that it doesn't work properly on older and mobile browsers (the latter being more than a little strange given the apparent link with "the cloud").
          • 2. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
            Joe Upshaw
            I've tried it in FireFox and Chrome.

            We haven't "adopted" this theme but, we are trying it out and this forum would be the place to report any apparent issues.

            I don't know how to determine which rules are being overridden. I have the chrome tools which, if you right-click to "Inspect Element" will display all the CSS stuff but, to be completely honest, I don't really understand what I am looking at. Visually, however, I can tell the all the font settings and pad settings are being ignored.

            I am kind of hoping that someone can just give me the correct style settings to use for Cloudy.

            Edited by: Joe Upshaw on Feb 28, 2012 6:07 AM
            • 3. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
              fac586
              Joe Upshaw wrote:
              I've tried it in FireFox and Chrome.

              We haven't "adopted" this theme but, we are trying it out and this forum would be the place to report any apparent issues.

              I don't know how to determine which rules are being overridden. I have the chrome tools which, if you right-click to "Inspect Element" will display all the CSS stuff but, to be completely honest, I don't really understand what I am looking at. Visually, however, I can tell the all the font settings and pad settings are being ignored.

              I am kind of hoping that someone can just give me the correct style settings to use for Cloudy.
              No override is being performed as the selectors in the theme CSS rules have a higher specificity than yours. We can see the theme selectors in the web inspector and match them:
              <style type="text/css">
              #apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA th {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold; vertical-align: bottom;}
              #apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA th div {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold;}
              #apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA td { padding:0px 1px 0px 1px; BORDER-LEFT: #ddd 1px solid; white-space: nowrap;  font-size:10px; }
              #apexir_DATA_PANEL > table .apexir_WORKSHEET_DATA a { text-decoration: none; border-bottom:1px dashed; }
              .look1 {padding:0px 1px 0px 1px;}
              .look2 {padding:0px 1px 0px 1px;}
              </style>
              Can't see any elements of classes <tt>look1/2</tt> here, so can't tell if these also need tweaked.
              • 4. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                Joe Upshaw
                Thanks, Paul.

                Do you think I could override them by using "! important;"?

                If so, I can't quite seem to get the syntax right.

                I tried this:
                <style type="text/css">
                table.apexir_WORKSHEET_DATA th {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold; vertical-align: bottom; ! important;}
                table.apexir_WORKSHEET_DATA th div {padding:0px 1px 0px 1px; margin:0px; font-size:12px; font-weight:bold; ! important;}
                table.apexir_WORKSHEET_DATA td { padding:0px 0px 0px 0px; margin:0px; BORDER-LEFT: #ddd 1px solid; white-space: nowrap;  font-size:10px; ! important;}
                table.apexir_WORKSHEET_DATA a { text-decoration: none; border-bottom:1px dashed; ! important;}
                .even {padding:0px 1px 0px 1px ! important;}
                .odd {padding:0px 1px 0px 1px ! important;}
                </style>
                ...but, no worky.


                -Joe

                Edited by: Joe Upshaw on Feb 28, 2012 10:02 AM
                • 5. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                  Joe Upshaw
                  If this won't work, is there any way to force the change (other than editing the base template)? As I said, we only want this behavior on a single window and it just seems like overkill. If there is no way to do it, do you know of a detailed doc anywhere to allow me to add a template just for this?

                  Thanks,

                  -Joe
                  • 6. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                    fac586
                    Joe Upshaw wrote:
                    Thanks, Paul.

                    Do you think I could override them by using "! important;"?
                    Why can't you just change the selectors as shown above?

                    <tt>!important</tt> (no space) is the last resort and is unnecessary in this case as matching the theme selectors later in the cascade will override the theme rules.
                    As I said, we only want this behavior on a single window and it just seems like overkill. If there is no way to do it, do you know of a detailed doc anywhere to allow me to add a template just for this?
                    Interactive reports don't use templates, so working round or on top of the existing styles is the only way to modify their appearance.
                    • 7. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                      Joe Upshaw
                      So sorry, I missed that you had provided the correct syntax. Changing the selectors as you specified worked like a charm. Thank you so much.

                      -Joe
                      • 8. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                        Joe Upshaw
                        Paul,

                        I did have a question about this:
                        Interactive reports don't use templates, so working round or on top of the existing styles is the only way to modify their appearance.
                        Are you saying that if there were something that we wished to globally change about some CSS style element of the IRR, that we would have to override it in every page, in the Region Header and was done here?

                        -Joe
                        • 9. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                          fac586
                          Joe Upshaw wrote:
                          Paul,

                          I did have a question about this:
                          Interactive reports don't use templates, so working round or on top of the existing styles is the only way to modify their appearance.
                          Are you saying that if there were something that we wished to globally change about some CSS style element of the IRR, that we would have to override it in every page, in the Region Header and was done here?
                          No. You'd either copy the theme to another location and modify it, or create another external style sheet with overrides, and modify the required page templates to reference the new theme CSS or reference the override CSS after the original theme style sheet.
                          • 10. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                            maceyah
                            @fac586 - Would adding the CSS to page0 to make it's effect global be frowned upon?
                            • 11. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                              fac586
                              maceyah wrote:
                              @fac586 - Would adding the CSS to page0 to make it's effect global be frowned upon?
                              I'd certainly frown upon it. According to the relevant HTML 4.01 and XHTML 1.x standards, <tt>style</tt> and <tt>link rel="stylesheet"</tt> elements should only appear within the <tt>head</tt> element of a document.

                              IN HTML5 the new <tt>scoped</tt> attribute allows <tt>style</tt> to be used in a prescribed way elsewhere in the document, with the effect that the styling rules specified are only to be applied to the other descendant elements of that <tt>style</tt> element's parent. No browsers yet support this feature.

                              Current browsers apply CSS from <tt>style</tt> elements globally, regardless of where in the document it appears, and future HTML5-compliant ones will continue to do so for backwards compatibility.

                              As a standards-based developer I follow the specs and only put <tt>style</tt> and <tt>link</tt> elements in the page <tt>head</tt>. When browsers get round to supporting the <tt>scoped</tt> attribute I'll follow the standards for that as well if it's necessary to use it.

                              In APEX, Page 0 doesn't provide any normal means to create <tt>style</tt> elements in the <tt>head</tt> of the document so as to conform with the specs.

                              Why bother following the standards if the browser is going to apply styling irrespective of whether <tt>style</tt> elements conform or not? Mainly to provide a better user experience. Rendering a document that contains stylesheets in the body causes flickering and jumping of content as the browser re-renders already visible content affected by CSS rules found later in the document.
                              • 12. Re: Styles Overrides Won't Apply in New Cloudy Theme Under 4.1.1.
                                maceyah
                                Thanks for elaborating.