Help is on the way!

Browse our Documentation, Search the Knowledge Base, Still need help? Send us a support ticket.

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

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET

Didn't find an Answer?

If you didn't find the answer you were looking for from the links above.




SUBMIT SUPPORT TICKET