Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

[Toutes versions]Catégories en colonnes Empty [Toutes versions]Catégories en colonnes

le Ven 10 Mai - 10:04

Catégories en colonnes

Bonjour à toi Smile

Tu cherches une idée de codage pour les catégories de ton forum ? Je viens t'en proposer un modèle ici, sur deux colonnes.
[Toutes versions]Catégories en colonnes Catzog10

Exclamation Le code peut s'adapter pour passer en 3 colonnes (ou plus), il suffit de demander.
Arrow S'il y a un nombre impair de forums : le dernier prend toute la largeur

Idea Tu dois avoir accès aux templates
Idea Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre
Idea La structure de ton forum, quelque soit la version, doit être en "moyen" de la seconde ligne (PA > Affichage > Structure et hiérarchie)

Après tout ces prérequis et choses à savoir, on rentre dans le vif du sujet !
Partie HTML : modifions le template

C'est la même chose sur toutes les versions : tout se passe dans le template qui s'appelle index_box (PA -> Affichage -> Template -> général)

Repère ces deux commentaires :
Code:
<!-- BEGIN catrow -->
et
Code:
<!-- END catrow -->

Supprime tout ce qu'il ya entre les 2 (oui oui, tout Smile ) et remplace le par ceci :
Code:
<!-- BEGIN tablehead -->
          <div class="milieu_cate">
            <div class="titre_categorie">
              {catrow.tablehead.L_FORUM}
            </div>
            <div class="d-flex">
              <!-- END tablehead -->
          
              <!-- BEGIN cathead -->
          
              <!-- END cathead -->
          
              <!-- BEGIN forumrow -->
          
              <div class="colonne">
                <div class="titre_forum">
                  <div class="d-flex">
                    <div class="lien_forum">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}</a>
                        </span>
                        <br />
                        <span class="nb_mess">
                          {catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages
                        </span>
                      </div>
                      <div class="last_post">
                        <span class="gensmall">
                          {catrow.forumrow.LAST_POST}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex">  
                    <div class="description">
          
                      <span class="genmed">
                        {catrow.forumrow.FORUM_DESC}
                      </span>
                    </div>
                    <div class="image_last_post">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div>
                  </div>
                  <div class="liens_sous_forums">
                    <span class="gensmall">
                      <!-- 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}
                    </span>
                  </div>
          
                </div>
          
          
                <!-- END forumrow -->
          
                <!-- BEGIN catfoot -->
          
                <!-- END catfoot -->
          
                <!-- BEGIN tablefoot -->
            </div>
          </div>        
          <!-- END tablefoot -->

On enregistre et on oublie pas de publier le template Smile

Partie CSS : attaquons la mise en page

Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS :

Toutes versions

Code:
/********Catégories**********/
*{
  box-sizing: border-box;
}
.d-flex{
  display:flex;
  width:100%;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-around;
}
.milieu_cate > .d-flex > * {

  flex: 1 1 49%;
}
.titre_categorie{
  border:2px solid #000;
  width:99%;
  margin:4% auto auto;
  background:#3d7491;
}
.titre_categorie h2{
  font-size:30px;
  color:#000;
  text-align:center;
  margin:0;
  padding:0.5%;
}
.milieu_cate{
  width:98%;
  margin:auto;
}
.colonne{
  border: 2px solid #000;
  box-sizing: border-box;
  height: 240px;
  margin: 0.5%;
  width: 49%;
  background:#265d7a;
}

.titre_forum{
  height:70px;
  overflow:hidden;
  padding: 0.5%;
  border-bottom:3px solid black;
}
.lien_forum, .last_post{
  padding: 0.5%;
  height:70px;
}
.lien_forum{
  width:70%;
}
.last_post{
  text-align:center;
  width:30%;
  border-left:1px black solid;
}
.nb_mess{
  font-size:10px;
  font-style:italic;
}

.image_last_post{
  margin: 1%;
  width:10%;
}
.image_last_post img{
  max-width:100%;
}
.description{
  width:84%;
  padding:0.5%;
  text-align:justify;
  height:132px;
  border: 1px solid #000;
  margin:1% ;
  overflow:auto;
}

.liens_sous_forums{
  padding: 0 0.5%;
}

AwesomeBB


La CSS est la même, il faut simplement rajouter ceci à la fin :
Code:
.gensmall{
display:inline;
border:none;
}

Exclamation Les couleurs de texte et de liens sont les couleurs de ton forum : c'est à cet endroit que tu dois les choisir.

Idea Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai Smile




Si tu te sers de ce code, merci de mettre un petit lien vers la tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses