Code pour catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Code pour catégories

Message par Shiooooo le Mar 18 Jan 2011 - 19:21

Tout d'abord bonjour (ou plutôt bonsoir)
Alors voila, je ne trouve pas très jolie mes catégories (trop petite, illisible...):


Et j'aimerai plutot un truc de ce style (gros, belle écriture, une grande ligne de séparation entre le titre et la description, le nombre de messages et de sujets bien placé...) :

[image provenant du forum Kuroshitsuji RPG - V2]

Alors, maintenant, j'explique mon problème : j'ai essayé plein de codes (sur mon forum test) mais le résultat et disons... assez étrange =/ alors si vous pouviez m'aider ça serait trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop trop.... gentil =3

Voila ma feuille CSS :
Spoiler:
body
{background-position: top center;
}

/* CSS pour staff */

.tstaff{
font-size:1em;
}

.staff{
position: relative;
z-index: 0;
}

.staff:hover{
background-color: ##FEFEFE;
z-index: 999;
}

.staff span{
position: absolute;
background-color: #D8C5DB;
padding: 5px;
border: 2px solid #FFFFFF;
visibility: hidden;
text-transform: lowercase;
}

.staff span img{
border: 1px solid #D8C5DB;
padding: 2px;
}

.staff:hover span{
visibility: visible;
top: 100%;
left: 0px;
width: 100%px
}
/* Fin css pour staff */


a {
font-variant: small-caps;
}


th {
font-family:monospace; (police)
text-align: center; (pour aligner le texte)
}

a.forumlink {
font-family: monospace;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 1px dashed #59465C; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

body
{
cursor: url("http://bannerqueens.com/cursor1.ani");
}

style

ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
cursor: pointer;
margin: 1px;}

.mon_onglet:hover{
background: #transparent;}

.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
margin: 2px;}

.clear{
clear: both;}

.mon_contenu{
color: #666;
background: url('adresse de l'image de fond');
border: 1px solid #F0B400;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding: 10px;}

#mes_contenus, #mes_onglets{
width: 100%;
}

.tablo {text-align:center;}

a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #FFE494; /* arrière-plan de l'infobulle */

color: grey; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}

PS : j'aimerai aussi savoir comment il a fait pour avoir la description "à droite" et les liens "à gauche" :

et comment il a fait pour la description soit sur une pattern.

PS2 : le lien de mon fofo : http://graphxmania.forumgratuit.org/forum
le lien de Kuroshitsuji RPG - V2 : http://kuroshitsuji.forum-actif.info/

Merci d'avance ^^


Dernière édition par Shiooooo le Mer 19 Jan 2011 - 16:29, édité 1 fois

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour catégories

Message par Invité le Mer 19 Jan 2011 - 11:14

Bonjour,

Je ne suis pas sûre de savoir tout faire dans cette présentation, mais déjà 2 points de départ:
> Pour placer "sujets et messages" consultez ce tutoriel : http://forum.forumactif.com/t261562-suppression-des-colonnes-sujets-et-messages

>Pour la taille de vos titres vous avez déjà:
Code:
a.forumlink {
font-family: monospace;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 1px dashed #59465C; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)
}
Ajoutez une taille pour la police "font-size:20px;" avant le "}"

En ce qui concerne les descriptions, je pense qu'il s'agit d'un tableau:
Code:
<table><tr><td style="background-image:"url de la pattern;">Description</td><td>liens des sujets</td></tr></table>

Le reste nécessite des modifications de templates pour déplacer les liens vers les niveaux inférieurs et ajouter un fond dans les derniers sujets. Je veux vérifier avant de vous dire des bêtises.

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour catégories

Message par Shiooooo le Mer 19 Jan 2011 - 14:00

Alors d'abord, je te remercie de m'aider et même si tu ne sais pas tout faire, cela m'aide BEAUCOUUUUUPPPP =3
Secondo, j'ai juste quatre petits problèmes...
1. j'aimerai mettre les titres en italique
2. je n'arrive pas à faire que la bordure (ligne de séparation) entre le titre et la description fasse toute la catégorie, elle est seulement présente sous le nom de la catégorie
Ce que je souhaite :

Ce que j'ai réussi à faire (grâce à vous) ^^ :

3. le "sujet et message" et au même niveau que le titre alors que je souhaiterai qu'il soit en dessous de la ligne de séparation
J'aimerai que se soit comme ça :

Et voila ce que j'ai obtenue grâce au tuto :

4. je ne sais pas pourquoi mais quand j'entre votre code dans la descrition (le code pour la pattern), ça ne marche pas =/
Code:
a.forumlink {
font-family: georgia;
font-size: 20px;
background-color: ; (couleur du fond)
display: block; (affiche sous forme de "bloc" si tu spécifies pas la largeur, il prendra toute la largeur)
font-weight: bold; (met la police en gras)
text-align: center;
border-bottom: 5px solid #FFFFFF; (ajoute une bordure en dessous)
color : #B56B4F; (couleur du titre du forum)

}
Et voici la partie de ma feuille CSS que j'ai modifié grâce à vous :


Si je vous en demande trop, dites le moi ;3

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour catégories

Message par jerelian le Mer 19 Jan 2011 - 14:18

Bonjour

Pour l'italique il suffit de rajouter
Code:
font-style: italic;

Pour le reste je ne sais pas

Very Happy

edit

en fait pour la bordure il faut mettre
Code:
border-bottom: 1px dotted #000000; (ou la couleur de votre choix)

jerelian
Nouveau membre

Messages : 23
Inscrit(e) le : 06/03/2009

http://scrapissimots.actifforum.com
jerelian a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour catégories

Message par Invité le Mer 19 Jan 2011 - 15:26

Re,

J'ai modifié un peu le template, voici la nouvelle version du template Index_box :
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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
        </h{catrow.forumrow.LEVEL}><table width="100%"><tbody><tr><td style="padding-left: 40px; text-align: right;" class="gensmall">Messages:{catrow.forumrow.POSTS} | | Sujets:{catrow.forumrow.TOPICS} </td></tr></tbody></table><center><span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></center><br />
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall"><div class="lastm">{catrow.forumrow.LAST_POST}</div></span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
J'ai remis le titre hors du tableau qui place les sujet et message à droite. J'ai mis les liens vers les sous-catégories au dessus de la description. J'ai ajouté une class pour les derniers messages de manière à leur mettre une image de fond.

Ensuite j'ai retouché votre CSS ... je crois que les messages entre parenthèses créaient des conflits.
Code:
a.forumlink {
text-decoration: none;
font-family: georgia;
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 5px solid #FFFFFF;
color : #B56B4F;
display: block; }

.descrip {background-image: url("adresse de l'image");
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-right: 4px;
display: block;
width: 500px;
height:75px;
padding:4px;}

.lastm { background-image: url("adresse de l'image");
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-right: 4px;
display: block;
padding:4px;}

body
{background-position: top center;
}

.tstaff{
font-size:1em;
}

.staff{
position: relative;
z-index: 0;
}

.staff:hover{
background-color: ##FEFEFE;
z-index: 999;
}

.staff span{
position: absolute;
background-color: #D8C5DB;
padding: 5px;
border: 2px solid #FFFFFF;
visibility: hidden;
text-transform: lowercase;
}

.staff span img{
border: 1px solid #D8C5DB;
padding: 2px;
}

.staff:hover span{
visibility: visible;
top: 100%;
left: 0px;
width: 100%px
}

a {
font-variant: small-caps;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

body
{
cursor: url("http://bannerqueens.com/cursor1.ani");
}

ul, li{
list-style: none;
}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
cursor: pointer;
margin: 1px;}

.mon_onglet:hover{
background: #transparent;}

.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #333;
margin: 2px;}

.clear{
clear: both;}

.mon_contenu{
color: #666;
background: url('adresse de l'image de fond');
border: 1px solid #F0B400;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding: 10px;}

#mes_contenus, #mes_onglets{
width: 100%;
}

a.infobulle {
position: relative;
}

a.infobulle span {
display: none;
}
a.infobulle:hover {
background: none;
z-index: 999;

}
a.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 5px;
left: 15px;
background: #FFE494;
color: grey;
border: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}

body
{background-position: top center;
}

th {
font-family:monospace;
text-align: center;
}

.tablo {text-align:center;}
Normalement tout y est ... sauf les commentaires et l'image de fond ( remplacez adresse de l'image dans .descrip et .lastm ) Razz

Pour les descriptions, réessayez de placer ceci dans la description des forums :
Code:
<table cellSpacing="4"><tr><td class="descrip">description</td><td>lien<br />lien<br />lien<br />lien<br />lien<br /></td></tr></table>

J'espère qu'on s'approche du résultat avec tout ça Smile .

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour catégories

Message par Shiooooo le Mer 19 Jan 2011 - 16:28

Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii Isolde, tu es géniale !!!!!!!! C'est parfait, rien à dire =3 Et merci à toi aussi Jerelian, vous m'avez vraiment bien aidé !

Shiooooo
**

Féminin
Messages : 80
Inscrit(e) le : 17/12/2010

http://graphxmania.forumgratuit.org/forum
Shiooooo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum