Configuration des modules exemple de démo sur Purity III

La section comprend la configuration des modules utilisés dans la démo de PURITY III: modules Joomla par défaut et modules peronnalisés HTML.

(les titres de modules sont laissés volontairement en anglais afin de les retrouver aisément dans la démo)

1. Sample Banner 1 (bannière exemple)

• Module type: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Code HTML

<a href="#" title="Sample banner"><img class="img-responsive" src="/images/joomlart/banners/sb-1.jpg" alt="Sample banner" /></a>
 

2. Custom tabs (onglets personnalisés)

Pour avoir mêmes onglets que dans notre démo, veuillez suivre les instructions.

Etape 1: créer un module «Most read »

• Type de module: Catégorie articles

• Position du module: tab-1

• Suffixe de module: NON UTILISÉ

Étape 2: Créer module "Popular post"

• Type de module: Catégorie articles

• Position du module: tab-2

• Suffixe de module: NON UTILISÉ

Étape 3: créer le module HTML personnalisé pour déclarer les modules "Most Read" et "Popular post" dans l'onglet.

• Type de module: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#popular" data-toggle="tab">Latest post</a></li>
<li><a href="#latest" data-toggle="tab">Most read</a></li></ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="popular"></div>
<div class="tab-pane" id="latest"></div>
</div>

Réglage du module HTML personnalisé

3. Login Module (Module de connexion)

• Type de module: login

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ
  

Aperçu du backend : 

4. Slideshow

• Type de module: HTML personnalisé

• Position du module: slideshow

• Suffixe de module: NON UTILISÉ

Code HTML

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
     <img src="/images/joomlart/slideshow/sl-1.jpg" alt="Sample image" />
      <div class="carousel-caption">
      <h2>Your perfect starting template, Purity III</h2>
      <p>Either it's your first time with Joomla or you are a developer already, Purity III won't let you down.</p>
     </div>
    </div>

    <div class="item">
      <img src="/images/joomlart/slideshow/sl-2.jpg" alt="Sample image" />
      <div class="carousel-caption">
      <h2>This is the best FREE Joomla 3 template!</h2>
      <p>We have drunken too much of the best… but this repsonsive Joomla template truly is, and IT'S FREE!</p>
     </div>
    </div>
    <div class="item">
      <img src="/images/joomlart/slideshow/sl-3.jpg" alt="Sample image" />
      <div class="carousel-caption">
      <h2>The next generation of Purity series</h2>
      <p>Sophisticated in Design, Brilliant in Features. That's how we define Purity Series.</p>
     </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

</div>
 

4. Team members (membres de l'équipe)

• Type de module: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Code HTML

<div class="media">
  <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-1.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a>
  <div class="media-body">
  <h4 class="media-heading">Scott Singleton</h4>
    <strong><small>CEO Director</small></strong><br />
    <small><a href="mailto:"></a></small>
  </div>
</div>

<div class="media">
  <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-2.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a>
  <div class="media-body">
  <h4 class="media-heading">Marie Hall</h4>
    <strong><small>Managing Director</small></strong><br />
    <small><a href="mailto:"></a></small>
  </div>
</div>

<div class="media">
  <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-3.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a>
  <div class="media-body">
  <h4 class="media-heading">Mamie Ray</h4>
    <strong><small>Sales manager</small></strong><br />
    <small><a href="mailto:"></a></small>
  </div>
</div>

<div class="media">
  <a href="#" class="pull-left"><img src="/images/joomlart/corporate/staff-4.jpg" alt="Sample image" style="width: 60px;" class="img-thumbnail" /></a>
  <div class="media-body">
  <h4 class="media-heading">Johnny Payne</h4>
    <strong><small>Creative director</small></strong><br />
    <small><a href="mailto:"></a></small>
  </div>
</div>
 

5. Our partners (nos partenaires)

• Type de module: HTML personnalisé

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Code HTML

<img src="/images/joomlart/corporate/partners.gif" alt="Sample image" class="image-reponsive" />
 

6. Blog Categories (blog de catégories)

• Type de module: Catégories d'Articles

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Aperçu dans le backend :

7. Archived Articles (articles archivés)

• Type de module: Articles archivés

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

Aperçu dans le backend :

8. Blog Tags (tags populaires)

• Type de module: tags populaires

• Position du module: sidebar-2

• Suffixe de module: NON UTILISÉ

9. Masthead

image  Vous pouvez activer le masthead pour tout menu. Dans le paramètre de menu, accédez à l'onglet Affichage de la page pour ajouter un titre dans Masthead title et une description dans Masthead Slogan.

Configuration d'un site multilingue grâce à Purity III

Si vous voulez construire un site multilingue avec le template Purity III, Il suffit de suivre les instructions ci-dessous :

Il y a 4 étapes dans le processus

1. Configuration multilingue

2. Styler le module "Language switcher"

3. configurer le menu qui utilise des mises en page de substitution

4. multilingue pour Megamenu (pour la configuration manuelle uniquement)

# 1: Mettre en place le multilangue

Le processus d'installation peut varier en fonction de l'état de développement de votre site.

Nouvelle installation avec le paquet Quickstart

Dans ce cas, Joomla lui-même permet une configuration multilingue automatique. Vous avez juste à activer cette option lors du processus d'installation. Juste après l'étape d'installation de base de données, vous serez en mesure de passer par le programme d'installation multilingue. Il comprend 3 étapes :

1: Activer "étape supplémentaire: Installation de langue"

2: Installer langues

3: activer la fonctionnalité « Multilingue » et sélectionnez la langue par défaut admin/site

Votre site est désormais multilingue, la prochaine étape est la création du module « Sélecteur de langue ».

Configuration d'un site Joomla 2.5 et 3 Joomla existant

Depuis la version 2.5, c'est maintenant plus facile de construire un site multilingue sans passer par une extension tierce. Il y a 2 façons de construire un site multilingue: installation manuelle ou automatique avec le composant JA Multilingual . Ce sera à vous de choisir.

Dans ce tutoriel, nous allons vous montrer, étape par étape comment construire un site multilingue avec JA Multilingual, cette extension libre Joomla vous permet non seulement la mise en place d'un site multilingue, elle traduit également tout le contenu de votre site: articles, menus, modules, extensions tierces, métadonnées d'événements, vous permettant d'économiser beaucoup de temps!

Etape 1: Installez le composant

Si vous êtes nouveau sur Joomla, vous devrez consulter un guide détaillé sur l'installation d'extension

Étape 2: Configurer le service de traduction

Le composant supporte actuellement 2 services de traduction: BING et Google. Tout ce dont vous avez besoin est l'enregistrement API BING ou API Google, ajoutez l'information à la configuration du composant, ou passez outre afin de simplement dupliquer si vous ne voulez pas passer par ces services efficaces mais payants.

Étape 3: Installation des langues

Cliquez sur "Installer la langue", puis sélectionnez les langues que vous souhaitez installer.

déclarer la langue par défaut si besoin

Ajouter contenu français si besoin

Étape 4: Traduire les langues

Cliquez sur "Translate all" pour traduire toutes les langues installées. Vous pouvez vérifier le processus de traduction dans le panneau latéral. Si vous avez déclaré les API google ou Bing, la traduction se fera automatiquement.

La traduction de contenu comprend :

• Bannières

• Contenu - Catégories

• Contacts

• Contenu - Articles

• Menus

• Types de menus

• Modules

• News Feeds

• Liens Web

Une fois l'installation terminée, votre site est désormais multilingue.

Pour gérer une association ou de modifier le contenu, le meilleur endroit pour le faire est le panneau " Association Manager".

Vous pouvez également utiliser la configuration manuelle prise en charge par défaut par Joomla.

#2: publier le module « Sélecteur de langue »

Le module permet aux utilisateurs de basculer de langues dans votre site.

Réglage du module

Veuillez attribuer au module la position "head-search" et à tous les éléments de menu. Vous pouvez laisser les autres réglages par défaut.

Style personnalisé

Par défaut, lorsque vous publiez le module dans "head-search", il ne semble pas aussi beau que vous le voudriez, alors il vous faudra peut-être un peu personnaliser son style.

Pour un style personnalisé, ajouter du style n'importe quel fichier .less dans votre dossier de template LESS (templates/purity_iii/less).

Ajoutez le style suivant dans le fichier: templates/purity_iii/less/style.less

// language switcher module

// ---------

.mod-languages { 

position: absolute;     

left: -100px;   top: 20px;      

// more style comes here

}       

#3: configurer un menu qui utilise la surcharge de mise en page

Pour les mise an page par défaut de Joomla, cela fonctionne bien, mais pour des mises enpage surchargées (Magazine, xBlog, Portfolio, Feature Intro 1, Feature intro 2, Corporate, Glossary), nous avons besoin de configurer son menu.

Toutes les mises en pages surchargées dans Purity III va chercher le contenu d'une catégorie. Tout ce que nous avons à faire est d'assigner la catégorie correcte pour les éléments de menu traduits utilisant des mises en page de remplacement.

Allez dans : Composants >> JA Multilingual >> Association manager, Sélectionnez ensuite le type de contenu de Menu.

Affecter la catégorie traduite correspondante à l'élément de menu.

Faites la même chose pour d'autres éléments de menu qui utilisent mises en page de surcharge.

Nous avons terminé, nous allons voir la première page.

De cette façon, votre Megamenu fonctionnera bien avec votre site multilingue sans aucune configuration / personnalisation.

#4: megamenu multilingue

Si vous choisissez de construire votre site multilingue manuellement, vous devez suivre ces instructions pour faire fonctionner votre megamenu en site multilingue. Dans ce tutoriel, nous activerons le megamenu pour la langue française. (site exemple en anglais)

Étape 1: dupliquer le style par défaut

Sélectionnez le style de template par défaut Purity III default template style puis cliquez sur le bouton copier ou duplicate (nous sommes en anglais dans la démo).

Étape 2: configurer le style de template dupliqué

Ouvrez le style de template dupliqué à configurer

1. Renommez le style de template dupliqué, vous devriez ajouter le code de langue. Le nom de style de template devrait être: Purity III - Default FR

2. Indiquez la langue par défaut pour le style de template - French

3. Attribuez menu traduit (le menu qui s'affiche dans le menu principal pour la langue Française).

4. Activez Megamenu

Étape 3: configurer le megamenu

Ouvrir le panneau de configuration Megamenu en cliquant sur le bouton « Megamenu » dans la barre d'options en haut de la page.

Par défaut, cela va charger le menu sélectionné que vous avez attribué. Après avoir configuré megamenu, veuillez garder à l'esprit d'enregistrer ses paramètres.

Vous devez enregistrer les paramètres du megamenu même vous ne changez rien, cela opérera un rendu et fera marcher le megamenu en langue française.