COMMANDE : CATÉGORIES

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageCOMMANDE : CATÉGORIES Dim 13 Mar - 22:25
BIEN LE BONSOIR !
Je viens solliciter votre aide - et en profite également pour vous complimenter sur votre travail, il est fabuleux ! Vous faites des codes merveilleux.  Like a Star @ heaven  Like a Star @ heaven  Like a Star @ heaven

Largeur maximale : 950px
Hauteur maximale : Auto !
Schéma : il est complet, toutes les annotations servent à créer les catégories -> http://img4.hostingpics.net/pics/739605SCHEMACATEGORIES.png
Éléments : Non !
Images : Voici l'image de fond utilisée -> http://i68.tinypic.com/1566ddf.png
Animations : J'aimerais que lorsqu'on passe la souris sur le bloc descriptif de la catégorie, s'affiche un bloc de même taille et couleur, mais avec les liens des sous forums. Ceux-ci : centrés, en majuscules et de même taille et couleur que le texte descriptif.
Informations supplémentaires : J'aimerais que le gros bloc (de 950px avec le fond image) contenant les catégories ait aussi une bordure d'1px de couleur #EFEFEF !

Pour la police du titre de la catégorie, utilisez en une qui se rapproche de celle que j'ai employé (je la tiens de Dafont donc pas possible de la mettre sur le forum)...

La taille du titre du forum est plus petite que la taille de celui de la catégorie ! Il y a également un espacement entre les lettres. !! l'icone qui renvoie au dernier message posté se situe à la place du "PAR" et donc à gauche du pseudonyme !

La taille de police du posteur est bien plus petite que le titre du forum, il n'y a pas d'espacement de lettre et la couleur est plus claire.

La taille de police de la date et de l'heure est encore plus petite que celle du posteur et la couleur est pareille que celle du titre du forum. :-)

La couleur des blocs RÉPONSES, SUJETS est #EFEFEF
La couleur du bloc de fond de la catégorie est : #e6c998

Le bloc de 400x200px a pour fond l'image que je vous ai fournis en lien, la même que le gros bloc.


Je vous remercie d'avance et vous souhaite une bonne soirée ! cat
Revenir en haut Aller en bas
MessageRe: COMMANDE : CATÉGORIES Lun 14 Mar - 0:47
Pardonnez-moi ce double-post, j'ai oublié de mettre la commande du QEEL avec... Je suis vraiment désolée... En espérant ne pas trop vous en demander !! :-/

Largeur maximale : 950px
Hauteur maximale : 645px
Schéma : il est complet en principe, comme l'autre, toutes les annotations servent à créer les catégories -> http://img15.hostingpics.net/pics/979394schemaQEEL.png

Éléments : Non !
Images : J'ai fais celles-ci pour les top-sites (du coup pas besoin de mettre une bordure blanche) -> http://img15.hostingpics.net/pics/347958topsiteun.png
Animations : Aucunes !

Encore merci !!! Like a Star @ heaven Like a Star @ heaven
Revenir en haut Aller en bas
MessageRe: COMMANDE : CATÉGORIES Jeu 17 Mar - 23:05
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:
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
 <table width="900px" 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="topCAT"><div class="tleCAT">{catrow.tablehead.L_FORUM}</div></div>
    <div class="mdlCAT"><span style="display:block; height:1px; clear:both;"></span><!-- END tablehead -->

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

Partie CSS :
Code:
/* CORPS DU FORUM */
.bodyline {
margin:0; padding:0;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
}

/* HAUT CATEGORIES */
.topCAT {
margin:auto; width:900px; height:65px; padding-top:50px;
background:#e6c998; border-bottom:5px solid #d7bc8e; /* MODIFIABLE */
}
/* TITRE CATEGORIES */
.tleCAT{
text-align:right; padding-right:35px;
}
.tleCAT h2{
margin:0; font-size:36px; text-transform:uppercase; font-style:italic; letter-spacing:2px;
font-family:Fjalla One; color:white; text-shadow:1px 1px 0 #d7bc8e; /* MODIFIABLE */
}
/* CONTENU CATEGORIES */
.mdlCAT {
margin:auto; margin-bottom:15px;
width:898px; height:auto; border-top:none;
background:white; border:1px solid #efefef; /* MODIFIABLE */
}
/* BLOC FORUMS */
.blocFRM{
width:900px; margin:auto; text-align:center;
}
/* BLOC FORUM */
.FRM {
float:left; margin:25px;
width:400px;
}
/* ICÔNES FORUM */
#imgFRM{
display:inline-block; vertical-align:middle;
}
/* BORDURE ICÔNES FORUM */
.imgFRM {
width:50px; height:50px; padding:5px;
border:1px solid #efefef; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:middle; margin-left:35px;
}
/* TITRE FORUM */
.tleFRM {
margin-bottom:10px; width:175px;
font-family:Fjalla One; text-align:center; font-size:18px; text-transform:uppercase; letter-spacing:1px;
}
.tleFRM a{
color:#e6c998 !important; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
font-size:10px;
color:#e6c998; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
text-transform:uppercase;
}
/* ICÔNE POSTEUR DERNIER MESSAGE FORUM */
.lmsgFRM .sprite-icon_topic_latest {
float:left; margin-right:-75px; margin-left:45px; margin-top:3px;
}
/* BLOC DESCRIPTION & SOUS-FORUMS */
#descFRM {
position:absolute; margin-top:-132px;
width:400px; height:200px; overflow:hidden;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
transform:scale(0); -webkit-transform:scale(0); opacity:0;
}
#imgFRM:hover #descFRM{
transform:scale(1); -webkit-transform:scale(1); opacity:1;
}
/* DESCRIPTION FORUM */
.descFRM{
margin:auto; margin-top:15px;
width:350px; height:150px; padding:5px; overflow:auto;
font-family:Verdana; font-size:11px; text-align:justify;
background:white; border:1px solid #efefef; color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
width:385px; height:15px; padding:5px; overflow:auto;
font-size:10px;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
text-transform:uppercase; color:black !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
width:86px; height:86px; padding:2px; overflow:hidden;
text-transform:uppercase; font-size:11px;
background:#efefef; color:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* BORDURES NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM p{
margin:0; height:64px; padding-top:20px;
border:1px solid white; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbIIFRM {
margin-top:20px;
}
/* TAILLE NOMBRES NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM b {
font-size:14px;
}

Remplacer l'intégralité du template index_body par :
Spoiler:
 

Partie CSS :
Code:
/* TITRE QEEL */
.tleQEEL {
margin:auto;
width:900px; height:65px; padding-top:50px;
background:#e6c998; border-bottom:5px solid #d7bc8e; /* MODIFIABLE */
font-family:Fjalla One; letter-spacing:2px; text-transform:uppercase; text-align:right; font-style:italic;
}
.tleQEEL a{
font-size:32px; padding-right:25px;
color:white; text-shadow:1px 1px 0 #d7bc8e; /* MODIFIABLE */
}
/* QEEL */
#QEEL {
margin:auto; border-top:none;
width:898px; padding-top:20px; padding-bottom:5px; text-align:center;
background:white; border:1px solid #efefef; /* MODIFIABLE */
}
/* BLOC MEMBRES CONNECTES */
.onQEEL {
display:inline-block; vertical-align:top;
width:370px; height:183px; padding:10px;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.onQEEL p {
margin:auto; margin-top:15px;
width:320px; height:140px; padding:5px; overflow:auto;
background:white; border:1px solid #efefef; color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
/* TOP-SITES */
.topQEEL {
display:inline-block; margin:0 10px;
width:45px;
}
.topQEEL a{
margin-bottom:3px;
}
/* BLOC 24H */
.dayQEEL {
display:inline-block; vertical-align:top;
width:400px; height:203px;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
}
/* 24H */
.dayQEEL div {
margin:auto; margin-top:25px;
width:330px; height:140px; padding:5px; overflow:auto;
background:white; border:1px solid #efefef; color:black; /* MODIFIABLE */
font-size:11px; text-align:justify;
}
.dayQEEL .row1 {
background:none; padding:0; margin:0;
}
/* BLOC GROUPES QEEL */
.GQEEL {
margin:10px auto;
width:860px; padding:10px 0;
text-align:center; text-transform:uppercase;
border:1px solid #efefef; /* MODIFIABLE */
}
/* LIEN GROUPE QEEL */
.GQEEL a{
margin:0 5px;
}
/* BLOC TOTAL MEMBRES & MESSAGES / DERNIER UTILISATEUR ENREGISTRE QEEL */
.stsQEEL {
margin:auto; width:860px;
}
/* BLOC NOMBRE MESSAGES QEEL */
.tlPQEEL {
display:inline-block; vertical-align:top;
height:90px; width:90px; padding:5px;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
}
/* NOMBRE MESSAGES QEEL */
.tlPQEEL p{
margin-top:10px; margin-left:10px;
width:70px; height:55px; padding-top:15px;
text-transform:uppercase; font-size:11px; text-align:center;
background:white; border:1px solid #efefef; color:grey; /* MODIFIABLE */
}
/* TAILLE NOMBRE NOMBRE MESSAGES QEEL */
.tlPQEEL b{
font-size:18px;
}
/* BLOC TOTAL MEMBRES QEEL */
.tlMQEEL {
display:inline-block; vertical-align:top; margin-left:15px;
height:90px; width:90px; padding:5px;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.tlMQEEL p{
margin-top:10px; margin-left:10px;
width:70px; height:55px; padding-top:15px;
text-transform:uppercase; font-size:11px; text-align:center;
background:white; border:1px solid #efefef; color:grey; /* MODIFIABLE */
}
/* TAILLE NOMBRE TOTAL MEMBRES QEEL */
.tlMQEEL b{
font-size:18px;
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
display:inline-block; vertical-align:top; margin-left:15px;
height:65px; width:624px; padding-top:35px;
border:1px solid #efefef; color:grey; /* MODIFIABLE */
text-transform:uppercase; text-align:center; font-size:24px;
}
/* MARQUER TOUS LES FORUMS COMME LUS */
.allRQEEL {
margin:10px auto; width:860px; padding:2px 0;
text-transform:uppercase; text-align:center; letter-spacing:5px;
background:#efefef; /* MODIFIABLE */
}
/* BORDURE MARQUER TOUS LES FORUMS COMME LUS */
.allRQEEL a{
display:block; margin:auto;
width:854px; padding:5px 0;
border:1px solid white; color:rgba(0,0,0,0.5); /* MODIFIABLE */
}

L'inattention quant à la disponibilité affichée se compensant de schémas consciencieusement préparés, une semi-dérogation - les commandes étant à nouveau acceptées - vous est ainsi octroyée.

Vous souhaitant une agréable soirée.
Revenir en haut Aller en bas
MessageRe: COMMANDE : CATÉGORIES Ven 18 Mar - 13:42
Bonjour Skaemp !

Je tiens à m'excuser, je n'ai pas fais attention au petit encadré... Je suis vraiment confuse, cela ne se reproduira plus, je veillerais à bien regarder la prochaine fois. Like a Star @ heaven

Merci pour votre travail, c'est génial et votre rapidité m'épate ! Je suis bluffée ! Like a Star @ heaven

Je me permet tout de même de vous embêter sur les catégories, j'aimerais savoir comment faire pour, comme sur le schéma, mettre les catégories sur une ligne et pas en deux colonnes et ... aussi pour faire ceci -> http://img15.hostingpics.net/pics/314536captureschema.png

C'est à dire que lorsque je passe la souris sur le bloc descriptif, les liens s'affichent ^^

Je suis désolée de vous enquiquiner ainsi !
En tous cas merci pour votre travail !
Revenir en haut Aller en bas
MessageRe: COMMANDE : CATÉGORIES Ven 18 Mar - 22:59
avatar
Nombre de messages : 891
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Bonsoir,

Remplacer l'intégralité du template index_box par :

Code:
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
 <table width="900px" 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="topCAT"><div class="tleCAT">{catrow.tablehead.L_FORUM}</div></div>
    <div class="mdlCAT"><!-- END tablehead -->

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

Partie CSS :
Code:
/* HAUT CATEGORIES */
.topCAT {
margin:auto; width:900px; height:65px; padding-top:50px;
background:#e6c998; border-bottom:5px solid #d7bc8e; /* MODIFIABLE */
}
/* TITRE CATEGORIES */
.tleCAT{
text-align:right; padding-right:35px;
}
.tleCAT h2{
margin:0; font-size:36px; text-transform:uppercase; font-style:italic; letter-spacing:2px;
font-family:Fjalla One; color:white; text-shadow:1px 1px 0 #cad78e; /* MODIFIABLE */
}
/* CONTENU CATEGORIES */
.mdlCAT {
margin:auto; margin-bottom:15px;
width:898px; height:auto; padding-bottom:35px; border-top:none;
background:white; border:1px solid #efefef; /* MODIFIABLE */
}
/* BLOC FORUM */
.blocFRM{
width:900px; margin:auto; text-align:center;
}
/* BLOC POSITIONNEMENT */
.FRM {
display:inline-block; vertical-align:top; margin:35px 25px 0;
width:400px;
}
/* BORDURE ICÔNES FORUM */
.imgFRM {
display:inline-block; vertical-align:middle;
width:50px; height:50px; padding:5px; border:1px solid;
border-color:#efefef; /* MODIFIABLE */
}
/* BLOC POSITIONNEMENT */
.boxFRM {
display:inline-block; vertical-align:middle; margin-left:35px;
}
/* TITRE FORUM */
.tleFRM {
margin-bottom:10px; width:175px;
font-family:Fjalla One; text-align:center; font-size:18px; text-transform:uppercase; letter-spacing:1px;
}
.tleFRM a{
color:#e6c998 !important; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
font-size:10px;
color:#e6c998; /* MODIFIABLE */
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
text-transform:uppercase;
}
/* ICÔNE POSTEUR DERNIER MESSAGE FORUM */
.lmsgFRM .sprite-icon_topic_latest {
float:left; margin-right:-75px; margin-left:45px; margin-top:3px;
}
/* NOMBRE SUJETS FORUM */
.nbFRM {
width:86px; height:86px; padding:2px; overflow:hidden;
text-transform:uppercase; font-size:11px;
background:#efefef; color:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* BORDURES NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM p{
margin:0; height:64px; padding-top:20px; border:1px solid;
border-color:white; /* MODIFIABLE */
}
/* NOMBRE MESSAGES FORUM */
.nbIIFRM {
margin-top:20px;
background:#efefef; color:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* TAILLE NOMBRES NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM b {
font-size:14px;
}
/* BLOC DESCRIPTION & SOUS-FORUMS */
#descFRM {
display:inline-block; margin-top:35px; margin-right:25px;
width:400px; height:200px; overflow:hidden;
background:url(http://oi68.tinypic.com/1566ddf.jpg); border:1px solid #efefef; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM{
margin:auto; margin-top:19px;
width:350px; height:150px; padding:5px; overflow:auto;
font-family:Verdana; font-size:11px; text-align:justify;
background:white; border:1px solid #efefef; color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; margin-top:-160px; margin-left:20px;
width:350px; height:140px; padding:5px; overflow:auto;
background:white; /* MODIFIABLE */
opacity:0; transition:opacity 0.45s ease-in-out; -webkit-transition:opacity 0.45s ease-in-out;
}
.sfFRM:hover {
opacity:1;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
font-size:16px; font-family:Fjalla One; text-transform:uppercase; color:black !important; /* MODIFIABLE */
}
Revenir en haut Aller en bas
MessageRe: COMMANDE : CATÉGORIES Sam 19 Mar - 0:22
Bonsoir Skaemp !

Merci beaucoup, tout marche à merveille ! cat Like a Star @ heaven
En vous souhaitant une agréable soirée et une bonne continuation Like a Star @ heaven
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-