Template : catégorie

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageTemplate : catégorie Dim 20 Mar - 22:44
Bonjour ou bonsoir cela dépend de l'heure à laquelle vous lirez ce message. Je souhaiterai vous faire part d'une commande de catégorie (template). Vu le nombres importants de message pour les commandes en cours que j'ai pu apercevoir sur cette section, si par manque de temps ou d'envie vous ne pouvez pas répondre positivement à cette demande, je vous remercie d'avance pour l’intérêt porté à celle-ci.

Largeur maximale : 850 pixel
Hauteur maximale : auto
Schéma : http://i84.servimg.com/u/f84/19/41/82/96/comman10.png
Éléments :
Voici la liste des couleurs souhaités pour cette commande :
Couleur de fond : #D6D6D6
Couleur des barres verticales : #57979C
Couleur entre les 2 barres : #E0E0E0
Couleur fond des catégories : #F2F2F2
Couleur "nombre et sujet de message" : #57979C
Couleur fond de texte descriptif : #E0E0E0
Couleur contour fond texte descriptif : #D6D6D6
Couleur survol des images : #57979C
Couleur texte titre : #57979C
Couleur texte : #999999


Images : je placerai les images moi même, pouvez-vous cependant m'indiquer les tailles que celles-ci doivent avoir.
Animations : Lorsque l'on passe la souris sur le rond de l'image des nouveautés, ect... cela affiche le titre, pseudo, date et lien pour se rendre sur le message. Lorsque l'on passe la souris sur l'image de droite cela affiche les liens vers les sous forums
Informations supplémentaires : Au dessus de la première catégorie j'aime que les textes :
Voir les nouveaux messages depuis votre dernière visite
Voir ses messages
Voir les messages sans réponses
soient remplacé par MAIS ENCORE et que lorsque l'on clique dessus cela affiche les choix précédemment cités


Si la prise de cette commande est validée, serait-il possible dans le futur de créer un QEEL, SUJET et PA sur le même thème que cité ci-dessus avec bien sur pour chaque template une esquisse via un schéma ?

En vous remerciant d'avance.

Merci pour votre formidable travail.

A bientôt
Cola
Revenir en haut Aller en bas
MessageRe: Template : catégorie Lun 21 Mar - 5:43
avatar
Nombre de messages : 891
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Remplacer l'intégralité du template index_box par :
Code:
<table width="850px" border="0" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom"><div class="moreCAT">Mais encore<div>
    <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </div></div>
    </td>
    </tr>
    </table>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
 <div class="mdlCAT">
 <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
   
    <!-- BEGIN forumrow -->
    <div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="lmsgFRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div>{catrow.forumrow.LAST_POST}</div></div><div class="FRM"><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="boxFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets ● {catrow.forumrow.POSTS} messages</div><div class="sfFRM"><div><div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script></div></div></div>   
    <!-- END forumrow -->
   
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
 </div>
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* CORPS DU FORUM */
.bodyline {
padding:0 50px;
border-left:15px solid #57979C; border-right:15px solid #57979C; background:#E0E0E0; /* MODIFIABLE */
}
/* MAIS ENCORE */
.moreCAT {
text-transform:uppercase;
}
/* CONTENU MAIS ENCORE */
.moreCAT div{
position:absolute; margin-left:190px; margin-top:-45px;
width:200px; height:70px; padding:5px 0; text-align:center;
background:#57979C; /* MODIFIABLE */
transform:scale(0); -webkit-transform:scale(0);
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.moreCAT:hover div{
transform:scale(1); -webkit-transform:scale(1);
}
/* LIEN MAIS ENCORE */
.moreCAT a{
color:black !important; /* MODIFIABLE */
}
/* TITRE CATEGORIES */
.tleCAT{
margin:auto; margin-top:5px;
width:850px; padding:10px 0; text-align:center;
background:#57979C; /* MODIFIABLE */
}
.tleCAT h2{
margin:0;
font-size:32px; text-transform:uppercase;
color:black; /* MODIFIABLE */
}
/* BLOC CATEGORIES */
.mdlCAT {
margin:auto;
width:850px; padding:15px 0;
background:#f2f2f2; /* MODIFIABLE */
}
/* BLOC FORUM */
.blocFRM{
margin:10px auto; width:800px;
}
/* TITRE FORUM */
.tleFRM {
margin-bottom:-30px; text-align:center;
}
.tleFRM a{
text-transform:uppercase; font-size:18px; color:#57979C !important; /* MODIFIABLE */
}
/* ICÔNES & DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:top; margin-top:10px;
width:200px; height:200px; border-radius:200px;
}
/* ICÔNES FORUM */
.imgFRM{
position:relative; z-index:2;
width:200px; height:200px; border-radius:200px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM div{
position:absolute; z-index:3; margin-top:-185px; margin-left:15px;
width:170px; height:130px; padding-top:40px; border-radius:170px;
text-align:center; font-size:16px;
background:rgba(250,250,250,0.7); color:black; /* MODIFIABLE */
transform:rotate(180deg) scale(0); -webkit-transform:rotate(180deg) scale(0);
transition:all 0.85s ease; -webkit-transition:all 0.85s ease;
}
.lmsgFRM:hover div{
transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
}
/* BLOC DESCRIPTION / NOMBRE SUJETS & MESSAGES / SOUS-FORUMS */
.FRM{
display:inline-block; margin-top:35px;
}
/* DESCRIPTION FORUM */
.descFRM {
display:inline-block; margin-left:-105px;
width:405px; height:120px; padding:5px; padding-left:120px; overflow:auto;
font-size:11px; text-align:justify;
background:#e0e0e0; color:#999999;  /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:top; margin-left:10px;
}
/* NOMBRE SUJETS ET MESSAGES */
.nbFRM {
margin-bottom:5px;
width:160px; height:15px; padding:5px 0;
font-size:10px; text-align:center;
background:#57979C; color:black; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE */
.descFRM img{
position:absolute; margin-top:25px; margin-left:420px;
width:160px; height:100px;
}
/* BLOC IMAGE DESCRIPTIVE & SOUS-FORUMS */
.sfFRM {
width:160px; height:100px; overflow:hidden;
background:#ccc; /* MODIFIABLE */
}
.sfFRM div {
position:relative;
width:160px; height:100px; overflow:hidden;
}
/* CONTENU SOUS-FORUMS */
.sfFRM div div{
width:150px; height:90px; padding:5px; overflow:auto;
text-align:left; font-size:11px;
background:#57979C; /* MODIFIABLE */
transform:translateX(160px); -webkit-transform:translateX(160px);
transition:all .65s linear; -webkit-transition:all .65s linear;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
color:white !important; /* MODIFIABLE */
}
.sfFRM:hover div div{
transform:translateX(0px); -webkit-transform:translateX(0px);
}

Icônes du forum : 200*200
Images descriptives : 160*100



Vous conviant désormais à me transmettre les formulaires des éléments supplémentaires désirés.
Revenir en haut Aller en bas
MessageRe: Template : catégorie Lun 21 Mar - 9:15
Wahou c'est vraiment super, exactement comme j'avais imaginé. Suite à votre message je vous transmet les formulaires pour les autres éléments de cette commande

SUJET

Largeur maximale : 850 pixel
Hauteur maximale : auto
Schéma : http://i84.servimg.com/u/f84/19/41/82/96/sujet_10.png
Éléments :
Couleur fond : #D6D6D6
Couleur barre verticale : #57979C
Couleur entre les 2 barres : #D6D6D6
Couleur fond partie avatar et texte : #F2F2F2
Couleur avatar (souris passe) : #57979C
Couleur fond rang et pseudo : #A7A186
Couleur fond infos diverses : #D6D6D6
Couleur fond titre RP et lien : #57979C
Couleur fond date et heure : #A7A186

Images : pas d'images
Animations : Lorsque l'on passe la souris sur l'avatar cela affiche la feuille des personnages
Informations supplémentaires : Le texte "pseudo hors ligne" s'affiche en rouge lorsque le membre est déconnecté ou le texte "pseudo en ligne" s'affiche en vert lorsque le membre est connecté. Les boutons citer, éditer, delete se trouve en haut du cadre "vert", on y retrouve également les boutons profil, mp et www du membre qui à posté.

PAGE ACCUEIL

Largeur maximale : 850 pixel
Hauteur maximale : auto
Schéma : http://i84.servimg.com/u/f84/19/41/82/96/pa_com10.png
Éléments :
Couleur fond : #D6D6D6
Couleur barre verticale : #57979C
Couleur fond PA : #F2F2F2
Couleur bordure élément : #D6D6D6
Couleur info staff : #A7A186

Images : Si images particulières à afficher, les placer ici sous forme de liens
Animations : aucun
Informations supplémentaires : A votre appréciation

En vous remerciant pour le travail.

Bien à vous

Cola
Revenir en haut Aller en bas
MessageRe: Template : catégorie Mar 22 Mar - 5:27
avatar
Nombre de messages : 891
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Remplacer l'intégralité du template viewtopic_body par :
Spoiler:
 

Partie CSS :
Code:
/* PRESENTATION DU SUJET */
/* TITRE SUJET */
#tleSBJ{
margin:auto;
width:850px; padding:15px 0;
background:teal; color:black; /* MODIFIABLE */
text-transform:uppercase; text-align:center;
}
#tleSBJ h1 {
display:block; font-size:32px;
}
/* BLOC TITRE MESSAGE / IMAGES CONTACT / OUTILS MODERATION */
.tktPOST {
padding:10px;
background:#57979C; /* MODIFIABLE */
}
/* TITRE MESSAGE */
.tlePOST {
display:inline-block; vertical-align:top;
width:450px;
font-size:24px; text-transform:uppercase; color:black; /* MODIFIABLE */
}
/* IMAGES CONTACT JOUEUR */
.ktactPOST {
display:inline-block; vertical-align:top; padding-right:10px;
border-right:5px solid #A7A186; /* MODIFIABLE */
}
/* CITER / EDITER / SUPPRIMER */
.toolsPOST {
display:inline-block; vertical-align:top; margin-left:5px;
text-align:center;
}
/* DATE SUJET */
.datePOST {
padding:5px;
font-size:11px; text-transform:uppercase; text-align:left;
background:#A7A186; color:black; /* MODIFIABLE */
}
/* APPARENCE MESSAGE */
div.postbody {
width:590px; min-height:400px; padding:15px;
background:#F2F2F2; color:black; /* MODIFIABLE */
text-align:justify;
}
/* TAILLE MAXIMALE DES IMAGES APPARENCE MESSAGE */
div.postbody img {
max-width:585px;
}
/* BLOC JOUEUR */
.boxPOST {
margin-right:10px;
width:200px; padding:10px;
background:#F2F2F2; /* MODIFIABLE */
}
/* AVATAR */
.avaPOST {
margin:auto;
width:200px; height:320px;
}
/* FEUILLE DE PERSONNAGE */
.rpgPOST{
position:absolute; z-index:3; margin-top:-320px;
width:190px; height:310px; padding:5px; overflow:auto;
font-size:11px;
background:#57979C; color:white; /* MODIFIABLE */
opacity:0; transition:opacity 0.55s ease-in-out; -webkit-transition:opacity 0.55s ease-in-out;
}
.rpgPOST:hover {
opacity:1;
}
/* PSEUDONYME */
.namePOST {
margin:10px auto;
width:200px; padding:5px 0; text-align:center;
font-size:32px; text-transform:uppercase; background:#A7A186; /* MODIFIABLE */
}
.namePOST a {
text-decoration: none !important;
}
/* EN LIGNE */
.onPOST {
margin:auto; text-align:center;
}
/* INFORMATIONS JOUEUR */
.abtPOST {
margin:10px auto;
width:190px; padding:5px;
text-align:left; font-size:11px;
background:#D6D6D6; color:black; /* MODIFIABLE */
}
/* INTITULES INFORMATIONS JOUEUR */
.abtPOST span{
text-transform:uppercase; font-weight:bold; /* MODIFIABLE */
}
/* TEXTE RANG */
.rankPOST {
margin:auto;
width:200px; padding:5px 0;
text-transform:uppercase; text-align:center;
background:#A7A186; color:black;  /* MODIFIABLE */
}
/* IMAGE RANG */
.imgrankPOST {
margin:auto;
}

Page d'accueil :
Code:
<!-- PAGE D'ACCUEIL --><div class="SEP"><!-- STAFF --><div class="staffSEP"><div><!-- IMAGE 125*125 --><img src="http://www.aht.li/2780126/125125.png" /><!-- CONTENU --><p><a href="" target="_blank">MP</a><br/><a href="" target="_blank">Profil</a><br>Pseudonyme</p></div></div><!-- NEWS --><div class="newsSEP"># le 00/00/00 : ...</div><!-- CONTEXTE & PARTENAIRES --><div class="boxSEP"><!-- CONTEXTE --><div class="ctxtSEP">Contexte</div><!-- 6 PARTENAIRES EN 88*31 --><div class="partSEP"><!-- I --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- II --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- III --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><br/><!-- IV --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- V --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a><!-- VI --><a href="" target="_blank"><img src="http://www.aht.li/2827805/8831.png" /></a></div></div><!-- LIENS --><div class="lksSEP"><a href="" target="_blank">Lien</a> - <a href="" target="_blank">Lien</a> - <a href="" target="_blank">Lien</a> - <a href="" target="_blank">Lien</a> - <a href="" target="_blank">Lien</a></div></div>

Partie CSS :
Code:
/* PAGE D'ACCUEIL */
.SEP {
margin:auto; width:850px; padding:15px 0;
line-height:16px; text-align:center;
background:#F2F2F2; /* MODIFIABLE */
}
/* BLOC STAFF */
.staffSEP {
display:inline-block; vertical-align:top;
width:200px;
}
/* IMAGE STAFF */
.staffSEP img{
position:absolute; z-index:3; margin-left:-110px;
width:125px; height:125px; border-radius:125px;
}
/* CONTENU STAFF */
.staffSEP p{
position:absolute; margin-top:60px; margin-left:50px;
width:135px; height:95px; padding-top:40px; overflow:hidden; border-radius:125px;
background:#A7A186; color:black; /* MODIFIABLE */
text-align:center; font-size:16px;
}
/* LIENS STAFF */
.staffSEP a{
text-decoration:none !important; text-transform:uppercase; font-size:14px;
}
/* NOUVELLES */
.newsSEP {
display:inline-block; vertical-align:top; margin:0 10px;
width:240px; height:183px; padding:5px; overflow:auto;
text-align:justify;
color:black; border:5px solid #d6d6d6; /* MODIFIABLE */
}
/* CONTEXTE & PARTENAIRES */
.boxSEP {
display:inline-block;
}
/* CONTEXTE */
.ctxtSEP {
margin:auto; margin-bottom:10px;
width:275px; height:100px; padding:5px; overflow:auto;
text-align:justify;
color:black; border:5px solid #d6d6d6; /* MODIFIABLE */
}
/* PARTENAIRES */
.partSEP {
text-align:center;
}
.partSEP a{
margin:5px;
}
/* BORDURE IMAGE PARTENAIRE */
.partSEP img{
width:88px; height:31px;
border:2px solid #d6d6d6; /* MODIFIABLE */
}
/* BLOC LIENS */
.lksSEP {
margin-top:10px; text-align:center;
}
/* LIEN */
.lksSEP a {
text-decoration:none !important; text-transform:uppercase; font-size:18px;
color:black !important; /* MODIFIABLE */
}
Revenir en haut Aller en bas
MessageRe: Template : catégorie Mar 22 Mar - 20:51
M A G N I F I Q U E

Merci beaucoup
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-