Obtenir l'affichage de la typographie dans votre site

Purity III fournit une variété de typo qui vous permettra d'économiser votre temps pour construire votre contenu et de lui donner fière allure. Nous avons mis toutes les typos utilisées pour construire le Contenu Purity III dans une page typo dans le site exemple (Tous les éléments de menu sous l'élément de menu typographie).

Voir les exemples de TYPO

Remarque :

Purity III intègre Bootstrap 3 donc il prend en charge toutes les typos Bootstrap 3.

Etape 1: obtenir le balisage de typo

Il y a plusieurs façons d'obtenir le balisage de typo.

#1: en utilisant Firebug

#2: en utilisant Webdevelopper pour firefox

#3: en utilisant le package quickstart

Joomlart fournit un package quickstart qui inclut des exemples de données de telle sorte que lors de l'installation, votre site sera identique à la démo de Purity III. Lorsque vous avez le site installé, ouvrez juste une session back-end et allez chercher les balises de typo d'articles, ou de module personnalisé HTML.

Étape 2: ajouter des balises de typo à votre contenu

Vous pouvez ajouter du balisage de typo au champ de contenu de l'article ou au module HTML personnalisé.

Désactiver l'éditeur :

Lorsque vous ajoutez le code HTML au contenu - article, veuillez vous assurer que vous désactivez l'éditeur. Allez dans Sytème >> configuration, choisir Editeur – non WYSIWYG dans le champs Éditeur par défaut.

Ou directement depuis l'éditeur HTML, basculer en mode HTML.

Étape 3: obtenir la typo affichée en première page

Créer un lien de menu, affecter l'article auquel nous avons ajouté le balisage de typo HTML.

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>

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>

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>

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>

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 -->

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>

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.

 Megamenu

Off-canvas sidebar

Default Bootstrap menu

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 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 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).

Activer megamenu

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

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.

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

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

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

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.

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

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.

É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.

É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.

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

É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.

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.

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.

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.

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.