Commande de Page d'accueil

Bonjour Skaemp !!!
J'espère que vous avez bien profité de Sapporo !!
J'ai cru comprendre que vous aviez rouvert les commandes de Page d'accueil, pour mon plus grand bonheur!!! I love you

je me permet donc de venir vous donner une commande!! En espérant qu'elle ne soit pas trop compliquée à réaliser! Et en espérant que je ne sois pas trop exigeante!!

Largeur maximale : 800 px
Hauteur maximale : 650 px
Schéma : Le schéma
Éléments : Je ne comprends pas ce que vous entendez par là :/
Images : Je vous confie l'image de fond de la PA ici
Voici l'image pour le bouton des votes ici
L'image pour les PVs et Scénarios ici
Animations : Alors oui, il y en a :

Pour commencer, je souhaiterai une scrollbar sur le contexte, l'event en cours et les partenaires!
Ensuite, un effet de fondu vers une autre couleur sur les liens "Contexte Annexes Bottins Groupes Règlement Partenariat Parrainage".
Pour le staff, les ronds correspondent à chaque staffien. En cliquant dessus, je souhaiterai un effet de fondu vers un autre staffien. J'espère être assez précise pour cette demande, j'y tiens énormément
Informations supplémentaires : Comme vous l'avez sans doute compris, je ferais moi même le fond de la PA qui l'habillera!
Pour tout ce qui est typographie, j'aime pouvoir modifier tout moi même!
Dans les cases "contexte, event et partenaires" ce sera du texte.
Je souhaiterai le redimensionnement automatique des images du staff.
Les scénarios et PVs du forum seront une image faite par moi même, je souhaiterais simplement que l'on puisse mettre un lien dessus.
Le membre et le groupe du mois seront directement incrustés dans l'image du fond de la PA, je souhaiterais avoir un lien sur l'image. Faut il que je mette une image transparente à cet endroit du coup? Si oui, le fond fais 200*170

Voilà! Je crois que je n'ai rien oublié, du moins je l'espère!
Je vous remercie d'avance pour le temps que vous prendrez à faire ma commande I love you

Bonne journée!

Après une petite réflexion, j'aimerais savoir si, au passage de la souris sur le membre et le groupe du mois, peut apparaitre en fondu "Prénom P² Nom" et "Profil/fiche de liens/MP" s'il vous plait I love you

Bonjour,

Code:: <div class="SHAM"><div class="lksSHAM"><a href="" target="_blank">Contexte</a><a href="" target="_blank">Annexes</a><a href="" target="_blank">Bottins</a><a href="" target="_blank">Groupes</a><a href="" target="_blank">Règlement</a><a href="" target="_blank">Partenariat</a><a href="" target="_blank">Parrainage</a></div><div class="ctxtSHAM">Contexte.</div><div class="eventSHAM">Evénement en cours.</div><div class="staffSHAM"><input type="radio" name="slides" id="slides_1" checked /><input type="radio" name="slides" id="slides_2" /><input type="radio" name="slides" id="slides_3" /><input type="radio" name="slides" id="slides_4" /><input type="radio" name="slides" id="slides_5" /><div class="bullSHAM"><div><label for="slides_1"></label><label for="slides_2"></label><label for="slides_3"></label><label for="slides_4"></label><label for="slides_5"></label></div></div><ul><li><img src="" /><span>NOM<br/>Prénom(s)</span>Pseudonyme * <font style="color:forestgreen">Disponibilité</font><br/>Fonction : <a href="" target="_blank">MP</a>/<a href="" target="_blank">Profil</a><br/>Autres comptes</li><li><img src="" /><span>NOM<br/>Prénom(s)</span>Pseudonyme * <font style="color:forestgreen">Disponibilité</font><br/>Fonction : <a href="" target="_blank">MP</a>/<a href="" target="_blank">Profil</a><br/>Autres comptes</li><li><img src="" /><span>NOM<br/>Prénom(s)</span>Pseudonyme * <font style="color:forestgreen">Disponibilité</font><br/>Fonction : <a href="" target="_blank">MP</a>/<a href="" target="_blank">Profil</a><br/>Autres comptes</li><li><img src="" /><span>NOM<br/>Prénom(s)</span>Pseudonyme * <font style="color:forestgreen">Disponibilité</font><br/>Fonction : <a href="" target="_blank">MP</a>/<a href="" target="_blank">Profil</a><br/>Autres comptes</li><li><img src="" /><span>NOM<br/>Prénom(s)</span>Pseudonyme * <font style="color:forestgreen">Disponibilité</font><br/>Fonction : <a href="" target="_blank">MP</a>/<a href="" target="_blank">Profil</a><br/>Autres comptes</li></ul></div><div class="pfSHAM"><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466423371-scenarios.png" /></a></div><div class="partSHAM"><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a><a href="" target="_blank"><img src="" /></a></div><div class="mdmSHAM">NOM<br/>Prénom(s)<br/><br/><a href="" target="_blank">Profil</a><a href="" target="_blank">Fiche de liens</a><a href="" target="_blank">MP</a></div><div class="grpSHAM">NOM<br/>Prénom(s)<br/><br/><a href="" target="_blank">Profil</a><a href="" target="_blank">Fiche de liens</a><a href="" target="_blank">MP</a></div><div class="topSHAM"><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466422314-image-vote.png" /></a><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466422314-image-vote.png" /></a><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466422314-image-vote.png" /></a><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466422314-image-vote.png" /></a><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466422314-image-vote.png" /></a><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466422314-image-vote.png" /></a></div></div>

Partie CSS :
Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS

Code:: /* PAGE D'ACCUEIL */
.SHAM {
margin:auto; width:800px; height:650px; line-height:16px;
background:url(http://image.noelshack.com/fichiers/2016/25/1466423660-schema-pa-fond.png); /* MODIFIABLE */
}
.SHAM a{
text-decoration:none !important;
}
/* BLOC LIENS */
.lksSHAM {
position:absolute; margin-top:80px; width:800px; text-align:center;
}
/* LIEN BLOC LIENS */
.lksSHAM a{
margin:0 5px;
font-size:18px; color:black; /* MODIFIABLE */
transition:all 1.25s; -webkit-transition:all 1.25s;
}
/* SURVOL LIEN BLOC LIENS */
.lksSHAM a:hover {
color:coral; /* MODIFIABLE */
}
/* CONTEXTE */
.ctxtSHAM {
position:absolute; margin-left:17px; margin-top:119px;
width:190px; height:240px; padding:5px; overflow:auto;
font-size:12px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* EVENEMENT EN COURS */
.eventSHAM {
position:absolute; margin-left:229px; margin-top:119px;
width:190px; height:240px; padding:5px; overflow:auto;
font-size:12px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* PREDEFINIS */
.pfSHAM {
position:absolute; margin-top:380px; margin-left:15px;
width:345px; text-align:center;
}
/* PARTENAIRES */
.partSHAM {
position:absolute; margin-top:514px; margin-left:13px;
width:350px; height:110px; padding-top:5px; overflow:auto; text-align:center;
}
.partSHAM a{
margin:5px;
}
/* MEMBRE DU MOIS */
.mdmSHAM {
position:absolute; margin-left:372px; margin-top:386px;
width:200px; height:145px; padding-top:25px;
background:coral; color:black; /* MODIFIABLE */
text-align:center; font-size:28px; line-height:24px; opacity:0;
}
.mdmSHAM:hover {
opacity:1;
}
/* LIENS MEMBRE DU MOIS */
.mdmSHAM a{
display:block; text-transform:uppercase; line-height:14px;
color:grey; font-size:14px; /* MODIFIABLE */
}
/* GROUPE DU MOIS */
.grpSHAM {
position:absolute; margin-left:582px; margin-top:386px;
width:200px; height:145px; padding-top:25px;
background:lightcoral; color:black; /* MODIFIABLE */
text-align:center; font-size:28px; line-height:24px; opacity:0;
}
.grpSHAM:hover {
opacity:1;
}
/* LIENS GROUPE DU MOIS */
.grpSHAM a{
display:block; text-transform:uppercase; line-height:14px;
color:grey; font-size:14px; /* MODIFIABLE */
}
/* TOP-SITES */
.topSHAM {
position:absolute; margin-top:580px; margin-left:400px;
}
/* BLOC STAFF */
.staffSHAM{
position:absolute; margin-top:211px; margin-left:440px;
width:344px; height:160px; text-align:center;
}
/* BLOC CONTENU STAFF */
.staffSHAM ul {
position:relative; margin:0 auto;
width:330px; height:150px; padding:5px; overflow:hidden;
font-size:0; line-height:0; white-space: nowrap;
}
/* CONTENU STAFF */
.staffSHAM ul li {
position: relative; display:inline-block; vertical-align:top;
width:100%; height:100%; overflow:hidden;
line-height: normal; white-space:normal;
font-size:10px; text-transform:uppercase; color:black; /* MODIFIABLE */
transition: all 0.35s linear; -webkit-transition: all 0.35s linear;
}
/* IMAGE STAFF */
.staffSHAM ul li img{
float:left; margin:5px; width:140px; height:140px; border-radius:140px;
}
/* NOM PRENOM(S) STAFF */
.staffSHAM ul li span{
display:block; margin:10px auto; text-align:center; font-size:24px;
}
/* NAVIGATION SLIDE */
.staffSHAM .bullSHAM {
position:absolute; margin-top:-35px; left:50%;
font-size:0; line-height:0; text-align:center;
}
.staffSHAM .bullSHAM div {
margin-left:-100%;
}
/* BULLE STAFF */
.staffSHAM .bullSHAM label {
position:relative; display:inline-block; margin:0 5px;
padding:9px; border-radius:50%;
background:white; /* MODIFIABLE */
}
/* SURVOL BULLE STAFF */
.staffSHAM .bullSHAM label:after {
position:absolute; left:50%; top:50%; margin-left:-10px; margin-top:-10px;
content:''; padding:10px; border-radius:50%; opacity: 0;
background:coral; /* MODIFIABLE */
}
.staffSHAM .bullSHAM label:hover:after {
opacity: 1;
}
.staffSHAM > input:nth-of-type(1):checked ~ .bullSHAM label:nth-of-type(1):after,
.staffSHAM > input:nth-of-type(2):checked ~ .bullSHAM label:nth-of-type(2):after,
.staffSHAM > input:nth-of-type(3):checked ~ .bullSHAM label:nth-of-type(3):after,
.staffSHAM > input:nth-of-type(4):checked ~ .bullSHAM label:nth-of-type(4):after,
.staffSHAM > input:nth-of-type(5):checked ~ .bullSHAM label:nth-of-type(5):after,
.staffSHAM > input:nth-of-type(6):checked ~ .bullSHAM label:nth-of-type(6):after,
.staffSHAM > input:nth-of-type(7):checked ~ .bullSHAM label:nth-of-type(7):after,
.staffSHAM > input:nth-of-type(8):checked ~ .bullSHAM label:nth-of-type(8):after,
.staffSHAM > input:nth-of-type(9):checked ~ .bullSHAM label:nth-of-type(9):after,
.staffSHAM > input:nth-of-type(10):checked ~ .bullSHAM label:nth-of-type(10):after,
.staffSHAM > input:nth-of-type(11):checked ~ .bullSHAM label:nth-of-type(11):after {
opacity: 1;
}
.staffSHAM > input {
display:none;
}
.staffSHAM > input:nth-of-type(10):checked ~ ul li:first-of-type {
margin-left:-900%;
}
.staffSHAM > input:nth-of-type(9):checked ~ ul li:first-of-type {
margin-left:-800%;
}
.staffSHAM > input:nth-of-type(8):checked ~ ul li:first-of-type {
margin-left:-700%;
}
.staffSHAM > input:nth-of-type(7):checked ~ ul li:first-of-type {
margin-left:-600%;
}
.staffSHAM > input:nth-of-type(6):checked ~ ul li:first-of-type {
margin-left:-500%;
}
.staffSHAM > input:nth-of-type(5):checked ~ ul li:first-of-type {
margin-left:-400%;
}
.staffSHAM > input:nth-of-type(4):checked ~ ul li:first-of-type {
margin-left:-300%;
}
.staffSHAM > input:nth-of-type(3):checked ~ ul li:first-of-type {
margin-left:-200%;
}
.staffSHAM > input:nth-of-type(2):checked ~ ul li:first-of-type {
margin-left:-100%;
}
.staffSHAM > input:nth-of-type(1):checked ~ ul li:first-of-type {
margin-left:0%;
}

Instructions :

I. Copier/coller le code initial dans un sujet dédié de sa partie administration
II. Modifier le code à partir du logiciel de sa préférence
III. Actualiser le code du sujet dédié
IV. Remplacer l'intégralité du code dans la partie correspondante du panneau d'administration
∟ Affichage > Page d'accueil > Généralités
∞ Répéter les étapes II à IV à chaque modification

OOoooh!!! Merci infiniment pour votre travail!! C'est parfait parfait!! I love you

Passez une excellente journée!