[CSS] Modifier le rendu de la galerie

Bonjour,

Un petit article pour la mise en forme des images des galeries d'images.

Pour information, les galeries d'images dans Eklablog sont gérées par cerabox.

Sur clic sur une image de la galerie, l'image s'affiche dans un élément div d'identifiant « cerabox ».

Affichage des images d'une galerie

Non visible sur ce schéma : un élement « div » de classe « cerabox-content-protection » qui recouvre l'image.

Pour modifier le rendu, le code CSS  est à écrire dans « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Ajouter « !important » à chaque attribut pour forcer sa priorité.

Par exemple :

Pour afficher la légende sous l'image et non pas dessus :
.cerabox-title { position:relative !important;}

Le fond du blog est opaque à 50%, il est possible d'augmenter l'opacité (0.9 dans l'exemple, doit être compris entre 0 et 1) :
#cerabox-background {opacity:0.9 !important;}

On peut également ajouter des bordures :
.cerabox-content { border:4px solid black !important; }
.cerabox-title { border:2px solid black !important; }

Pour « protéger » les images (la protection est sommaire et empêche juste le click droit => enregistrer sous) :
.cerabox-content-protection { display:block !important;}