mercredi, 28 septembre 2011 07:24

Définir un cadre autour du module AllEvents

Écrit par 
Évaluer cet élément
(0 Votes)

border-imageHier, je cherchais à mettre le module AllEvents plus en évidence sur le site de mon village (Racour.be) et je me suis servi d'une double-astuce.

1. Utilisation de CSS3 pour mettre une image comme bordure

Le site border- image generator permet immédiatement de comprendre de quoi il s'agit : vous spécifiez une image et vous déplacez quatre règles.  Le résultat est immédiatement affiché en dessous. 

Il faut utiliser une image de type "cadre" c'est-à-dire un cadre, un rectangle, un tableau, ... n'importe quoi qui permet de définir une zone supérieure, gauche, droite et inférieure.    L'image que j'ai utilisée est frame_border.png

2. Insertion d'un code avant et après le module

Après avoir défini votre CSS grâce à border-image generator vous devez allez dans l'édition du module AllEvents que vous souhaitez mettre en évidence. 

Dans les paramètres avancés du module, vous avez un onglet "Textes" avec entre autre deux zones : "Texte d'introduction" et "Texte de conclusion".

L'astuce est toute simple; il faut juste définir un <div> stylisé dans texte d'introduction et un </div> dans texte de conclusion.

Ci-dessous le code que j'ai mis comme texte d'introduction.

<div style="border-width:18px 35px 18px 20px;>-moz-border-image: url(images/frame_border.png) 18 35 18 20 repeat; -webkit-border-image: url(images/frame_border.png) 17 30 15 14 repeat; -o-border-image: url(images/frame_border.png) 17 30 15 14 repeat; border-image: url('/images/frame_border.png') 17 30 15 14 repeat;">

Définir un cadre autour du module AllEvents

Informations supplémentaires

  • Package Free: Ce billet concerne le package Free et est donc immédiatement disponible dans la version gratuitement téléchargeable de AllEvents.
Lu 1063 fois Dernière modification le dimanche, 04 mars 2012 18:27
Christophe

Christophe -Développeur de :

  • aeSecure; logiciel de protection de sites web Apache (Joomla, WP, Drupal, ...) http://aesecure.com
  • AllEvents; gestionnaire d'évènements pour Joomla

 

Site internet : allevents.avonture.be
Connectez-vous pour commenter. Attention, merci de ne pas poster des questions : veuillez utiliser le forum pour cela svp.