Hello !
Pour mon premier LS ici (oui, j'en fait peu, je ne partage que trèèèès rarement mes codes oui je suis radine
), j'ai décidé de frapper fort en vous codant un panneau latéral gris fixe ! Je recommande plutôt Mozilla Firefox pour l'utiliser, mais il fonctionne sous Chrome et Internet Explorer/Microsoft Edge (même si il y a un pas élégant espace). Et pour me faire pardonner de ce petit imprévu, ce code est adapté pour 2 versions de forums (Je suis trop forte je sais huhu) .Pour PhPBB2 et PhPBB3
Aperçu sous Mozilla Firefox : www (le fond rouge correspond à mon forum-test)
Aperçu sous Chrome & IE : www
En action
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}
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}
En cas de soucis avec votre code, le section Problème avec mon Code est disponible. En cas de problème pour personnaliser le menu (changer les couleurs, la taille, la police et autres problèmes liés à la personnalisation), la section Personnalisations est à votre disposition.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
![Menu latéral fixe [PhPBB2 - PhPBB3] 5qox](https://www.zupimages.net/up/16/35/5qox.png)
