Help is on the way!

User31 - JoomlaXTC HTML Module

In the User31 position we use our JoomlaXTC HTML Module to create the Graphs. Use the module suffix 'nomarg nopad'

Use the following mark up for the Module HTML.

HTML

<div class='ui'>
  <div class='ui_box span4'>
    <div data-sr='reset scale up 30% over 0.4s' class='ui_box__inner'>
      <h2>
        Server Uptime
      </h2>
      <p>Lorem ipsum dolor sit amet</p>
      <div class='stat'>
        <span>99%</span>
      </div>
      <div class='progress'>
        <div class='progress_bar'></div>
      </div>
      <p>Lorem ipsum dolor sit amet. Some more super groovy information about this stat.</p>
    </div>
    <div class='drop'>
      <p>Take a closer look</p>
      <div class='arrow'></div>
    </div>
  </div>
  <div class='ui_box span4'>
     <div data-sr='reset scale up 30%' class='ui_box__inner'>
      <h2>
        Sales By Type
      </h2>
      <p>Lorem ipsum dolor sit amet</p>
      <div class='stat_left'>
        <ul>
          <li>
           App Design
          </li>
          <li>
           Graphic Design
          </li>
          <li>
          Web Design
          </li>
          <li>
           Custom Programming
          </li>
        </ul>
      </div>
      <div class='progress_graph'>
        <div class='progress_graph__bar--1'></div>
        <div class='progress_graph__bar--2'></div>
        <div class='progress_graph__bar--3'></div>
        <div class='progress_graph__bar--4'></div>
      </div>
      <p>Lorem ipsum dolor sit amet. Some more super groovy information. Fully bootstrapped.</p>
    </div>
    <div class='drop'>
      <p>Take a closer look</p>
      <div class='arrow'></div>
    </div>
  </div>
  <div class='ui_box span4'>
      <div data-sr='reset scale up 30%' class='ui_box__inner'>
      <h2>
        Total Sales
      </h2>
      <p>Lorem ipsum dolor sit amet</p>
      <div class='stat'>
        <span>$34,403.93</span>
      </div>
      <div class='progress'>
        <div class='progress_bar--two'></div>
      </div>
      <p>Lorem ipsum dolor sit amet. Some more super groovy information about this stat.</p>
    </div>
    <div class='drop'>
      <p>Take a closer look</p>
      <div class='arrow'></div>
    </div>
  </div>
</div>

For more information on configuring the HTML Module visit the full documentation HERE