2 Replies Latest reply on Apr 5, 2013 6:00 AM by Scott Wesley

    Using image sprite with class statusGreen

    Scott Wesley

      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?



      Edited by: scott - forget to edit subject
        • 1. Re: Using image sprite with class statusGreen
          Jorge Rimblas
          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">
           <a href="#"><img src="/i/f_spacer.gif" alt="" class="statusGreen"><span>Message</span></a>
           <a href="#"><img src="/i/f_spacer.gif" alt="" class="statusYellow"><span>This one is yellow</span></a>
          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.

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