Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Code forum :: Index complets
avatar
le Dim 5 Aoû - 22:24

Image

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

Codes et explications


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".

Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum