+33 03 83 56 65 20 +33 06 87 42 95 30

tutoriels frameworks / templates

Tutoriels sur Gantry, Vertex, Helix ... etc ...

(documentation personnelle ou traduction de la documentation originale)

Pages de typographie prises en charge dans le tempalte purity III

La typo pré-fabriquée vous permettra d'économiser du temps lorsque vous générez votre contenu de site.

Page Our Team

Code HTML

    <div class="our-team">
     
    <div class="page-header">
      <h1 class="text-center">Welcome to our team</h1>
    </div>
     
    <p class="lead text-center">
    Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. Enim neque tortor mattis sed semper lorem tellus Phasellus eu nonummy. Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac. Phasellus id cursus malesuada libero dui Morbi senectus diam gravida Vestibulum.
    </p>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-1.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Sean Thomas</h3>
          <p>Senior Designer</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-2.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Bennie Moran</h3>
          <p>Developer</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-3.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Nicholas Mitchell</h3>
          <p>Developer</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-4.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Nicholas Mitchell</h3>
          <p>Designer.</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-5.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Sean Thomas</h3>
          <p>Tester</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-6.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Bennie Moran</h3>
          <p>Senior Project Manager</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-7.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Nicholas Mitchell</h3>
          <p>Project manager</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="/images/joomlart/corporate/staff-8.jpg" alt="Sample image" class="img-circle" />
        <div class="caption">
          <h3>Nicholas Mitchell</h3>
          <p>Community manager.</p>
          <p>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
            <a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
          </p>
        </div>
      </div>
    </div>
     
     
    </div>

 

typo 7

page Pricing table (table de prix)

Joomlart fournit 3 styles pré-fabriquées pour la table de prix, sélectionnez le style souhaité.

1. Style 1

Code HTML

    <div class="page-header text-center">
      <h1>Pricing table - style 1</h1>
    </div>
     
    <div class="pricing-table style1 row">
      <div class="col col-md-4 no-padding">
        <div class="col-header text-center">
          <h2>Personal</h2>
          <p>Perfect for your blog</p>
        </div>
        <div class="col-body">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0 yes">Discount code engine</li>
          <li class="row1 yes">24x7 Phone support</li>
          <li class="row0 no">Gift cards</li>
          <li class="row1 no">Abandoned cart recovery</li>
          <li class="row0 no">Professional reports</li>
          <li class="row1 no">Advanced report builder</li>
          <li class="row0"><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></li>
        </ul>
        </div>
        <div class="col-footer text-center">
          <a class="btn btn-lg btn-default">Sign up</a>
        </div>
      </div>
     
      <div class="col col-md-4 col-feature shadow no-padding">
        <div class="col-header text-center">
          <h2>Portfolio</h2>
          <p>Everything you need</p>
        </div>
        <div class="col-body">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0 yes">Discount code engine</li>
          <li class="row1 yes">24x7 Phone support</li>
          <li class="row0 yes">Gift cards</li>
          <li class="row1 yes">Abandoned cart recovery</li>
          <li class="row0 yes">Professional reports</li>
          <li class="row1 yes">Advanced report builder</li>
          <li class="row0 yes">Real-time carrier shipping</li>
          <li class="row0"><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></li>
        </ul>
        </div>
        <div class="col col-footer text-center">
          <a class="btn btn-lg btn-primary">Sign up</a>
        </div>
      </div>
     
      <div class="col col-md-4 no-padding">
        <div class="col-header text-center">
          <h2>Performance</h2>
          <p>Awesome capacity</p>
        </div>
        <div class="col-body">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0 no">Discount code engine</li>
          <li class="row1 yes">24x7 Phone support</li>
          <li class="row0 yes">Gift cards</li>
          <li class="row1 no">Abandoned cart recovery</li>
          <li class="row0 no">Professional reports</li>
          <li class="row1 no">Advanced report builder</li>
          <li class="row0"><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></li>
        </ul>
        </div>
        <div class="col-footer text-center">
          <a class="btn btn-lg btn-default">Sign up</a>
        </div>
      </div>
    </div>

 

typo 8

 

2. Style 2

Code HTML

    <div class="page-header text-center">
      <h1>Pricing table - style 2</h1>
    </div>
     
    <div class="pricing-table style2 row">
      <div class="col col-md-4 no-padding">
        <div class="col-header text-center">
          <h2>Personal</h2>
          <p><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></p>
        </div>
        <div class="col-body">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0 yes">Discount code engine</li>
          <li class="row1 yes">24x7 Phone support</li>
          <li class="row0 no">Gift cards</li>
          <li class="row1 no">Abandoned cart recovery</li>
          <li class="row0 no">Professional reports</li>
          <li class="row1 no">Advanced report builder</li>
        </ul>
        </div>
        <div class="col-footer text-center">
          <a class="btn btn-lg btn-default">Sign up</a>
        </div>
      </div>
     
      <div class="col col-md-4 col-feature shadow no-padding">
        <div class="col-header text-center">
          <h2>Portfolio</h2>
          <p><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></p>
        </div>
        <div class="col-body">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0 yes">Discount code engine</li>
          <li class="row1 yes">24x7 Phone support</li>
          <li class="row0 yes">Gift cards</li>
          <li class="row1 yes">Abandoned cart recovery</li>
          <li class="row0 yes">Professional reports</li>
          <li class="row1 yes">Advanced report builder</li>
          <li class="row0 yes">Real-time carrier shipping</li>
        </ul>
        </div>
        <div class="col-footer text-center">
          <a class="btn btn-lg btn-primary">Sign up</a>
        </div>
      </div>
     
      <div class="col col-md-4 no-padding">
        <div class="col-header text-center">
          <h2>Performance</h2>
          <p><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></p>
        </div>
        <div class="col-body">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0 no">Discount code engine</li>
          <li class="row1 yes">24x7 Phone support</li>
          <li class="row0 yes">Gift cards</li>
          <li class="row1 no">Abandoned cart recovery</li>
          <li class="row0 no">Professional reports</li>
          <li class="row1 no">Advanced report builder</li>
        </ul>
        </div>
        <div class="col-footer text-center">
          <a class="btn btn-lg btn-default">Sign up</a>
        </div>
      </div>
    </div>

 

typo 9

3. Style 3

Code HTML

    <div class="page-header text-center">
      <h1>Pricing table - style 3</h1>
    </div>
     
    <div class="pricing-table style3">
     
    <div class="row row-header">
      <div class="col col-md-3 no-padding"></div>
      <div class="col col-md-3 no-padding">
        <div class="col-header text-center">
          <h2>Personal</h2>
          <p><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></p>
        </div>
      </div>
      <div class="col col-md-3 col-feature no-padding">
        <div class="col-header text-center">
          <h2>Portfolio</h2>
          <p><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></p>
        </div>
      </div>
      <div class="col col-md-3 no-padding">
        <div class="col-header text-center">
          <h2>Performance</h2>
          <p><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></p>
        </div>
      </div>
     
    </div>
     
    <div class="row row-body">
      <div class="col col-md-3 no-padding">
        <ul>
          <li class="row0 yes">Unlimited bandwidth</li>
          <li class="row1 yes">Unlimited products</li>
          <li class="row0 yes">1 GB File storage</li>
          <li class="row1 yes">2.0% Transaction fee</li>
          <li class="row0">Discount code engine</li>
          <li class="row1">24x7 Phone support</li>
          <li class="row0">Gift cards</li>
          <li class="row1">Abandoned cart recovery</li>
          <li class="row0">Professional reports</li>
          <li class="row1">Advanced report builder</li>
          <li class="row0">Advanced report builder</li>
        </ul>
      </div>
     
      <div class="col col-md-3 no-padding">
        <ul>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1 no"><i class="fa fa-times-circle"></i></li>
          <li class="row0 no"><i class="fa fa-times-circle"></i></li>
          <li class="row1 no"><i class="fa fa-times-circle"></i></li>
          <li class="row0 no"><i class="fa fa-times-circle"></i></li>
        </ul>
        <div class="col-footer text-center">
          <a href="#" title="Sign up" class="btn btn-lg btn-default">Sign up</a>
        </div>
      </div>
     
      <div class="col col-md-3 no-padding">
        <ul>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
        </ul>
        <div class="col-footer text-center">
          <a href="#" title="Sign up" class="btn btn-lg btn-primary">Sign up</a>
        </div>
      </div>
     
      <div class="col col-md-3 no-padding">
        <ul>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0"><i class="fa fa-check-circle"></i></li>
          <li class="row1"><i class="fa fa-check-circle"></i></li>
          <li class="row0 no"><i class="fa fa-times-circle"></i></li>
          <li class="row1 no"><i class="fa fa-times-circle"></i></li>
          <li class="row0 no"><i class="fa fa-times-circle"></i></li>
        </ul>
        <div class="col-footer text-center">
          <a href="#" title="Sign up" class="btn btn-lg btn-default">Sign up</a>
        </div>
      </div>
     
    </div>
     
    </div>

 

typo 10

Support policy - Politique de support

Il existe 2 modèles pour la page de politique de support. Nous vous fournissons le code HTML pour les deux pages.

1. Support policy - Politique de support - style 1

HTML code

    <div class="support-policy">
     
    <div class="row row-support-policy">
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Demo site display</h3>
          </div>
          <div class="col-detail">
            <p>Your site does not look like our demo site? No problem, provide us your site details and we will help you. Temporary login info if provided makes this task a breeze. Login info can be submitted even in our forums in the hidden fields (mods eyes only).</p>
          </div>
          <div class="col-level level-1">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">100%</span>
            </div>
            <strong>Excellent</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Bugs</h3>
          </div>
          <div class="col-detail">
            <p>We hate bugs and act swiftly to crush them. Provide us steps to replicate the bug and let us do the rest.</p>
          </div>
          <div class="col-level level-1">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">90%</span>
            </div>
            <strong>Excellent</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>New feature requests</h3>
          </div>
          <div class="col-detail">
            <p>As long as the feature will add value to the product and is requested by others too, we will add them.</p>
          </div>
          <div class="col-level level-2">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">80%</span>
            </div>
            <strong>Maybe, maybe not</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
    </div> <!-- End row -->
     
     
    <div class="row row-support-policy">
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Customizations</h3>
          </div>
          <div class="col-detail">
            <p>Limited customization support is available only for developers. For regular members minor customization requests may be fulfilled depending upon the workload and staff discretion.</p>
          </div>
          <div class="col-level level-2">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">80%</span>
            </div>
            <strong>Limited</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>3rd party extensions issue</h3>
          </div>
          <div class="col-detail">
            <p>Lets face it, while we do test our templates with popular extensions at random but its not possible to cover all of them. So, our take on this is very clear : if it works in Joomla default templates but not in our templates, we will try our best to fix it, provided the 3rd party extension developer is using standard unmodified dependent libraries.</p>
          </div>
          <div class="col-level level-3">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">75%</span>
            </div>
            <strong>Very Good</strong>
          </div>
        </div>
      </div> <!-- End col-->
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Old versions</h3>
          </div>
          <div class="col-detail">
            <p>We recommend using the latest versions of products in your site but we also understand that its not possible everytime. If provided with full details, screenshots and temporary login details, we can have a look and try to help.</p>
          </div>
          <div class="col-level level-3">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">70%</span>
            </div>
            <strong>Tricky</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
    </div> <!-- End row -->
     
     
    <div class="row row-support-policy">
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Adding module positions or layout changes</h3>
          </div>
          <div class="col-detail">
            <p>As long as it does not fall under customization expect good support. Please note, sometimes the template concept can be restrictive, for example : we cant help to add module position in JA Smashboard which is horizontal scrolling as it may break responsive layouts.</p>
          </div>
          <div class="col-level level-4">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">40%</span>
            </div>
            <strong>Maybe, maybe not</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Javascript conflicts</h3>
          </div>
          <div class="col-detail">
            <p>We understand that javascripts conflict can put the whole site purpose in limbo. We always help user investigate such issues and if it can be fixed from our side, we always fix them. If we express helplessness due to 3rd party extension issues, you will have to take it up with them. We are always ready to work with others to resolve such issues.</p>
          </div>
          <div class="col-level level-4">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">30%</span>
            </div>
            <strong>Maybe, maybe not</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Ping Pong</h3>
          </div>
          <div class="col-detail">
            <p>We hate it. We can not provide efficient support if you post single line poorly formatted questions without detailed description of the issue faced. You will only get blunt wild guesses as replies, not to mention the prolonged resolution time. Help us to help you.</p>
          </div>
          <div class="col-level level-5">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">20%</span>
            </div>
            <strong>ignored</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
    </div> <!-- End row -->
     
    <div class="row row-support-policy">
     
      <div class="col-md-4">
        <div class="policy-item">
          <div class="col-type">
            <h3>Server &amp; Hosting</h3>
          </div>
          <div class="col-detail">
            <p>We can only help to point out issues, beyond that its between you and your hosting provider.</p>
          </div>
          <div class="col-level level-6">
            <div class="level-info">
              <span class="face"></span>
              <span class="count-up">0%</span>
            </div>
            <strong>Very very limited</strong>
          </div>
        </div>
      </div> <!-- End col -->
     
    </div> <!-- End row -->
     
    </div> <!-- End support policy -->

 

typo 11

2. Support policy – Politique de support - style 2

HTML code

    <div class="support-policy style2">
     
      <div class="row-heading hidden-phone">
        <div class="col-md-2 text-center">Query type</div>
        <div class="col-md-6">Details</div>
        <div class="col-md-2 text-center">Support level</div>
        <div class="col-md-2 text-center">Status</div>
      </div>
     
      <div class="row-body level-1">
        <div class="col-md-2 col-type">
          Demo site display
        </div>
     
        <div class="col-md-6 col-detail">
        Lorem ipsum dolor sit amet consectetuer adipiscing id ac Mauris laoreet. Donec Vestibulum Curabitur eros Sed iaculis cursus amet sollicitudin elit ut. Nibh mus malesuada tincidunt In risus nibh Sed cursus adipiscing et.
        </div>
     
        <div class="col-md-2 col-level"><span class="number">100%</span></div>
     
        <div class="col-md-2 col-status"><span class="face"></span><strong>Excellent</strong></div>
      </div>
     
      <div class="row-body level-2 row-alt">
        <div class="col-md-2 col-type">
          Bugs
        </div>
     
        <div class="col-md-6 col-detail">
        Dictum Sed porttitor Nam cursus Curabitur Aenean et at nec penatibus. Laoreet ipsum Vestibulum magna malesuada pede felis augue adipiscing magnis adipiscing. Elit senectus nibh quis pellentesque at ultrices platea gravida <a href="#" title="Sample link">adipiscing dapibus.</a>
        </div>
     
        <div class="col-md-2 col-level"><span class="number">90%</span></div>
     
        <div class="col-md-2 col-status"><span class="face"></span><strong>Excellent</strong></div>
      </div>
     
      <div class="row-body level-3">
        <div class="col-md-2 col-type">
          New feature requests
        </div>
     
        <div class="col-md-6 col-detail">
        Habitasse tempus dignissim leo In justo ante Ut vel a eu. Quis cursus Vestibulum eros libero pharetra at laoreet interdum egestas penatibus. Senectus vestibulum penatibus tortor Nam Duis ut Vivamus eu Quisque Ut. Libero natoque odio ipsum quis suscipit lorem at non elit magnis. Tortor wisi vel Nam laoreet Integer auctor dui gravida nulla convallis.
        </div>
     
        <div class="col-md-2 col-level"><span class="number">70%</span></div>
     
        <div class="col-md-2 col-status"><span class="face"></span><strong>Tricky</strong></div>
      </div>
     
      <div class="row-body level-4 row-alt">
        <div class="col-md-2 col-type">
          Customizations
        </div>
     
        <div class="col-md-6 col-detail">
        Nam enim id lacus Sed enim id Nulla tincidunt urna ultrices. Eget Curabitur Vestibulum urna dui at leo vestibulum magna eget dolor. Suspendisse convallis Nullam rhoncus aliquam non nec adipiscing at tellus elit. Magna ut Phasellus leo justo vel Nunc ut amet interdum convallis.
        </div>
     
        <div class="col-md-2 col-level"><span class="number">40%</span></div>
     
        <div class="col-md-2 col-status"><span class="face"></span><strong>Maybe, maybe not</strong></div>
      </div>
     
      <div class="row-body level-5">
        <div class="col-md-2 col-type">
          3rd party extensions issue
        </div>
     
        <div class="col-md-6 col-detail">
        Magna dolor risus sed ante hac ut congue facilisis sed elit. Vel neque urna nec et turpis pharetra enim fermentum pellentesque Nulla. Tempor Phasellus pellentesque ut tempus sollicitudin Aenean interdum ut faucibus enim.
        </div>
     
        <div class="col-md-2 col-level"><span class="number">25%</span></div>
     
        <div class="col-md-2 col-status"><span class="face"></span><strong>negligble / ignored</strong></div>
      </div>
     
      <div class="row-body level-6 row-alt">
        <div class="col-md-2 col-type">
          Old versions
        </div>
     
        <div class="col-md-6 col-detail">
        Consequat elit vel pretium tellus dui augue tellus eleifend vitae ridiculus. Ligula Suspendisse orci Sed Nulla neque Aliquam risus Vivamus lacinia justo. Mauris vel mauris ut interdum iaculis quis pede id sociis nibh.
        </div>
     
        <div class="col-md-2 col-level"><span class="number">0%</span></div>
     
        <div class="col-md-2 col-status"><span class="face"></span><strong>Very very limited</strong></div>
      </div>
     
    </div>

 

typo 12

 

Système de Menu pris en charge par purity III:

Purity III prend en charge 3 systèmes de menu incluant Megamenu, la barre latérale Off-canvas et le menu par défaut Bootstrap sur petit écran comme les mobiles.

 

 Megamenumegamenu

Off-canvas sidebar

off canevas

Default Bootstrap menu

bs

La Configuration du menu dans Purity III est assez simple. Vous pouvez activer ou désactiver ces systèmes de menu sur votre site.

Dans les sections suivantes, nous allons vous guider pour avoir la meilleure façon de travailler avec le menu Purity III.

Configuration de la Barre latérale Off-canvas

L'idée première de Off-canvas est un système de menu pour mobile, mais maintenant il est beaucoup plus flexible. Off-canvas est considéré comme une position de sorte que vous pouvez ajouter lui tout contenu en dehors de menu. Vous pouvez également choisir d'activer / désactiver dans des mises en page spécifiques.

offcanvas 1

Comment ajouter du contenu à la barre latérale Off-canvas?

Toutes les mises en page par défaut dans Purity III contiennent la position Off-canvas par défaut. Vous pouvez vérifier en ouvrant n'importe quelle mise en page.

offcanvas 2

Le contenu dans la barre latérale Off-canvas provient des modules affectés à la position off-canvas. Donc, si vous voulez ajouter du contenu à la barre latérale Off-canvas, Il suffit de placer le contenu dans un module puis d'assigner ce module à la position off-canvas.

offcanvas 3

Vous pouvez régler la barre latérale Off-canvas pour obtenir du contenu de n'importe quelle position. Dans le panneau de configuration de mise en page, affectez sidebar Off-canvas à la position dont vous souhaitez obtenir le contenu.

offcanvas 4

Comment utiliser Off-canvas comme menu principal sur mobile?

Off-canvas peut être utilisé en tant que menu principal sur mobile en suivant les 3 étapes ci-dessous.

Étape 1: Désactiver la barre latérale Off-canvas dans toutes les configurations responsives à l'exception de mobile.

Pour utiliser la barre latérale Off-canvas comme système de menus mobiles, il faudrait l'activer dans la mise en page mobile uniquement. Accédez au style de template, puis sélectionnez Layout >> Responsive layout >> layout Extra Small.

offcanvas 5

Étape 2: Créer le module de menu

Créer un module de menu puis l'attribuer à la position off-canvas.

offcanvas 6

Étape 3: Désactiver la navigation Bootstrap par défaut sur petits écrans

Si vous ne désactivez pas la navigation Bootstrap par défaut sur petits écrans, vous aurez 2 systèmes de menu sur la mise en page mobile.

offcanvas 7

Comment désactiver la barre latérale Off-canvas

Désactiver la sidebar Off-canvas dans n'importe quelle mise en page

La position Off canvas est incluse dans toutes les mises en page par défaut. Il y a 2 méthodes pour désactiver/supprimer celle-ci dans n'importe quelle mise en page.

#1: Dans le back-end de la mise en page

Ouvrez le style de template avec la mise en page où vous souhaitez désactiver la barre latérale Off-canvas puis l'affecter à "none".

offcanvas 8

# 2: Dans le fichier header.php.

Ouvrez le fichier header.php dans templates/purity_iii/tpls/blocks puis trouvez le code suivant:

    <!-- OFF-CANVAS -->
    	<?php if ($this->getParam('addon_offcanvas_enable')) : ?>
    		<?php $this->loadBlock ('off-canvas') ?>
    	<?php endif ?>
    	<!-- //OFF-CANVAS -->

 

Tout ce que vous devez faire est de supprimer cette partie:

    <?php $this->loadBlock ('off-canvas') ?>

 

Désactiver Off-canvas dans toutes les configurations responsive

Purity III est un template responsive qui prent en charge plusieurs mises en page responsives. Vous pouvez activer/désactiver la sidebar Off-canvas dans n'importe quelle mise en page responsive en sélectionnant celle à configurer puis en désactivant off-canvas sur la mise en page sélectionnée.

offcanvas 5

Comment déplacer la barre latérale Off-canvas à droite

Par défaut, la barre latérale Off-canvas se trouve à gauche, mais il est possible de le déplacer du côté droit.

Etape 1: Déplacez la barre latérale sur le côté droit

Ouvrez le fichier of-canvas.php dans templates/purity_iii/tpls/blocks, trouvez le code:

data-pos="left"

Changez-le:

data-pos="right"

Etape 2: Déplacer le bouton à droite

Ouvrez le fichier off-canvas.less dans templates/purity_iii/less, trouvez le style suivant :

    // Toggle Button
    // -------------------
    .off-canvas-toggle {
      border-radius: 0;
      border: 0;
      background: transparent;
      color: @navbar-default-color;
      padding: 0;
      width: @navbar-height;
      height: @navbar-height;
      line-height: @navbar-height;
      position: absolute;
      top: 0;
      left: 0;
      // States
      &:hover, &:active, &:focus {
        outline: none;
        .box-shadow(none);
        background: @navbar-default-border;
        color: @navbar-default-link-hover-color;
      }
    }

 

Remplacez le code :

left: 0;

par

right: 0;

Aperçu en Front-end

offcanvas 9

Le style de la barre latérale Off-canvas est également inclus dans le fichier off-canvas.less . Par conséquent, si vous souhaitez personnaliser le style, il suffit d'utiliser ce fichier.

Configuration du Megamenu Purity III

L'image ci-dessous montre l'exemple du menu megamenu dans la démo purity III. En fait, vous pouvez faire beaucoup plus avec tout ce que le Megamenu est capable de faire.

megamenu 1

Megamenu est une fonctionnalité principale de T3 Framework. La configuration visuelle (ce que vous configurez est ce que vous voyez en première page) du Megamenu vous aide à le configurer aisement.

Mega Menu ou Menu Joomla par défaut ?

Sur un site, vous pouvez utiliser le menu de Joomla par défaut dans un style de template et utiliser Megamenu dans les autres styles de template. Dans chaque style de template, vous pouvez configurer le système menu qu'il utilise. Si vous désactivez la fonction megamenu, le style de template utilisera alors le menu Joomla par défaut (menu déroulant).

megamenu 2

Activer megamenu

Ouvrez le style de template où vous souhaitez activer le megamenu, allez à l'onglet navigation puis activez l'option megamenu.

megamenu 3

Configurer le megamenu

La configuration megamenu est un paramètre général de sorte qu'elle est la même pour tous les styles de template. En haut du style de template, cliquez sur le bouton megamenu.

 

Sélectionnez le menu à afficher en front page

Vous pouvez sélectionner n'importe quel menu à configurer comme Megamenu. Mais ce n'est pas le menu qui s'affichera dans votre frontend. Le menu affiché dans votre frontend est le menu que vous assignez dans le paramètre de style de template, sous l'onglet Navigation.

megamenu 4

Niveau de configuration MegaMenu

Il y a 3 niveaux de configurations dans Megamenu : lien de menu, colonne et sous-menu

Configuration de lien de menu

megamenu 5

Le paramètre de lien de menu vous permet d'activer/désactiver son sous-menu, ajoutez une classe supplémentaire au style de l'élément de menu, ajoutez une icône et une légende pour le lien de menu.

Configuration de sous-menu

megamenu 6

La configuration du sous-menu vous permet d'ajouter/supprimer une ligne dans le sous-menu, afficher ou masquer le sous-menu sur de petits écrans comme les mobiles, aligner le sous-menu à gauche, droite, centre ou justifier, ajouter une classe supplémentaire au style pour le sous-menu.

Configuration de colonne

megamenu 7

Vous pouvez ajouter/supprimer une colonne, afficher ou masquer la colonne sur des petits écrans comme les mobiles, régler la largeur de la colonne, assigner un module si c'est un module de menu et ajouter une classe au style de la colonne.

5 étapes pour avoir Megamenu comme dans la démo

Commençons étape-par-étape la démarche pour faire une démo de Megamenu comme Purity III.
Ci-dessous le menu par défaut avant la configuration.

megamenu 8

Étape 1: Activer l'option Groupe pour les menus: New layout et Classic Layout

megamenu 9

Tout d'abord sélectionner l'élément de menu, puis activez l'option Group, qui regroupera les éléments du sous-menu d'un menu parent.

Étape 2: Modifier la taille de sous-menu

Sélectionnez le sous-menu, dont vous devez modifier la taille, puis remplissez la largeur désirée. C'est 850 pixels sur le site de démonstration.

megamenu 10

Étape 3: Déplacer le menu "Classic Layout" dans la nouvelle colonne

Sélectionnez la mise en page classique puis la déplacer vers la colonne de droite en utilisant le bouton de position dans la barre de configuration.

megamenu 11

Étape 4: Créer une nouvelle colonne de module

Pour créer une nouvelle colonne de module, sélectionnez la colonne "Classic layout" puis appuyez sur le bouton "+" dans la barre de configuration.

megamenu 12

Maintenant assignez le contenu - n'importe quel module à la nouvelle colonne module créée.

megamenu 13

Étape 5: Modifier la taille de colonne

Vous pouvez modifier la taille de la largeur de chaque colonne pour ajuster votre Megamenu en fonction du contenu affiché. Dans la démo de Purity III, la taille de chaque colonne est 3-3-6.

megamenu 14

Style, icône et élément légende dans megamenu

Style Megamenu

Vous pouvez définir le style pour megamenu à partir du menu, sous-menu et de la colonne en ajoutant la classe de style au champ Extra Class. Sur la démo Purity III, nous n'utilisons aucune classe supplémentaire.

megamenu 15

Ajouter une icône de lien de menu

Vous pouvez ajouter une icône pour chaque élément de menu dans votre megamenu. Cela peut être les icônes par défaut Bootstrap 3, icônes Font Awesome 3 ou celles de votre propre style. Sélectionnez l'élément de menu où vous voulez ajouter l'icône puis collez la classe icône dans le champ icon.

megamenu 16

Ajouter une légende à l'élément de menu

PurityIII ne dispose pas de style de Légende de menu par défaut. Mais vous pouvez toujours personnaliser votre style souhaité pour Megamenu.

megamenu 17

Configurer des effets / animations pour megamenu

Megamenu prend en charge un certain nombre de types d'animation. Pour configurer cette fonction, ouvrez un style de template, allez à l'onglet navigation puis sélectionnez un type d'animation et sa durée.

megamenu 18

 

Utiliser la Navigation Bootstrap Par défaut

Purity III intègre Bootstrap à son noyau. Par conséquent, il prend également en charge la navigation par défaut Boostrap sur de petits écrans comme les mobiles.

Pour activer / désactiver la navigation par défaut Boostrap sur les petits écrans, ouvrez le style de template où vous souhaitez activer / désactiver la navigation bootstrap par défaut puis allez à l'onglet Navigation. Commutez le bouton On / Off.

bootstrap 1

La première page devrait ressembler à ceci lorsque la navigation Boostrap sur les petits écrans est activée.

bootstrap 2

Sous-catégories

Gantry5 remplace avantageusement Gantry4 !

Retrouvez-ici toutes les procédures pour prendre en main cet outil !

 

Retrouvez les tutoriels et toute la documentation Du framework Helix de Joomshaper traduite en français. (http://www.joomshaper.com/documentation/helix/)

Tutoriel ASTROÏD

 

Documentation en français sur le framework astroïd Pour Joomla

Framework Développé par

logo

 

Traduction par

images1

 

Contact
Parlons social
Recevoir des nouvelles du site