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

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    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
    avatar
    Eye in the dark
    FémininAge : 18Messages : 8

    le Ven 1 Jan 2016 - 22:29

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

    le Lun 4 Jan 2016 - 2:25

    Merci !
    avatar
    Americanlover
    FémininAge : 19Messages : 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
    avatar
    miriam94
    FémininAge : 24Messages : 167

    le Sam 23 Jan 2016 - 20:23

    Merci Very Happy



    avatar
    darkazu
    FémininAge : 24Messages : 42

    le Dim 24 Jan 2016 - 18:05

    vraiment magnifique l'une des plus belle !
    avatar
    TaraToI
    FémininAge : 25Messages : 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 ♥



    avatar
    Soleilou
    FémininAge : 18Messages : 49

    le Mer 3 Fév 2016 - 13:53

    Magnifique, merci *^*
    avatar
    Magico
    MasculinAge : 25Messages : 41

    le Mer 3 Fév 2016 - 15:57

    Merci
    avatar
    Jessabelle
    FémininAge : 24Messages : 109

    le Jeu 4 Fév 2016 - 3:13

    Merci du partage :)
    avatar
    aghate
    FémininAge : 47Messages : 3

    le Jeu 25 Fév 2016 - 11:25

    merci ,j'adore genial!!!!
    avatar
    Kitket
    FémininAge : 35Messages : 100

    le Jeu 25 Fév 2016 - 17:54

    Merci
    avatar
    Tinkky
    FémininAge : 27Messages : 89

    le Ven 26 Fév 2016 - 20:55

    Merci du partage ^_^
    avatar
    Voltino
    MasculinAge : 23Messages : 55

    le Sam 27 Fév 2016 - 5:13

    Wow...merci
    avatar
    Eywa
    FémininAge : 33Messages : 14

    le Sam 27 Fév 2016 - 12:19

    ah merci sympa
    avatar
    Ellebasi
    FémininAge : 50Messages : 132

    le Jeu 17 Mar 2016 - 8:07

    Merci pour ce que tu offres.



    avatar
    Ghost of Darkness
    FémininAge : 24Messages : 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.


    avatar
    manu1754
    MasculinAge : 20Messages : 2

    le Sam 19 Mar 2016 - 5:45

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

    le Dim 20 Mar 2016 - 15:32

    Merci :)
    avatar
    Faïryna
    FémininAge : 15Messages : 63

    le Mar 22 Mar 2016 - 19:35

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

    le Mar 22 Mar 2016 - 20:18

    Merci!
    avatar
    Jibaku
    FémininAge : 19Messages : 13

    le Jeu 31 Mar 2016 - 19:00

    Merci :3
    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Dim 3 Avr 2016 - 0:45

    merci Very Happy
    avatar
    Thessia
    FémininAge : 29Messages : 74

    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.
    Anthony Bayens
    MasculinAge : 26Messages : 19

    le Dim 10 Avr 2016 - 9:35

    Merci, vraiment bien
    avatar
    Solitude
    FémininAge : 43Messages : 285

    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. ~
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Juil 2018 - 12:43