La chronique d'alain01 revient enfin, tout juste avant les vacances d'été pour vous présenter un nouveau tutoriel, qui je l'espère, vous plaira.
Il s'agit d'ajouter un air beaucoup plus moderne, + design, + pro, Ã vos photos, notamment dans vos articles.
Et cela tombe plutôt bien, avec les photos de vacances que vous aller bientôt publier, non ? 
En fait, nous allons nous donner la possibilité d'ajouter un cadre blanc avec un effet d'ombre sur les photos (et images).
  Voici le résultat : photo + cadre photo blanc + ombre portée en bas à droite
Avant ======> Après !
Allez, c'est parti pour ce tutorial :
1) Ajout d'un éléments dans le fichier css
Récuperez votre fichier style.css de votre thème,
généralement situé sous : /themes/montheme/css ou /themes/montheme
Editez donc le fichier style.css
et ajoutez à la fin du fichier, ce code :
img.img-cadre {
/* Couleur ombre de la photo */
box-shadow: 5px 5px 20px #404040;
/* Effet cadre vielli, pour photo noir et blanc style ancien */
/* border-color: #f5eac7; */
border-color: #ffffff;
border-style: solid;
border-width: 20px;
display: block;
margin-l;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
puis replacez-le sur votre site, au bon endroit.
Vous avez fait le plus compliqué. Et oui !!!
2) Vidage du cache de votre navigateur
Important, si vous ne le faîtes pas, vous ne verrez pas cette classe dans la liste des classes disponibles.
A faire uniquement la toute première fois.
3) Utilisation de cette nouvelle classe lors d'un ajout de photo
3a) Editeur Simple (Textarea)
Voir 3b)
3b)Editeur XOOPS (DHTMLTextarea)
En bbcode, cela ne fonctionnera pas. On ne peut pas ajouter de classe ne bbcde.
Si c'est un bloc personnalisé, vous pouvez choisir pour le "Type de contenu" dans la liste le "Code HTML".
Ensuite vous insérer votre image :
<img src="http://www.monsite.fr/mon_image.png" class="img-cadre" />
3c) TinyMCE (v3)
- Cliquez sur le bouton "insérer une image",
- Renseignez les champs "URL de l'image", "Description de l'image" et "Titre",
- Allez dans l'onglet nommé "Apparence" et choisissez pour le champs "classe", dans la longue liste déroulante la valeur "img-cadre" puis validez
3d) TinyMCE v4 (Bientôt, peut-être car en phase d'intégration, actuellement...)
- Cliquez sur le bouton "insérer une image",
- Renseignez les champs sources et "Description de l'image",
- Allez dans l'onglet Avancé et et choisissez pour le champs "classe", dans la longue liste déroulante la valeur "img-cadre" puis validez
Ne fonctionne pas...
Alors, facile, non ?
N'hésitez pas à tester de votre côté !!!
Pour allez plus loin :
- On peut modifier la couleur du cadre (ici blanc), par une couleur "jaunâtre" qui fait style vieille photo
- On peut modifier la couleur de l'ombre
- On peut orienter l'ombre dans une autre direction que bas + droite
- On peut jouer sur l'épaisseur de l'ombre
- Enfin, on peut ajouter des effets dynamiques (zoom agrandissant par exemple) mais attention de ne pas dénaturer votre site web avec un peu trop de fioritures !
Si vous avez aimé ce tutoriel, faîtes-le nous savoir !
|
![http://www.monsite.fr/mon_image.png"](http://www.monsite.fr/mon_image.png"){kind=link}