Hello !
Pour mon premier LS ici (oui, j'en fait peu, je ne partage que trèèèès rarement mes codes oui je suis radine


Aperçu sous Mozilla Firefox : www (le fond rouge correspond à mon forum-test)
Aperçu sous Chrome & IE : www
En action
Les codes
Le CSS est à mettre dans Affichage > Couleurs > Feuille de style CSS
Vous devez avoir accès au compte fondateur pour pour accéder aux templates
Votre forum doit faire grand maximum 800 pixels de largeur
PhPBB2
CSS
- Code:
/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
position: fixed;
top: 0;
left: 0;
width: 185px;
height: 100%;
background: grey;
z-index: 200;
padding: 5px;
font-family: 'Verdana', sans-serif;
}
#panneau_lat h2 {
font-size: 19pt;
font-family: 'Georgia', serif;
text-align: center;
color: #FFF;
margin-bottom: 3px;
margin-top: 1px;
font-variant: small-caps;
}
#panneau_lat h3 {
font-size: 15pt;
text-align: center;
color: #FFF;
margin-bottom: 0px;
margin-top: 10px;
font-variant: small-caps;
font-family: 'Georgia', serif;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
text-align: center;
font-variant: small-caps;
font-family: 'Georgia', serif;
font-size: 11px;
color: #FFF;
}
.recherche {
text-align: center;
font-family: 'Georgia', serif;
color: #FFF;
font-size: 13px;
font-variant: small-caps;
margin-top: 3px;
}
.boite {
width: 175px;
height: 120px;
background: #ccc;
overflow: auto;
margin: auto;
padding: 5px;
font-size: 12px;
text-align: justify;
}
.membre_mois {
display: inline-block;
width: 85px;
height: 60px;
background: #ccc;
border: 1px solid orange;
margin-left: 4px;
overflow: hidden;
}
.member_des {
width: 85px;
height: 60px;
overflow: auto;
text-align: center;
font-family: 'Georgia', serif;
background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
width: 85px;
height: 60px;
overflow: hidden;
margin-top: -60px;
-webkit-transition: all 1s;
transition: all 1s;
opacity: 1;
visibility: visible;
}
.membre_mois:hover img {
opacity: 0;
visibility: hidden;
}
.util_link {
text-align: center;
font-family: 'Georgia', serif;
color: #FFF;
font-variant: small-caps;
font-size: 15px;
}
.util_link a {
color: #ccc !important;
text-decoration: none !important;
letter-spacing: 0;
-webkit-transition: all 800ms;
transition: all 800ms;
}
.util_link a:hover {
letter-spacing: 2px;
text-decoration: none !important;
}
.credits_pann {
font-size: 10px;
color: #FFF;
text-align: center;
font-variant: small-caps;
font-family: 'Georgia', serif;
margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/
HTML
Vous voulez que le menu s'affiche sur toutes les pages de votre forum
Dans le template overall_header (Affichage > Templates > Général) repérez ceci :
- Code:
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Après ces deux lignes, intégrez ce code :
- Code:
<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
<h2>Bienvenue</h2>
<div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
<h3>Liens utiles</h3>
<div class="util_link">
<a href="mon_lien">x Règlement</a><br />
<a href="mon_lien">x Contexte</a><br />
<a href="mon_lien">x Annexes</a><br />
<a href="mon_lien">x FAQ</a><br />
<a href="mon_lien">x Défis</a><br />
<a href="mon_lien">x Annonces</a><br />
<a href="mon_lien">x Partenariats</a>
</div>
<h3>Effectifs</h3>
<div class="recherche">
Groupe 1 x ... membre(s)<br />
Groupe 2 x ... membre(s)<br />
Groupe 3 x ... membre(s)<br />
Groupe 4 x ... membre(s)</div>
<h3>Rumeurs</h3>
<div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
<br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
<h3>Membres du mois</h3>
<div class="membre_mois"><div class="member_des">NOM<br />
<span style="font-size: 12px;"><a href="mon_lien">Profil</a></span><br />
<span style="font-size: 12px;"><a href="mon_lien">Fiche</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
<div class="membre_mois"><div class="member_des">NOM²<br />
<span style="font-size: 12px;"><a href="mon_lien">Profil²</a></span><br />
<span style="font-size: 12px;"><a href="mon_lien">Fiche²</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
<div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
</div>
<!-- Menu latéral by MV/Shoki [END] -->
Vous voulez que le menu ne s'affiche que sur l'index
Dans ce cas, allez dans le template index_body (Affichage > Templates > Général) et juste après
- Code:
{JAVASCRIPT}
Mettez le code fourni un peu plus haut.
PhPBB3
CSS
- Code:
/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
position: fixed;
top: 0;
left: 0;
width: 185px;
height: 100%;
background: grey;
z-index: 200;
padding: 5px;
font-family: 'Verdana', sans-serif;
}
#panneau_lat h1 {
font-size: 19pt;
font-family: 'Georgia', serif;
text-align: center;
color: #FFF;
margin-bottom: 3px;
margin-top: 1px;
font-variant: small-caps;
border: 0 !important;
}
#panneau_lat h4 {
font-size: 15pt;
text-align: center;
color: #FFF;
margin-bottom: -1px;
margin-top: 10px;
font-variant: small-caps;
font-family: 'Georgia', serif;
border: 0 !important;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
text-align: center;
font-variant: small-caps;
font-family: 'Georgia', serif;
font-size: 11px;
color: #FFF;
}
.recherche {
text-align: center;
font-family: 'Georgia', serif;
color: #FFF;
font-size: 13px;
font-variant: small-caps;
margin-top: 3px;
}
.boite {
width: 175px;
height: 120px;
background: #ccc;
overflow: auto;
margin: auto;
padding: 5px;
font-size: 12px;
text-align: justify;
}
.membre_mois {
display: inline-block;
width: 85px;
height: 60px;
background: #ccc;
border: 1px solid orange;
margin-left: 4px;
overflow: hidden;
}
.member_des {
width: 85px;
height: 60px;
overflow: auto;
text-align: center;
font-family: 'Georgia', serif;
background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
width: 85px;
height: 60px;
overflow: hidden;
margin-top: -60px;
-webkit-transition: all 1s;
transition: all 1s;
opacity: 1;
visibility: visible;
}
.membre_mois:hover img {
opacity: 0;
visibility: hidden;
}
.util_link {
text-align: center;
font-family: 'Georgia', serif;
color: #FFF;
font-variant: small-caps;
font-size: 15px;
}
.util_link a {
color: #ccc !important;
letter-spacing: 0;
-webkit-transition: all 800ms;
transition: all 800ms;
}
.util_link a:hover {
letter-spacing: 2px;
}
.credits_pann {
font-size: 10px;
color: #FFF;
text-align: center;
font-variant: small-caps;
font-family: 'Georgia', serif;
margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/
HTML
Vous voulez que le menu s'affiche sur toutes les pages de votre forum
Dans le template overall_header (Affichage > Template > Général), repérez
- Code:
</head>
<body id="phpbb">
Après ces deux lignes, intégrer le code qui suit
- Code:
<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
<h1>Bienvenue</h1>
<div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
<h4>Liens utiles</h4>
<div class="util_link">
<a href="mon_lien">x Règlement</a><br />
<a href="mon_lien">x Contexte</a><br />
<a href="mon_lien">x Annexes</a><br />
<a href="mon_lien">x FAQ</a><br />
<a href="mon_lien">x Défis</a><br />
<a href="mon_lien">x Annonces</a><br />
<a href="mon_lien">x Partenariats</a>
</div>
<h4>Effectifs</h4>
<div class="recherche">
Groupe 1 x ... membre(s)<br />
Groupe 2 x ... membre(s)<br />
Groupe 3 x ... membre(s)<br />
Groupe 4 x ... membre(s)</div>
<h4>Rumeurs</h4>
<div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
<br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
<h4>Membres du mois</h4>
<div class="membre_mois"><div class="member_des">NOM<br />
<span style="font-size: 12px;">Profil</span><br />
<span style="font-size: 12px;">Fiche</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
<div class="membre_mois"><div class="member_des">NOM²<br />
<span style="font-size: 12px;">Profil²</span><br />
<span style="font-size: 12px;">Fiche²</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
<div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
</div>
<!-- Menu latéral by MV/Shoki [END] -->
Vous voulez que le menu ne s'affiche que sur l'index
Dans le template index_body (Affichage > Templates > Général), juste après
- Code:
{JAVASCRIPT}
Mettre le code fourni un peu plus haut