Apparence Catégorie

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

Résolu Apparence Catégorie

Message par Vicsius le Mer 13 Juil 2011 - 7:51

Bonjour à vous,

Commençant à connaître, un tout petit peu, les templates, j'ai décidé de retoucher complétement mon 2è forum en le passant sous phpBB2.

Voici ce en quoi je suis arrivé jusqu'à présent:

SCREEN

et voici ce que j'aimerais à quoi il ressemble:

Cliquez

Avec:

1- le titre de mes catégories en Image (mettez ce que vous voulez je changerai par moi-même), taille 2tiers de la largeur environ
2-Sujet et message
3-Description de la catégorie
4-Icône new/old/lock
5-Dernier message
6- Sous-forum

Par-contre pour les couleurs et cadres ne vous embêtez pas je les changerais plus tard moi-même.

Voici mon template index_box que j'ai modifié:

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

<th nowrap="nowrap" width="150"><div style="width:150px;"></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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
    <table width="100%"><tbody><tr><td><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}></td><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.TOPICS} sujets.<br>{catrow.forumrow.POSTS} messages.</td></tr></tbody></table>         <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="{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="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 -->

et le CSS que j'ai "créé":

Code:
        /*Texte catégories*/

        .forumlink {text-shadow: #4D4534 1px 1px 1px;
        font: bold 25px georgia;
        font-style: italic;
        letter-spacing: 0px;
        font-weight: bold;}

        a.forumlink {
        text-decoration: none important!;
        border: none important!;
        text-shadow: #4D4534 1px 1px 1px;
        font: bold 25px georgia;
        font-style: italic;
        letter-spacing: -1px;
        font-weight: bold}

        a.forumlink:visited{border: none important!;
        text-decoration: none important!;
        text-shadow: #4D4534 1px 1px 1px;
        font: bold 25px georgia;
        font-style: italic;
        letter-spacing: -1px;
        font-weight: bold }

        a.forumlink:hover{border: none important!;
        text-decoration: none important!;
        text-shadow: #9a9a9c 1px 1px 1px;
        font: bold 25px georgia;
        font-style: italic;
        letter-spacing: -1px;
        font-weight: bold}

      .forumline {
      -moz-border-radius: 0px 75px 0px 75px;
      border-top:5px solid #FFA1A1;
      border-bottom:5px solid #FFA1A1;
      border-left:5px solid #FFA1A1;
      border-right:5px solid #FFA1A1;
      -webkit-border-radius: 5px;
      }

        .bodyline {-moz-border-radius:8px;}
      -webkit-border-radius:8 px;
      -border-radius:8 px;
      -khtml-border-radius:8 px;

        gensmall {text-decoration:none !important; text-align:center;}
        a.gensmall {color:#e24e65; text-decoration:none !important;}
        a.gensmall:hover {color:#92c249; text-decoration:none !important;}

Merci bien à vous si vous pouvez m'aider à finir ceci.


Dernière édition par Vicsius le Dim 31 Juil 2011 - 12:16, édité 3 fois (Raison : Changement après explication de tupac)

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Apparence Catégorie

Message par tupac le Mer 13 Juil 2011 - 8:31

Bonjour

En cherchant sur le forum en l'occurrence en tapant (catégorie) dans la barre de recherche vous allez tomber sur pas mal de sujet qui parle de cette demande.

Pour ce qui est de l'effet lumière cela s'appel (gradualfader) allez jeter un œil ici

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Apparence Catégorie

Message par Vicsius le Mer 13 Juil 2011 - 8:38

Merci pour vos réponses, pour la 1ère, j'ai effectivement chercher et je n'arrive pas à aller plus loin dans mes modifications (c'est d’ailleurs grâce à plusieurs d'entre-elles que j'ai pus "créer" mon CSS).

Et merci pour la 2è, je n'es vus que pour la 1ère fois sur 2 forums différent cette nuit cet effet, je ne connaissais donc pas, merci pour le lien je vais potasser dessus.^^

EDIT: gradualfader un peu compliquer à comprendre l'utilisation mais une fois fait c'est beaucoup plus simple merci tupac.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie

Message par Vicsius le Jeu 14 Juil 2011 - 7:58

Up'

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie

Message par Vicsius le Ven 15 Juil 2011 - 18:15

Up'

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie

Message par Vicsius le Mar 19 Juil 2011 - 20:21

Up' SVP je n'arrive vraiment pas à modifier, le reste, je pense avoir oublié de changer ou supprimer une ligne mais je ne trouve pas laquelle Sad

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie

Message par tupac le Mar 19 Juil 2011 - 22:37

Bonsoir

Pouvez vous nous montrer ce que vous avez déjà fait en nous donnant le template index_box et le css associé svp?

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Apparence Catégorie

Message par Automne le Mer 27 Juil 2011 - 8:09

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :

  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie

Message par Vicsius le Jeu 28 Juil 2011 - 16:28

Dsl du retard pour ma réponse mais étant en plein déménagement, je suis un peu pris^^

Donc voici 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}<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="97%" border="0" cellspacing="0" cellpadding="0">
              <!-- 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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="middle" width="100%" height="50">
                          <table width="100%"><tr><td colspan="2">
                                    <span class="forumlink"> <h{catrow.forumrow.LEVEL} class="hierarchy">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                    </h{catrow.forumrow.LEVEL}>
        </td></tr>
        <tr><td width=100%" valign="top">
                <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                    <span class="gensmall">           
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    </span>
                  </td>

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
                  <div class="tourimg"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                  </td>




                    <td class="row3 over" align="center" valign="middle" height="50"><div style="width:175px;">
                    <span class="gensmall"><div class="derniersmess">Sujets: {catrow.forumrow.TOPICS}|Messages: {catrow.forumrow.POSTS}<BR>{catrow.forumrow.LAST_POST}</div><BR></td></tr></table></span>
                  </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><table class="forumline" width="97%" border="0" cellspacing="0" cellpadding="0"></center>
              <!-- 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>
           
              <!-- END catfoot -->
              <!-- BEGIN tablefoot -->
            </tr></table></center><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Et le CSS lui étant associé:
/*îcones new no news lock*/
.tourimg {
border : 3px solid #ff0000;
}

/*titre du forum*/
a.forumlink {
text-align : right;
padding-right : 40px;
border-bottom : 3px solid #ff0000;
font-size : 20px;
font-family : Arial;
display : block;
}

/*dernier message*/
.derniersmess {
border : 3px solid #0000ff;
}

Je vous remercie.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie

Message par tupac le Jeu 28 Juil 2011 - 19:12

Bonjour

Ça devrait être faisable et bon courage pour votre déménagement Very Happy

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Apparence Catégorie

Message par Vicsius le Jeu 28 Juil 2011 - 21:02

Merci à vous^^

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Apparence Catégorie

Message par tupac le Sam 30 Juil 2011 - 13:37

Bonjour

Désolé pour le retard.
Bon remplacer votre template index_box par celui-la.
Spoiler:
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="0" cellpadding="0" id="cadre_forum">
          <!-- 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="2" 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">
<!-- aciènne place img -->
              </td>

              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <table width="90%"><tbody><tr><td><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}></td></tr><tr>
    <td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
                <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 -->
                    <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center>
                </span>
              </td>
              <td class="row3 over" align="center" valign="middle" height="50"><div style="width:150px;"></div>

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

puis rajouter dans votre feuille de style css ce code j'ai placé une bordure de la même couleur que le fond au cas ou vous auriez mis une couleur différente pour la couleur du cadre des tables.
Code:
#cadre_forum {
  border: 1px solid #222222;
  background: #222222;
  -moz-border-radius: 0px 50px 0px 50px;
  -webkit-border-radius: 0px 50px 0px 50px;
  -o-border-radius: 0px 50px 0px 50px;
  -htm-border-radius: 0px 50px 0px 50px;
 }

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Apparence Catégorie

Message par Vicsius le Dim 31 Juil 2011 - 12:15

Aucun soucis pour l'attente, n'étant pas très présent non-plus ce n'est pas grave^^

je vous remercie, c'est parfait. De plus vous avez utilisé des codes que je ne connaissais pas encore, cela me permettra de m'améliorer.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius 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