Index complet Meitha

Image

Index complet librement inspiré d'une commande de Tortue pour Les chroniques de Meitha

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 installer cet index, suivez toutes les étapes des différents morceaux du code :
- Catégories
- QEEL
- Sidebar
- PA

ATTENTION. Pour les polices, inutile de les coller plusieurs fois dans le template overall_header. Voilà les polices globales :

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto|Cousine|Montserrat:900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

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

Code:

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Dans votre panneau d'administration, Affichage > Templates > Général > overall_header, trouvez le code suivant :

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                    </tr>
                </table>

Remplacez-le par :

Code:

<div id="i_logo">
                <a href="{U_INDEX}"><img src="{LOGO}" border="0" alt="{L_INDEX}" vspace="1" /></a>
                <div style="display: none;">{MAIN_SITENAME}{SITE_DESCRIPTION}</div>
                  <script type="text/javascript">
                    $(function(){
                    var e=_userdata["username"];
                    $('.userName').text(e);
                    });
                  </script>
                <div id="navigation"><div><span class="userName"></span></div><div class="navigation">{GENERATED_NAV_BAR}</div></div>
              </div>

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

Code:

/***********************************
*** GENERAL ***
**********************************/
 body {
     position: relative;
     overflow-x: hidden;
}
 a, a:hover, a:active {
     text-decoration: none;
}
 .bodylinewidth {
     margin-top: 29px;
}
 .bodyline {
     border: 0;
     background-color: #f1f1f1;
}
 #i_logo {
     margin: -10px;
}
/***********************************
*** NAVIGATION ***
**********************************/
 #navigation {
     background: #4e1f57;
     height: 30px;
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     line-height: 30px;
     padding: 0px 20px;
     box-sizing: border-box;
     z-index: 100;
     display: flex;
     justify-content: space-between;
}
 #navigation > div:first-child {
     font-size: 20px;
     color: #fff;
     font-family: 'Montserrat', sanss-serif;
     font-style: italic;
     font-weight: bold;
     padding-left: 50px;
     position: relative;
     text-transform: lowercase;
}
 #navigation > div:first-child::before {
     content: "";
     height: 1px;
     width: 40px;
     background: #fff;
     position: absolute;
     left: 0;
     top: 50%;
}
 .navigation {
     font-size: 0;
}
 .navigation > a {
     margin-left: 10px;
     color: #fff;
     text-transform: uppercase;
     font-size: 9px;
     font-family: 'Cousine', monospace;
     text-decoration: none!important;
     transition: color 0.3s;
}
 .navigation > a:hover {
     color: #c3a7cc;
}
 .navigation > a > img {
     display: none;
}

C'est déjà précisé dans certains des sujets Meitha, mais n'oubliez pas dans les options du CSS, à "optimiser votre CSS", cochez "non".

Bonsoir,
Je suis malheureusement dans une impasse totale. J'ai tout essayé pour retrouver la police correcte sur mon code des catégories mais impossible de l'avoir. Vous avez une solution pour moi ?
J'arrive à avoir la bonne police sur la QUEEL mais pas sur ma catégorie... Et j'avoue ne pas trop savoir comment faire !

Merci à vous pour votre aide !

Bonjour Ashi,
Je réponds un peu tard, désolé !
La police est Montserrat en black italique o: (Montserrat:900i)
Elle est normalement bien dans le CSS des catégories, elle devrait s'afficher normalement... ce n'est pas le cas ?

Le code est magnifique, merci !