histoire de media query

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] histoire de media query

    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 :





    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
    Dernière édition par FlodAriege à 13/09/2015, 13h21 Raison: résolu
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    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
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

    Commentaire


    • #3
      Re : histoire de media query

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

      Code:
       .box-toc-75{width:XX%;}
      Dans ton index.php, avant </head> tu mets :

      Code:
      <?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 :

      Code:
      <?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.
      Dernière édition par -Tony- à 12/09/2015, 17h31

      Commentaire


      • #4
        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 :

        Code:
        #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
        Flo, Ariège

        Il n'y a que celui qui a honte d'apprendre qui a peur de demander

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X