Page d'accueil #3

aka artedelamuerte

Cette page d'accueil convient à quasiment toutes les versions (hormis awesomebb Page d'accueil #3 2412038675

). Elle s'installe dans le template overall_header, car elle sert également de bannière.
► Il convient donc de ne mettre aucune image dans le panneau d'admin > affichage > gestion des images > logo du forum.
► Le titre du forum figurant déjà sur la page d'accueil, vous pouvez désactiver son affichage initial dans le panneau d'admin : affichage > en-tête et navigation > afficher le titre du forum : non.
► La page d'accueil fait 900 pixels de large, votre forum doit donc faire idéalement cette largeur.

REMARQUE : Afin que les dégradés fonctionnent correctement, pensez à cocher "non" à la mention "optimiser votre CSS". Cette mention se trouve à la suite de votre feuille de style.

Codes

Dans votre template overall_header, juste après la variable

Code:: {CSS}

Ajoutez les liens correspondants aux polices :

Code:: <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto:wght@300&display=swap" rel="stylesheet"/>

Sur phpbb2, dans le template overall_header toujours, repérez cette ligne de HTML :

Code:: <td class="bodyline">

Pour les autres versions, il s'agira de répérer la balise "body", qui se présente comme cela sur modernbb :

Code:: <body id="modernbb">

Juste après le morceau de code répéré, il vous faudra coller le HTML correspondant à notre page d'accueil :

Code:: <div class="header_pa_arte">
<div class="header_img">
<a href="LIENDUFORUM"><img src="https://www.zupimages.net/up/21/05/p15i.png" alt="bannière"/></a>
<div>
Le forum est la propriété du staff et de ses membres. Toute copie, même partielle, est prohibée.
</div>
</div>
<div class="pa_content">
<h2>Nom du forum<span>FORUM CITY · AVATARS MANGA · 250*400</span></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lectus in ligula luctus feugiat id vitae nisi. Pellentesque lobortis, felis vel faucibus feugiat, tortor nunc suscipit ante, laoreet mollis turpis arcu nec mi. Sed vestibulum malesuada ante sit amet malesuada. In dapibus quam ac placerat gravida. Sed sodales urna non risus accumsan consequat.
<a href="LIENDUCONTEXTE">Lire la suite</a>
</p>
<div class="staff_content">
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
<div class="hover_staff">
<img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="staffeux"/>
</div>
</div>
<div class="nouveautes_pa">
<span>00.00.00</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget lectus in ligula luctus feugiat id vitae nisi.
<hr/>
<span>00.00.00</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum arcu iaculis nisl porttitor sodales.
</div>
<div class="liens_pa">
<a href="LIEN">règlement</a>
<a href="LIEN">bottin</a>
<a href="LIEN">annexes</a>
<a href="LIEN">prédéfinis</a>
<a href="LIEN">groupes</a>
<a href="LIEN">invités</a>
<a href="LIEN">crédits</a>
<a href="LIEN">partenariats</a>
</div>
<div class="predefinis_content">
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
<div>
<a href="LIEN"><img src="https://i.ibb.co/2vMMvNt/ch6.png" alt="prédéfini"/></a>
</div>
</div>
<div class="topsites_a">
<a href="LIEN" >V</a>
<a href="LIEN">O</a>
<a href="LIEN">T</a>
<a href="LIEN">E</a>
<a href="LIEN">Z</a>
<p>
Le forum a été créé le 00.00.00. La page d'accueil a été designée et codée par <strong>Artemis</strong>, pour <a href="https://artifices.forumactif.com/">Artifices</a>. Le reste du design a été pensé et codé par xxx.
</p>
<span>Toutes les deux heures !</span>
</div>
</div>
</div>

Le CSS :

Code:: /** PA PAR ARTEMIS POUR ARTIFICES **/
:root
{
--couleur-bleue: #647a49;
--couleur-deux: #be744a;
}

.header_pa_arte
{
width: 900px;
height: 550px;
margin: auto;
display: flex;
background: #F7F7F7;
position: relative;
}

.header_pa_arte:before
{
width: 445px;
height: 550px;
position: absolute;
top: 0;
left: 0;
content: " ";
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
z-index: 0;
}

.header_img
{
width: 425px;
height: 530px;
z-index: 99;
position: relative;
padding:10px;
}

.header_img > div
{
position: absolute;
bottom: 50%;
left: 30%;
width: 200px;
text-align: justify;
background: white;
border-radius: 10px;
padding: 10px;
font: 9px roboto, sans-serif;
color: gray;
text-transform: uppercase;
visibility: hidden;
}

.header_img:hover div
{
visibility: visible;
}

.header_img img
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}

.pa_content
{
width: 50%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
padding: 0 15px 15px 15px;
}

.pa_content > h2
{
width: 100%;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: 65px oswald, sans-serif;
text-transform: uppercase;
margin: 0;
height:80px;
position: relative;
}

.pa_content > h2 span
{
position: absolute;
padding: 2px 5px;
width: auto;
top: 56%;
background: #F7F7F7;
left: 0;
display: inline-block;
color: black !important;
font: 10px calibri, sans-serif;
-webkit-text-fill-color: #b5b5b5;
letter-spacing: 0.5px;
}

.pa_content > p
{
width: 100%;
margin: 0;
border: 1px solid var(--couleur-deux);
outline: 1px solid var(--couleur-deux);
outline-offset: -5px;
height: 120px;
box-sizing: border-box;
padding: 20px;
font: 12px roboto, sans-serif;
color: grey;
text-align: justify;
line-height: 12px;
overflow: auto;
}

.pa_content > p > a
{
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font: 12px calibri, sans-serif;
text-transform: uppercase;
}

.staff_content
{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
}

.hover_staff
{
border: 10px solid #e3e2e2;
width: 80px;
height: 80px;
text-align: center;
box-sizing: border-box;
position: relative;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.hover_staff img
{
width: 60px;
height: 60px;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.hover_staff img:hover
{
-webkit-filter: none;
filter: none;
}

.nouveautes_pa
{
width: 250px;
height: 110px;
border: 1px solid var(--couleur-deux);
box-sizing: border-box;
padding: 12px;
font: 10px calibri, sans-serif;
color: grey;
text-transform: uppercase;
line-height: 9px;
text-align: justify;
overflow:auto;
}

.nouveautes_pa > span
{
display: block;
float: left;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
color: white;
padding: 3px 5px;
border-radius: 2px;
margin: 0 3px 0 0;
line-height: 10px;
}

.nouveautes_pa hr
{
opacity: 0.3;
margin: 0.5em 0;
}

.liens_pa
{
width: 165px;
height:110px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
box-sizing: border-box;
padding: 0;
}

.liens_pa a
{
display: block;
width: 80px;
background:linear-gradient(var(--couleur-bleue), var(--couleur-deux));
color: white;
border-radius: 2px;
height: 24px;
font: 10px roboto, sans-serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
line-height: 24px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.predefinis_content
{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
}

.predefinis_content div
{
width: 55px;
height: 55px;
border: 1px solid var(--couleur-deux);
text-align: center;
box-sizing: border-box;
padding:7px;
}

.predefinis_content div img
{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border: 1px solid var(--couleur-deux);
box-sizing: border-box;
}

.topsites_a
{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
margin-top: 5px;
position: relative;
}

.topsites_a > a
{
text-decoration: none;
font: 50px oswald, sans-serif;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 45px;
}

.topsites_a > a:hover
{
text-decoration: none !important;
}

.topsites_a p
{
background: #e3e2e2;
height: 100%;
margin: 0 0 0 10px;
width: 290px;
box-sizing: border-box;
padding: 10px;
font: 10px calibri, sans-serif;
color: #717171;
text-align: justify;
line-height: 10px;
}

.topsites_a > span
{
position: absolute;
left: 6px;
bottom: -8px;
font: 10px roboto, sans-serif;
text-transform: lowercase;
background: linear-gradient(var(--couleur-bleue), var(--couleur-deux));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.2px;
}

Pour changer les couleurs de la page d'accueil, modifiez uniquement les valeurs des variables se trouvant au tout début du CSS :

Code:: :root
{
--couleur-bleue: #647a49;
--couleur-deux: #be744a;
}

Ne changez que les codes couleur Page d'accueil #3 9172718

En cas de soucis avec ce code, laissez-moi un petit message ici ! c:

» Page d'accueil #1
» Page d'accueil #2