[RÉGLÉ] Article en pop-up : forcer une marge ?

[RobertG]

Bonjour,

Je suis en train de tenter de passe mon site de couteaux en version 4, et le module JA Image Hotspot n'étant pas disponible, j'essaie d'autres solutions dont celle d'un descriptif permettant d'afficher l'article correspondant en pop-up.
Je n'ai pas de problème (affichage de type Mediabox) pour l'affichage lui-même, mais dans la fenêtre, l'article n'a aucune marge, et j'ai beau chercher, je ne vois pas comment en définir une qui ne s'applique qu'aux fenêtres pop-up.
Un exemple sur cette page (cliquer sur le lien "Test article en pop-up") https://les-couteaux.de-ergé.fr/cate...oir-mural.html (sur la version 3 de Joomla!, le test sur la 4 se faisant en local).

Merci de votre aide !
Robert

[lefabdu51]

bonjour tout le monde , ca fait un petit moment que je n ais pas fait de réponses...

Augmenter la marge autour de ton article:
.wf-mediabox-container { margin: 10px 10px 10px 10px;}
et la tu as le conteneur global
pour le conteneur du contenu, il s'agit d'une modale, donc une page complète.
la classe de base
body.modal {margin: 15px; }
et si tu vise un élément en particulier sur cette page suit les meme regles CSS que pour un article standard.

[Helloo]

Bonjour,

Ajouter dans le custom.css

.wf-mediabox-container {
padding: 30px !important;
}

[RobertG]

Bonjour et merci à vous deux !

Problème, ce qui fonctionne en mode inspecteur sur le site ne ligne ne fonctionne plus en mode "custom.css", quel que soit le template essayé.
Si j'applique ces codes dans l'inspecteur, j'ai bien ma couleur de fond, celle du texte et la marge, mais dès qu'ils sont dans le fichier custom.css, bien que ce fichier soit bien chargé, ils ne sont pas appliqués :

body.modal {
background-color: black !important;
color:white !important;
margin:20px;
}

Et sur le site V4 en local (template basé sur Astroid), la classe à personnaliser est "contentpane component astroid-device-xl". Elle n'est pas définie dans colonne "règles" de l'inspecteur. Si j'applique la marge dans la partie "element" de cette colonne, elle s'applique.
J'ai ajouté cette règle dans la zone de code personnalisé du style du template et enfin réussi !

body.contentpane.component.astroid-device-xl{padding:20px;}

J'ai beaucoup de choses à apprendre ou réapprendre sur ce plan ! Et moi qui préférais les templates sans Framework, je suis complètement perdu avec Cassiopeia et sa feuille de style template.css avec ses dizaines d'instructions dont je me demande à quoi elles servent...

Merci encore !