Changer la disposition des Détails des articles

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

  • [Problème] Changer la disposition des Détails des articles

    Bonjour, j'ai fait une surcharge de com_content/article/default.php dans le but de mettre les détails d'un article sur une ligne plutôt que les un au dessous des autres

    la surcharge fonctionne comme il faut, mais je n'arrive pas à comprendre le code, et à trouver comment déplacer les items.

    Si vous avez des idées je suis preneur.
    MErci
    Donnez vie à vos idées ! http://theidea.legtux.org

  • #2
    Re : Changer la disposition des Détails des articles

    regardes avec firebug et modifies les styles css en conséquence....
    Mon site en cours de construction avec de nouvelles catégories de documents...
    https://informaticien51.fr

    Commentaire


    • #3
      Re : Changer la disposition des Détails des articles

      Heu ... j'ai un peu toucher aux css dans le passé, mais là je vois pas comment changer la disposition de ce texte, via le fichier css.
      J'ai pas réussi à trouver son emplacement déjà, mais quand bien même, je pourrais modifier la police à la rigueur, mais la disposition ?
      Donnez vie à vos idées ! http://theidea.legtux.org

      Commentaire


      • #4
        Re : Changer la disposition des Détails des articles

        Envoyé par gorzak Voir le message
        Heu ... j'ai un peu toucher aux css dans le passé, mais là je vois pas comment changer la disposition de ce texte, via le fichier css.
        J'ai pas réussi à trouver son emplacement déjà, mais quand bien même, je pourrais modifier la police à la rigueur, mais la disposition ?
        tu veut changer l'ordre dans lequel ils s'affichent ou les mettre sur une ligne?
        Mon site en cours de construction avec de nouvelles catégories de documents...
        https://informaticien51.fr

        Commentaire


        • #5
          Re : Changer la disposition des Détails des articles

          Les mettre sur une ligne
          Donnez vie à vos idées ! http://theidea.legtux.org

          Commentaire


          • #6
            Re : Changer la disposition des Détails des articles

            Envoyé par gorzak Voir le message
            Les mettre sur une ligne
            Ca c est du CSS une propriété display:inline-block; a mettre sur le selecteur indiqué par firebug.....
            Mon site en cours de construction avec de nouvelles catégories de documents...
            https://informaticien51.fr

            Commentaire


            • #7
              Re : Changer la disposition des Détails des articles

              Ja galère pas mal quand j'utilise firebug, comment savoir quel fichier est afficher dans la fenêtre à droite, la css,e t où trouver ce fichier.

              Merci
              Donnez vie à vos idées ! http://theidea.legtux.org

              Commentaire


              • #8
                Re : Changer la disposition des Détails des articles

                Salut,

                un petit tuto ?

                Firebug : une merveille de plus pour Firefox
                http://fr.openclassrooms.com/informa...s-pour-firefox
                “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                Commentaire


                • #9
                  Re : Changer la disposition des Détails des articles

                  Envoyé par gorzak Voir le message
                  Ja galère pas mal quand j'utilise firebug, comment savoir quel fichier est afficher dans la fenêtre à droite, la css,e t où trouver ce fichier.

                  Merci
                  pour le nom de fichier: il est indiqué en bleu au dessus de chaque ensemble de regles css.
                  Mon site en cours de construction avec de nouvelles catégories de documents...
                  https://informaticien51.fr

                  Commentaire


                  • #10
                    Re : Changer la disposition des Détails des articles

                    Merci pour votre aide.
                    J'ai tester dans firebug mais je n'arrive pas a comprendre comment je pourrais tout mettre sur une ligne. Je peux changer la marge, la couleur, l'espacement entre les lignes, mais pas déplacer les données.
                    J'aurais penser que c'était dans un fichier php.
                    Donnez vie à vos idées ! http://theidea.legtux.org

                    Commentaire


                    • #11
                      Re : Changer la disposition des Détails des articles

                      Bonjour gorzak,

                      Si le template est Protostar tu peux essayer de mettre à la fin de templates/protostar/css/template.css le code CSS suivant :

                      Code:
                      dl.article-info { display: inline-block; }
                      dl.article-info:after { display: block; clear: both; content: '.'; visibility: hidden; }
                      dl.article-info dd { float: left; }
                      Ce CSS devrait facilement pouvoir être adapté pour un autre template.

                      Amicalement,
                      Rajoz

                      Commentaire


                      • #12
                        Re : Changer la disposition des Détails des articles

                        Super ! Merci Rajoz ça fait exactement ce que je cherchais.

                        Si ça te dérange pas je veux bien l'explication de ce que ça fait, pour me coucher moins bête, et pour voir gérer le reste, j'aurais bien les étoiles content_rating je crois, sur la même ligne, avec
                        Donnez vie à vos idées ! http://theidea.legtux.org

                        Commentaire


                        • #13
                          Re : Changer la disposition des Détails des articles

                          Bonjour gorzak,

                          Je peux changer la marge, la couleur, l'espacement entre les lignes, mais pas déplacer les données.
                          CSS permet aussi d'intervenir sur le positionnement des données. Lire les deux parties de ce tutoriel qui explique le positionnement avec CSS :
                          Le point de départ c'est le code HTML source que l'on obtient via Firebug, l'inspecteur d'élément de Chrome, la commande Afficher le code source de la page, etc.. En faisant un peu de ménage cela donne le code suivant pour l'affichage des infos de l'article :
                          Code HTML:
                          <dl class="article-info">
                              <dt class="article-info-term">Détails</dt>
                              <dd class="createdby">Écrit par Rajoz</dd>
                              <dd class="category-name">Catégorie : Test</dd>
                              <dd class="published"><span class="icon-calendar"></span> Publication : 23 mars 2014</dd>
                              <dd class="hits"><span class="icon-eye-open"></span> Affichages : 28</dd>
                          </dl>
                          <p>Texte de l'article</p>
                          La première chose pour mettre les <dd>...</dd> qui sont sous le <dl> de classe article-info sur la même ligne c'est de les faire "flotter" vers la gauche avec le CSS dl.article-info dd { float: left; }. L'élément dl.article-info dd correspond à "tous les <dd> qui sont enfants du <dl> de classe article-info". La notion de flux et de float est bien décrite dans le tutoriel indiqué.
                          Le problème en faisant ça c'est que la suite de l'article qui elle n'est pas en float va venir s'insérer en parallèle du flux des <dd>. C'est particulièrement visible quand on réduit la largeur de la page (ou sur smartphone).

                          Pour résoudre ce problème, il faut d'abord modifier le <dl> de classe article-info :
                          dl.article-info { display: inline-block; } --> les éléments vont s'afficher à la fois comme s'ils étaient de type block et de type inline. Cela permet de résoudre une partie des difficultés liées au float précédent.

                          Il faut ensuite faire le ménage comme s'il n'y avait pas eu de float:left ni de display:inline-block avant l'affichage de l'article et même renforcer la séparation avant l'article. Pour cela on va utiliser l'élément dl.article-info:after qui correspond à "après le </dl> dont le <dl> est de classe article-info", donc juste avant l'article :
                          • display:block; : remet le <dl> en mode block comme il l'était avant les modifications.
                          • clear:both; : annule les effets des float
                          • content:'.'; visibility:hidden; : ajoute un contenu (ici un point) qui sera caché (hidden). Cela permet de mettre quelque chose, même non visible, entre le <dl></dl> et l'article. Cela renforce la séparation entre les deux.

                          J'espère avoir été assez clair. Au moins je suis sûr que le tutoriel indiqué l'est

                          Amicalement,
                          Rajoz

                          Commentaire


                          • #14
                            Re : Changer la disposition des Détails des articles

                            Merci beaucoup pour ton explication ! Je pense avoir compris,j e ferrais des essais pour être sûr, et je vais tenter de faire la même chose pour les étoile de vote.
                            Donnez vie à vos idées ! http://theidea.legtux.org

                            Commentaire


                            • #15
                              Re : Changer la disposition des Détails des articles

                              Bonjour,
                              j'utilise Masonry pour mes item ...

                              Dans fetured > default .php

                              <div id="masonry">
                              <?php foreach ($this->intro_items as $key => &$item) : ?>

                              <?php
                              $key = ($key - $leadingcount) + 1;
                              $rowcount = (((int) $key - 1) % (int) $this->columns) + 1;
                              $row = $counter / $this->columns;

                              if ($rowcount == 1) : ?>

                              <?php endif; ?>
                              <div class="items-row column-<?php echo $item->state == 0 ? ' system-unpublished' : null; ?> span<?php echo round((12 / $this->columns));?> box left">
                              <article class="Arts-item">
                              <?php
                              $this->item = &$item;
                              echo $this->loadTemplate('item');
                              ?>
                              </article>
                              </div>
                              <?php $counter++; ?>

                              <?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>

                              <?php endif; ?>

                              <?php endforeach; ?>


                              <?php endif; ?>
                              </div>

                              Pour le JS :
                              <script>
                              window.onload = function() {
                              var wall = new Masonry( document.getElementById('masonry') );
                              };
                              </script>
                              Créateur de Classe A , pour Audiophile.
                              Concepteur de Robotique Industrielle.
                              Radio Amateur F5
                              Créez votre thème avec la suite Arts-Soft : http://arts-soft.com/

                              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