2 Replies Latest reply: Apr 5, 2013 1:00 AM by swesley_perth RSS

    Using image sprite with class statusGreen

    swesley_perth
      Hi,

      I'm trying to replicate something I found in the Bug tracker sample application - using the sprite images to display the green/red/yellow orbs.

      The home page of the bug tracker uses the following to display to orb
      <img src="/i/f_spacer.gif" alt="" class="statusGreen">
      If I repeat this in my theme 25 Apex 4.2 application, it does not display the orb image.

      Inspecting the generated element through chrome I can see the class was recognised & the image sprite was found - but no image shown on the page?

      Ideas?

      Scott

      Edited by: scott - forget to edit subject
        • 1. Re: Using image sprite with class statusGreen
          jrimblas
          If you only added the img tab, then that's not enough.

          The CSS is dependent on a class of detailedStatusList for the UL, then being inside an LI and the, it seems inside a A tag.
          Like this:
          <ul class="detailedStatusList">
          <li>
           <a href="#"><img src="/i/f_spacer.gif" alt="" class="statusGreen"><span>Message</span></a>
          </li>
          <li>
           <a href="#"><img src="/i/f_spacer.gif" alt="" class="statusYellow"><span>This one is yellow</span></a>
          </li>
          </ul>
          If you replicate that structure you'll get the orbs.
          I was able to copy paste the HTML here in a brand new app with Theme 25 and get the pretty green and yellow orbs.

          If you only want the orbs then inspect the tags and copy the CSS so that you can apply it to your own element structure.
          Hope this helps.
          -Jorge

          Edited by: jrimblas on Apr 4, 2013 11:01 PM
          • 2. Re: Using image sprite with class statusGreen
            swesley_perth
            Thanks Jorge, I was missing the "detailedStatusList" on the UL