Configuration

Configuration du template et extension

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)

customtabs1

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

customtabs 2

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

customtabs 4

Réglage du module HTML personnalisé

customtabs 3

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 :

blogcategories

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 :

articlesarchives

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.

masthead 1

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

Configuration multilingue
Styler le module "Language switcher"
configurer le menu qui utilise des mises en page de substitution
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"

multilangue 1

2: Installer langues

multilangue 2

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

multilangue 3

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!

jamulti 1

jamulti 2

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.

jamulti 3

Étape 3: Installation des langues

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

langue 1

déclarer la langue par défaut si besoin

langue 2 Ajouter contenu français si besoin

langue 3

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

jamulti 4

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

jamulti 5

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

module lang 1

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

 }

module lang 2

module lang 3

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

jamulti 6

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

jamulti 7

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

Lire → Configuration d'un site multilingue

Page 3 sur 3