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

[gorzak]

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

[lefabdu51]

Re : Changer la disposition des Détails des articles

regardes avec firebug et modifies les styles css en conséquence....

[gorzak]

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 ?

[lefabdu51]

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 ?

tu veut changer l'ordre dans lequel ils s'affichent ou les mettre sur une ligne?

[gorzak]

Re : Changer la disposition des Détails des articles

Les mettre sur une ligne

[lefabdu51]

Re : Changer la disposition des Détails des articles

Les mettre sur une ligne

Ca c est du CSS une propriété display:inline-block; a mettre sur le selecteur indiqué par firebug.....

[gorzak]

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

[ghazal]

Re : Changer la disposition des Détails des articles

Salut,

un petit tuto ?

Firebug : une merveille de plus pour Firefox

http://fr.openclassrooms.com/informatique/cours/firebug-une-merveille-de-plus-pour-firefox

[lefabdu51]

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

pour le nom de fichier: il est indiqué en bleu au dessus de chaque ensemble de regles css.

[gorzak]

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.

[Rajoz]

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 :

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

[gorzak]

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

[Rajoz]

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 :

• http://www.alsacreations.com/article...-partie-1.html
• http://www.alsacreations.com/tuto/li...-partie-2.html

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 :

<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

[gorzak]

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.

[240eric]

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>