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....

    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?

        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.....

            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
                Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                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.

                  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
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X