Modification catégorie en gardant le même ruban?

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

En cours Modification catégorie en gardant le même ruban?

Message par CathyCréation le Mar 11 Déc 2012 - 5:22

BOnjour les amis,
et bien oui j'ai décidée de remodifiée mon fo', car j'adore sa
donc j'ai un code que j'adore sur mon fo' original et j'ai un code a essai sur mon fo' test,
mais voila j'aimerai avoir un ruban entier comme sur mon fo' original, cmt doije faire.

Donc voici l'image une ou j'aime bien le corp de catégorie.



Et voici la deuxième ou j'aime bien le ruban.



Je vous mes les codes du fo' test

Le tamplate:



Et voici son css:



Et voici les codes de mon fo' original:

Le tamplate:



Et le CSS:



Merci de votre aide.

CathyCréation
****

Messages : 272
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

En cours Re: Modification catégorie en gardant le même ruban?

Message par CathyCréation le Jeu 13 Déc 2012 - 3:02

up

CathyCréation
****

Messages : 272
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

En cours Re: Modification catégorie en gardant le même ruban?

Message par CathyCréation le Ven 14 Déc 2012 - 13:45

up

CathyCréation
****

Messages : 272
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

En cours Re: Modification catégorie en gardant le même ruban?

Message par CathyCréation le Mer 19 Déc 2012 - 13:20

Un tit upu mici

CathyCréation
****

Messages : 272
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

En cours Re: Modification catégorie en gardant le même ruban?

Message par CathyCréation le Sam 22 Déc 2012 - 5:05

up

CathyCréation
****

Messages : 272
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

En cours Re: Modification catégorie en gardant le même ruban?

Message par Tech le Sam 22 Déc 2012 - 11:42

Bonjour,

Voilà le résultat auquel je suis parvenu :
CSS:
Code:
/* MISE EN FORME DES CATEGORIES ET FORUMS */


    /* IMAGE DU HAUT DES CATÉGORIES */
    .tfa_top{
    width: 100%;
    height: 45px;
    background: url(http://i45.servimg.com/u/f45/11/95/30/70/229.jpg) transparent;
    -moz-border-radius: 90px 90px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
    border-radius: 90px 90px 0 0;
    margin: 10px auto 0;
    padding: 0;
    }
    /* IMAGE DU BAS DES CATÉGORIES */
    .tfa_bottom{
    width: 100%;
    height: 35px;
    background: url(http://i45.servimg.com/u/f45/11/95/30/70/129.jpg) bottom transparent;
    -moz-border-radius:0 0 90px 90px;
    -webkit-border-radius:0 0 90px 90px;
    border-radius:0 0 90px 90px;
    margin: auto;
    padding: 0;
    text-align: center;
    }
    /* TABLE CONTENANT LES CATÉGORIES */
    .table_tfa{
    background: #96c7d9;
    }
    /* CELLULES */
    .tfa_cell_1, .tfa_cell_2{
    background:#84b3cd;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    }
    /* TITRE DE CATÉGORIE */
    .titre_categorie{
    width: 100%;
    margin:0 auto;
    padding: 0;
    }
    .titre_categorie h2{
    width: 100%;
    margin:0 auto;
    padding: 12px 0 0 0;
    text-align: center;
    font: bold 17px Verdana;
    color: #fff;
    text-shadow: 0 1px 1px #ef299e;
    -webkit-transition: all 1s ease; /* pour navigateur webkit */
    -moz-transition: all 1s ease; /* pour navigateur mozilla */
    -o-transition: all 1s ease; /* pour navigateur opera */
    transition: all 1s ease; /* pour les navigateurs récents */
    }
    /* TITRE CATÉGORIE AU SURVOL */
    .titre_categorie h2:hover {
    font-size: 22px;
    color: #8500e2;
    text-shadow: 0 1px 1px #fff;
    }
    /* 1ERE LETTRE TITRE CATÉGORIE */
    .titre_categorie h2:first-letter{
    color: #8500e2;
    text-shadow: 1 1px 1px #fff;
    font: bold 25px Arial;
    }
    /* DERNIERS SUJETS */
    .tfa_last_post{
    background: #ebf6ff;
    width: 86%;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
    border-radius:9px;
    padding: 5px;
    margin: 6px auto 4px;
    -webkit-transition: all 1s ease; /* pour navigateur webkit */
    -moz-transition: all 1s ease; /* pour navigateur mozilla */
    -o-transition: all 1s ease; /* pour navigateur opera */
    transition: all 1s ease; /* pour les navigateurs récents */
    }
    /* DERNIERS SUJETS AU SURVOL */
    .tfa_last_post:hover{
    -moz-box-shadow: 0px 0px 6px #ef299e;
    -webkit-box-shadow: 0px 0px 6px #ef299e;
    box-shadow: 0px 0px 6px #ef299e;
    }
    /* TITRE FORUM */
    .block_titre{
    position:relative;
    width: 100%;
    height: 10px;
    margin: 0;
    padding: 0;
    }
    /* BLOC RUBAN */
    .tfa_titre_forum{
    padding: 0;
    position: relative;
    vertical-align: bottom;
    width: 100%;
    z-index:1;
    top: -28px;
    }
    /* RUBAN IMAGE DE GAUCHE */
    .titre_gauche{
    background: url("http://nsa31.casimages.com/img/2012/11/26/121126045500935776.png") no-repeat scroll 0 0 transparent;
    height: 66px;
    left: -35px;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 24px;
    }
    /* RUBAN IMAGE DU CENTRE */
    .titre_centre{
    background: url("http://nsa31.casimages.com/img/2012/11/26/121126045659995046.png") repeat-x scroll center bottom transparent;
    bottom: 0;
    height: 66px;
    line-height: 66px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 103%;
    left: -11px;
    }
    /* RUBAN IMAGE DE DROITE */
    .titre_droite{
    background: url("http://nsa32.casimages.com/img/2012/11/26/121126045807671752.png") no-repeat scroll 0 0 transparent;
    height: 66px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -35px;
    width: 24px;
    z-index: 1;
    }
    /* BLOC LIEN FORUM */
    .lien_forum{
    display: block;
    width: auto;
    margin: 16px auto 0;
    text-align: center;
    position: relative;
    top: 25px;
    }
    /* LIEN FORUM */
    .lien_forum a.forumlink{
    display: block;
    font: bold 18px Arial;
    color: #ef299e;
    text-shadow: 0 0 1px #fff;
    width: 350px;
    text-align: center;
    -webkit-transition: all 0.8s ease 0.2s; /* pour navigateur webkit */
    -moz-transition: all 0.8s ease 0.2s; /* pour navigateur mozilla */
    -o-transition: all 0.8s ease 0.2s; /* pour navigateur opera */
    transition: all 0.8s ease 0.2s; /* pour les navigateurs récents */
    }
    /* LIEN FORUM AU SURVOL */
    .lien_forum a.forumlink:hover{
    color: #cc00ff;
    width: 450px;
    text-decoration: none !important;
    }
    /* LA DESCRIPTION */
    .tfa_description{
    background: #ebf6ff;
    width: 95%;
    position: relative;
    margin: 10px auto 0;
    padding: 10px 5px 5px 5px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -webkit-transition: all 1s ease; /* pour navigateur webkit */
    -moz-transition: all 1s ease; /* pour navigateur mozilla */
    -o-transition: all 1s ease; /* pour navigateur opera */
    transition: all 1s ease; /* pour les navigateurs récents */
    }
    /* LA DESCRIPTION AU SURVOL */
    .tfa_description:hover{
    -moz-box-shadow: 0px 0px 6px #ef299e;
    -webkit-box-shadow: 0px 0px 6px #ef299e;
    box-shadow: 0px 0px 6px #ef299e;
    }
    /* SOUS-FORUMS */
    .sous_forums{
    position: relative;
    width: 100%;
    display: block;
    margin: 5px auto 0;
    bottom: 0;
    text-align: center;
    }
    .sous_forums img{
    vertical-align: middle;
    }
    /* LIENS SOUS-FORUMS */
    .sous_forums a.gensmall{
    diplay: inline-block;
    margin: 0 2px;
    border: 0px solid #ef299e;
    -webkit-transition: all 0.8s ease; /* pour navigateur webkit */
    -moz-transition: all 0.8s ease; /* pour navigateur mozilla */
    -o-transition: all 0.8s ease; /* pour navigateur opera */
    transition: all 0.8s ease; /* pour les navigateurs récents */
    }
    /* LIENS SOUS-FORUMS AU SURVOL */
    .sous_forums a.gensmall:hover{
    padding-right: 12px;
    font-weight: bold;
    color: #8500e2;
    text-decoration: none !important;
    }
    /* SUJETS-MESSAGES */
    .sujets-messages{
    margin: 0;
    padding: 0;
    width: 100%;
    text-shadow: 1px 0 1px #fff;
    text-align: right;
    }
    .sujets-messages .gensmall {
    margin: 0;
    padding: 0 20px 0 0;
    }
    .chiffres{
    font: bold 13px Arial;
    color:#ef299e;
    }

   
    /*|__________ FIN DES MODIFICATIONS DE L AFFICHAGE DES CATEGORIES __________*/

Template:
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="tfa_top">
          <div class="titre_categorie">{catrow.tablehead.L_FORUM}</div>
        </div>
        <table class="table_tfa" width="100%" border="0" cellspacing="8" cellpadding="4">
          <!-- END tablehead -->
          <!-- BEGIN forumrow -->
          <tr>       
              <td colspan="2"><!-- TITRE FORUM -->
                <div class="block_titre">
                <div class="tfa_titre_forum">
                  <div class="titre_gauche"></div>
                  <div class="titre_droite"></div>
                  <div class="titre_centre">   
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="lien_forum">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
                    </h{catrow.forumrow.LEVEL}>
                  </div>
                  <div style="clear:both;"></div>
                </div>
                </div></td>
            <tr>
              <!-- CELLULE DE GAUCHE -->
              <td class="tfa_cell_1" align="center" valign="middle" width="20%">
              <!-- ICONE NEW NO-NEW CLOS -->
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              <!-- DERNIERS SUJETS -->
                <div class="tfa_last_post">
                    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                </div>     
              </td>
                       
              <!-- CELLULE DE DROITE -->
              <td class="tfa_cell_2"  valign="middle" width="80%">
              <!-- DESCRIPTION -->
                <div class="tfa_description">
                  <div class="genmed">{catrow.forumrow.FORUM_DESC} </div> 
                             
              <!-- MODERATEUR -->
                  <span class="gensmall">
                      <!-- BEGIN switch_moderators_links -->
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                      <!-- END switch_moderators_links -->       
                  </span>
              <!-- SOUS-FORUMS -->
                <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>     
                </div>
              <!-- SUJETS-MESSAGES -->
                <div class="sujets-messages">
                    <span class="gensmall">
                      <span class="chiffres">{catrow.forumrow.TOPICS}</span> sujets  and <span class="chiffres">{catrow.forumrow.POSTS}</span> messages
                    </span>
                </div>   
              </td>
          </tr>
          <!-- END forumrow -->
       
          <!-- BEGIN catfoot -->
          <tr>
              <!-- BEGIN inc -->
              <td width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="spaceRow" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
          </tr>
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </table>
        <div class="tfa_bottom"></div>
        <img src="{SPACER}" alt="" height="5" width="1" />
       
        <!-- END tablefoot --><!-- END catrow -->

Sur mon forum de test, tout fonctionne parfaitement. Il y aura par contre peut-être quelques petites modifications à faire sur le votre au niveau des px car nos forums ne sont pas forcément paramétrés de la même façon.

Si vous avez besoin d'aide pour corriger les petites erreurs, merci de nous fournir le forum sur lequel vous aurez tout installé.

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21125
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech 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