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 :

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

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

    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

        Commentaire

        Annonce

        Réduire
        1 sur 2 < >

        C'est [Réglé] et on n'en parle plus ?

        A quoi ça sert ?
        La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

        Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

        Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
        Comment ajouter la mention [Réglé] à votre discussion ?
        1 - Aller sur votre discussion et éditer votre premier message :


        2 - Cliquer sur la liste déroulante Préfixe.

        3 - Choisir le préfixe [Réglé].


        4 - Et voilà… votre discussion est désormais identifiée comme réglée.

        2 sur 2 < >

        Assistance au forum - Outil de publication d'infos de votre site

        Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

        Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

        Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

        UTILISER À VOS PROPRES RISQUES :
        L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

        Problèmes connus :
        FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

        Installation :

        1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

        Archive zip : https://github.com/AFUJ/FPA/zipball/master

        2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

        3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

        4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

        5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

        6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
        et remplacer www. votresite .com par votre nom de domaine


        Exemples:
        Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/
        Pour executer le script: http://www..com/fpa-fr.php

        Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/cms/
        Pour executer le script: http://www..com/cms/fpa-fr.php

        En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

        Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
        Voir plus
        Voir moins
        Travaille ...
        X