Commande de fiche de partenariat

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageCommande de fiche de partenariat Jeu 16 Juin - 6:02
Bonjour Skaemp,
Je reviens vers vous pour solliciter vos merveilleux services. Mais je tiens d'abord à confesser que ma commande n'est pas une fiche de partenariat. J'ai mis cela parce que c'est ce qui y ressemble le plus à mon avis.

Je voudrais commander une fiche qui me permettrait de faire le top du Mois (Maison gagnante, membres du mois, etc...) aux membres de mon forum. Si cela ne rentre pas dans le cadre des commandes acceptées, veuillez m'excuser d'avance et me le signifier pour que je revienne plus tard.

En attendant, voici les données:

Largeur maximale : 650px
Hauteur maximale : auto
Schéma : http://img15.hostingpics.net/pics/340040fichetopdumois.jpg
Éléments : Le schéma dit tout je crois^^
Animations : Je vous laisse décider des animations qui pourraient être intéressantes au niveau des images pour les groupes. Pour les avatars, je voudrais bien un léger niveau de gris qui disparaît au passage de la souris svp♥
Informations supplémentaires : A votre appréciation.

Voilà, vous savez tout. Merci d'avance!♥

Ps: J'ai également une autre commande qui aurait pu être posté au même moment que celui-ci mais je ne sais pas du tout dans quelle catégorie elle entre. Si vous voulez y jeter un coup d’œil, dites le moi svp :)
Revenir en haut Aller en bas
MessageRe: Commande de fiche de partenariat Ven 17 Juin - 7:17
avatar
Nombre de messages : 904
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Bonjour,

Code:
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet" type="text/css"><!-- FICHE --><div class="TMONTH"><!-- TITRE --><div class="tleTMONTH">Le top du mois<!-- MOIS --><span>Juin 2016</span></div><!-- ZONE DE TEXTE --><div class="descTMONTH">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div><!-- CLASSEMENT DU MOIS - IMAGES EN 275*160 --><div class="tleIITMONTH" style="color:pink;">Classement du mois</div><!-- I --><div class="grpTMONTH"><b style="color:green;">Ier : Groupe</b>Avec un total de X points<!-- IMAGE & INFORMATIONS --><div><!-- INFORMATIONS --><p>Informations</p><!-- IMAGE --><img src="" /></div></div><!-- II --><div class="grpTMONTH"><b style="color:blue;">IInd : Groupe</b>Avec un total de X points<!-- IMAGE & INFORMATIONS --><div><!-- INFORMATIONS --><p>Informations</p><!-- IMAGE --><img src="" /></div></div><br/><!-- III --><div class="grpTMONTH"><b style="color:lightcoral;">IIIème : Groupe</b>Avec un total de X points<!-- IMAGE & INFORMATIONS --><div><!-- INFORMATIONS --><p>Informations</p><!-- IMAGE --><img src="" /></div></div><!-- IV --><div class="grpTMONTH"><b style="color:crimson;">IVème : Groupe</b>Avec un total de X points<!-- IMAGE & INFORMATIONS --><div><!-- INFORMATIONS --><p>Informations</p><!-- IMAGE --><img src="" /></div></div><br/><br/><!-- NOUVEAUX DU MOIS --><div class="boxTMONTH"><!-- TITRE --><span>Nouveaux du mois</span><!-- I --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div><!-- II --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div><!-- III --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div></div><!-- FLOODEURS DU MOIS --><div class="boxTMONTH"><!-- TITRE --><span>Floodeurs du mois</span><!-- I --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div><!-- II --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div><!-- III --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div></div><br/><br/><!-- MEMBRES DU MOIS --><div class="mdmTMONTH"><!-- TITRE --><span>Membres du mois</span><!-- I --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div><!-- II --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div><!-- III --><div><!-- PSEUDONYME --><p>Pseudonyme</p><!-- IMAGE --><img src="" /></div></div><!-- ZONE DE TEXTE --><div class="descTMONTH">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div>

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

Code:
/* FICHE TOP DU MOIS */
.TMONTH {
margin:auto; width:650px; padding-bottom:10px; text-align:center;
background:white; /* MODIFIABLE */
}
/* TITRE */
.tleTMONTH {
margin:auto; width:650px; padding:15px 0;
font-size:28px; text-transform:uppercase; text-align:center;
background:pink; color:white; text-shadow:0 0 2px lightgrey; /* MODIFIABLE */
}
/* MOIS */
.tleTMONTH span{
display:block; font-size:18px;
}
/* ZONES DE TEXTE */
.descTMONTH {
margin:10px auto; width:95%; text-align:justify;
color:black; /* MODIFIABLE */
}
/* TITRE CLASSEMENT */
.tleIITMONTH {
font-family:Courgette; font-size:28px;
color:pink; text-shadow:0 0 2px lightgrey; /* MODIFIABLE */
}
/* BLOC GROUPES */
.grpTMONTH {
display:inline-block; vertical-align:top; margin:5px 15px; padding:10px;
background:lightgrey; font-size:12px; /* MODIFIABLE */
}
.grpTMONTH div{
margin-top:5px; width:275px; height:160px;
}
/* NOMS DES GROUPES */
.grpTMONTH b{
display:block; font-size:18px;
}
.grpTMONTH div img{
width:275px; height:160px;
}
/* INFORMATIONS GROUPES */
.grpTMONTH div p{
position:absolute; z-index:3; margin-top:0;
width:265px; height:150px; padding:5px;
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
text-align:justify; opacity:0; transition:all 0.55s; -webkit-transition:all 0.55s;
}
.grpTMONTH div:hover p{
opacity:1;
}
/* BLOCS NOUVEAUX & FLOODEURS */
.boxTMONTH {
display:inline-block; vertical-align:top;
}
/* TITRES NOUVEAUX & FLOODEURS */
.boxTMONTH span{
display:block; font-family:Courgette; font-size:24px;
color:pink; text-shadow:0 0 2px lightgrey; /* MODIFIABLE */
}
/* BLOCS AVATARS NOUVEAUX & FLOODEURS */
.boxTMONTH div{
display:inline-block; margin:5px; width:75px; height:100px; border:10px solid;
border-color:grey; /* MODIFIABLE */
}
.boxTMONTH div img{
width:75px; height:100px;
filter:grayscale(0.4); -webkit-filter:grayscale(0.4); transition:all 0.55s; -webkit-transition:all 0.55s;
}
.boxTMONTH div:hover img{
filter:grayscale(0); -webkit-filter:grayscale(0);
}
/* PSEUDONYMES NOUVEAUX & FLOODEURS */
.boxTMONTH div p{
position:absolute; margin-top:0; z-index:3;
width:75px; height:100px;  overflow:hidden; word-break:break-all;
font-size:28px; text-transform:uppercase; text-align:center; font-family:Georgia;
color:white; background:rgba(0,0,0,0.5); /* MODIFIABLES */
opacity:0; transition:all 0.55s; -webkit-transition:all 0.55s;
}
.boxTMONTH div:hover p{
opacity:1;
}
/* TITRE MEMBRES DU MOIS */
.mdmTMONTH span{
display:block; font-family:Courgette; font-size:24px;
color:pink; text-shadow:0 0 2px lightgrey; /* MODIFIABLE */
}
/* BLOCS AVATARS MEMBRES DU MOIS */
.mdmTMONTH div{
display:inline-block; margin:5px; width:150px; height:200px; border:10px solid;
border-color:grey; /* MODIFIABLE */
}
.mdmTMONTH div img{
width:150px; height:200px;
filter:grayscale(0.4); -webkit-filter:grayscale(0.4); transition:all 0.55s; -webkit-transition:all 0.55s;
}
.mdmTMONTH div:hover img{
filter:grayscale(0); -webkit-filter:grayscale(0);
}
/* PSEUDONYMES MEMBRES DU MOIS */
.mdmTMONTH div p{
position:absolute; z-index:3; margin-top:0;
width:150px; height:150px; padding-top:50px;
text-align:center; font-family:Georgia; text-transform:uppercase; font-size:18px;
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
opacity:0; transition:all 0.55s; -webkit-transition:all 0.55s;
}
.mdmTMONTH div:hover p{
opacity:1;
}

Si cette commande ne se qualifie clairement d'aucune des catégories présentement ouvertes aux commandes, sa réalisation ne sera envisageable.
Revenir en haut Aller en bas
MessageRe: Commande de fiche de partenariat Sam 18 Juin - 2:05
Re,

Magnifique travail, merci infiniment, ça a l'air d'être parfait!! I love you


Concernant ma seconde commande, je dirais qu'à priori elle n'entre réellement dans aucune catégorie de commande (à moins que ce ne soit moi qui n'ait rien compris xD). Je vous l'explique quand même, on ne sait jamais, peut-être pourrez-vous le réaliser ou du moins me dire dans quelle catégorie elle pourrait entrer, histoire que je revienne plus tard.

Sur mon forum, les groupes ont des logements avec plusieurs pièces (chambres, cuisine, bureau etc...) qu'on souhaiterait pouvoir afficher d'une manière un peu plus esthétique que de poster les images(pièces) du logement dans plusieurs posts. Je me suis donc basée sur la technique utilisée pour afficher les contenus des groupes dans vos Qeel pour faire ce schéma:

http://img15.hostingpics.net/pics/751722logement.png

Le but c'est qu'en cliquant sur les icônes autour, l'image de la pièce indiquée apparaisse.

Voilà à peu près^^ Pensez-vous pouvoir m'aider svp? Si oui, je repasserai la commande en bonne et dure forme avec les précisions nécessaires.

Merci encore! :)
Revenir en haut Aller en bas
MessageRe: Commande de fiche de partenariat Dim 19 Juin - 11:39
avatar
Nombre de messages : 904
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Commande acceptée :
Code:
<b>Largeur maximale :</b> <i>500px, 600px, etc...</i>
<b>Hauteur maximale :</b> <i>Si aucune = auto</i>
<b>Schéma :</b> <i>Sous forme de lien</i>
<b>Éléments :</b> <i>Si impossibilité absolue de produire une esquisse imagée ou pour affiner cette dernière</i>
<b>Images :</b> <i>Si images particulières à afficher, les placer ici sous forme de liens</i>
<b>Animations :</b> <i>Glissement, redimensionnement, niveaux de gris, changement d'opacité, etc...</i>
<b>Informations supplémentaires :</b> <i>A votre appréciation</i>
Revenir en haut Aller en bas
MessageRe: Commande de fiche de partenariat Dim 19 Juin - 16:43
Merci beaucoup de l'avoir accepté!♥

Alors, voilà:

Largeur maximale : Les images des pièces seront toujours en 755x510. Et les icônes en 95x85 maximum. Je ne sais pas comment vous donner des mesures exactes en combinant les 2^^
Hauteur maximale : Auto
Schéma : http://img15.hostingpics.net/pics/751722logement.png
Images : Je vous laisse mettre des images vides à la place des icônes pour ne pas vous compliquer la tâche. Je me chargerai de les ajouter moi-même^^
Animations :
* J'aimerais si possible un glissement lors des changements de pièces.
* Je voudrais également si possible que les icônes en mode normal aient un léger niveau de gris et que celui "actif" c'est-à-dire celui sur lequel on clique soit en couleur, de sorte à pouvoir bien différencier la pièce affichée des autres.

Informations supplémentaires :
* J'aimerais que les icônes soient bel et bien sur un fond transparent svp.
* Une petite bordure (comme sur le schéma) automatique au niveau des images des pièces.

*J'ai également une petite précision: étant donné que tous les logements du forum n'ont pas le même nombre de pièces, j'aimerais retirer et/ou ajouter des icônes sans pour autant affecter la présentation en général. Cependant, le nombre max de pièces est bel et bien celui du schéma que je vous ai mis donc le maximum d'icônes à mettre.

*Pour le reste, à votre appréciation.


Au cas où vous auriez quand même besoin des images des icônes, faites le moi savoir^^

Merci encore et bonne journée!
Revenir en haut Aller en bas
MessageRe: Commande de fiche de partenariat Lun 20 Juin - 5:13
avatar
Nombre de messages : 904
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Pour chaque logement :

I. Créer une page html :


II. Code à personnaliser :
Code:
<meta charset="UTF-8"><style type="text/css">/* FICHE */
.LOG {
margin:auto; width:750px;
}
/* TITRE */
.tleLOG {
margin-bottom:5px; text-align:center; font-size:32px; text-transform:uppercase;
color:black; /* MODIFIABLE */
}
/* ICÔNES GAUCHE */
.LICON {
display:inline-block; vertical-align:top; margin-top:50px; text-align:center;
}
/* ICÔNE PIECE */
.onglet {
display:block; margin:5px auto;
width:95px; height:85px;
opacity:0.8; filter:grayscale(0.8); -webkit-filter:grayscale(0.8);
}
.onglet img{
max-width:95px; max-height:85px;
}
/* ICÔNE PIECE SELECTIONNEE */
.onglet_1 {
filter:grayscale(0); -webkit-filter:grayscale(0);
}
/* BLOC IMAGES PIECES */
.PIECES {
display:inline-block; margin:0 5px; width:535px; height:360px; overflow:hidden;
border:1px solid black; /* MODIFIABLE */
}
.PIECES img {
width:535px; height:360px;
}
.contenu_onglet {
display:none;
}
/* ICÔNES DROITE */
.RICON {
display:inline-block; vertical-align:top; margin-top:50px; text-align:center;
}
/* ICÔNES BAS */
.BICON {
margin:auto; width:750px; text-align:center;
}
.BICON .onglet {
display:inline-block; margin:5px;
}</style>

<!-- FICHE LOGEMENT --><div class="LOG"><!-- TITRE --><div class="tleLOG">Le logement...</div>
<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script>
<!-- ICÔNES GAUCHE --><div class="LICON"><!-- PIECE 1 --><span class="onglet_0 onglet" id="onglet_eins" onclick="javascript:change_onglet('eins');"><!-- IMAGE --><img src="" /></span><!-- PIECE 2 --><span class="onglet_0 onglet" id="onglet_zwei" onclick="javascript:change_onglet('zwei');"><!-- IMAGE --><img src="" /></span><!-- PIECE 3 --><span class="onglet_0 onglet" id="onglet_drei" onclick="javascript:change_onglet('drei');"><!-- IMAGE --><img src="" /></span></div>
   
<!-- IMAGES PIECES --><div class="PIECES"><!-- CONTENU PIECE 1 --><div class="contenu_onglet" id="contenu_onglet_eins"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 2 --><div class="contenu_onglet" id="contenu_onglet_zwei"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 3 --><div class="contenu_onglet" id="contenu_onglet_drei"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 4  --><div class="contenu_onglet" id="contenu_onglet_vier"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 5  --><div class="contenu_onglet" id="contenu_onglet_funf"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 6  --><div class="contenu_onglet" id="contenu_onglet_sechs"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 7  --><div class="contenu_onglet" id="contenu_onglet_sieben"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 8  --><div class="contenu_onglet" id="contenu_onglet_acht"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 9  --><div class="contenu_onglet" id="contenu_onglet_neun"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 10  --><div class="contenu_onglet" id="contenu_onglet_zehn"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 11  --><div class="contenu_onglet" id="contenu_onglet_elf"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 12  --><div class="contenu_onglet" id="contenu_onglet_zwolf"><!-- CONTENU --><img src="" /></div><!-- CONTENU PIECE 13  --><div class="contenu_onglet" id="contenu_onglet_dreizehn"><!-- CONTENU --><img src="" /></div></div>
   
<!-- ICÔNES DROITE --><div class="RICON"><!-- PIECE 4 --><span class="onglet_0 onglet" id="onglet_vier" onclick="javascript:change_onglet('vier');"><!-- IMAGE --><img src="" /></span><!-- PIECE 5 --><span class="onglet_0 onglet" id="onglet_funf" onclick="javascript:change_onglet('funf');"><!-- IMAGE --><img src="" /></span><!-- PIECE 6 --><span class="onglet_0 onglet" id="onglet_sechs" onclick="javascript:change_onglet('sechs');"><!-- IMAGE --><img src="" /></span></div>
   
<!-- ICÔNES BAS --><div class="BICON"><!-- PIECE 7 --><span class="onglet_0 onglet" id="onglet_sieben" onclick="javascript:change_onglet('sieben');"><!-- IMAGE --><img src="" /></span><!-- PIECE 8 --><span class="onglet_0 onglet" id="onglet_acht" onclick="javascript:change_onglet('acht');"><!-- IMAGE --><img src="" /></span><!-- PIECE 9 --><span class="onglet_0 onglet" id="onglet_neun" onclick="javascript:change_onglet('neun');"><!-- IMAGE --><img src="" /></span><!-- PIECE 10 --><span class="onglet_0 onglet" id="onglet_zehn" onclick="javascript:change_onglet('zehn');"><!-- IMAGE --><img src="" /></span><!-- PIECE 11 --><span class="onglet_0 onglet" id="onglet_elf" onclick="javascript:change_onglet('elf');"><!-- IMAGE --><img src="" /></span><!-- PIECE 12 --><span class="onglet_0 onglet" id="onglet_zwolf" onclick="javascript:change_onglet('zwolf');"><!-- IMAGE --><img src="" /></span><!-- PIECE 13 --><span class="onglet_0 onglet" id="onglet_dreizehn" onclick="javascript:change_onglet('dreizehn');"><!-- IMAGE --><img src="" /></span></div></div>
   
<script type="text/javascript">
                //<!--
                        var anc_onglet = 'eins';
                        change_onglet(anc_onglet);
                //-->
</script>

III. Iframe à modifier [ Lien | Width | Height ] :
Code:
<center><iframe src="lien" scrolling="no" style="width:765px; height:550px;" marginwidth="0" marginheight="0" frameborder="0"></iframe></center>

Si vous devez supprimer des icônes :
Code:
<!-- PIECE 10 --><span class="onglet_0 onglet" id="onglet_zehn" onclick="javascript:change_onglet('zehn');"><!-- IMAGE --><img src="" /></span>

Privilégiez celles du bas et supprimez également les contenus correspondants :
Code:
<!-- CONTENU PIECE 10  --><div class="contenu_onglet" id="contenu_onglet_zehn"><!-- CONTENU --><img src="" /></div>
Revenir en haut Aller en bas
MessageRe: Commande de fiche de partenariat Mar 21 Juin - 1:12
MERCIIII !!!!♥

Cela va au delà de mes espérances, c'est juste parfait, merci infiniment!!! I love you

Bonne semaine à vous!
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-