Personnalisation de Catégories (Avec Schéma)

[*angiesworld*]

Bonjour à vous,
Si je vous écrit aujourd’hui c‘est parce que j’aimerai personnaliser un maximum les catégories du Forum Officiel que je suis actuellement entrain de monter.
L’ennui c’est que je ne suis pas très douée côté code du coup je ne vais pas très loin.. Voilà pourquoi je sollicite votre aide.

Voici donc un schéma qui pourra éventuellement vous aider à bien situer ce que je voudrais :


Avec une Image sur le côté gauche du Titre, comme ceci :


L’encadré des Derniers Messages où figure le Nombre de Sujets (et Posts) juste en dessous et l’image des Nouveautés (News / No News..) au dessus:


Avec un effet d’ombre sous l’encadré, comme cela :


Ainsi qu'un effet de "non séparation" comme ici :
Ou la colonne de droite chevauche celle de gauche. Où les séparateurs qui différencient chaque colonne n'est plus.


Et autour de l’image à côté du Titre je voudrais un cadre comme ceci (avec l’ombre) et légèrement penché en diagonale comme sur le schéma donné.



Croyez vous pouvoir m’aider?!
Il s'agit d'un fan club officiel, avec artiste et maison de disque, je me dois donc de faire preuve de professionnalisme en espérant que vous comprendrez la situation.
Dans tous les cas merci à ceux qui tenteront d’essayer.
Bien à vous..



EDIT :
Serait ce plus aisé pour moi de créer une Image de Catégorie (En suivant le schéma donné).. Puis d’y insérer les codes après.
Comme ceci :



Plutôt que de tout coder?!
Si cela s’avère plus facile.. Quelqu’un pourra-t-il m’aider à placer les codes de la catégorie (Description, Derniers Messages, Titre..etc) sur l’image créée?!

[Invité]

Bonjour,

Votre message contient beaucoup de chose, et au final je ne comprends plus rien du tout . Première chose, le forum des forums n'a pas vocation à devenir un forum de commande, donc si vous souhaitez un template + CSS tout prêt, orientez vous vers un forum de codage.

Si ce n'est pas le cas, alors, essayons de reprendre les choses plus simplement, qu'avez-vous actuellement et quel est le résultat que vous désirez au final? Il faudrait aussi donner votre CSS et le(s) template(s) que vous avez modifié(s) en essayant d'atteindre ce résultat.

Cordialement.

[*angiesworld*]

Bonsoir,

Désolé du surplus d’informations..
Je me suis dit qu’en donnant le plus de détails cela aiderait mais au final il ne fait que donné l‘effet inverse et c’est-ce que je craignais.
Ceci dit je ne suis pas là pour passer commande rassurer vous. J’ai déjà modifier de par moi-même mes catégories mais dur dur d’y arriver lorsqu’on ne connaît pas grand-chose au codage et qu’on ne sait pas quoi modifier exactement.

Mon Forum Actuel :


Le schéma de ce que je voudrais faire :


Légendes :
1/ Image représentatifs des Nouveautés dans les forums
2/ Image de la Description de Catégorie
3/ Nombre de Sujets & Messages dans le Topic
4/ Sous Catégories

Avec un effet d’ombre sous l’encadré comme ceci :


Ainsi qu'un effet de "non séparation" comme cela :

Ou la colonne de droite chevauche celle de gauche. Où les séparateurs qui différencient chaque colonne n'est plus.

Et autour de l’image de Description (2) je voudrais un cadre comme ceci (avec l’ombre) et légèrement penché en diagonale comme l’image prêt du titre sur l’exemple N°4.


Mon CSS, concernant les catégories tout du moins:

Code:

.contenu {
  background-image: url('http://img52.imageshack.us/img52/4278/fondtitreo.jpg');
          font-family: Trebuchet MS;
          font-size: 11px;
          text-align: justify;
    color : #B57D55;
          margin-left: 5px;
          margin-right: 5px;
          padding: 15px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:0px
}

.categorylink
{border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFFBAB;
text-shadow: #635f5e 1px 1px 1px;
margin-left: 17px;
margin-right: 5px;
}

.categorylink a
{color: #B57D55;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

.categorylink a:hover
{color: #FFFFFF;}

.onglet
{background-color: #FFFBAB;
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
text-transform: uppercase;
letter-spacing: -1px;}

.lineal {text-align: left;
border-bottom: 2px solid #FFFBAB;
padding: 0px 10px 3px 0px;
margin-left: 17px;
margin-right: 5px;
height : 10pt
}

a.forumlink {
background-color: #transparent;
  text-shadow: #635f5e 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
color: #FFFBAB;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
}

a.forumlink:hover{
background-color: #transparent;
  text-shadow: #FFFBAB 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
color: #F5A967;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
 }
.maintitle, .maintitle h1, th, .nav {text-transform: uppercase;}

.messuj {
border: 1px solid #a49896;
background-color: #E4FAA8;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding : 5px;
width: 150px;}

.arrondi {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
padding : 5px;
width: 150px;}

Concernant les Templates par contre j’en ai tellement modifié que je ne sais pas lequel vous donner, donc je donnerai ce que je crois être directement concerner.
Index_Box:

Code:

<div align="center" width="850px"><!-- BEGIN catrow --><!-- BEGIN tablehead -->

<table class="forumline" width="850px" border="0" cellspacing="0" cellpadding="0">
  <br><tr><td colspan="3" nowrap="nowrap" width="850px" class="secondarytitle" align="center" style="background-image:url('http://nsm05.casimages.com/img/2011/09/03/1109030434531192548685212.png');padding-bottom:px;"> {catrow.tablehead.L_FORUM} </td>
  </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="75%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}
         <br><span class="gensmall">{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages</span></a>

            </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"><div class="arrondi">{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 -->
<tr><td colspan="3" nowrap="nowrap" class="secondarytitle" align="center"><img src="http://nsm05.casimages.com/img/2011/09/03/1109030449241192548685305.png"  width="850"><br><br><br><br></td></tr>

</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --></div>

ViewForum_Body:

Code:

{BOARD_INDEX}
<table width="910px" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" width="50">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
         <!-- END switch_user_authpost -->
      </td>
      <td class="nav" valign="middle" width="100%"><div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div></td>
      <td class="gensmall" align="right" valign="bottom" nowrap="nowrap">
         <span class="nav">
            <script type="text/javascript">
            //<![CDATA[
               insert_plus_menu('f{FORUM_ID}&f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
         </span>
      </td>
   </tr>
</table>
{TOPICS_LIST_BOX}
<div id="info_open" style="display:''">



<table class="forumline" width="95%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-right:5px solid #866e60;border-left: 5px solid #866e60; -moz-border-radius:20px;background-color:#f5ebe3";></td>
      <tr>
         <td class="row1" align="left" valign="top"><span class="gensmall"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span></td>
         <td class="row1" align="right" valign="top"><span class="gensmall">{S_WATCH_FORUM}</span></td>
      </tr>
      <tr>
         <td class="row2" colspan="2" valign="top"><span class="gensmall"><b>{LOGGED_IN_USER_LIST}</b></span></td>
      </tr>
      <tr>
         <td class="row2" valign="top" width="150"><span class="gensmall"><b>{L_MODERATOR}:</b></span></td>
         <td class="row1" valign="top"><span class="gensmall">{MODERATORS}</span></td>
      </tr>
      <tr>
         <td class="row2" valign="top" width="150"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <tr>




         <td colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>

                  <td class="nav" valign="middle" width="100%"><div class="nav"> <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC_SECOND}</div></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</div>

<div id="info_close" style="display:none">
   <table class="forumline" width="95%" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td class="row1" colspan="2" align="right" valign="top"><span class="gensmall"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span></td>
      </tr>
      <tr>
         <td class="row2" colspan="2" valign="top"><span class="gensmall"><b>{LOGGED_IN_USER_LIST}</b></span></td>
      </tr>
      <tr>
         <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td class="nav" valign="middle" width="100%"><span class="nav"> <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</div>
   <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>

         <td align="left" valign="middle" width="50">
            <!-- BEGIN switch_user_logged_in -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
            <!-- END switch_user_logged_in -->
         </td>
         <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

   </tr>
   <!-- BEGIN switch_legend -->
   <tr>
      <td colspan="2">
         <table border="0" cellpadding="0" cellspacing="0" align="center">
            <tr>
               <td>
                  <img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_NEW_IMG}</span>

                  <img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_NEW_IMG}</span>

                  <img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_NEW_IMG}</span>
               </td>
               <td>
                  <img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_IMG}</span>

                  <img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_IMG}</span>

                  <img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_IMG}</span>
               </td>
               <td valign="top">
                  <img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_ANNOUNCE_IMG}</span>

                  <img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</span>

                  <img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_STICKY_IMG}</span>

               </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- END switch_legend -->
</table>
      </form>

ViewTopic_Body :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
  _atc.cwait = 0;
  $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
        addthis_close();
        addthis_close();
      }
  });
});
//]]>
</script>

<table width="910px" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap">
        <span class="nav">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
        <!-- END switch_user_authpost --> <br>
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authreply -->

        </span>
      </td>
      <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
       
      </td>

</table>




<table width="93%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-right:5px solid #866e60;border-left: 5px solid #866e60; -moz-border-radius:20px;background-color:#faf2eb;"></td>
  <tr align="right">
      <td colspan="3" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" nowrap="nowrap" class="t-title"><h1 class="cattitle"> {TOPIC_TITLE}</h1></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}

  <!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
  <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <div id="post_onlin">{postrow.displayed.ONLINE_IMG}</div>



<div style="background-color:#f5ebe3;border-right:2px solid #a8908c;border-left: 2px solid #a8908c; margin-left:5px;margin-top:5px;padding-left:10px;padding-right:8px;-moz-border-radius:10px;">
<span class="name" style="font-size:10px;font-variant: normal;text-decoration: none;font-family: time new roman;color:#541f1b;"><a name="{postrow.displayed.U_POST_ID}"></a><div style="text-align: center;text-decoration:none;"><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div>
           
<table><tr><td ><div align="center">{postrow.displayed.POSTER_RANK}</div>

<em>
<!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</em></div></td></tr></table></div>
      </td>






      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
              <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
              </td>
            </tr>
            <tr>
              <td colspan="2" class="hr">
                  <hr />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                    <!-- END switch_vote -->

                    <!-- BEGIN switch_bar -->
                    <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                    </div>
                    <!-- END switch_bar -->

                    <!-- BEGIN switch_no_bar -->
                    <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                    <!-- END switch_no_bar -->

                    <!-- BEGIN switch_vote -->
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="postbody">

                    {postrow.displayed.MESSAGE}

                    <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>
                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
        </table>
      </td>
  </tr>
  <tr>






      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
        <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
<center></br><img src="http://nsm05.casimages.com/img/2011/08/15/1108151158341192548593946.png"></center>
</br>
              </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN first_post_br -->
</table>








<table class="forumline" width="93%" border="0" cellspacing="0" cellpadding="0" >
  <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
  </tr>
  <!-- END first_post_br -->
  <!-- END displayed -->
  <!-- BEGIN hidden -->
  <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
  </tr>
  <!-- END hidden -->
  <!-- END postrow -->
  <!-- BEGIN no_post -->
  <tr align="center">
      <td class="row1" colspan="3" height="28">
        <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
  </tr>
  <!-- END no_post -->
  <tr align="right">
      <td colspan="3" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
        </table>
      </td>
  </tr>
</table>

<table class="forumline noprint" width="93%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-right:5px solid #866e60;border-left: 5px solid #866e60;-moz-border-radius:20px;">
  <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
  </tr>
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->
  <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}

        <!-- END switch_user_logged_in -->
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
        <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
        <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>










        <td  colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#faf2eb;"></td>
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
        <td colspan="2" height="28">
            <table width="83%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
</table>





<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="93%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-right:XXpx solid #;border-left: XXpx solid #; -moz-border-radius:20px;background-image:url('')";></td>
  <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
        <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
        </span>
      </td>
      <!-- BEGIN viewtopic_bottom -->
      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
      <!-- END viewtopic_bottom -->
      <!-- BEGIN moderation_panel -->
      <td align="center">
        <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
        <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
  </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="83%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-right:XXpx solid #;border-left: XXpx solid #; -moz-border-radius:20px;background-image:url('')";></td>
  <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap">
{S_TOPIC_ADMIN}

        <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />
            <input type="hidden" name="sid" value="{S_SID}" />
            <span class="gen">{L_MOD_TOOLS}
{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
        </form>
      </td>
  </tr>
</table>
<!-- END viewtopic_bottom -->

<script type="text/javascript" src="{JS_DIR}addthis/addthis_widget.js?pub=forumotion"></script>
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

En espérant que vous saurez au mieux m'aider..
Amicalement.

[*angiesworld*]

Bonjour à vous..
Je vous remercie de m’avoir tenu informé du déplacement du sujet, ceci étant dit je ne comprend pas pourquoi.
Cela concerne une personnalisation par conséquent une gérance d’apparence et non un problème de codage.
Mes codes vont très bien merci de vous en soucier xD

[*angiesworld*]

Petite Remontée de Sujet..

[SoraNoHime]

Coucou Angieworlds.

C'est encore un peu brouillon pour moi, on va faire en plusieurs temps.

Peux-tu me mettre un rendu voulu de la structure (sans les trucs de bords, juste l'emplacement des parties en fait pour le moment, nous réglerons le reste ensuite lorsque cela sera déjà bien installé) en me faisant un schéma main de ce que tu veux.

Amicalement.

[*angiesworld*]

Bonsoir Macema,
Et bien merci encore une fois pour tu sais quoi..
Je suis également désolé que cela ne soit pas très bien expliqué je vais donc tenter de faire un schéma basique (voire amateur) à la main. Et tu me diras si tu arrives à comprendre le rendu voulu.

Voilà donc pour toi :
xXx

En espérant avoir été un peu plus clair.
Si ça n’est pas le cas dis moi ce que tu ne comprends pas.
Pour ce qui est des sous catégories j’ai déjà le code si ça peut aider..
Amicalement.

[*angiesworld*]

Upage de Page

[*angiesworld*]

Petit Upounet les Choupinets!

[*angiesworld*]

Toujours d'actualité pour ceux que cela pourrait intéresser!

[Naokiki]

coucou, je vais essayer de te faire quelque chose et je te donne les codes d'ici 10 minutes =)

EDIT; je rencontre un petit soucis donc compte d'ici 30 minutes xD

[Naokiki]

désolé, du double post =/

voilà ce que j'arrive à obtenir



dis moi si cela te convient et si oui, je t'envoie tout ça par mp =)

[*angiesworld*]

J’tiens à te remercier d’avoir prit la peine de te pencher sur le sujet.. Sincèrement!
Tu as prit de ton temps, ô combien précieux pour m’aider et rien que pour ça je t’en suis reconnaissante déjà. Mais ce n’est pas vraiment ce que je voudrais..
Seul l’image au dessus des derniers messages correspond.
Ceci dit je te remercie infiniment Naokiki! ^_^

[Naokiki]

c'est pas grave t'inquiètes pas =)
j'ai essayé de faire ce que tu voulais mais j'ai rencontré quelques problèmes, c'est pour ça que j'avais un peu simplifié le truc. mais je te conseille, dans ce cas, d'aller sur un forum de commandes graphies parce que le forum des forums n'a pas vocation à en devenir un =/

[*angiesworld*]

Et j’apprécie l’aide apportée.. ^_^
Mais il s’agit là de codage et non de graphisme je tiens à le rappeler.. Par conséquent aller sur un forum de commande graphique ne m’aidera en rien.
Ceci dit merci!

[*angiesworld*]

Up!

[Naokiki]

oui, mais les forums de graphismes ne font pas que des bannières et des avatars, 98% d'entre eux, s'occupent aussi des commandes de codages donc bon. enfin, c'est toi qui voit.

[*angiesworld*]

Oui je sais mais ils font du graphisme leur priorité.
Ce sont d’ailleurs eux même qui m’ont conseillés de venir ici avant tout pensant que j’aurais plus de facilité à trouver.
Donc qui vivra verra.
Ceci dit Merci à toi!

[*angiesworld*]

Up…

On peut faire étape par étape si ça peut faciliter.
Par exemple on peut d’abord commencer par : Mettre l’image des News / No News / Locked à droite au dessus des Messages de Topic.
Ensuite on peut : Mettre l’Image de la description de catégorie (Image Quelconque sur le schéma donné) à gauche du Titre de Catégorie
A vous de voir..

[Invité]

Bonjour,

J'ai tenté quelque chose en partant de votre Index_box.
Remplacez-le par celui-ci:

Code:

<div align="center" width="850px"><!-- BEGIN catrow --><!-- BEGIN tablehead -->
 
<table class="forumline" width="850px" border="0" cellspacing="0" cellpadding="0">
  <br /><tr><td colspan="3" nowrap="nowrap" width="850px" class="secondarytitle" align="center" style="background-image:url('http://nsm05.casimages.com/img/2011/09/03/1109030434531192548685212.png');padding-bottom:px;"> {catrow.tablehead.L_FORUM} </td>
  </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">
              </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="75%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}
                <br /></a>
 
            </span>
        </h{catrow.forumrow.LEVEL}>
              <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
        <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">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        <div class="arrondi"><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
          <br />{catrow.forumrow.LAST_POST}</span></div>
      </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 -->
    <tr><td colspan="3" nowrap="nowrap" class="secondarytitle" align="center"><img src="http://nsm05.casimages.com/img/2011/09/03/1109030449241192548685305.png"  width="850"><br /><br /><br /><br /></td></tr>
 
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --></div>

J'ai modifié très peu de chose: j'ai ajouté une div pour les descriptions, déplacé l'icone "new/no new"
Idem pour le CSS, j'ai modifier quelques petites choses comme 'alignement et j'ai rajouté la partie correspondant aux descriptions

Code:

.contenu {
  background-image: url('http://img52.imageshack.us/img52/4278/fondtitreo.jpg');
          font-family: Trebuchet MS;
          font-size: 11px;
          text-align: justify;
    color : #B57D55;
          margin-left: 5px;
          margin-right: 5px;
          padding: 15px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:0px
}
 
.categorylink
{border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFFBAB;
text-shadow: #635f5e 1px 1px 1px;
margin-left: 17px;
margin-right: 5px;
}
 
.categorylink a
{color: #B57D55;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
 
.categorylink a:hover
{color: #FFFFFF;}
 
.onglet
{background-color: #FFFBAB;
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
text-transform: uppercase;
letter-spacing: -1px;}
 
.lineal {text-align: left;
border-bottom: 2px solid #FFFBAB;
padding: 0px 10px 3px 0px;
margin-left: 17px;
margin-right: 5px;
height : 10pt
}
 
a.forumlink {
background-color: #transparent;
  text-shadow: #635f5e 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
color: #FFFBAB;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: right;
  padding-right: 5px;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
}
 
a.forumlink:hover{
background-color: #transparent;
  text-shadow: #FFFBAB 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
color: #F5A967;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: right;
  padding-right: 5px;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
 }
.maintitle, .maintitle h1, th, .nav {text-transform: uppercase;}
 
.messuj {
border: 1px solid #a49896;
background-color: #E4FAA8;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding : 5px;
width: 150px;}
 
.arrondi {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
padding : 5px;
width: 150px;}

.descrip{
  border: 1px solid #000;
  width: 600px;
}

Pour l'image, je ne trouve aucun moyen de la déplacer celle correspondant aux descriptions . Ce n'est qu'un essai, dites moi s'il y a du bon dedans et ce qu'il faudrait changer.

Cordialement.

[*angiesworld*]

Bonjour,
Avant tout merci à vous pour l’interet porté ainsi que de prendre le temps de m’aider.
Les codes ont été remplacés par ceux donné.. Le truc c’est que je me dis qu’enfaite, si je n’avais fait que modifier l’emplacement de l’image News / No News tout en gardant mon ancien codage, cela aurait peut être donné de meilleur résultat.
Je peux peut etre essayer si vous voulez?!

Voici donc, avec vos codes, le résultat qui apporté:


Comme vous le constatez il y a quelques petits souci. Notamment l’apparition de cette bordure noir autour de la description.
Seul le déplacement de l’image des Nouveautés est superbement bien réalisé. D’ailleurs merci pour ça! ^_^
Le titre de la Catégorie est centré à droite au lieu de l’être à gauche et le Nombre de Sujets et Topics se situe au dessus au lieu d’etre en dessous.
Mais pour ça j’ai ce code là, qui devrait fonctionner :
Template Index_Box:

Code:

  <td class="row3 over" align="center" valign="middle" height="50"><div class="messuj">                    <span class="gensmall">{catrow.forumrow.TOPICS} Sujets || {catrow.forumrow.POSTS} Messages</span></div>            <span class="gensmall"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></span>                  </td>

CSS:

Code:

.messuj {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
padding : 5px;
width: 150px;}

.arrondi {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
padding : 5px;
width: 150px;}

Pour ce qui est de l’image des descriptions, etant donné que ce n’est pas un code de base qui est dans le template mais qu’il est rajouté pour personnaliser, je me disais qu’il serait peut etre possible de tout simplement placer l’image dans l’Index_Box, via une balise, juste devant le Titre de Catégorie.
Qu’en pensez vous?!

Dans tous les cas.. Merci à vous pour tout!

EDIT: Concernant l'image News / No News situé juste au dessus des Derniers Messages, y aurait il possibilité pour que celle ci soit plus proche du carré prévu à cet effet?!
Comme ici par exemple, http://becausewelive.1fr1.net/ , ou l'image est collé à l'image de fond carré ou se situe les derniers messages.

[*angiesworld*]

Une Mise à Jour du 1er Post a été effectué, pour plus de compréhension et de faciliter.

Je voulais également savoir si il serait plus aisé pour moi de créer une Image de Catégorie (En suivant le schéma donné dans le 1er post).. Puis d’y insérer les codes après.
Comme ceci :



Plutôt que de tout coder?!
Si cela s’avère plus facile.. Quelqu’un pourra-t-il m’aider à placer les codes de la catégorie (Description, Derniers Messages, Titre..etc) sur l’image créée?!

[*angiesworld*]

Up.
Quelqu’un pourrait il, ne serait que, m’éclairer sur le sujet?!
Afin de savoir si il serait plus facile de TOUT coder ou plutôt de créer une image puis d’y insérer les quelques codes?!

[Invité]

Bonjour,

J'ai beaucoup de mal à suivre vos idées. La solution pourrait en effet être de faire un tableau avec les éléments dans différentes cellules et une image de fond.

Cordialement.

[*angiesworld*]

Bonsoir,

Et bien enfaîte soit je code tout et ajoute petit à petit une image de fond pour chaque chose.
Par exemple un fond bleu pour les titres, un fond vert pour la description. etc
Soit je fais directement une image, comme ceci :

Puis j’y incorpore ensuite les codes de chaque partie.

Je voulais donc savoir ce qui serait le plus facile à faire, afin de ne pas trop en demander à ceux qui voudrait éventuellement bien m’aider.
Vous comprenez?!

[Invité]

Les deux solutions sont aussi complexes l'une que l'autre, ce qu'il faut c'est savoir exactement à quel résultat vous voulez parvenir. Est-ce qu'il faut composer avec les modifications déjà existantes dans votre template ou bien repart-on sur le template de base pour des modifications totalement différente?

Cordialement.

[*angiesworld*]

J’pensais qu’il y avait une solution beaucoup plus aisé par rapport à l’autre.. Mais faut croire que je me suis trompé!
Puis pour le résultat auquel je veux parvenir.. J’en ai fait un schéma exact sur le 1er Post.
Ne sachant pas lequel des 2choix serait le plus facile a réalisé je n’ai pas encore l’image de la catégorie (comme pour l’exemple précédemment donné.) Mais j’pense que je vais de ce pas m’en charger..^_^
Après concernant le template.. Cela dépend ce que vous voulais dire pas « De Base » si cela signifie qu’il s’agit du template du commencement, lorsque rien n’est modifié ou si vous parler du template que j’ai donné au départ?!
Mais je préfères qu’on repart du template donné dans le tout premier poste.. Ce sera plus facile je crois.

[*angiesworld*]

Up!
J'pense que même sans l'image on peut quand même essayer d'avancer..
Ne serait ce qu'en trouvant comment on va mettre une l'image à côté du titre.

[*angiesworld*]

Upounet les Gros Minet!

[Invité]

Bonjour,

Une autre proposition.

Je suis repartie du template modifié et j'ai essayé de me rapprocher au mieux du schéma à l'aide de div et le positionnement via le CSS.
l'index_box:

Code:

<div align="center" width="850px"><!-- BEGIN catrow --><!-- BEGIN tablehead -->
 
<table class="forumline" width="850px" border="0" cellspacing="0" cellpadding="0">
  <br /><tr><td colspan="3" nowrap="nowrap" width="850px" class="secondarytitle" align="center" style="background-image:url('http://nsm05.casimages.com/img/2011/09/03/1109030434531192548685212.png');padding-bottom:px;"> {catrow.tablehead.L_FORUM} </td>
  </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">
              </td>
      <td class="row1" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="75%" height="50">
        <br/>
              <div class="descrip"><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}
                <br /></a>
            </span>
        </h{catrow.forumrow.LEVEL}>
        <div class="sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
          <br />
        </span></td>
   
      <td class="row1" align="center" valign="middle" height="50">
        <div class="arrondi"  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}" /><br />
        <span class="gensmall">
          {catrow.forumrow.LAST_POST}<br />{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span></div>
      </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 -->
    <tr><td colspan="3" nowrap="nowrap" class="secondarytitle" align="center"><img src="http://nsm05.casimages.com/img/2011/09/03/1109030449241192548685305.png"  width="850"><br /><br /><br /><br /></td></tr>
 
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --></div>

Le CSS:

Code:

.contenu {
  background-image: url('http://img52.imageshack.us/img52/4278/fondtitreo.jpg');
          font-family: Trebuchet MS;
          font-size: 11px;
          text-align: justify;
    color : #B57D55;
          margin-left: 5px;
          margin-right: 5px;
          padding: 15px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:0px
}
 
.categorylink
{border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FFFBAB;
text-shadow: #635f5e 1px 1px 1px;
margin-left: 17px;
margin-right: 5px;
}
 
.categorylink a
{color: #B57D55;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
 
.categorylink a:hover
{color: #FFFFFF;}
 
.onglet
{background-color: #FFFBAB;
padding-right: 8px;
padding-left: 8px;
padding-bottom: 2px;
text-transform: uppercase;
letter-spacing: -1px;}
 
.lineal {text-align: left;
border-bottom: 2px solid #FFFBAB;
padding: 0px 10px 3px 0px;
margin-left: 17px;
margin-right: 5px;
height : 10pt
}
 
a.forumlink {
background-color: #transparent;
  text-shadow: #635f5e 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
color: #FFFBAB;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: left;
  padding: 3px;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
  width: 400px;
  height: 18px;
  margin: auto;
  margin-top: -10px !important;
}
 
a.forumlink:hover{
background-color: #transparent;
  text-shadow: #FFFBAB 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
color: #F5A967;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: left;
  padding: 5px;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
 width: 400px;
  height: 18px;
  margin: auto;}
.maintitle, .maintitle h1, th, .nav {text-transform: uppercase;}
 
.messuj {
border: 1px solid #a49896;
background-color: #E4FAA8;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding : 5px;
width: 150px;}
 
.arrondi {
border: 1px solid #a49896;
background-color: #FFFBAB;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
padding : 5px;
width: 150px;
  height: 120px;
  -moz-box-shadow: 2px 2px 4px #000;
}
 
.descrip{
  border: 1px solid #000;
  width: 700px;
  height: 150px;
  -moz-box-shadow: 2px 2px 4px #000;
  position:relative;
  right:-10px;
  background-color: lightblue;
}

.sousfo{
  background-color: #transparent;
  text-shadow: #FFFBAB 1px 1px 1px;
  background-image: url('http://i42.tinypic.com/1roygg.jpg');
  color: #F5A967;
  display: block;
  font-family: GEORGIA;
  font-size: 16px;
  text-transform: uppercase;
  text-align: left;
  padding: 3px;
  letter-spacing: -1px;
  -moz-border-radius:5px;
  -moz-box-shadow: 0px 2px 2px #a49896;
  width: 380px;
  height: 18px;
  margin: auto;}

Cordialement.