Arya
Lun 6 Sep 2021 - 17:42
Je vous partage une nouvelle PA pour le plaisir 
La largeur est de 684px (mini) mais il faudra penser à changer la taille du fonds de l'image de fonds :3
Les couleurs, polices et images sont modifiables, n'hésitez pas à me contacter en cas de difficulté :3 et le code a été un maximum commenté et est compatible modernbb et PhPBB2.
Pour créer votre page d'accueil, aller sur le Panneau d'Administration > Modules > HTML & JAVASCRIPT > Gestion des pages HTML > Cliquer sur "Création en mode avancé (HTML) et coller le code ci-dessous.
Puis il vous faudra c/c dans dans Panneau d'Administration > Affichage > Page d'accueil > Généralités > Message sur la page d'accueil > Contenu du message , le code suivant :
La largeur est de 684px (mini) mais il faudra penser à changer la taille du fonds de l'image de fonds :3
Les couleurs, polices et images sont modifiables, n'hésitez pas à me contacter en cas de difficulté :3 et le code a été un maximum commenté et est compatible modernbb et PhPBB2.
- Spoiler:
Installation
Pour créer votre page d'accueil, aller sur le Panneau d'Administration > Modules > HTML & JAVASCRIPT > Gestion des pages HTML > Cliquer sur "Création en mode avancé (HTML) et coller le code ci-dessous.
Puis il vous faudra c/c dans dans Panneau d'Administration > Affichage > Page d'accueil > Généralités > Message sur la page d'accueil > Contenu du message , le code suivant :
- Code:
<iframe style="width: 100%; height: 400px;overflow:hidden!important;" frameborder="0" src="URL DE VOTRE PAGE HTML"></iframe>
le code
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>PA - Nom du forum</title>
<link href="https://fonts.googleapis.com/css2?family=Baskervville:ital@1&display=swap" rel="stylesheet" />
<style type="text/css">
/** ---------------------------------------------------------------------------------------------------------------
PA codé par Arya sur le modèle établi graphiquement par TWISTY.RAIN d'EPICODE ; Merci de ne pas oublier les crédits
--------------------------------------------------------------------------------------------------------------- **/
/** CSS des scrollbars (compatible avec tous les navigateurs, sauf firefox) **/
::-webkit-scrollbar {
width: 3px; /** largeur de la scrollbar verticale **/
height: 3px; /** hauteur de la scrollbar horizontale **/
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent; /** couleur du fond de la scrollbar **/
}
::-webkit-scrollbar-thumb { /** la petite bande qui monte/descend **/
background-color: #34170e; /** couleur de l'ascenseur **/
}
/** Les liens **/
a:link,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none; /** absence de surlignement des liens + soulignement **/
font-weight: bold; /** les liens seront en gras **/
font-style: italic; /** les liens seront en italic **/
color: #6e6e6d; /** couleur de base des liens **/
font-family: 'Baskervville', italic; /** police de base des liens **/
font-size: 11px; /** taille de base des liens **/
}
/** Page d'accueil **/
.PA-Arya {
width: 674px; /** largeur de la PA, modifiable **/
height: 382px; /** hauteur de la PA, modifiable **/
background-image: url(https://www.zupimages.net/up/20/26/fohu.png); /** image de fonds de la PA, peut-être remplacer par une couleur **/
font: 11px 'Verdana', sans-serif; /** taille et police général de l'ensemble de la PA sauf précision contraire dans chacune des classes **/
color: #6e6e6d; /** couleur général des écrits de l'ensemble de la PA sauf précision contraire dans chacune des classes **/
margin: auto; /** centrage de la PA **/
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: justify; /** style général des écrits de l'ensemble de la PA sauf précision contraire dans chacune des classes **/
padding: 5px;
}
.PA-Arya,
.PA-Arya * {
box-sizing: border-box; /** scrollbar firefox **/
scrollbar-width: 3px; /** largeur de la scrollbar sous firefox **/
scrollbar-color: #34170e; /** couleur de la scrollbar sous firefox **/
}
.PA-Arya-Bienvenue,
.PA-Arya-Liens {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** couleur des bordures du bloc **/
text-align: center; /** on centre le texte à l'intérieure des blocs **/
font: 15px 'Baskervville', italic; /** Taille et police du bloc **/
padding: 5px;
height: 35px; /** hauteur du bloc **/
width: 100%; /** largeur des blocs, adaptable sur les écrans **/
}
.PA-Arya h1 { /** on rend les blocs titres invisibles, mais visible en l'absence de CSS pour l'accessibilité **/
display: none;
}
p {
margin: 0;
}
.PA-Arya span,
.PA-Arya h2 {
/** reset des marges internes et externes de base de FA**/
margin: 0px;
padding: 0px;
/** fin du reset **/
font-size: 11px; /** taille des titres visibles et des éléments en gras et couleurs dorés **/
color: #786655; /** couleur des titres visibles et des éléments en gras **/
font-weight: bold; /** style des titres visibles et des éléments en gras et couleurs dorés **/
font-family: 'Baskervville', italic; /** style/polices des titres visibles et des éléments en gras et couleurs dorés **/
display: inline-block;
}
.PA-Arya-Liens > ul,
.PA-Arya-Topsites > ul {
/** reset de l'apparence des listes **/
padding: 0;
margin: 0;
list-style-type: none;
/** fin du reset de l'apparence des listes **/
display: flex;
justify-content: space-between;
align-items: center;
}
.PA-Arya-Liens > ul > li:nth-child(even) a {
color: #786655; /** couleur des liens impairs **/
}
.PA-Arya-Actualite,
.PA-Arya-Credits,
.PA-Arya-Event {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** couleur des bordures du bloc **/
padding: 5px;
height: 90px; /** taille des blocs **/
}
.PA-Arya-Actualite > div,
.PA-Arya-Credits > div,
.PA-Arya-Event > div {
overflow: auto;
padding: 5px;
height: 80px; /** taille des blocs **/
}
.PA-Arya-Partenaires-Actualite,
.PA-Arya-Recherches-Event,
.PA-Arya-Credits-Topsites {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 30%; /** largeur du bloc **/
height: 133px; /** hauteur du bloc **/
}
/** Contexte **/
.PA-Arya-Contexte {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** couleur des bordures du bloc **/
padding: 5px;
height: 133px; /** hauteur du bloc contexte **/
width: 30%; /** largeur du bloc contexte **/
}
.PA-Arya-Contexte > div {
padding: 5px;
overflow: auto;
height: 123px; /** hauteur de la zone de texte **/
}
/** Le staff **/
.PA-Arya-Staff {
text-align: center;
}
.PA-Arya-Staff > ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.PA-Arya-Staff img {
width: 82px;
height: 133px;
object-fit: cover;
}
.contenu_ongletstaff {
width: 200px;
overflow: hidden;
display: none;
}
.info {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** couleur des bordures du bloc **/
width: 110px; /** largeur du bloc **/
height: 133px; /** hauteur du bloc **/
overflow: auto;
}
.onglet_staff {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 100%;
cursor: pointer;
background: #34170E; /** couleur de fonds des onglets **/
}
.ongletstaff_actif {
background: #1c1716; /** couleur de fonds des onglets actifs **/
}
.PA-pseudostaff-Arya {
text-transform: uppercase;
font-size: 20px !important;
display: block!important;
}
.info > strong {
display: block;
}
/** Partenaires **/
.PA-Arya select {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** bordure du bloc **/
font-size: 10px; /** taille du texte **/
text-transform: uppercase;
color: #6e6e6d; /** couleur du texte **/
height: 20px; /** hauteur du bloc **/
width: 100%; /** largeur du bloc **/
margin-bottom: 3px;
}
.PA-Arya-Partenaires a {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** couleur des bordures du bloc **/
color: #5a2814; /** couleur des liens vers les partenaires **/
display: inline-block;
width: 49%;
text-align: center;
}
/** Prédéfinis **/
.PA-Arya-Rercherches,
.conteneur {
display: flex;
justify-content: space-between;
}
.PA-Arya-Topsites img,
.PA-Arya-Rercherches img {
height: 35px; /** hauteur des images **/
width: 35px; /** largeur des images **/
object-fit: cover;
}
/** Les maisons **/
.PA-Arya-Sablier {
background-color: #1c1716; /** couleur de fonds du bloc **/
border: 2px solid #34170e; /** couleur des bordures du bloc **/
height: 133px;
width: 35%;
font: 25px 'Baskervville', italic; /** Taille et police du bloc **/
text-align: center;
}
.PA-Arya-Sablier-Coupe {
width: 50px;
height: 50px;
display: inline-block;
}
.PA-Arya-Sablier-Coupe1 {
height: 50px;
overflow: hidden;
background-color: #1c1716; /** couleur de fonds du bloc **/
transition: 0.8s ease;
opacity: 0;
font-size: 13px; /** taille de l'écriture **/
margin: auto;
line-height: 50px;
font-weight: bold;
}
.PA-Arya-Sablier-Coupe1:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="PA-Arya">
<div class="PA-Arya-Bienvenue">
<h1>Bienvenue sur XX</h1>
Bienvenue sur <span class="FORUMNAME"></span>, <span class="USERNAME"></span>
</div>
<div class="PA-Arya-Contexte">
<h1>Le contexte du forum</h1>
<div>
<h2>Contexte</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Pour en savoir plus, n'hésitez pas à suivre <a target="_blank" href="URL" title="Lien vers le contexte du forum">Portoloin</a></p>
</div>
</div>
<div class="PA-Arya-Staff">
<h1>Le Staff du forum</h1>
<ul>
<li>
<div class="contenu_ongletstaff" id="contenu_onglet_staff1">
<div class="conteneur"><img src="https://66.media.tumblr.com/f79863adc56332aeb0384810ce1f5d34/tumblr_po93g9BEOd1s2nxzho9_250.png" alt="imagestaff1" title="imagestaff1" />
<div class="info"><span class="PA-pseudostaff-Arya">Pseudo</span>
<strong> Rang</strong><br /> Présence - <a target="_blank" href="URL" title="lien vers les MP">MP</a> - <a target="_blank" href="URL" title="lien vers le profil">PROFIL</a></div>
</div>
</div>
</li>
<li>
<div class="contenu_ongletstaff" id="contenu_onglet_staff2">
<div class="conteneur"><img src="https://66.media.tumblr.com/f79863adc56332aeb0384810ce1f5d34/tumblr_po93g9BEOd1s2nxzho9_250.png" alt="imagestaff1" title="imagestaff1" />
<div class="info"><span class="PA-pseudostaff-Arya">Pseudo</span>
<strong> Rang</strong><br /> Présence - <a target="_blank" href="URL" title="lien vers les MP">MP</a> - <a target="_blank" href="URL" title="lien vers le profil">PROFIL</a></div>
</div>
</div>
</li>
<li>
<div class="contenu_ongletstaff" id="contenu_onglet_staff3">
<div class="conteneur"> <img src="https://66.media.tumblr.com/f79863adc56332aeb0384810ce1f5d34/tumblr_po93g9BEOd1s2nxzho9_250.png" alt="imagestaff1" title="imagestaff1" />
<div class="info"> <span class="PA-pseudostaff-Arya">Pseudo</span>
<strong> Rang</strong><br /> Présence - <a target="_blank" href="URL" title="lien vers les MP">MP</a> - <a target="_blank" href="URL" title="lien vers le profil">PROFIL</a></div>
</div>
</div>
</li>
</ul>
<div class="onglet_staff" id="onglet_staff1" onclick="change_onglet('staff1');"> </div>
<div class="onglet_staff" id="onglet_staff2" onclick="change_onglet('staff2');"> </div>
<div class="onglet_staff" id="onglet_staff3" onclick="change_onglet('staff3');"> </div>
</div>
<div class="PA-Arya-Partenaires-Actualite">
<div class="PA-Arya-Partenaires">
<h1>Les demandes et nos partenaires</h1>
<select onchange="location = this.options [this.selectedIndex].value">
<option selected="selected">Nos affiliés d'ailleurs</option>
<option target="_blank" value="URL">Forum</option>
<option target="_blank" value="URL">Forum</option>
<option target="_blank" value="URL">Forum</option>
<option target="_blank" value="URL">Forum</option>
</select>
<a target="_blank" href="URL" title="lien vers la liste de nos partenaires">Nos alliés</a>
<a target="_blank" href="URL" title="lien vers les demandes de partenariat">Nous liers</a>
</div>
<div class="PA-Arya-Actualite">
<h1>Les actualités du forum</h1>
<div>
<h2>Les actualités</h2>
<p><span>20.08</span> : ouverture du forum.</p>
<p><span>20.08</span> : Bilan du mois, pour en savoir plus, n'hésitez pas à suivre <a target="_blank" href="URL" title="Lien vers le contexte du forum">Portoloin.</a></p>
</div>
</div>
</div>
<div class="PA-Arya-Recherches-Event">
<div class="PA-Arya-Rercherches">
<h1>Nos recherchés</h1>
<a target="_blank" href="URL" title="lien vers la liste des prédéfinis"><img src="https://64.media.tumblr.com/e5cbbe88dfca6332f57bed5b4f6c4714/tumblr_inline_p7g6i4EjBk1uvac4a_500.gifv" alt="Ginevra M. Weasley" title="Ginevra M. Weasley" /></a>
<a target="_blank" href="URL" title="lien vers la liste des prédéfinis"><img src="https://64.media.tumblr.com/e5cbbe88dfca6332f57bed5b4f6c4714/tumblr_inline_p7g6i4EjBk1uvac4a_500.gifv" alt="Ginevra M. Weasley" title="Ginevra M. Weasley" /></a>
<a target="_blank" href="URL" title="lien vers la liste des prédéfinis"><img src="https://64.media.tumblr.com/e5cbbe88dfca6332f57bed5b4f6c4714/tumblr_inline_p7g6i4EjBk1uvac4a_500.gifv" alt="Ginevra M. Weasley" title="Ginevra M. Weasley" /></a>
<a target="_blank" href="URL" title="lien vers la liste des prédéfinis"><img src="https://64.media.tumblr.com/e5cbbe88dfca6332f57bed5b4f6c4714/tumblr_inline_p7g6i4EjBk1uvac4a_500.gifv" alt="Ginevra M. Weasley" title="Ginevra M. Weasley" /></a>
<a target="_blank" href="URL" title="lien vers la liste des prédéfinis"><img src="https://64.media.tumblr.com/e5cbbe88dfca6332f57bed5b4f6c4714/tumblr_inline_p7g6i4EjBk1uvac4a_500.gifv" alt="Ginevra M. Weasley" title="Ginevra M. Weasley" /></a>
</div>
<div class="PA-Arya-Event">
<h1>Les évents en cours</h1>
<div>
<h2>Les évents en cours</h2>
<p><span>Attaque du ministère</span> : pour en savoir plus, n'hésitez pas à suivre <a target="_blank" href="URL" title="Lien vers l'évent concerné">Portoloin</a></p>
</div>
</div>
</div>
<div class="PA-Arya-Sablier">
<h1>Les sabliers</h1>
<p>Passe ta souris sur les maisons</p>
<div style="background-image:url(https://nsa40.casimages.com/img/2021/01/28/210128084533563575.png)" class="PA-Arya-Sablier-Coupe">
<div class="PA-Arya-Sablier-Coupe1">8 686</div>
</div>
<div style="background-image:url(https://nsa40.casimages.com/img/2021/01/28/210128084533321066.png)" class="PA-Arya-Sablier-Coupe">
<div class="PA-Arya-Sablier-Coupe1">11 215</div>
</div>
<div style="background-image:url(https://nsa40.casimages.com/img/2021/01/28/21012808453473779.png)" class="PA-Arya-Sablier-Coupe">
<div class="PA-Arya-Sablier-Coupe1">3 214</div>
</div>
<div style="background-image:url(https://nsa40.casimages.com/img/2021/01/28/210128084533815556.png)" class="PA-Arya-Sablier-Coupe">
<div class="PA-Arya-Sablier-Coupe1">6 550</div>
</div>
</div>
<div class="PA-Arya-Credits-Topsites">
<div class="PA-Arya-Credits">
<h1>Les crédits du forum</h1>
<div>
<h2>Disclaimer</h2>
<p>Le design et la maquette dont s'inspire le forum ont été conçus par TWISTY.RAIN. Les codes ont été fait par Arya d'<a target="_blank" href="URL" title="Lien vers le forum ayant codé la maquette">Epicode</a>. Merci à eux.</p>
</div>
</div>
<div class="PA-Arya-Topsites">
<h1>Les topsites</h1>
<ul>
<li><a target="_blank" href="URL" title="lien vers topsite"><img src="https://zupimages.net/up/20/26/on0a.png" alt="imagetopsite" tilte="imagetopsite" /></a></li>
<li><a target="_blank" href="URL" title="lien vers topsite"><img src="https://zupimages.net/up/20/26/on0a.png" alt="imagetopsite" tilte="imagetopsite" /></a></li>
<li><a target="_blank" href="URL" title="lien vers topsite"><img src="https://zupimages.net/up/20/26/on0a.png" alt="imagetopsite" tilte="imagetopsite" /></a></li>
</ul>
</div>
</div>
<div class="PA-Arya-Liens">
<h1>Les liens utiles</h1>
<ul>
<li><a target="_blank" href="URL" title="Lien vers le règlement du forum">Règlement</a></li> -
<li><a target="_blank" href="URL" title="Lien vers le contexte du forum">Contexte</a></li> -
<li><a target="_blank" href="URL" title="Lien vers le bottin des avatars">Bottins des avatars</a></li> -
<li><a target="_blank" href="URL" title="Lien vers les postes vacants du forum">Postes vacants</a></li> -
<li><a target="_blank" href="URL" title="Lien vers les anexes du forum">Annexes</a></li> -
<li><a target="_blank" href="URL" title="Lien vers les demandes de partenariat du forum">Partenariats</a></li> -
<li><a target="_blank" href="URL" title="Lien vers la partie des invités du forum">Invités</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://js01.fra.co/24922.js"></script>
<script type="text/javascript">
/* Fonction de gestion des onglets */
function change_onglet(name) {
let ongletAncien = document.getElementById(`onglet_${anc_onglet}`);
let ongletNouveau = document.getElementById(`onglet_${name}`);
let contenuOngletAncien = document.getElementById(`contenu_onglet_${anc_onglet}`);
let contenuOngletNouveau = document.getElementById(`contenu_onglet_${name}`);
if (ongletAncien && ongletNouveau && contenuOngletNouveau && contenuOngletAncien) {
/* cache le précédent contenu */
ongletAncien.classList.remove('ongletstaff_actif');
contenuOngletAncien.style.display = 'none';
/* Affiche le nouveau contenu */
ongletNouveau.classList.add('ongletstaff_actif');
contenuOngletNouveau.style.display = 'block';
/* met à jour la valeur de l'onglet actif */
anc_onglet = name;
} else if (!ongletAncien) {
console.error("Erreur script onglet : L'onglet d'identifiant \'onglet_" + anc_onglet + "\' est introuvable")
} else if (!ongletNouveau) {
console.error("Erreur script onglet : L'onglet d'identifiant \'onglet_" + name + "\' est introuvable")
} else if (!contenuOngletAncien) {
console.error("Erreur script onglet : Le conteneur d'identifiant \'contenu_" + anc_onglet + "\' est introuvable")
} else if (!contenuOngletNouveau) {
console.error("Erreur script onglet : Le conteneur d'identifiant \'contenu_" + name + "\' est introuvable")
}
}
/* initialisation des onglets */
var anc_onglet = 'staff1';
change_onglet(anc_onglet);
</script>
</body>
</html>
|
|
|
