[RÉGLÉ] histoire de media query

[FlodAriege]

Bonsoir,

Dernier soir des vacances, je vous embête une dernière fois avant longtemps

Je viens d'installer un plugin pour les sauts de page pagebreakmyjspace.

J'ai modifié le plus long article de mon site (et aussi le plus visité, avec derrière la tête l'espoir de réduire mon taux de rebond grâce à la pagination).

J'ai également modifié le css du plugin (enfin, j'ai ajouté des lignes dans mon custom.css) pour changer la couleur du titre du sommaire et quelques autres trucs, dont je suis plutôt contente et je dois remercier les contributeurs plus fervents du forum car grâce à leur aide, au fil du temps, j'ai appris à me débrouiller.

J'ai même réussi à créer une media query pour que les "box d'alerte" (les paragraphes sur fond coloré genre text-alert, text-info) change de largeur s'ils sont à côté de la table des matière du saut de page (qui occupe 25% de la largeur, et qui sinon obligeait les box à descendre plus bas dans la page là où ils peuvent s'exprimer sur toute la largeur).
Ca au départ c'est une classe que j'ai créée, puis dans la media query j'ai fait en sorte :
a) que la table des matières occupe toute la largeur sur les petits écrans de smartphone
b) que les box réduites à 75% repassent à 100% sur ces mêmes écrans.

Super !

" Où est le problème, alors, Flo ? "
(oui, je lis dans vos pensées )

Eh bien en affichage de blog de catégorie, quand seulement le début de l'article s'affiche (et pas la table des matières), mes box se retrouvent toutes riquiqui avec leur 75% de large...

J'aimerais donc pouvoir dire (en css, pas en klingon) que lorsque l'article s'affiche dans un blog de catégorie, la classe "ne dépasse pas 75%" ne doit PAS être respectée.

Sans une URL ce sera très compliqué à expliquer, d'autant que les positions sont définies par FlexiContent, donc, une URL :
Le blog de catégorie : http://www.rouchenergies.fr/articles.html
Dans lequel se trouve l'article concerné : http://www.rouchenergies.fr/articles...voltaique.html

(sûrement pas une très bonne idée de déposer ainsi mes url sur un site sans aucun rapport avec mon industrie, il faudra que je pense à les supprimer quand le problème sera résolu)

Quelques captures d'écran commentées :

http://prntscr.com/8ddvor

http://prntscr.com/8ddw39

http://prntscr.com/8ddwa6

Merci d'avance, car vu la complexité des classes qui s'empilent les unes sur les autres quand je regarde avec l'inspecteur, je ne suis pas sortie des ronces...

Allez, bonne nuit et @ bientôt

Flo

[FlodAriege]

Re : histoire de media query

Bonjour @ tout-te-s,

Je me permets un petit UP sur ce sujet : personne n'aurait une idée de comment je devrais m'y prendre ?
Suis pas assez calée pour y parvenir seule... ;(

Flo

[-Tony-]

Re : histoire de media query

Une idée facile.
Tu commentes dans ton fichier css tout ce qui a trait à :

 .box-toc-75{width:XX%;}

Dans ton index.php, avant </head> tu mets :

<?php if (JRequest::getCmd('view') == 'category') : ?><style type="text/css">ta règle pour l'affichage blog</style><?php endif; ?>
<?php if (JRequest::getCmd('view') == 'article') : ?><style type="text/css">ta règle pour les articles</style><?php endif; ?>

Tu peux faire également encore plus précis si besoin :

<?php if (JRequest::getCmd('view') == 'category' && JRequest::getVar('id') == 'XX') : ?><style type="text/css">blabla</style><?php endif; ?>
<?php if (JRequest::getCmd('view') == 'category' && JRequest::getVar('id') != 'XX') : ?><style type="text/css">blabla</style><?php endif; ?>
<?php if (JRequest::getCmd('view') == 'article' && JRequest::getVar('id') == 'XX') : ?><style type="text/css">blabla</style><?php endif; ?>
<?php if (JRequest::getCmd('view') == 'article' && JRequest::getVar('id') != 'XX') : ?><style type="text/css">blabla</style><?php endif; ?>

!= est différent de
== est égal à
|| ou

tu peux dire aussi

JRequest::getVar('Itemid') == 'XX'

********************************

Edit : ca va disparaitre aux mises à jour du template, il doit y avoir mieux à faire.

[FlodAriege]

Re : histoire de media query

Bonjour,

Merci pour ta proposition, mais de mon point de vue à moi, qui ne pompe absolument rien en php, c'était encore trop compliqué.

Heureusement, à force de bidouiller et de fouiller, j'ai fini par repérer un truc que je savais utiliser : une id.

Je ne sais toujours pas comment faire pour dire :
"lorsque qu'un élément (en l'occurrence il s'agit d'une div) affecté par la classe TRUC se trouve à l'intérieur d'une div elle-même affectée par la classe MACHIN, alors la règle est...".

Mais je sais écrire :
"lorsqu'une classe TRUC est affectée à n'importe quel machin situé à l'intérieur d'une ID MACHINCHOSE, alors la règle est..."

Et donc j'ai repéré que les intros d'articles, à l'intérieur d'un blog de catégorie FlexiContent, portait une ID : id="fc_bloglist_item_0" par exemple pour le premier.

J'ai donc ajouté la règle suivante à mon custom.css :

#fc_bloglist_item_0 .box-toc-75,
#fc_bloglist_item_1 .box-toc-75,
#fc_bloglist_item_2 .box-toc-75,
#fc_bloglist_item_3 .box-toc-75,
#fc_bloglist_item_4 .box-toc-75,
#fc_bloglist_item_5 .box-toc-75,
#fc_bloglist_item_6 .box-toc-75,
#fc_bloglist_item_7 .box-toc-75,
#fc_bloglist_item_8 .box-toc-75 {
	 width: 95% !important;
 }

J'aurais bien aimé éviter l'énumération, mais quand j'ai fait le test avec fc_bloglist_item_* sous firebug, ça n'a pas fonctionné...

En tout cas, j'obtiens le résultat recherché.

Bon dimanche.

Flo