Voici un petit LS d'une PA que j'ai fait pour la demande de Thanil et qui avait déjà été commencé par Hirondelle.
Effets spéciaux :
Au survol de l'image au centre (le membre du mois), une infobulle avec les informations du membre du mois apparaît.
Le carré en haut à gauche a 3 onglets : Contexte, Événement et Partenaires.
Le carré en bas à droite a 2 onglets : Informations et Recherchés (Prédéfinis).
Pour voir l'aperçu : cliquez ici.
Ce LS est en deux parties.
- Tout d'abord, nous allons installer le HTML de la PA.
- Puis, nous allons le mettre en forme à l'aide du CSS.
- La version du forum est PHPBB2.
- Les catégories ont une largeur de 850px.
- Les catégories ont une largeur de 850px.
Mettre un crédit vers Never-Utopia est obligatoire. Donc si vous enlevez le crédit sur la PA, assurez-vous de le mettre ailleurs.
Vos commentaires et remerciements sont toujours bienvenus ^^
Nous allons commencer par aller dans l'espace de la page d'accueil pour y mettre la partie HTML.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > PAGE D'ACCUEIL
> > > > GÉNÉRALITÉS
> > > > > CONTENU DU MESSAGE
On y met le code suivant et on enregistre :
- Code:
<script type="text/javascript">
//<!--
function change_paonglet(name)
{
document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
document.getElementById('contenu_paonglet_'+name).style.display = 'block';
anc_paonglet = name;
}
//-->
</script><script type="text/javascript">
//<!--
function change_papaonglet(name)
{
document.getElementById('papaonglet_'+anc_papaonglet).className = 'papaonglet_0 papaonglet';
document.getElementById('papaonglet_'+name).className = 'papaonglet_1 papaonglet';
document.getElementById('contenu_papaonglet_'+anc_papaonglet).style.display = 'none';
document.getElementById('contenu_papaonglet_'+name).style.display = 'block';
anc_papaonglet = name;
}
//-->
</script>
<div class="pa">
<div class="pa_credits">
PA par Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
</div>
<div class="pa_infobulle">
<img alt="Image du membre du mois" src="http://www.zupimages.net/up/15/14/pcnf.png" />
<div class="pa_infobulle_inside">
Félicitation à NOM qui est le membre du mois de MOIS !
</div>
</div>
<div class="pa_bloc_left_top">
<div class="onglets_left_top">
<span onclick="javascript:change_paonglet('Contexte');" id="paonglet_Contexte" class="paonglet_1 paonglet">Contexte</span><span onclick="javascript:change_paonglet('Evenement');" id="paonglet_Evenement" class="paonglet_0 paonglet">Événement</span><span onclick="javascript:change_paonglet('Partenaires');" id="paonglet_Partenaires" class="paonglet_0 paonglet">Partenaires</span>
</div>
<div id="contenu_paonglet_Contexte" class="contenu_paonglet">
<div class="pa_inside">
Texte de Contexte
</div>
</div>
<div id="contenu_paonglet_Evenement" class="contenu_paonglet">
<div class="pa_inside">
Texte de Événement.
</div>
</div>
<div id="contenu_paonglet_Partenaires" class="contenu_paonglet">
<div class="pa_inside">
Texte de Partenaires.
</div>
</div><script type="text/javascript">
//<!--
var anc_paonglet = 'Contexte';
change_paonglet(anc_paonglet);
//-->
</script>
</div>
<div class="pa_bloc_right_top">
<div class="staff_bloc">
<div class="pa_title">
Staff
</div>
<span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de Staff1" /></span><span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de Staff1" /></span><span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de Staff1" /></span>
</div>
</div>
<div class="pa_bloc_left_bottom">
<div class="rpmois_bloc">
<div class="pa_title">
RPs du mois
</div>
<span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de RP du mois" /></span><span><img src="http://www.zupimages.net/up/15/14/pcnf.png" alt="Image de RP du mois" /></span><br /><a target="_blank" href="#">Lien vers le RP</a><a target="_blank" href="#">Lien vers le RP</a>
</div>
</div>
<div class="pa_bloc_right_bottom">
<div class="onglets_right_bottom">
<span onclick="javascript:change_papaonglet('Informations');" id="papaonglet_Informations" class="papaonglet_1 papaonglet">Informations</span><span onclick="javascript:change_papaonglet('Recherches');" id="papaonglet_Recherches" class="papaonglet_0 papaonglet">Recherchés</span>
</div>
<div id="contenu_papaonglet_Informations" class="contenu_papaonglet">
<div class="pa_inside">
Texte de Informations.
</div>
</div>
<div id="contenu_papaonglet_Recherches" class="contenu_papaonglet">
<div class="pa_inside">
Texte de Recherchés.
</div>
</div><script type="text/javascript">
//<!--
var anc_papaonglet = 'Informations';
change_papaonglet(anc_papaonglet);
//-->
</script>
</div>
<div style="clear: both;">
</div>
<div class="pa_bloc_bottom">
<a href="#" target="_blank">Règlement</a><a href="#" target="_blank">Présentation</a><a href="#" target="_blank">Top-Sites</a>
</div>
</div>
Si vous regardez votre PA, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre PA à l'aide du CSS.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS
Puis, nous allons ajouter le CSS suivant :
- Code:
/* -------------------------------------------------- PA -------------------------------------------------- */
.pa {
position: relative;
background-color: #3f3f3f;
background-image: url('http://img15.hostingpics.net/pics/461112Fond.png');
border: 5px solid #363A5D;
border-radius: 50px;
height: 480px;
width: 850px;
font-family: 'Verdana';
overflow: hidden;
font-size: 12px;
}
/*Crédits*/
.pa_credits {
position: absolute;
right: 30px;
top: 0px;
color: #93909b;
font-size: 12px;
text-shadow: none;
font-variant: small-caps;
}
.pa_credits a {
font-family: 'Verdana';
color: #786FA8;
font-size: 12px;
text-shadow: none;
font-variant: small-caps;
}
/*Titres dans la PA*/
.pa_title {
text-align: center;
color: #786FA8;
font-size: 15px;
font-weight: 700;
margin-bottom: 5px;
text-decoration: none;
text-shadow: 1px 1px 1px #1D1934;
text-transform: uppercase;
}
/*Bloc du membre du mois*/
.pa_infobulle {
position: absolute;
top: 138px;
left: 345px;
width: 150px;
height: 150px;
border: 5px solid #363A5D;
border-radius: 100%;
}
/*Image du membre du mois*/
.pa_infobulle img {
width: 150px;
height: 150px;
border-radius: 100%;
}
/*Texte du membre du mois*/
.pa_infobulle_inside {
position: absolute;
top: 5px;
left: 5px;
width: 120px;
height: 120px;
overflow: auto;
border-radius: 20px;
background-color: #333438;
border: 5px solid #363A5D;
padding: 5px;
text-align: center;
color: #93909b;
font-size: 12px;
transform: rotate(-360deg) scale(0);
-webkit-transform: rotate(-360deg) scale(0);
transition: 0.5s;
-webkit-transition: 0.5s;
}
/*Apparition du texte du membre du mois*/
.pa_infobulle:hover .pa_infobulle_inside {
transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
}
/*Bloc en haut à gauche*/
.pa_bloc_left_top {
float: left;
margin-top: 10px;
margin-left: 20px;
width: 390px;
height: 183px;
}
/*Bloc des onglets*/
.onglets_left_top {
width: 390px;
height: 20px;
text-align: center;
color: #786FA8;
font-size: 15px;
font-weight: 700;
text-decoration: none;
text-shadow: 1px 1px 1px #1D1934;
text-transform: uppercase;
}
/*Espacement des onglets*/
#paonglet_Evenement {
display: inline-block;
margin-left: 15px;
margin-right: 15px;
}
/*Onglets inactifs*/
.paonglet_0 {
opacity: 0.8;
text-shadow: none;
}
/*Onglets inactifs au survol*/
.paonglet_0:hover {
cursor: pointer;
text-shadow: 1px 1px 1px #1D1934;
}
/*Blocs des contenus des onglets - Contexte -Événements - Partenaires*/
.contenu_paonglet {
display: none;
width: 370px;
height: 153px;
background-color: #333438;
border: 5px solid #363A5D;
border-radius: 5px;
padding: 5px;
text-align: left;
color: #93909b;
}
/*Intérieur des contenus des onglets*/
.contenu_paonglet .pa_inside {
width: 327px;
height: 153px;
text-align: justify;
overflow: auto;
padding-right: 5px;
}
/*Bloc en haut à droite*/
.pa_bloc_right_top {
float: left;
margin-top: 20px;
margin-left: 30px;
width: 390px;
height: 183px;
}
/*Bloc du staff*/
.staff_bloc {
width: 355px;
height: 163px;
background-color: #333438;
border: 5px solid #363A5D;
border-radius: 5px;
padding: 5px;
padding-left: 20px;
text-align: center;
color: #93909b;
}
.staff_bloc span {
display: inline-block;
width: 85px;
height: 115px;
border-radius: 100%;
margin-top: 5px;
margin-left: 10px;
margin-right: 5px;
border: 5px solid #363A5D;
}
/*Images du staff*/
.staff_bloc img {
width: 85px;
height: 115px;
border-radius: 100%;
}
/*Bloc en bas à gauche*/
.pa_bloc_left_bottom {
float: left;
margin-top: 30px;
margin-left: 20px;
width: 390px;
height: 183px;
}
/*Bloc des RPs du mois*/
.rpmois_bloc {
width: 370px;
height: 163px;
background-color: #333438;
border: 5px solid #363A5D;
border-radius: 5px;
padding: 5px;
text-align: center;
color: #93909b;
}
/*Bloc des images des RPs du mois*/
.rpmois_bloc span {
display: inline-block;
width: 100px;
height: 100px;
border: 5px solid #363A5D;
border-radius: 100%;
margin-top: 2px;
margin-left: 15px;
margin-right: 25px;
}
/*Images des RPs du mois*/
.rpmois_bloc img {
width: 100px;
height: 100px;
border-radius: 100%;
}
/*Liens des RPs du mois*/
.rpmois_bloc a {
display: inline-block;
vertical-align: top;
width: 110px;
margin-top: 1px;
margin-left: 15px;
margin-right: 25px;
color: #E7E7E7;
font-size: 13px;
text-shadow: 1px 1px 1px #777777;
text-transform: uppercase;
font-family: 'Verdana';
}
/*Bloc en bas à droite*/
.pa_bloc_right_bottom {
float: left;
margin-top: 20px;
margin-left: 30px;
width: 390px;
height: 183px;
}
/*Onglets de en bas à droite - Informations et Autres*/
.onglets_right_bottom {
width: 390px;
height: 20px;
text-align: right;
color: #786FA8;
font-size: 15px;
font-weight: 700;
margin-left: 10px;
text-decoration: none;
text-shadow: 1px 1px 1px #1D1934;
text-transform: uppercase;
}
/*Espacement des onglets*/
#papaonglet_Recherches {
display: inline-block;
margin-left: 15px;
margin-right: 15px;
}
/*Onglets inactifs*/
.papaonglet_0 {
opacity: 0.8;
text-shadow: none;
}
/*Onglets inactifs survolés*/
.papaonglet_0:hover {
cursor: pointer;
text-shadow: 1px 1px 1px #1D1934;
}
/*Contenu des onglets*/
.contenu_papaonglet {
display: none;
width: 370px;
height: 153px;
background-color: #333438;
border: 5px solid #363A5D;
border-radius: 5px;
padding: 5px;
color: #93909b;
}
/*Intérieur du contenu des onglets*/
.contenu_papaonglet .pa_inside {
padding-left: 48px;
width: 322px;
height: 153px;
text-align: justify;
overflow: auto;
padding-right: 5px;
margin-right: -5px;
}
/*Bas de la PA*/
.pa_bloc_bottom {
margin-top: 20px;
width: 850px;
height: 33px;
background-color: #333438;
border-top: 5px solid #363a5d;
border-radius: 0px 0px 50px 50px;
padding-top: 7px;
}
/*Liens du bas de la PA*/
.pa_bloc_bottom a {
color: #786FA8;
font-size: 20px;
font-weight: 700;
text-decoration: none;
text-shadow: 1px 1px 1px #1D1934;
text-transform: uppercase;
font-family: 'Verdana';
}
/*Espacement entre les liens*/
.pa_bloc_bottom a:nth-child(2) {
display: inline-block;
margin-left: 80px;
margin-right: 80px;
}
/* -------------------------------------------------- FIN PA -------------------------------------------------- */
C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier la PA et avez besoin d'aide.
À plus !
Dernière édition par Onyx le Mer 30 Mai 2018 - 0:42, édité 2 fois
