AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Catégories beiges et vertes

    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Ven 5 Sep 2014 - 21:25

    Rappel du premier message :




    Catégories beiges et vertes


    Voici un petit LS de catégories beiges et vertes que j'ai fait pour la demande de Nana-Chan.

    Pour voir l'aperçu : cliquez ici.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons installer les catégories dans le template.
    • Puis, nous allons mettre en forme les catégories à l'aide du CSS.

    - Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
    - La version du forum est PHPBB2.

    Mettre un crédit vers Never-Utopia est obligatoire.

    Un petit merci ou commentaire est toujours le bienvenu ^^


    1. Corps des catégories (Template Index_Box)


    Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BOX

    Puis, on va entièrement remplacer le template "Index_Box" par ceci :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Parisienne|Shadows+Into+Light' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
    <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="cate_bloc_cadre">
    <div class="cate_bloc">
      <div class="cate_title">
        <span>
          {catrow.tablehead.L_FORUM}
        </span>
      </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
      <table class="forum_bloc" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="right" valign="middle">
            <span class="forum_stats">
              <span class="forum_stats_in">
                {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
              </span>
            </span>
          </td><td></td>
        </tr>
        <tr>
          <td width="99%"><div class="forum_bloc_left">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td rowspan="2" class="forum_newoldlock" 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 align="left" valign="middle">
                  <span class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                      {catrow.forumrow.FORUM_NAME}
                    </a>
                  </span>
                </td>
              </tr>
              <tr>
                <td valign="middle">
                  <div class="forum_desc">
                    {catrow.forumrow.FORUM_DESC}
                  </div>
                </td>
              </tr>
            </table>
          </div>
          </td>
          <td></td>
          <td align="center" valign="middle">
            <div class="forum_last_bloc">
              <div class="forum_last">
                {catrow.forumrow.LAST_POST}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td align="left" valign="middle">
            <span class="forum_sf">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td>
          <td></td>
        </tr>
      </table>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->



    2. Mise en forme (CSS)


    Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /********************************************* CATÉGORIES *********************************************/
    /*Cadre du bloc qui contient chaque catégorie*/
    .cate_bloc_cadre {
      background: #ffffff;
      border: 4px solid #c3ec50;
      margin-bottom: 15px;
      padding: 2px;
      padding-left: 4px;
      padding-right: 4px;
    }
    /*Bloc qui contient chaque catégorie*/
    .cate_bloc {
      background: #fefdb1;
      padding: 5px;
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
    }

    /*Titre de catégorie*/
    .cate_title h2 {
      display: inline-block;
      background: #d5e978;
      border-radius: 15px;
      box-shadow: 2px 2px 1px #ffffff;
      margin: 0px;
      margin-right: 5%;
      padding: 10px;
      padding-left: 180px;
      padding-right: 180px;
      color: #006600;
      font-family: Lobster, cursive;
      font-size: 28px;
      text-shadow: 0 2px 2px #fefdb1;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      transition: 1s;
      -webkit-transition: 1s;
    }
    /*Titre de catégorie au survol*/
    .cate_title h2:hover {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
    }

    /*Bloc qui contient chaque forum*/
    .forum_bloc {
      margin-top: 50px;
      margin-bottom: 30px;
    }

    /*Bloc du Nombre de messages et de sujets*/
    .forum_stats {
      display: inline-block;
      background: #f2e485;
      border-radius: 15px 15px 0 0;
      box-shadow: 0px 0px 5px 2px #a87f4c;
      margin-right: 30px;
      margin-bottom: -10px;
      padding: 20px;
      padding-top: 2px;
      padding-bottom: 6px;
      color: #312516;
      font-family: Times New Roman;
      font-size: 13px;
    }

    /*Bloc contenant la description, le nom du forum et l'image NewOldLock*/
    .forum_bloc_left {
      position: relative;
      background: #f2e485;
      border-radius: 15px;
      box-shadow: 0px 0px 5px 2px #a87f4c;
      padding: 10px;
    }

    /*Image NewOldLock*/
    .forum_newoldlock img {
      width: 90px;
      height: 120px;
      margin-right: 15px;
    }

    /*Titre de forum*/
    span.forumlink {
      display: block;
      text-align: left;
    }
    /*Lien du titre de forum*/
    a.forumlink {
      color: #006600!important;
      font-family: parisienne;
      font-size: 24px;
      text-shadow: 2px 2px 1px #fefeea;
      text-decoration: none!important;
      letter-spacing: 0px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Lien du titre de forum au survol*/
    a.forumlink:hover {
      color: #003a00!important;
      letter-spacing: 5px;
    }

    /*Description des forums*/
    .forum_desc {
      max-height: 85px;
      margin-top: 1px;
      margin-right: -5px;
      padding-right: 5px;
      overflow: auto;
      color: #312516;
      font-family: Times New Roman;
      font-size: 14px;
      text-align: justify;
    }

    /*Bloc des sous-forums*/
    .forum_sf {
      display: inline-block;
      max-width: 80%;
      background: #f2e485;
      border-radius: 0 0 15px 15px;
      box-shadow: 0px 0px 5px 2px #a87f4c;
      margin-left: 30px;
      margin-top: -11px;
      padding-left: 10px;
      padding-right: 10px;
      color: #006600;
      text-align: center;
    }
    /*Liens des sous-forums*/
    .forum_sf a.gensmall {
      display: inline-block;
      padding-bottom: 1px;
      padding-top: 4px;
      color: #006600;
      font-family: Times New Roman;
      font-size: 13px;
    }

    /*Bloc du dernier message*/
    .forum_last_bloc {
      display: block;
      width: 258px;
      height: 108px;
      background: url('http://img4.hostingpics.net/pics/365067Sanstitre.png');
      margin-left: 15px;
      padding-top: 50px;
    }
    /*Contenu du dernier message*/
    .forum_last {
      color: #312516;
      font-family: Times New Roman;
      font-size: 14px;
      text-align: center;
    }
    /*Mise en forme des liens du dernier message*/
    .forum_last a {
      color: #006600;
      font-family: Times New Roman;
      font-size: 14px;
    }

    /*Mise en forme des liens survolés*/
    .forum_last a:hover, .forum_sf a.gensmall:hover {
      color: #003a00;
    }
     /********************************************* FIN DES CATÉGORIES *********************************************/

    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".

    À plus !


    Dernière édition par Onyx le Mer 30 Mai 2018 - 21:40, édité 4 fois
    Eye in the dark
    Eye in the dark
    FémininAge : 19Messages : 8

    le Ven 1 Jan 2016 - 22:29

    C'est super beau ! j'adore :)
    merci!
    Ehlènoha
    Ehlènoha
    FémininAge : 30Messages : 27

    le Lun 4 Jan 2016 - 2:25

    Merci !
    Americanlover
    Americanlover
    FémininAge : 20Messages : 6

    le Mer 6 Jan 2016 - 20:57

    Ahhhh, c'est troooop jolie ! :gene: Que dire ! Je cherchais justement des codes de catégories pour mon forum. C'est vraiment génial. J'adore ! Merci du partage. Very Happy
    miriam94
    miriam94
    FémininAge : 25Messages : 168

    le Sam 23 Jan 2016 - 20:23

    Merci Very Happy



    Catégories beiges et vertes - Page 11 24786310
    darkazu
    darkazu
    FémininAge : 25Messages : 42

    le Dim 24 Jan 2016 - 18:05

    vraiment magnifique l'une des plus belle !
    TaraToI
    TaraToI
    FémininAge : 26Messages : 67

    le Mar 26 Jan 2016 - 18:41

    C'est magnifique !! je vais sans doute le piquer et venter tes mérites sur mon forum ♥



    Catégories beiges et vertes - Page 11 Icone_16
    Soleilou
    Soleilou
    FémininAge : 19Messages : 49

    le Mer 3 Fév 2016 - 13:53

    Magnifique, merci *^*
    Magico
    Magico
    MasculinAge : 26Messages : 41

    le Mer 3 Fév 2016 - 15:57

    Merci
    Jessabelle
    Jessabelle
    FémininAge : 25Messages : 110

    le Jeu 4 Fév 2016 - 3:13

    Merci du partage :)
    aghate
    aghate
    FémininAge : 48Messages : 3

    le Jeu 25 Fév 2016 - 11:25

    merci ,j'adore genial!!!!
    Kitket
    Kitket
    FémininAge : 36Messages : 105

    le Jeu 25 Fév 2016 - 17:54

    Merci
    Tinkky
    Tinkky
    FémininAge : 28Messages : 98

    le Ven 26 Fév 2016 - 20:55

    Merci du partage ^_^
    Voltino
    Voltino
    MasculinAge : 24Messages : 55

    le Sam 27 Fév 2016 - 5:13

    Wow...merci
    Eywa
    Eywa
    FémininAge : 34Messages : 14

    le Sam 27 Fév 2016 - 12:19

    ah merci sympa
    Ellebasi
    Ellebasi
    FémininAge : 51Messages : 163

    le Jeu 17 Mar 2016 - 8:07

    Merci pour ce que tu offres.



    Catégories beiges et vertes - Page 11 4fci
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 25Messages : 43

    le Jeu 17 Mar 2016 - 13:51

    Oh c'est très joli ! C'est vraiment du beau boulot ! *-*



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    manu1754
    manu1754
    MasculinAge : 21Messages : 2

    le Sam 19 Mar 2016 - 5:45

    Merci infiniment ! ça gère ! :OO
    bubulle
    bubulle
    FémininAge : 32Messages : 76

    le Dim 20 Mar 2016 - 15:32

    Merci :)
    Faïryna
    Faïryna
    FémininAge : 16Messages : 65

    le Mar 22 Mar 2016 - 19:35

    BRAVO C'EST JUSTE MAGNIFIQUE!
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 51Messages : 167

    le Mar 22 Mar 2016 - 20:18

    Merci!
    Jibaku
    Jibaku
    FémininAge : 20Messages : 13

    le Jeu 31 Mar 2016 - 19:00

    Merci :3
    marie-noelle
    marie-noelle
    FémininAge : 61Messages : 109

    le Dim 3 Avr 2016 - 0:45

    merci Very Happy
    Thessia
    Thessia
    FémininAge : 30Messages : 75

    le Sam 9 Avr 2016 - 21:15

    Merci, c'est génial



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    Anthony Bayens
    MasculinAge : 27Messages : 19

    le Dim 10 Avr 2016 - 9:35

    Merci, vraiment bien
    Solitude
    Solitude
    FémininAge : 44Messages : 286

    le Mer 18 Mai 2016 - 13:17

    merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Catégories beiges et vertes - Page 11 Sign510
    Contenu sponsorisé


      La date/heure actuelle est Dim 21 Juil 2019 - 2:43