Catégories Meitha

Catégories conçues pour l'index complet Meitha
Créditez-moi quelque part sur votre forum si vous utilisez ces codes

phpBB2

Ce code est conçu pour un forum de 850px de largeur. Dans votre panneau d'administration > Général > Forum > Configuration, dans le bloc "Structure des pages", rentrez "850".

Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les liens vers les sous-forums", cocher "oui".

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto|Cousine|Montserrat:900i" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :

Code:

<div class="forum-links">
 <!-- BEGIN switch_user_logged_in -->
  <div><a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></div>
  <div><a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></div>
 <!-- END switch_user_logged_in -->
  <div><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></div>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cate-titre">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
<div class="forum-wrap">
    <div>
        
    </div>
    <div>
      <div class="forum-title">
        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        <div class="forum-stats">{catrow.forumrow.TOPICS} sujets {catrow.forumrow.POSTS} messages
        </div>
      </div>
      <div class="forum-desc"><div>{catrow.forumrow.FORUM_DESC}</div></div>
        <div class="sous-forums">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
    </div>
    <div>
      <div class="forum-img">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </div>
        <div class="forum-last">{catrow.forumrow.LAST_POST}</div>

    </div>
</div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->
<script>
  $(document).ready(function(){
  $('.forum-wrap').each(function(){
  
  $(this).find('.forum-last > span > a').wrap('<div/>');
  $(this).find('.forum-last > span').contents().filter(function(){
    return this.nodeType == 3 && $.trim(this.nodeValue).length;
}).wrap('<div />');
  var loc = $(this).find('.forum-last > span > div:last-child a').attr("href");
    $(this).find('.forum-last > span > div:first-child a').attr("href",loc);
  });
  });
</script>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/***********************************
*** CATEGORIES ET FORUMS PAR AWFUL***
**********************************/
 .forum-links {
     display: flex;
     justify-content: space-around;
     align-items: center;
     height: 50px;
     margin: 0px -10px;
}
 .forum-links a {
     text-decoration: none!important;
     color: #bababa;
     font-size: 7px;
     transition: color 0.3s;
     border: 1px solid #dedede;
     padding: 0 10px;
     text-transform: uppercase;
     font-family: 'Cousine', monospace;
     letter-spacing: 1px;
     display: block;
     height: 15px;
     line-height: 17px;
}
 .forum-links a:hover {
     color: #595959;
}
 .forum-linkssmall {
     height: 20px;
     margin-top: 15px;
}
 .forum-linkssmall a {
     font-size: 10px;
}
/***********************************
*** CATEGORIES ET FORUMS ***
**********************************/
 .cate-titre {
     height: 100px;
     background: linear-gradient(90deg, #C3A7CC 0%, #4E1F57 100%);
     margin: 0px -10px;
     line-height: 100px;
     text-align: right;
}
 .cate-titre h2 {
     margin: 0;
     color: #fff;
     display: inline-block;
     padding-right: 50px;
     font-family: 'Montserrat', sans-serif;
     font-size: 25px;
     font-style: italic;
     position: relative;
     text-transform: lowercase;
     text-shadow: 1px 1px 0px #332347;
}
 .cate-titre h2::after {
     content: "";
     height: 1px;
     width: 100px;
     background: #fff;
     position: absolute;
     left: -110px;
     top: 50%;
}
 .forum-wrap {
     margin: 0px -10px;
     display: flex;
     box-sizing: border-box;
     padding: 10px;
     justify-content: space-between;
     background: #f1f1f1;
     font-family: 'Roboto', sans-serif;
     position: relative;
     border-bottom: 1px solid #e1e1e1;
}
 .forum-wrap a {
     text-decoration: none!important;
}
 .forum-wrap > div:first-child {
     min-width: 150px;
     max-width: 150px;
     height: 150px;
     box-sizing: border-box;
     padding: 6px;
     border: 1px solid #fff;
}
 .forum-wrap > div:first-child img {
     width: 100%;
     height: 100%;
}
 .forum-wrap > div:nth-child(2) {
     display: flex;
     flex-wrap: wrap;
     min-width: 480px;
     max-width: 480px;
}
 .forum-title {
     flex: 100%;
     height: 30px;
     display: flex;
     margin-bottom: 10px;
     border-bottom: 1px solid #e1e1e1;
     box-sizing: border-box;
     padding-bottom: 5px;
}
 .forum-title a {
     font-family: arial, sans-serif;
     font-style: italic;
     color: #e9d3f0 !important;
     letter-spacing: -2px;
     font-size: 25px;
     text-shadow: 1px 1px 0 #b6b6b6;
     transition: color 0.3s;
     line-height: 20px;
     font-weight: bold;
}
 .forum-title a:hover {
     color: #969696 !important;
}
 .forum-desc {
     height: 110px;
     padding: 10px;
     box-sizing: border-box;
     background: #f9f9f9;
     flex: 1;
}
 .forum-desc > div {
     height: 100%;
     overflow: auto;
     text-align: justify;
     font-size: 11px;
     line-height: 14px;
     padding-right: 10px;
     box-sizing: border-box;
     color: #595959;
}
 .forum-desc > div > img {
     width: 135px;
     height: 135px;
     position: absolute;
     left: 10px;
     top: 10px;
     padding: 7.5px;
}
 .sous-forums {
     flex: 1;
     margin-left: 10px;
     display: flex;
     flex-direction: column;
     font-size: 0;
     overflow: auto;
     height: 110px;
}
 .sous-forums:empty {
     display: none;
}
 .sous-forums a {
     background: #f9f9f9;
     height: 20px;
     margin-bottom: 5px;
     line-height: 20px;
     text-align: center;
     text-transform: uppercase;
     color: #595959;
     font-size: 8px;
     font-family: 'Cousine', monospace;
     letter-spacing: 1px;
     transition: color 0.3s;
}
 .sous-forums a:hover {
     color: #969696;
}
 .forum-wrap > div:last-child {
     min-width: 170px;
     max-width: 170px;
     height: 150px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 .forum-img {
     background: #ccc;
     height: 30px;
     margin-bottom: 10px;
}
 .forum-last {
     font-size: 10px;
     text-transform: uppercase;
     flex: 1;
}
 .forum-last > span {
     display: flex;
     flex-direction: column;
     height: 100%;
     font-size: 0;
     justify-content: space-between;
     padding-top: 10px;
}
 .forum-last > span > div, .forum-last > span > strong {
     border: 1px solid #e1e1e1;
     font-size: 7px;
     font-family: 'Cousine', monospace;
     letter-spacing: 1px;
     line-height: 27px;
     height: 25px;
     white-space: nowrap;
     background: #f7f7f7;
     text-align: center;
     text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
 .forum-last > span > br, .forum-last > span > div:last-child {
     display: none;
}
 .forum-last-link > strong::before {
     content: "par ";
     font-weight: normal;
}
 .forum-stats {
     font-size: 7px;
     font-family: 'Cousine', monospace;
     text-transform: uppercase;
     letter-spacing: 1px;
     align-self: flex-end;
     flex: 1;
     text-align: right;
     text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}


Bonjour bonjour,

je dois être un méga gros boulet (ce qui n'est pas du tout exclus^^), mais j'ai beau retourner le code des catégories (que j'adore, merci il est vraiment super !) je ne comprends pas comment je mets les images de catégories =___=

Je suppose que ça doit être enfantin, mais là vraiment je ne vois pas oO

Bonjour Ahina,
Les images de forums dont à ajouter dans le panneau d'admin à la création du forum. Juste au-dessus de la description, il y a un champ "Adresse de l'image :"
J'espère que ça t'aide c:

Ohhhhh je suis effectivement un boulet ! Je n'ai jamais utilisé cette case, j'ai toujours mis du codage directement dans l'éditeur... ça ne m'est absolument pas venu à l'esprit de chercher ça. Merci beaucoup c'est super :)

Bonjour ~
Question, probablement bête >w< Comment met-on le fond derrière le titre des catégories ? (chez vous, le fond violet).

Merci bien

Bonjour Nessie !

Le fond est à éditer, dans le CSS :

Code:

.cate-titre {
    height: 100px;
    background: linear-gradient(90deg, #C3A7CC 0%, #4E1F57 100%);
    margin: 0px -10px;
    line-height: 100px;
    text-align: right;
}

Ici j'ai mis un dégradé, mais tu peux mettre un fond uni, une image, ce que tu veux c:

Bonjour

Merci infiniment pour ce si beau code !
Toutefois, ne souhaitant pas mettre d'image de description des forums, est-ce qu'il est possible d'enlever le cadre sur la gauche ?

Merci d'avance, bonne soirée  :)

Bonjour
j'ai un petit soucis dès que je mets le code pour les catégories cela donne cela http://crazylove.forumactif.org/
Je ne sais pas comment faire pour avoir la PA à la bonne place et aussi les catégories en petite
J'ai bien mis la taille 850 ...
Est ce possible d'avoir un header de fond quand même avec ce codage ?
Merci de vos réponses