Changer l'apparence des catégories

[mrnaia]

Bonjour,
Pour l'instant mes catégories ressemblent à ca :



et je ne sais pas comment faire pour arrondir un peu les pointes et faire si il est possible ce genre d'effet sur le titre de la catégorie pour que ca devienne approximativement comme ca :



sauriez vous si il est possible de faire quelque chose dans ce style, et si oui, ce serait gentil de m'expliquer comment procéder ^^
Merci d'avance pour votre aide

[SoraNoHime]

Bonsoir

pouvez-vous me fournir votre template index_box s'il n'est pas modifié ?

Cordialement.

[mrnaia]

il n'est pas modifié encore à l'état initial ^^

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="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</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><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->

[SoraNoHime]

Votre hiérarchie actuelle est bien sur moyen, séparer les catégories de l'index ?

[mrnaia]

exactement (comme on le voit sur la photo ^^)

[mrnaia]

me demandais aussi si par la même occasion on peut faire le même effet pour le message sur la page d'accueil et le qeel...

[mrnaia]

une idée ?

[SoraNoHime]

Repérez ceci ;

Code:

<!-- 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="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->

et changez le ainsi :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="secondarytitle">{catrow.tablehead.L_FORUM}</div><table class="catcadre" width="100%" border="0" cellspacing="5" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%">  </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->

puis dans la css mettez :

.catcadre {
background-color : #000000;
padding 5px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
}

.secondarytitle {
-khtml-border-radius-topleft: 20px;
-khtml-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width : 350px;
margin-left : 50px;
background-color :#ffff00;
}

à personnaliser . Est-ce que vous désirez ?

[mrnaia]

merci beaucoup ca marche bien
comment faire les traits un peu moins épais et blanc ?
comment mettre l'onglet de titre de la catégorie un peu plus épais, et avec l'image verte des derniers messages posts sujets etc... ?
est ce que c possible de faire passer les images de fond derrière le cadre arrondi ?

[SoraNoHime]

alors pour le titre de la catégorie changez dans .secondarytitle

background-color :#ffff00; par background-image:url("adresse de votre image");

et ajoutez avant } height : 50px; Vous pouvez adapter la taille en hauteur réglant le 50

Pous vos autres questions, merci d'être un peu plus précise ^^ pouvez-vous me les resituer.

[mrnaia]

les traits de contour : au lieu de noir et épais, plutot blanc et fins (j ai deja réussit à changer la couleur) comme le reste du forum

pour la seconde question : pour l'épaisseur et l'image merci beaucoup
si je mets une image à opacité de 50 en fond, le titre de catégorie sera sur un fond transparent ?

pour la dernière question : on voit que les images de fond un peu "papier" ont leurs coins qui passent au dessus du contour arrondi, est ce que ce serait possible de les faire passer derrière le contour arrondi pour ne plus voir leurs coins

si vous voulez voir : http://viveekoloko.forumgratuit.org

[mrnaia]

et aussi serait il possible de décaler le titre de la catégorie un peu vers la droite car il est comment dire un peu à cheval entre le vide et l'onglet

[SoraNoHime]

Pensez à éditer vos sujets plutot que de faire des double posts ^^

mettez ceci dans votre css pour régler le titre :
.secondarytitle h2 {
margin-left : 50px;
}

repérez dans votre template

Code:

<table class="catcadre" width="100%" border="0" cellspacing="5" cellpadding="0">

voyez le cellspacing="5" c'est votre épaisseur, changez la pour l'adapter à votre gout.

et dans .catcadre dans la css, augementer le padding : 5px; pour enlever le débordements des coins.

Pour l'opacité, testé en mettant le code d'opacité directement dans .secondarytitle juste avant }. si ça ne fonctionne pas 'ai une autre solution ^^

[mrnaia]

ok j'éditerai
merci beaucoup pour tous ces conseils, encore quelques questions...

en augmentant le padding, les coins de l'image de fond derrière le texte sont toujours aussi pointus et dépassent du contour arrondi

serait il possible que le titre de la catégorie soit moins "tout en haut de l'onglet" et un peu au milieu dans la hauteur...

quel est le code d'opacité ?

[mrnaia]

je n'ai rien trouvé concernant l'opacité en recherchant sur le forum
après j ai essayé de rajouter

Code:

.secondarytitle h2 {
margin-left : 40px;
margin-top : 20px;
}

mais ca ne fonctionne pas

edite : vraiment désolée je viens de m'apercevoir que j'ai posté à la suite j'avais oublié

[SoraNoHime]

Bonjour, Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

laisser moi le temps de trouver le problème ^^ à la rigueur vous pouvez m'aider en me rendant votre nouveau template index_box ainsi que votre css.

Cordialement.

[mrnaia]

voici le css

Code:

.liteoption, .mainoption, .button2{ -moz-border-radius: 7px; -webkit-border-radius: 7px;}


textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

a {
font-variant: small-caps;
}

body {
background-repeat: repeat;
}
a { text-decoration: none; }

.bodyline {
-moz-border-radius:6px;
}

.forumline{
background-color: #ffffff;
-moz-border-radius: 10px ;
border: 2px #ffffff solid;
}




.postbody {
background-repeat: repeat;
background-image: url('http://nsa28.casimages.com/img/2011/08/18/110818030515547735.png');
background-position: center;
}

td.row1 {
background-repeat: repeat;
background-image: url('http://nsa28.casimages.com/img/2011/08/18/110818030515547735.png');
background-position: center;
}
td.row2 {
background-repeat: repeat;
background-image: url('http://nsa28.casimages.com/img/2011/08/18/110818030515547735.png');
background-position: center;
}
td.row3 {
background-repeat: repeat;
background-image: url('http://i49.tinypic.com/258ndky.png');
background-position: center;
}

td.row3Right {
background:url('http://nsa28.casimages.com/img/2011/08/18/110818030515547735.png');
border-style:
}

td.row3{
background-image: url("http://i49.tinypic.com/258ndky.png");
}





a.mainmenu:link, a.mainmenu:visited{
margin-left : 4px;
margin-right : 4px;
font-family :Comic sans MS;
color: #062b36;
background-image: url("http://i49.tinypic.com/258ndky.png");
text-align:left;
border-left: 9px solid #062b36;
border-right: 9px solid: url("http://i45.tinypic.com/ztdoo7.png");
}

a.mainmenu:hover, a.mainmenu:hover:visited{
color: #9a816d;
border-left: 9px solid #9a816d;
border-right: 9px solid: url("http://i48.tinypic.com/5ff15g.png");
}


.catcadre {
background-color : #ffffff;
padding 5px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-border-radius:20px;
-khtml-border-radius:20px;
}

.secondarytitle {
-khtml-border-radius-topleft: 20px;
-khtml-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width : 350px;
margin-left : 50px;
height : 25px;
background-image:url("http://i47.servimg.com/u/f47/16/37/39/50/fond_f10.png");
}

.secondarytitle h2 {
margin-left : 40px;
margin-top : 20px;
}

.bodyline
{
opacity : 1;
}

et voici indexbox

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="secondarytitle">{catrow.tablehead.L_FORUM}</div><table class="catcadre" width="100%" border="0" cellspacing="3" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%">  </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</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><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</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 -->

[Kevin Mars]

Bonsoir, voila, je suis intéresser aussi par cette astuce mais juste avoir la forme comme un onglet pour mes categories ( partie en vert sur sont forum )

Cordialement

[mrnaia]

ce soir les membres de mon forum me disent que ma page charge lentement mais moi ca marche impeccable... est ce qu il se pourrait que ca vienne des catégories ?
Est ce que vous ca marche correctement ?

[SoraNoHime]

les codes html ne prennent pas assez de poids pour que cela vienne du changement dans les catégories. chez moi cela s'affiche correctement ^^

Je vous invite à ouvrir un nouveau sujet à ce propos , un problème = un sujet.

@Kevin Mars : merci également d'ouvrir votre propre sujet pour éviter les interférences de codes entre les problèmes.

Cordialement.

[mrnaia]

ok merci ^^
sinon avez vous trouvé comment arrondir les coins des images de fond pour qu elles ne dépassent pas sur le contour ?

[saniadu60]

mrnaia super

[mrnaia]

merci sasa

edite : roh j y crois pas t as fait pareil ! copieuse !
on avait dit qu on attendait avant de faire pareil que l'autre
je suis vraiment remontée en plus tu te seers de mon sujet, moi qui ai décidée de faire des onglets comme ca, t as vraiment aucune personnalité pour recopier les autres et ne pas savoir ce que tu veux pour ton forum, tu me décois beaucoup

pour revenir au sujet (désolée de cet emportement mais ce n'est pas la première fois que ce forum concurrent recopie mes idées ! et je ne trouve pas ca très fairplay car moi je n ai jamais rien copié !)

donc de nouveau pour revenir au sujet : auriez vous une idée pour effacer les coins des images qui dépassent du cadre rond des catégories ?
j'espère que cette fois on va pas me copier encore !