{TEMPLATES - Catégorie} - si possible

Dim 28 Fév - 18:46
Bien le bonjour/bonsoir, Dame Skaemp!
Après être arrivée un peu par hasard sur votre univers créatif, je suis littéralement tombée amoureuse de vos créations et, de ce fait, désirerais tenter ma chance pour une commande de catégories un peu particulières! :3

Largeur maximale : 620 pixels! J'ai tenté d'ajouter au mieux les formats sur le schéma ci-après. (le forum faisant environs 745 pixels de large, nous voudrions conserver un petit écart avec le commencement des catégories)
Hauteur maximale : 115 pixels
Schéma : http://img4.hostingpics.net/pics/921822Schema3.png
Éléments : Une icon de valeur 115*155 pxs serait parfaite, je pense, pour l'élément dont j'invoque ici la tentative de création.
Autrement, au niveau des couleurs, nous partirions, si possible sur une base comme celle-ci : #A8B3D1 & #7DB6FC

Images : // (nous nous occupons des icons, qui seront les seules images présentes ici, nul besoin, donc, de vous embêter avec cette partie-ci)
Animations : Si possible, un voile en 'hover' (je crois que c'est ainsi qu'il est désigné) sur l'icon à l'extrême gauche, lequel se retire lorsque l'on passe le curseur de la souris dessus. Autrement, pas d'autre animation particulière! :3
Informations supplémentaires : S'il était possible de faire en sorte que nous puissions rajouter autant de 'sous-forums' que l'on souhaite (dans le cas de la création de nouveaux lieux au fur et à mesure, par exemple) sans que les nouveaux sous-forums ne déborde du corps de la catégorie, ce serait génial!
Également, nous nous demandions s'il était faisable de faire en sorte que nous puissions changer aisément les couleurs des éléments en vue de prochains designs? Si c'est le cas, nous adorerions vous le demander.


Dans l'espoir de ne pas vous avoir importuné en aucune mesure, je vous remercie d'avance du temps que vous prendrez a considérer ma demande. De même, je me tiens à votre entière disposition si des informations complémentaires sont requises.
Excellente continuation à vous,
Très cordialement,
Andrej
Revenir en haut Aller en bas
Lun 29 Fév - 5:15
Remplacer l’intégralité du template index_box par :
Code:
<table width="100%" 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">
     <!-- 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>
     </td>
     </tr>
    </table>

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

     <!-- BEGIN cathead -->
     <!-- END cathead -->
    
     <!-- BEGIN forumrow -->
    <div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="blocDESC"></div><div class="boxFRM"><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><div class="triFRM"></div><div class="lmsgFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets ● {catrow.forumrow.POSTS} messages</div><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" />{catrow.forumrow.LAST_POST}</div></div></div>  
     <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* TITRE CATEGORIES */
.tleCAT{
margin:auto;
width:620px; text-align:center;
background:none; /* MODIFIABLE */
}
.tleCAT h2{
font-size:32px; text-transform:lowercase; font-style:italic; color:white; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM{
width:620px; margin:15px auto;
}
/* TITRE FORUM */
.tleFRM {
width:600px; height:20px; padding:5px; overflow:hidden;
text-transform:lowercase; text-align:right; font-style:italic;
}
.tleFRM a{
letter-spacing:1px; color:#A8B3D1 !important; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOL TITRE FORUM */
.tleFRM:hover a {
letter-spacing:2px; /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE */
.blocDESC {
position:relative; z-index:2; margin-top:-10px;
display:inline-block; vertical-align:top;
width:115px; height:115px; border-radius:115px; border:5px solid;
background:white; border-color:#7DB6FC; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE */
#descFRM img {
position:absolute; z-index:3; margin-left:-115px; margin-top:-5px;
width:115px; height:115px; border-radius:115px;
opacity:0.7; transition:opacity 0.65s ease-in-out; -webkit-transition:opacity 0.65s ease-in-out;
}
#descFRM img:hover {
opacity:1;
}
/* BLOC POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:top;
}
/* BLOC DESCRIPTION FORUM */
#descFRM {
display:inline-block; vertical-align:top; margin-left:-30px;
width:330px; padding-left:25px; height:100px; overflow:hidden;
background:#ececec; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
margin-left:5px; margin-top:5px;
width:305px; padding:5px; height:60px; overflow:auto;
font-size:10px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* SOUS-FORUMS */
.sfFRM{
position:absolute; z-index:3; margin-top:-15px; margin-left:-10px;
width:365px; height:15px; overflow:auto;
font-size:8px; text-transform:uppercase; font-family:Arial;
border-top:2px solid #7DB6FC; color:black; /* MODIFIABLE */
}
/* LIEN SOUS-FORUM */
.sfFRM a{
color:black !important; /* MODIFIABLE */
}
/* TRIANGLE DESCRIPTION */
.triFRM {
position:absolute; margin-left:325px; margin-top:-100px;
width:0; height:0; border-style:solid; border-width:100px 0 0 55px; border-color:transparent;
border-left-color:#ececec; /* MODIFIABLE */
}
/* BLOC DERNIER MESSAGE / NOMBRE SUJETS & MESSAGES / ICÔNES FORUM */
.lmsgFRM {
display:inline-block;
width:165px; height:95px; padding:5px 5px 0 0;
text-align:right; font-size:10px;
color:black; background:#A8B3D1; /* MODIFIABLE */*
}
/* NOMBRE SUJETS & MESSAGES */
.nbFRM{
color:black;  /* MODIFIABLE */
font-size:9px; text-transform:uppercase;
}
/* ICÔNES FORUM */
.imgFRM{
display:block; margin:3px 0; margin-left:95px;
width:75px; height:25px;
}

Images descriptives : 115*115
Icônes du forum : 75*25

Encadrer le texte descriptif des balises suivantes :

Code:
<div class="descFRM"> Texte descriptif </div>


Les /* MODIFIABLE */ sont spécifiquement apposés afin de vous permettre d'effectuer ces changements le plus facilement possible.

Vous souhaitant une agréable journée.
Revenir en haut Aller en bas
Lun 29 Fév - 23:10
Bien le bonsoir, Dame Skaemp!
Wouah, quel superbe travail! Et quelle rapidité! Merci beaucoup!

Cependant, nous avons tenté de tester votre création sur un forum 'test' avant de l'appliquer sur le forum définitif et nous avons rencontrer un petit souci. Il s'agit sans doute de trois fois rien mais comme nous ne sommes pas très doués, nous avons préféré vous le montrer tout de même afin de savoir où se trouvait être notre erreur.

http://img4.hostingpics.net/pics/135673imprim1.png

Comme vous pouvez le voir, un léger décalage suit l'icone du forum. Nous avons essayé d'y remédier nous même, ce qui apporta une très légère amélioration (visible sur le premier forum), bien que le problème subsiste toujours.

En nous excusant par avance du désagrément occasionné, nous renouvelons à votre attention nos très sincères remerciements.
Très cordialement,
Andrej
Revenir en haut Aller en bas
Mar 1 Mar - 2:51
Remplacer :
Code:
/* IMAGE DESCRIPTIVE */
#descFRM img {
position:absolute; z-index:3; margin-left:-115px; margin-top:-5px;
width:115px; height:115px; border-radius:115px;
opacity:0.7; transition:opacity 0.65s ease-in-out; -webkit-transition:opacity 0.65s ease-in-out;
}
Par :
Code:
/* IMAGE DESCRIPTIVE */
#descFRM img {
position:absolute; z-index:3; margin-left:-125px; margin-top:-15px;
width:115px; height:115px; border-radius:115px;
opacity:0.7; transition:opacity 0.65s ease-in-out; -webkit-transition:opacity 0.65s ease-in-out;
}

Dans le cas où mes estimations du décalage se dévoileraient incorrectes, vous pouvez rectifier la position de l'image grâce au margin-left et margin-top.

Me permettant autrement de vous signaler le « commender » & le « attends » et vous souhaitant à nouveau une agréable journée.
Revenir en haut Aller en bas
Mer 2 Mar - 19:36
Bonsoir!
Je vous remercie de votre rapidité à la tâche!
En effet, les fautes présentent sur notre forum-test ne devraient même pas exister, un grand merci de les avoir souligné.
De même, l’entièreté de notre staff vous fait part de ses sincères remerciements pour vos travaux d'une rare qualité.

Bien à vous,
Andrej
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum