[commande codage - Terminé] Catégories

Coucou ^^

> Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) : catégories

> Pour quel forum : forum de test https://rpgss-test.forumactif.com

> Maquette graphique/schéma/croquis :



> Informations utiles (couleurs, images, etc, …) : je pense avoir inscrit tout le nécessaire dans le schéma.
Je ne suis pas encore certain des couleurs définitives, j'ajusterais ensuite (j'accepte les suggestions ^^ )
Pour le vava du dernier posteur (la petite image à droite) j'aimerais un filtre sépia qui disparait au passage de la souris sur n'importe quel endroit du bloc forum.
Du coup, je serais aussi tenté qu'on essaie le truc qui permet d'avoir l'index différent du reste (un exemple pour le tuto ^^ )

> Le code pourra-t-il être mis en libre service ensuite ? oui

> forum en ModernBB

Hello (essaie d'y penser la prochaine fois C'est plus agréable ^^)

Je vais prendre en charge ta commande.
Tu n'as pas de description de forum ? Ou elle est sous l'image de gauche ?
L'image de gauche est différente pour chaque forum ? Pareil pour le titre de catégorie c'est juste une image ?

A bientôt

Coucou,

Je voulais le mettre après avoir posté mais je peux pas éditer mon message

Pas de description effectivement, les titres sont suffisamment parlant et on a des post it par section.

Les images sont différentes à chaque fois oui.

Mici ^^

*** Un Ange passe... ***

C'est corrigé pour l'édition :p (merci de l'avoir signalé)

Ah oui c'est sûr si c'était pas permis

J'ai commencé : https://maven-test.forumactif.com

Il me reste à :
> rendre paramétrable l'image des forums
> retirer l'image des titres de catégorie dans le fil d'ariane dans les forums
> faire pour que le style ne se mette pas dans les forums.

Je continuerai demain.
Au niveau du style de base, ça te convient ?

Coucou,

Ça m'a l'air pas mal

Juste, possible de faire en sorte que le bloc de contenu soit centré par rapport à l'image des forums ?
Et lorsque le dernier message passe sur 4 lignes, une marge se fait sous le vava.
Et retirer la bordure du vava.

Mici

Juste, possible de faire en sorte que le bloc de contenu soit centré par rapport à l'image des forums ?

Je n'ai pas comprit

Et lorsque le dernier message passe sur 4 lignes, une marge se fait sous le vava.

Je viens d'ajouter un overflow pour mettre un scroll au besoin mais je ne vois pas ce que tu veux dire

Il n'y a pas de bordure sur l'avatar c'est le mien qui en a une

Mäven a écrit:

Juste, possible de faire en sorte que le bloc de contenu soit centré par rapport à l'image des forums ?

Je n'ai pas comprit

A cette endroit, je pense qu'il suffirait de baisser l'image.

\"Mäven a écrit:

Et lorsque le dernier message passe sur 4 lignes, une marge se fait sous le vava.

Je viens d'ajouter un overflow pour mettre un scroll au besoin mais je ne vois pas ce que tu veux dire

Ou réduire un peu la police ?

C'est réglé pour la petite disymétrie qu'il y avait en hauteur.

Ou réduire un peu la police ?

Attention, en dessous de 12px c'est difficile à lire..

Tu pourrais me montrer ou ça passe sur 4 lignes ?
PArce que vu les espaces qu'il y a ça m'étonne que ça dépasse du bloc...

EDIT : j'ai continué un peu :

> faire pour que le style ne se mette pas dans les forums :: OK
> retirer l'image des titres de catégorie dans le fil d'ariane dans les forums :: OK

Avec l'overflow le décalé est réglé.

Ca m'a l'ait impec tout ça

Edit : question annexe, avec le truc qui ne les met que sur l'index, je suppose qu'on faite l'inverse et mettre un format spécial sur les autres pages ?

Coucou

je n'ai pas comprit ta question

Mais on peut tout à faire faire 2 codages différents si c'est ça que tu demandes =)

EDIT : j'ai normalement terminé toute la commande
J'attends que tu me donnes ton avis et tes remarques =)

Coucou,

Oui c'était ça la question ^^
Je verrais si j'ai besoin d'un 2nd codage ensuite

Tout m'a l'air parfait. J'aurais peut-être des remarques à l'installation mais rien pour le moment.
Merci

Alors c'est parti pour l'installation =)

On va essayer d'y aller pas à pas

D'abord, le template. Ici tu n'as rien à changer

Tu peux le remplacer intégralement par ceci :



Ici on va avoir 2 javascripts. Penses à bien les nommer de manière à te souvenir de ce qu'ils font

D'abord, à appliquer sur l'index uniquement : c'est le JS qui va gérer l'affichage des différentes images des forums.
En gros on va aller appliquer un id différent à chacun et c'est en CSS qu'on mettra les images.


Et le JS qui va gérer quel affichage de catégorie on veut :




Voilà la CSS à mettre
Si ça n'est pas déjà mis, il faut que tu ajoutes ceci en haut de la CSS :

Code:

*{
  box-sizing: border-box;
}


Tu peux également y mettre ceci (ça ne sera visible qu'aux personnes allant dans la CSS et comme ça te te souviendra où tu l'as eu :

Code:


/***********************************************/
/*            Codage catégories              */
/*            Et barre de navigation          */
/*            Réalisé par  Mäven            */
/* https://tambouille-raleuses.forumactif.com/ */
/*                                            */
/***********************************************/


Puis tu peux coller ceci

Code:

/***** DEBUT CATEGORIE SUR L'INDEX****/
.introduction ~ .categorie{
  width: 1000px;
  background: #c0c0c0;
  margin:auto;
}
.introduction ~ .categorie .titreCategorie,
.introduction ~ .categorie .titreCategorie img{
  width:100%;
  height:150px;
}
.introduction ~ .categorie .titreCategorie .tcat{display: none;}
a.nav img{display: none;}
.introduction ~ .categorie .dFlex{
  display: flex;
  flex : 1;
}
.introduction ~ .categorie .contenuCategorie{
  margin:20px auto;
  width: 900px;
  padding-bottom: 20px;
}
.introduction ~ .categorie .contenuCategorie:hover .avatarLastPost > img{
  filter: none;
}
.introduction ~  .categorie .imageForum{
  border: 4px solid #614e1a;
  width:320px;
  height:170px;
  overflow: hidden;
  background-repeat:no-repeat;
  background-size:cover;
}
.introduction ~ .categorie .contenuForum {
  width: calc(100% - 320px);
}
.introduction ~ .categorie .titreForum{
  font-size:20px;
  padding-left: 20px;
}
.introduction ~ .categorie .statsForum,
.introduction ~ .categorie .titreForum{
  line-height:20px;
}
.introduction ~ .categorie .statsForum{
  text-align:right;
}
.introduction ~  .categorie .infosForum{
  background: #8e8e8e;
  border: 1px solid #614e1a;
}
.introduction ~ .categorie  .sousForum{
  width:215px;
  font-size:0;
  padding:15px;
}
.introduction ~ .categorie  .dernierMessage{
  width:215px;
  padding:15px;
  text-align: center;
}
.introduction ~ .categorie .sousForum,
.introduction ~ .categorie .dernierMessage{
  max-height:130px;
  overflow:auto;
}
.introduction ~  .categorie .avatarLastPost{
  position: relative;
  overflow: visible;
  width: 150px;
  height: 130px;
}
.introduction ~  .categorie  .avatarLastPost > img{
  width: 150px;
  height: 130px;
  filter: sepia(100%);
  z-index:1;
}
.introduction ~ .categorie  .avatarLastPost .etatForum{
  position: absolute;
  top :-50px;
  right:-50px;
  z-index:5;
}
.introduction ~  .categorie .avatarLastPost .etatForum img{
  width:100px;
  height: 100px;
  z-index: 999;
}
.introduction ~ .categorie .sousForum a {
  font-size: 13px;
  display: block;
}
/* ----------- A mettre à jour et dupliquer selon ton nombre de forum :
0 = le premier, 1 = le deuxième, 2 = le troisième ... ---------*/

.introduction ~ .categorie .imageForum{
  /**Fond par defaut***/
 background-image:url('https://pvereecken.fr/tambouille/hiver2020/av-pepeche.png');
}
.introduction ~ .categorie .imageForum[data-id-forum="forum-0"]{
 background-image:url('https://2img.net/u/4014/30/77/56/avatars/79-12.jpg');
}
.introduction ~ .categorie .imageForum[data-id-forum="forum-1"]{
 background-image:url('https://i.servimg.com/u/f86/19/47/12/29/avatar15.png');
}

/****FIN CATEGORIE SUR L'INDEX****/

Tu as l'air de t'en sortir donc je pense que tu comprendras un peu tout

La toute fin concerne les images de forums. le petit commentaire aide à comprendre, mais si tu ne comprends pas je peux t'expliquer sans aucun souci =)


Les titres de tes catégories doivent ressembler à ça :

Code:

<img src="https://2img.net/u/4014/30/77/56/avatars/79-12.jpg" alt="nom de la catégorie" /><span class="tcat">Catégorie 1</span>

ton image suivi d'un span ayant une class qui va nous permettre de cacher selon l'endroit le texte ou l'image.

Et... Il me semble que c'est tout...
Si tu as la moindre question ou le moindre souci n'hésite pas

Merci

Je test tout ça vite.

Double post.

C'est tout bon.
Le code est suffisamment clair pour que je puisses l'adapter pour les finitions

Tu peux archiver.

Hm... Désolée de t'embêter
Hier dans mon lit j'ai pensé à une manière bien plus simple pour coder les catégories différents sur l'index et dans un forum pour économiser du JS
Tu es prêt à faire quelques tout petits changements ?

Bien sur

Du coup, tu vas pouvoir supprimer le javascript qu'on a mis ici :

Code:

$(function(){
  // Une fois la page chargée
  $(document).ready( function(){
       //si on ne trouve pas la class "introduction, on n'est pas sur l'index
       // on change donc la classe m-d-none de la catégorie codée
       // et on la change aussi sur la partie "non codée" pour l'afficher
   if (!$('.introduction').html()) {
      $('.categorie').toggleClass( "m-d-none" );
      $('.categorieForum').toggleClass( "m-d-none" );
       }
  });
});

Puis ton template index_box si tu l'as pas modifié depuis sera celui-ci :

Code:

<ul class="linklist top">
 <!-- BEGIN switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
 </li>
 <li>
 <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
 </li>
 <!-- END switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
 </li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside">
 <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
 </li>
 <!-- END switch_user_logged_in -->
</ul>




<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="categorieIndex">
 <div class="categorie">
 <div class="titreCategorie">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 

 <div class="contenuCategorie dFlex">
 <div class="imageForum">
 </div>
 <div class="contenuForum">
 <div class="titreForum">
 <a href="{catrow.forumrow.U_VIEWFORUM}" >{catrow.forumrow.FORUM_NAME}</a>
 </div>
 <div class="infosForum dFlex">
 <div class="sousForum">
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}

 </div>
 <div class="dernierMessage">
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </div>
 <div class="avatarLastPost">
 <div class="etatForum"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="etat-forum" /></div>
 <!-- BEGIN avatar -->
 {catrow.forumrow.avatar.LAST_POST_AVATAR}
 <!-- END avatar -->
 </div>
 </div>
 <div class="statsForum">{catrow.forumrow.TOPICS} {L_TOPICS} - {catrow.forumrow.POSTS} {L_POSTS}</div>
 </div>
 </div>

 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->

 </div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="categorieForum m-d-none">
 <div class="forabg">
 <ul class="topiclist">
 <li class="header">
 <dl class="icon">
 <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
 <dd class="topics"><i class="ion-android-list" data-tooltip="{L_TOPICS}"></i></dd>
 <dd class="posts"><i class="ion-android-chat" data-tooltip="{L_POSTS}"></i></dd>
 <dd class="lastpost"><i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist forums">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <li class="row">
 <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
 <dd class="dterm">
 <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 {catrow.forumrow.FORUM_DESC}

 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </div>
 </dd>
 <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
 <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
 <dd class="lastpost">
 <!-- BEGIN ads -->
 <span class="AD_LastPA">
 <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
 <span class="AD_LastInfos">
 <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
 {catrow.forumrow.ads.DATE}<br />
 {catrow.forumrow.ads.LOCATION}
 </span>
 </span>
 <!-- END ads -->
 
 <!-- BEGIN avatar -->
 <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
 <!-- END avatar -->

 <span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </span>
 </dd>
 </dl>
 </li>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </ul>
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
 <li>
 <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
 </li>
 <li>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 </li>
 <li class="last">
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 </li>
 <!-- BEGIN switch_delete_cookies -->
 <li class="rightside">
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var btn_collapse = $('<div></div>', {
 class: 'btn-collapse'
 });

 var btn_collapse_show = $('<i></i>', {
 class: 'ion-android-add-circle hidden',
 'data-tooltip': '{L_EXPEND_CAT}'
 }).appendTo(btn_collapse);

 var btn_collapse_hide = $('<i></i>', {
 class: 'ion-android-remove-circle',
 'data-tooltip': '{L_HIDE_CAT}'
 }).appendTo(btn_collapse);

 var collapsed = [];

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 $(document).on('click', '.btn-collapse', function() {
 $(this).children('.ion-android-add-circle').toggleClass('hidden');
 $(this).children('.ion-android-remove-circle').toggleClass('hidden');
 $(this).parents('.forabg').toggleClass('hidden');

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 if (!$(this).parents('.forabg').hasClass('hidden')) {
 removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

 createCookie('collapsed', collapsed);
 } else {
 collapsed.push('' + $(this).parents('.forabg').data('cindex'));

 createCookie('collapsed', collapsed);
 }
 });

 $('.forabg').each(function(i) {
 $(this).data('cindex', '' + i);

 $(btn_collapse)
 .clone()
 .attr('id', 'forabg' + i)
 .appendTo($(this).find('.header'));

 if ($.inArray('' + i, collapsed) > -1) {
 $(this).toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
 }
 });
});

function removeFromArray(item, array) {
 var i = array.indexOf(item);

 if (i > -1) {
 array = array.splice(i, 1);
 }
}

function createCookie(name, value, days) {
 var expires;

 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 expires = "; expires=" + date.toGMTString();
 } else {
 expires = "";
 }
 document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = encodeURIComponent(name) + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
 }
 return null;
}
//]]>
</script>

Ensuite dans index_body, juste avant

Code:

{JAVASCRIPT}


tu vas coller ça :

Code:

<div class="surIndex m-d-none">Je suis l'index</div>

Et dans viewforum_body
juste avant :

Code:

{BOARD_INDEX}

tu vas coller ça :


Et dans ta CSS tu vas rajouter ça, avant la css des catégories :

Code:

.surIndex ~ .categorieForum,
.dansForum ~ .categorieIndex{
  display:none;
}

Et il faudrait cibler encore plus ta CSS, en mettant

Code:

.categorieIndex

Devant chaque ligne pour bien cibler. (tu vois ce que je veux dire ou je te fais un exemple ? )

Et ça devrait être bon =)
J'ai expliqué toute l'astuce ici :
https://tambouille-raleuses.forumactif.com/t1240-astuce-un-codage-different-pour-les-categorie-sur-l-index-ou-dans-un-forum

Je regarde ça pour adapter (j'ai modifié mon Index Box car au final, le visuel ne m'allait pas (j'arrête pas de changer d'avis) mais ton code étant très bien fait j'ai pu faire ce que je veux parfaitement).

Sinon question annexe :
J'ai vu que tu dupliquais les éléments des categories et forum, et que tu réglais le tout en css avec les sélecteurs.
Ne pourrait-on pas utiliser les mêmes éléments (sans duplication) en précisant dans le css quoi faire si le sélecteur n'est pas présent ?
En gros, positionner un sélecteur sur l'index dans index_body, si le css le trouve il fait quelque chose, s'il ne le trouve pas il fait autre chose.

Ok

Oui et non, parce que si tu ne mets juste pas la CSS, il va quand même garder ton HTML modifié si tu ne le duplique pas. Donc il aura un HTML modifié mais pas de mise en page dans un forum.
Tu vois ce que je veux dire ?

Si tu garde la structure mais change juste les couleurs, dans ce cas oui tu peux utiliser les sélecteurs pour forcer.

Ok, je vois. Il faudrait un css dans tous les cas pour positionner les éléments.

C'est bien ça. Si tu garde la même structure HTML mais que tu changes juste la CSS, du moment que la CSS est bien ciblée ça devrait être ok

On peut archiver ici @Aethon ?

Oui c'est ok