This discussion is archived
3 Replies Latest reply: Mar 7, 2013 12:56 AM by fac586 RSS

Highlighting Display  box borders

ryansun Newbie
Currently Being Moderated
4.2.1

Hi there,

I have a requirement where I have to show 5 display items in bold, big font and have the borders of the display boxes also visible, as if they were boxes. I don't have to change the template. Was wondering if this can be done using CSS for the 5 specific items?

Any suggestions please

Thanks,
ryan
  • 1. Re: Highlighting Display  box borders
    fac586 Guru
    Currently Being Moderated
    ryansun wrote:
    4.2.1

    Hi there,

    I have a requirement where I have to show 5 display items in bold, big font and have the borders of the display boxes also visible, as if they were boxes. I don't have to change the template. Was wondering if this can be done using CSS for the 5 specific items?
    Basically, yes. This CSS does that for the 5 display items (don't save session state) with names P42_DISPLAY_x:
    #P42_DISPLAY_1,
    #P42_DISPLAY_2,
    #P42_DISPLAY_3,
    #P42_DISPLAY_4,
    #P42_DISPLAY_5 {
      border: 1px #c0c0c0 solid;
      border-right-color: #b0b0b0;
      border-bottom-color: #b0b0b0;
      font-size: large;
      font-weight: bold;
    }
    However, as usual the specifics depend on whether the items save session state, which items are affected, how you want to select them, what theme you're using, what you mean by "big", what color and width you want the borders...
  • 2. Re: Highlighting Display  box borders
    ryansun Newbie
    Currently Being Moderated
    Thanks Fac586,

    Apologies was traveling and could not get to this earlier. For this, I guess we will have to change the application or page CSS? I thought maybe we can just do this in the CSS properties of the item? Also, how does the session state impact CSS? That was new to me.

    Thanks,
    Ryan
  • 3. Re: Highlighting Display  box borders
    fac586 Guru
    Currently Being Moderated
    ryansun wrote:

    Apologies was traveling and could not get to this earlier. For this, I guess we will have to change the application or page CSS? I thought maybe we can just do this in the CSS properties of the item?
    You can if you want to. I'd see that as violating DRY. What do you do when the users request an increase in font size? You've got to make the change in 5 places. What happens when they want this applied on multiple pages?

    As I said above, it depends—among much else—on how reusable this needs to be and how you need/want to select them. I used a Inline page stylesheet to avoid unnecessary repetition, and ID selectors because you provided no indication of what selection criteria were required.
    Also, how does the session state impact CSS? That was new to me.
    It affects how CSS ID selectors need to be used. If the display items don't save session state then APEX just generates a <tt>span</tt> where the <tt>id</tt> attribute is the name of the item, so the CSS ID selector is simply the item name (as above). If the items save session state then APEX generates a hidden <tt>input</tt> element where the <tt>id</tt> attribute is the item name, and a visible shadow display <tt>span</tt> where the <tt>id</tt> attribute is the item name suffixed with <tt>DISPLAY</tt>, so the ID selector would be <tt>#ITEMNAME_DISPLAY</tt>.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points