https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Joomla permets la gestion multilingue des sites internet, et des composants comme Falang peuvent également être très utiles.

Le contenu est modifié selon la langue choisie par l'utilisateur ou le gestionnaire.

Mais quand on utilise Gantry, Il peut arriver de vouloir avoir un logo personnalisé selon la langue utilisée par le visiteur sur le site.

Il existe pour cela plusieurs méthodes.

Utiliser un module personnalisé.

Parmis les fonctionnalités de joomla, il y a la possiblité de créer un module HTML personalisé, de l'assigner à une langue.

Il vous suffit donc de créer un module par langue (ou de traduire le module dans falang) et de le publier dans une position qui servira de position de logo. (header par exemple?

Dans ce module, insérez une image en fonction de votre langue, et le tour est joué.

Utiliser le hack Gantry

  1. Décompressez ce fichier joint et copiez-le dans le dossier /templates/<YOUR_TEMPLATE>/features/
  2. Puis créez une image pour chaque langue. Le nom de chaque image doit être <LANGUAGE_TAG>.logo.png.
    Par exemple: "en-GB.logo.png", "es-ES.logo.png", "pt-BR.logo.png" et ainsi de suite.
  3. Copiez les images dans le dossier /templates/<YOUR_TEMPLATE>/images/logo/
  4. Dans le gestionnaire de templates modifiez votre tempalte et réglez ainsi Logo show = ON et Autosize = ON
La fonction ajoute un nouveau style css.
Ce style s'adapte fonction de la langue du site Web et modifie l'image de fond du logo.

 

 ziplogo.zip1.15 KB26/01/2014, 15:31

Gantry possède plusieurs éléments qui sont prêts à l'emploi mais qui sont cachés ou pas indiqués dans la documentation officielle. Un de ceux- ci est Icomoon. J'ai déjà décrit dans le post Font Awesome 3  les overrides de bootstrap. less contient certaines classes d'icones. Si vous avez suivi mes recommandations pour les overrider et que vous avez également mis à jour votre Gantry Framework pour 4.1.16 ou supérieur - supprimez ce code de votre feulle de style.

Dans bootstrap-overrides.less vous pouvez trouver le code :

.icon-file-add:before, .icon-cancel:before, .icon-eye:before, .icon-location:before, .icon-arrow-up-3:before, .icon-folder-2:before, .icon-checkedout:before, .icon-locked:before, .icon-comments-2:before, .icon-out:before, .icon-redo:before, .icon-file-add:before, .icon-new:before, .icon-apply:before, .icon-pencil-2:before, .icon-folder:before, .icon-pictures:before, .icon-list-view:before, .icon-power-cord:before, .icon-cube:before, .icon-puzzle:before, .icon-tools:before, .icon-options:before, .icon-equalizer:before, .icon-brush:before, .icon-eye:before, .icon-checkbox-unchecked:before, .icon-checkin:before, .icon-checkbox:before, .icon-checkbox-partial:before, .icon-star-2:before, .icon-featured:before, .icon-calendar-2:before, .icon-help:before, .icon-support:before, .icon-warning:before, .icon-publish:before, .icon-checkmark:before, .icon-unpublish:before, .icon-cancel:before, .icon-purge:before, .icon-mail:before, .icon-mail-2:before, .icon-unarchive:before, .icon-drawer:before, .icon-drawer-2:before, .icon-box-add:before, .icon-box-remove:before, .icon-grid-view:before, .icon-grid-view-2:before, .icon-menu:before, .icon-delete:before, .icon-cancel-2:before, .icon-save-new:before, .icon-plus-2:before, .icon-minus-2:before, .icon-quote:before, .icon-quote-2:before, .icon-database:before, .icon-location:before, .icon-expand-2:before, .icon-contract:before, .icon-contract-2:before, .icon-health:before, .icon-wand:before, .icon-unblock:before, .icon-vcard:before, .icon-clock:before, .icon-address:before, .icon-feed:before, .icon-flag-2:before, .icon-pin:before, .icon-lamp:before, .icon-chart:before, .icon-bars:before, .icon-pie:before, .icon-lightning:before, .icon-next:before, .icon-previous:before, .icon-first:before, .icon-last:before, .icon-loop:before, .icon-shuffle:before, .icon-arrow-first:before, .icon-arrow-last:before, .icon-uparrow:before, .icon-downarrow:before, .icon-arrow-up-2:before, .icon-arrow-right-2:before, .icon-arrow-down-2:before, .icon-arrow-left-2:before, .icon-play-2:before, .icon-menu-2:before, .icon-arrow-up-3:before, .icon-arrow-right-3:before, .icon-arrow-down-3:before, .icon-arrow-left-3:before, .icon-printer:before, .icon-color-palette:before, .icon-camera-2:before, .icon-file-remove:before, .icon-save-copy:before, .icon-cart:before, .icon-basket:before, .icon-broadcast:before, .icon-screen:before, .icon-mobile:before, .icon-users:before, .icon-out-2:before {
    font-family: 'IcoMoon' !important;
}

Donc nous pouvons utiliser des icônes suivantes sans aucun effort supplémentaire :


.icon-file-add icon-cancel icon-eye icon-location icon-arrow-up-3 icon-folder-2 icon-checkedout icon-locked icon-comments-2 icon-out icon-redo icon-new icon-apply icon-pencil-2 icon-folder icon-pictures icon-list-view icon-power-cord icon-cube icon-puzzle icon-tools icon-options icon-equalizer icon-brush icon-checkbox-unchecked icon-checkin icon-checkbox icon-checkbox-partial icon-star-2 icon-featured icon-calendar-2 icon-support icon-warning icon-checkmark icon-mail icon-mail-2 icon-drawer icon-drawer-2 icon-box-add icon-box-remove icon-grid-view icon-grid-view-2 icon-menu icon-delete icon-plus-2 icon-minus-2 icon-quote icon-quote-2 icon-database icon-expand-2 icon-contract icon-health icon-wand icon-unblock icon-vcard icon-clock icon-address icon-feed icon-flag-2 icon-pin icon-lamp icon-chart icon-bars icon-pie icon-lightning icon-next icon-previous icon-first icon-last icon-loop icon-shuffle icon-arrow-first icon-arrow-last icon-uparrow icon-downarrow icon-arrow-up-2 icon-arrow-right-2 icon-arrow-down-2 icon-arrow-left-2 icon-play-2 icon-menu-2 icon-arrow-up-3 icon-arrow-right-3 icon-arrow-left-3 icon-arrow-down-3 icon-printer icon-color-palette icon-camera-2 icon-file-remove icon-save-copy icon-cart icon-basket icon-broadcast icon-screen icon-mobile icon-users icon-out-2

Jusqu'à la version 3 de gantry et dans certains templates récents également, il existe une fonction, "title spans", qui une fois activé modifie la couleur du premier mot des titres.

Mais comme d'autres fonctions, elle n'apparait pas dans tous les templates gantry, ni dans le bundle 4.1.11

Nous allons donc l'activer pour pouvoir l'utiliser.

Ajouter la fonction title span dans gantry :

Ouvrex le fichier template-options.xml

repérez l'endroit ou vous voulez ajouter votre fonction, selon votre goût et vos besoins; pour nous ce fut à la ligne 92 juste avant la fonction date, et ajoutez :

        <field name="buildspans-enabled" type="toggle" default="1" label="TITLESPANS"/>


Le fait de l'avoir mis par défaut sur 1 active d'entrée la fonctionnalité, mais nous allons le vérifer.

Activer la fonction titlespans :

Pour activer la fonction dans gantry il suffit de switcher le bouton interrupteur :(cliquez pour agrandir)

active titlespans

Puis de sauver.

Vos titres ont désormais leur premier mot encadré dans une magnifique balise span.

Modifiez vos css :

Maintenant que nous avons une balise span qui différencie le pemier mot du reste du titre, il nous suffit d'appliquer des css afin de marquer visuellement cette différence.

 

h2 span {
    color: red;
}
h2 span:hover {
    color: darkred;
}


Par exemple... il convient d'adapter les css à chaque cas particulier.