MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055 
En-tête 8 blocs (contexte - news - staff - prédéfinis - navigation rapide - top-sites - crédits - partenaires)
Sam 15 Fév 2020 - 10:34
En-tête 8 blocs (contexte - news - staff - prédéfinis - navigation rapide - top-sites - crédits - partenaires)
Hello !
Ça c'est un long titre
! Comme d'habitude quoi 
Bien entendu, les blocs peuvent changer d'utilité ! Voilà donc un aperçu :
Les images du milieu sont rondes également et représentent la navigation rapide.
LS réalisé à partir de la commande de Galatée (et avec son accord) Merci de ne pas retirer le copyright, si tu changes l'utilité de la boite merci de mettre le copyright ailleurs Installation
L'installation va se faire en plusieurs étapes : on va créer une page HTML puis ajouter une iframe
Etape 1 : Créer notre page HTML
Dans le PA > Modules > Gestion des pages HTML > Créer une nouvelle page en mode avancé
On y met un titre, et on colle ce code :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>En tête 8 blocs</title>
<link href="https://fonts.googleapis.com/css?family=Playball&display=swap" rel="stylesheet" />
<style>
::-webkit-scrollbar {
width: 6px; /*largeur de la scrollbar verticale*/
height: 6px; /*hauteur de la scrollbar horizontale*/
}
::-webkit-scrollbar-track {
background-color: #eecb94 /*couleur du fond de la scrollbar*/
}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background-color:#5e4621 /*couleur de la barre*/;
border-radius: 10px;
}
*{
box-sizing: border-box;
scrollbar-color: #eecb94;
scrollbar-width: thin;
}
body{
max-width:900px;
width: 100%;
margin: auto;
color: #5e4621;
font-family:verdana;
font-size:12px;
}
body a{
color:#2E2E2E;
font-family: 'Playball', cursive;
text-decoration:none;
}
.d-flex{
display: flex;
justify-content: space-between;
}
.d-flex > div{
width:33%;
}
#titrePA{
text-align:center;
font-size:30px;
font-family: 'Playball', cursive;
}
#PA,
#partenaires{
width:100%;
margin:auto;
background:#eecb94;
border:#5e4621 1px solid;
padding:10px;
}
#partenaires{
overflow-x:auto;
}
.blocTitre{
width:100%;
font-family: 'Playball', cursive;
font-size:16px;
line-height: 25px;
text-align: center;
border:1px #5e4621 solid;
margin : 1% 0;
background:#5e4621;
color:#FAFAFA;
}
.blocTexteG,
.blocTexteD{
border:1px #5e4621 solid;
margin : 1% 0;
text-align: justify;
padding:5px;
}
.blocTexteG{
height:160px;
overflow:auto;
}
.blocTexteD{
height:65px;
overflow:auto;
}
.blocRonds{
text-align: center;
}
.blocRonds a{
margin:5px;
}
.blocRonds a,
.blocRonds img{
width:60px;
height:60px;
border-radius: 100px;
}
#blocRondsCentre{
flex-wrap: wrap;
justify-content: space-around;
}
#blocRondsCentre a{
margin:5px;
position:relative;
}
#blocRondsCentre a,
#blocRondsCentre img{
width:90px;
height:90px;
border-radius: 100px;
transition-duration:1s;
}
#blocRondsCentre .Droite{
align-self: flex-start;
}
#blocRondsCentre .Gauche{
align-self: flex-end;
}
#blocRondsCentre p{
opacity:0;
position: absolute;
top: 0;
text-align: center;
width: 100%;
line-height: 110px;
margin: 0;
padding: 0;
transition-duration:1s;
}
#blocRondsCentre a:hover img{
opacity:0.1;
transition-duration:1s;
}
#blocRondsCentre a:hover p{
opacity:1;
transition-duration:1s;
}
</style>
</head>
<body>
<div id="titrePA">
Bienvenue sur Nom du Forum
</div>
<div id="PA" class="d-flex">
<div>
<div class="blocTitre">
Contexte
</div>
<div class="blocTexteG">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
</div>
<div class="blocTitre">
Panneau d'affichage
</div>
<div class="blocTexteG">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel arcu porta, suscipit tortor id, mollis enim. Sed non enim at lacus semper maximus vel nec ipsum. Donec nunc neque, facilisis et congue sed, sagittis et ipsum. Nullam tincidunt massa velit, ut mattis erat malesuada non. Etiam vitae enim ex. Nam lectus erat, ullamcorper vitae ante ut, posuere ultricies magna. Nunc eget lacinia massa, nec porta ipsum. Duis elementum lorem id est varius, id congue magna condimentum.
</div>
</div>
<div id="blocRondsCentre" class="d-flex">
<a class="Gauche" href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
<p>Nom du lien</p>
</a>
<a class="Droite" href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
<p>Nom du lien</p>
</a>
<a class="Gauche" href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
<p>Nom du lien</p>
</a>
<a class="Droite" href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
<p>Nom du lien</p>
</a>
<a class="Gauche" href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
<p>Nom du lien</p>
</a>
<a class="Droite" href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
<p>Nom du lien</p>
</a>
</div>
<div>
<div class="blocTitre">
Staff
</div>
<div class="blocRonds">
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
</div>
<div class="blocTitre">
Prédéfinis
</div>
<div class="blocRonds">
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
</div>
<div class="blocTitre">
Top Site
</div>
<div class="blocRonds">
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
<a href="#">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-93.png" alt="image" />
</a>
</div>
<div class="blocTitre">
Crédits
</div>
<div class="blocTexteD">
Crédits du forums
<br />
PA codée par <a href="https://tambouille-raleuses.forumactif.com/">Mäven</a>
</div>
</div>
</div>
<div class="blocTitre">
Partenaires
</div>
<div id="partenaires" class="d-flex">
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
<a href="https://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
</div>
</body>
</html>
Etape 2 : on met en place la PA
Eh oui, il faut bien mettre en place tout ça ! Pour cela on va utiliser une iframe, mais si tu ne veux pas d'iframe tu peux te servir du tutoriel de Miettes pour éviter les iframes en l'adaptant un peu.
Pour mettre en place notre iframe :
Dans le template index-body, on va rechercher ceci au tout début :
- Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->
- Code:
<!-- BEGIN message_admin_index -->
<!-- BEGIN message_admin_titre -->
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
<!-- END message_admin_txt -->
<!-- END message_admin_index -->
On enregistre, et on publie.
Ensuite on va dans PA > Affichage > Généralité et on y ajoute notre iframe :
- Code:
<div align="center">
<iframe align="middle" name="En-tête" src="http://bidouilles-maven.forumactif.com/h1-en-tete-8-blocs" scrolling="no" style="border:0; height: 600px; margin:auto; width: 100%;"> </iframe>
</div>
N'oublies pas de mettre ton lien de PA à toiEt voilà le travail
Si tu as un problème avec le code, que ça soit pour l'installation ou la personnalisation, n'hésites pas à demander ! 
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum|
|
|