Commande de Page d'accueil

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageCommande de Page d'accueil Lun 20 Juin - 13:55
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 I love you

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!
Revenir en haut Aller en bas
MessageRe: Commande de Page d'accueil Lun 20 Juin - 18:31
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
Revenir en haut Aller en bas
MessageRe: Commande de Page d'accueil Mer 22 Juin - 6:06
avatar
Nombre de messages : 843
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Bonjour,

Code:
<!-- PAGE D'ACCUEIL --><div class="SHAM"><!-- LIENS --><div class="lksSHAM"><!-- I --><a href="" target="_blank">Contexte</a><!-- II --><a href="" target="_blank">Annexes</a><!-- III --><a href="" target="_blank">Bottins</a><!-- IV --><a href="" target="_blank">Groupes</a><!-- V --><a href="" target="_blank">Règlement</a><!-- VI --><a href="" target="_blank">Partenariat</a><!-- VII --><a href="" target="_blank">Parrainage</a></div><!-- CONTEXTE --><div class="ctxtSHAM">Contexte.</div><!-- EVENEMENT EN COURS --><div class="eventSHAM">Evénement en cours.</div><!-- STAFF --><div class="staffSHAM"><!-- NAVIGATION SLIDE --><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><!-- CONTENUS STAFF --><ul><!-- I --><li><!-- IMAGE 150*150 --><img src="" /><!-- CONTENU --><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><!-- II --><li><!-- IMAGE 150*150 --><img src="" /><!-- CONTENU --><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><!-- III --><li><!-- IMAGE 150*150 --><img src="" /><!-- CONTENU --><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><!-- IV --><li><!-- IMAGE 150*150 --><img src="" /><!-- CONTENU --><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><!-- V --><li><!-- IMAGE 150*150 --><img src="" /><!-- CONTENU --><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><!-- PREDEFINIS --><div class="pfSHAM"><a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/25/1466423371-scenarios.png" /></a></div><!-- PARTENAIRES --><div class="partSHAM"><!-- I --><a href="" target="_blank"><img src="" /></a><!-- II --><a href="" target="_blank"><img src="" /></a><!-- III --><a href="" target="_blank"><img src="" /></a><!-- IV --><a href="" target="_blank"><img src="" /></a><!-- V --><a href="" target="_blank"><img src="" /></a><!-- VI --><a href="" target="_blank"><img src="" /></a><!-- VII --><a href="" target="_blank"><img src="" /></a><!-- VIII --><a href="" target="_blank"><img src="" /></a><!-- IX --><a href="" target="_blank"><img src="" /></a></div><!-- MEMBRE DU MOIS --><div class="mdmSHAM">NOM<br/>Prénom(s)<!-- LIENS --><br/><br/><a href="" target="_blank">Profil</a><a href="" target="_blank">Fiche de liens</a><a href="" target="_blank">MP</a></div><!-- GROUPE DU MOIS --><div class="grpSHAM">NOM<br/>Prénom(s)<!-- LIENS --><br/><br/><a href="" target="_blank">Profil</a><a href="" target="_blank">Fiche de liens</a><a href="" target="_blank">MP</a></div><!-- TOP-SITES --><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
Revenir en haut Aller en bas
MessageRe: Commande de Page d'accueil Mer 22 Juin - 11:26
OOoooh!!! Merci infiniment pour votre travail!! C'est parfait parfait!! I love you I love you
Passez une excellente journée!
Revenir en haut Aller en bas
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CCCrush. :: Exposition NLDD :: Intruders :: Réalisés-