Problème avec séparer les annonces et notes des autres sujets

[Laférosse]

Bonjour, j'ai coché séparer les annonces et notes des autres sujets. A l'affichage les notes/annonces et sujets, il n'apparait aucune séparation. De plus, j'ai cette entête (noire) seulement sur annonces et notes.
J'aimerai séparer les notes/annonces des sujets avec éventuellement, un trait. De même, est-il possible, de mettre une image de mon choix pour la séparation à la place d'un simple trait ? Merci par avance.

[Toryudo]

Bonjour !
En effet, je vois que le code prévu pour cette option de séparation des annonces des autres sujets n'existe pas dans le Template "topics_list_box" par défaut de AwesomeBB. Mais bonne nouvelle, il est possible de l'ajouter directement dans le Template ! Positionnez-vous juste entre <!-- END table_sticky --> et <div class="posts-section"> et ajoutez le code suivant pour qu'une image sépare les annonces des autres sujets :

Code:

<!-- BEGIN line_sticky --><img src="votre_image_ici" alt="" style="display: block; margin: auto;" /><!-- END line_sticky -->

Plus qu'à remplacer votre_image_ici par l'adresse de votre image, à valider les modifications du Template et le tour est joué !

[Laférosse]

Bonjour Toryudo. Merci beaucoup, ça fonctionne. Par contre, j'ai un problème sur l'apparence. Pouvez-vous m'indiquer comment faire un espace (la barre est collée). Sur annonces et notes l y a toujours l'entête noir mais pas sur les sujets ?? Difficile de voir la transition entre les deux même avec une barre de séparation.  
Si c'est possible, je voudrai juste indiquer "Notes et annonces et ensuite "Sujets" sans cet encart noir, sinon autant laisser en tableaux et je trouve que visuellement cela fait lourd. Merci.

[Toryudo]

Vous pouvez rajouter tous les éléments que vous voulez entre les balises <!-- BEGIN line_sticky --> et <!-- END line_sticky --> ; du texte, un titre, des espaces, vraiment tout. Par exemple, vous pouvez modifier le margin: auto; en margin: 20px auto; pour ajouter une marge au-dessus et en dessous de l'image :

Code:

<!-- BEGIN line_sticky --><img src="votre_image_ici" alt="" style="display: block; margin: 20px auto;" /><!-- END line_sticky -->

Et si vous voulez ajouter du texte, vous pouvez également rajouter une balise <h2>Sujets</h2>. Tant que c'est entre les deux balises, vous pouvez mettre tout ce que vous voulez !

[Laférosse]

Merci, j'ai mis les marges. par contre je n'ai pas compris comment supprimer le fond noir sur annonces et notes ainsi qu'ajouter sujets, tel que c'est présenté en temps normal.

icone+sujets          ...espace....               icone réponses      ...espace... icone nombres de vues      ...espace...           icone+derniers messages

[Toryudo]

Mais rajouter une ligne "Sujets", ça revient à faire une séparation par tableau, non ? Je ne suis pas sûr de comprendre la différence entre ce que vous voulez et cette option de "séparation par tableau", parce qu'elle apparait par défaut comme ceci chez moi :




Pour le fond noir par contre, deux solutions possibles :
- soit vous changez la couleur qui correspond à "Couleur de fond des en-têtes de section" (dans le Panneau d'administration > Affichage > Images et Couleurs, Couleurs & CSS)
- soit vous ajoutez ce petit CSS personnalisé pour changer la couleur directement :

Code:

.posts-header {
  background-color: blue !important;
}

[Laférosse]

Je n'ai pas cet affichage, (vous me montrez l'affichage tableau)  voir mon screen svp. Rien n'indique chez moi le titre "sujets", seule, figure la barre de séparation ajoutée dans le template. En tableau pas vraiment, puisque je veux supprimer le fond noir. Illogique que sur les annonces et notes figurent le nombre de réponses, de vues.....et pas sur les sujets.  Donc, est-il possible de mettre le titre sujet avec les intitulés tels qu'ils figurent sur les annonces et notes et surtout sans de bloc noir ou de couleur peu importe laquelle, en fond ? Merci.

[Toryudo]

Donc, vous cherchez les BEGIN line_sticky et END line_sticky que nous avions rajouté lors de votre demande initiale et vous le remplacez par ce code qui, comme vous le demandez, rajoute une ligne sujet :

Code:

    <!-- BEGIN line_sticky -->
</div><!-- <div class="posts" /> -->
<div class="posts">
    <div class="posts-header">
        <h2 class="posts-title">
            <i class="material-icons">description</i>
            <span>Sujets</span>
        </h2>
        <div class="posts-statistics-header">
            <span class="posts-statistics-header-replies">
                <i class="material-icons" data-tooltip="Réponses">forum</i>
            </span>
            <span class="posts-statistics-header-views">
                <i class="material-icons" data-tooltip="Vues">remove_red_eye</i>
            </span>
        </div>
        <div class="posts-lastpost-header">
                <i class="material-icons">watch_later</i>
                <span>Derniers Messages</span>
        </div>
    </div>
    <!-- END line_sticky -->

Et ensuite, comme donné dans mon message précédent, vous ajoutez ce CSS pour retirer la couleur noir (la remplacer en rouge par exemple) :

Code:

    .posts-header {
  background-color: red !important;
}

[Laférosse]

Bonjour, je désire juste les titres annonces/notes et sujets séparés par un trait, éventuellement une image perso de séparation, sans aucun blocs de couleur. ni rouge, ni bleu, ni arc en ciel. Merci.

??? Je me retrouve comme avec l'option tableau ?? Aucun trait de séparation ? Toujours avec la couleur ?

[Toryudo]

Désolé, j'ai beau relire tous vos messages depuis le début, je ne comprends pas votre demande. Je passe mon tour et redonne la main à d'autres personnes.

[Milouze14]

Hello crocnana et Toryudo,

Bonjour !
En effet, je vois que le code prévu pour cette option de séparation des annonces des autres sujets n'existe pas dans le Template "topics_list_box" par défaut de AwesomeBB.

est-ce une coincidence, mais en regardant dans le dit template je vois qu'une div est belle est bien présente pour la séparation Toryudo :

Code:

<!-- BEGIN line_sticky -->
   <div class="sticky-separator posts-header"></div>
   <!-- END line_sticky -->


L'apparence est sympa :





Et qui plus est paramétrable via la CSS:

Code:


.sticky-separator.posts-header
{

}




a++

[Laférosse]

Bonsoir, d'accord Toryudo, si une autre personne veut bien m'apporter son aide. Milouze, j'ai l'impression que cette modif est très récente. Bizarre, pour ma part ce n'était pas paramétrable avec une simple barre de séparation à la création de ce sujet, d'ailleurs, confirmé par Toryudo plus haut.
J'ai essayé de faire une maquette comme j'ai pu pour préciser ma demande, c'est peut-être plus parlant. Merci.

[Milouze14]

Re,
c'est possible que ce soit récent, je ne peux te dire , désolé.
As tu personnalisé le template topics_list_box:
Affichage/Templates/Génèral/topics_list_box


a++

[Laférosse]

Je n'ai pas personnalisé ce template.

[Milouze14]

Re,
hum étonnant car tu devrais avoir le résultat escompté ,
As tu testé ceci via ton P.A:

Génèral/Messages et Emails/Configuration/Sèparer les annonces et notes des autres sujets :
Coches
Oui
Par une ligne

a++

[Laférosse]

Oui, je viens de tester.
J'ai ceci (comme tu l'as montré dans le screen)


et moi j'aimerai avoir ceci

[Laférosse]

Dans ton screen l'intitulé sujet ne figure pas et de plus il y a cet encart de couleur derrière l'intitulé annonces&notes. Je ne veux pas de couleur derrière les intitulés.

[Milouze14]

Hello crocnana,
alors tu ne veux aucun fond , il faut respecter strictement ton screen ?



Si c'est ton souhait, ce style a déposer dans ta feuille de style devrait fonctionner :

Code:


.posts .posts-header:not(.sticky-separator)
{
background-color:transparent!important;
box-shadow:none!important;
}
.posts .posts-header h2,.posts .posts-header .material-icons,.posts .posts-header span
{
color:black!important;

}

.posts .sticky-separator.posts-header
{
 background-color:red!important;
}
.posts .posts-section
{
 background-color:transparent!important ;
}



a++

[Laférosse]

Bonjour, merci Milouze. Voici le résultat (en cochant "séparation par ligne dans le PA).



- Il manque le titre "sujet".
- Je voudrai garder la couleur de fond (j'ai trouvé, il faut supprimer le background-color transparent)
- j'aimerai stp une marge plus importante de la barre de séparation(elle est trop collée).
- Est-il possible de mettre une image de mon choix en remplacement de la barre ?
- Si je garde la barre de séparation, j'aimerai qu'elle soit plus fine.

Encore merci.

[Milouze14]

Hello crocnana,
alors je vais y aller progressivement car le temps me manque .

Pour afficher l'identique et en l'occurence l'intitulé "Sujets" on va utiliser un script:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur les sous forums
Déposes ceci:

Code:

$(function(){
var a=$('.sticky-separator.posts-header').length;
if(a)
{
$('.sticky-separator.posts-header').after('<div class="posts-header"><h2 class="posts-title"><i class="material-icons">star</i><span>Sujets</span></h2><div class="posts-statistics-header"><span class="posts-statistics-header-replies"><i class="material-icons" data-tooltip="Réponses">forum</i></span><span class="posts-statistics-header-views"><i class="material-icons" data-tooltip="Vues">remove_red_eye</i></span></div><div class="posts-lastpost-header"><i class="material-icons">watch_later</i><span>Derniers Messages</span></div></div>');   
  }
});

Penses a cliquer sur le bouton

Pour espacer la ligne , tu peux ajouter un margin sur cette class:
Et joue avec la valeur 20 comme tu le souhaites .

Code:

.posts .sticky-separator.posts-header
{
 background-color:red!important;
  margin:20px 0px 20px 0px;
}

Je vois le reste demain .

a++

[Laférosse]

Bonjour Milouze, merci beaucoup. Ce n'est pas urgent et je trouve qu'avec ton aide ma demande a déjà bien avancée.

[Milouze14]

Hello crocnana,

alors pour ces demandes:

- Est-il possible de mettre une image de mon choix en remplacement de la barre ?
- Si je garde la barre de séparation, j'aimerai qu'elle soit plus fine.

Il vaut mieux garder cette barre et si tu souhaites diminuer la hauteur ,
tu peux ajouter à cette class:

Code:

.posts .sticky-separator.posts-header
{
 background-color:red!important;
  margin:20px 0px 20px 0px;
}


un padding à 1px , comme ceci:

Code:

.posts .sticky-separator.posts-header
{
 background-color:red!important;
  margin:20px 0px 20px 0px;
padding:1px!important;
}


a++

[Laférosse]

Bonjour Milouze, c'est parfait. Un énorme merci pour ton aide.