Catégories du forum: cadres et noms en image

[So-Mush]

Bonjour,

Je voudrais savoir comment mettre un place un système où les en têtes des cadres de catégorie, les pieds des cadre de catégorie et les noms des cadres de catégorie sont en image.

Voyez plutôt:


La flèche rouge représente l'image d'en tête de la catégorie : https://nsa25.casimages.com/img/2011/05/14/110514085258800895.png
La flèche bleu représente l'image en pied de la catégorie: https://2img.net/r/hpimg4/pics/701046hjnbgvfdccopie.png
La flèche verte représente l'image du nom de la catégorie: https://2img.net/r/hpimg11/pics/627694categ7.png

Je vous remercie par avance, cordialement !

[Pakodar]

Bonjour,
Pourrais-savoir quelles images vous voulez mettre? Je crois avoir trouvé la solution. Maintenant il me faudrait la taille des images (largeur + hauteur) et votre template index_box

[So-Mush]

Voilà mon 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}

                    {CURRENT_TIME}

                    </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>

                    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

                    <!-- 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}>
                    <span class="genmed forumdesc">{catrow.forumrow.FORUM_DESC}</span>
<span class="foruminfo">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</span>
                <span class="forumforums">{catrow.forumrow.LINKS}</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 -->

Pour ce qui est des images j'avoue que je n'en ai pas encore fait, je voulais être certaine qu'une telle réalisation soit possible avant de me lancer dans les images ^^'

Je peux en faire des "brouillons" rapidement si vous le voulez ?
Pour les dimensions elles seraient de 887 en largeur sur 90 de hauteur

[Pakodar]

Rebonjour,
Voilà un petit aperçu de ce que cela pourrait donner.
Su la 1ère image il y a marqué "image de fin de catégorie". J'en ai fait une pour le début et la fin, donc ne vous étonnez pas.

Au lieu de faire 3 images, vous pouvez faire une image de début de catégorie, la garder, et à chaque fois créer une nouvelle image avec le nom de la catégorie. Et enfin créez une image de fin de catégorie.
Personnellement je ne saurais pas faire un tel code ^^'

Si ce que j'ai fait vous convient, je peux vous donner les code à changer selon ce que vous voulez.

[So-Mush]

Pour ce qui est de faire un titre différent à chaque fois ça ne pose pas de problème je ferais comme ça ^^
Et pour le bas, je peux toujours attendre et voir si quelqu'un d'autre sais le faire.

Je veux bien voir ce que ça donne déjà avec votre code ^^

[Pakodar]

Remplacez votre code index-box par celui-ci.

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} {CURRENT_TIME} </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> <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> <!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="URL DE L'IMAGE DE DEBUT DES CATEGORIES" height="90" width="887" /><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="50" /></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}> <span class="genmed forumdesc">{catrow.forumrow.FORUM_DESC}</span> <span class="foruminfo">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</span> <span class="forumforums">{catrow.forumrow.LINKS}</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="http://i29.servimg.com/u/f29/15/99/21/97/image_11.gif" alt="" height="90" width="887" /><!-- END tablefoot --><!-- END catrow -->

Cherchez cette ligne:

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><img src="URL DE L'IMAGE DE DEBUT DES CATEGORIES" height="90" width="887" /><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

Remplacez URL DE L'IMAGE DE DEBUT DES CATEGORIES par l'URL de votre image de début, et changez les valeurs qui suivent: height="90" width="887"
height="90" défini la hauteur.
width="887" défini la largeur

A la dernière ligne il y a

Code:

<img src="http://i29.servimg.com/u/f29/15/99/21/97/image_11.gif" alt="" height="90" width="887" />

Faîtes pareil que pour la précédente

[So-Mush]

Merci !!
Le résultat est simpa ^^