Comment inclure un module article dans une page ?

[PhilJ]

Re : Comment inclure un module article dans une page ?

[...] ça fonctionne maintenant.

En effet c'est bien mieux... sauf lorsque la largeur d'écran descend en dessous de 980 px où des drapeaux nationaux parasites apparaissent (France, Royaume-Uni, Canada). Le souci peut peut-être se régler depuis le module (CarouselCK), ou bien, sinon, avec une directive CSS display: none.

[hervelam]

Re : Comment inclure un module article dans une page ?

Bien vu !
Ça, je sais pourquoi : à un moment, pour que le logo ne fasse "que" 200px de large en version mobile, j'avais mis ça dans mon @media only screen and (max-device-width: 979px) {
img {
width: 200px;
}
}

Va falloir que je trouve une autre manière de procéder.
Si vous avez une idée / bonne pratique, je suis preneur.

HervE

[PhilJ]

Re : Comment inclure un module article dans une page ?

Re,

Ça, je sais pourquoi : à un moment, pour que le logo ne fasse "que" 200px de large en version mobile, j'avais mis ça

@media only screen and (max-device-width: 979px) {
img {
width: 200px;
}
}

Je n'avais pas remarqué que les drapeaux étaient également dans les largeurs >= 980 px.

=> Votre définition de la largeur des images est ici beaucoup trop générale. Essayez plutôt ceci :

.fc_field_image {

width: 16px;
height: 11px;

}

même en dehors de tout @media.

[hervelam]

Re : Comment inclure un module article dans une page ?

Bonjour,

Essayez plutôt ceci :

.fc_field_image {

width: 16px;
height: 11px;

}

Non, parce que ça va mettre toutes les images passant par FlexiContent (classe "fc_field_image") en 16x11, c.à.d. certes les drapeaux, mais également les pochettes de disque et mes images animées sur les fiches.

Le pb c'est d'arriver, dans un CSS, à séparer les drapeaux des autres images, et je ne vois pas comment ?
(Car la classe est toujours la même = "fc_field_image".)

Ou sinon, je peux aussi prendre le pb par l'autre côté : arriver à séparer le logo des autres images, puisque c'est juste le logo que je veux, en version mobile, réduire à 200px de large. Mais je ne vois pas comment non plus : son affichage dans le template est encapsulé par Joomla, ce qui m'empêche de lui affecter une classe particulière il me semble (non ?)

Bonne nuit.
HervE

[hervelam]

Re : Comment inclure un module article dans une page ?

J'ai trouvé !!

Dans le CSS de mon template, au lieu de :
@media only screen and (max-device-width: 979px) {
img {
width: 200px;
}
}

j'ai mis :
@media only screen and (max-device-width: 979px) {
.brand.pull-left > img {
width: 200px;
}
}

Nickel.

(Y a pas moyen d'afficher du code bien formatté dans ce forum ?)

HervE

[PhilJ]

Re : Comment inclure un module article dans une page ?

Bonjour Hervé,

J'ai trouvé !!

Dans le CSS de mon template, au lieu de :
@media only screen and (max-device-width: 979px) {
img {
width: 200px;
}
}

j'ai mis :
@media only screen and (max-device-width: 979px) {
.brand.pull-left > img {
width: 200px;
}
}

C'est étrange, car cette classe .brand.pull-left > img ne concerne que l'image du logo ('japprecie' dans le Header). Rien à voir avec les images du module CarouselCK. Pour confirmation, si vous savez un peu utiliser Firebug : pointez sur .brand.pull-left > img et désactivez la propriété width: 200px;. => Le problème que vous avez rencontré n'existe pas davantage sans cette propriété. La seule différence est que votre logo 'japprecie' dans le Header est un peu plus grand (300 x 104, au lieu de 200 x 70).

Quant à la classe .fc_field_image, vérification faite, elle ne concerne en effet pas que les drapeaux. Elle ne concerne pas les pochettes de disques, qui ont une autre classe sur la p. d'accueil (voyez dans /components/com_flexicontent/templates/liste-cases/css/category.css, ligne 211), mais en effet elle affecte aussi les grandes images des pochettes sur les fiches. => Afin de différencier celles-ci de l'image des drapeaux, il faudrait utiliser ceci :

.lineinfo.line2 img.fc_field_image {
width: 16px;
height: 10px;
}

...applicable pour les drapeaux du module CarouselCK seulement.