Forum Stats

  • 3,784,147 Users
  • 2,254,897 Discussions
  • 7,880,711 Comments

Discussions

Theme 24 - Standard report - Clear hover highlighting

2»

Answers

  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    edited Jan 27, 2013 3:51PM
    Paul - Any luck with this? Thanks
  • fac586
    fac586 Senior Technical Architect Member Posts: 20,367 Red Diamond
    VANJ wrote:
    More of the same
    Hm, I tried that and it doesn't appear to give the result I am looking for. There are 3 colors (white, gray-ish and pink). Hovering over the grayish rows turns them to white (inherit). I want no hover effect.
    OK, to suppress the hover and alternate striping (tested in Safari 6.0, Firefox 18.0, IE 8):
    #foo table.uReport > tbody > tr:nth-child(2n) > td {
      background-color: inherit;
    }
    #foo table.uReport > tbody > tr:hover > td {
      background-color: inherit;
    }
    #foo table.uReport > tbody > tr > td.my_class {
      background-color: pink;
    }
    (Can't combine the first two into one rule as IE 8 will ignore it as it doesn't support <tt>nth-child</tt>.)
    Maybe some surgically placed !important keywords and inherits will do the trick but this is too darn painful. Also, I wouldn't know to use the *#F8F8F8* color without diving into the page source and/or Firebug! Kinda goes against the declarative, easy-to-use ethos of APEX!
    If you want to retain the alternate striping (not sure this is a good idea, to me it never looks good in conjunction with conditional formatting):
    #foo table.uReport > tbody > tr:nth-child(2n):hover > td {
      background-color: #F8F8F8;
    }
    #foo table.uReport > tbody > tr:hover > td {
        background-color: inherit;
    }
    #foo table.uReport > tbody > tr > td.my_class {
      background-color: pink !important;
    }
    Which is less satisfying as it requires that insider information about the stripe colour, and an <tt>!important</tt> directive.
    position the #PAGE_CSS# substitution string after the theme CSS reference in page templates, so that overrides can be applied at page level using the cascade, avoiding most specificity concerns.
    Not sure I understand. The No Tabs - No Sidebar page template in Theme 24 does have the #PAGE_CSS# after the #THEME_CSS# but there is a hard-wired reference to theme_24/css/4_1.css after that (see below). I am confused, what's the difference between THEME_CSS and theme_24/css/4_1.css?
    The jury is still out on what&mdash;if anything&mdash;#THEME_CSS# does. I did indeed mean after the <tt>link rel="stylesheet"</tt> element.
    Besides, even after moving the PAGE_CSS right before the closing HEAD tag, I still get the hover effect. Why is this?
    Specificity. (Hard to understand, harder still to say.) There are various specificity calculators around that can be used to try to figure things out. Plus I think the <tt>inherit</tt> property is ignoring values set using pseudo-classes (i.e. the :hover rule doesn't inherit the background colour from the value set by the previous :nth-child rule, although they should both apply to the same element). Need to do some more research on this.
    fac586
  • partlycloudy
    partlycloudy Member Posts: 8,099 Silver Trophy
    Paul - Thanks a lot for taking the time to investigate this for me. I am little closer to understanding what is going on but I am still dissapointed that APEX is making a simple style override so darn difficult.
This discussion has been closed.