AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Pokémon EV8.5 : coffret Collection Classeur ...
Voir le deal

    Catégories beiges et vertes

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    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" ou dans "Personnalisations" pour recevoir de l'aide.

    À plus !


    Dernière édition par Onyx le Ven 26 Juin 2020 - 22:19, édité 5 fois
    Banpaia
    Banpaia
    FémininAge : 27Messages : 130

    Dim 22 Jan 2017 - 2:51

    Merci !
    Ombeline30
    Ombeline30
    FémininAge : 40Messages : 130

    Dim 22 Jan 2017 - 9:14

    Merci beaucoup j'adore l'idée ^^
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Sam 11 Fév 2017 - 11:53

    Merci




    Catégories beiges et vertes - Page 13 128765signpiratetypoBIScadre
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Mar 14 Fév 2017 - 18:29

    merci
    inouk
    inouk
    MasculinAge : 23Messages : 25

    Sam 18 Fév 2017 - 14:58

    bonjour

    merci
    Lealily
    Lealily
    FémininAge : 33Messages : 20

    Mar 28 Fév 2017 - 3:21

    Merci
    Cassisse
    Cassisse
    FémininAge : 32Messages : 130

    Mer 1 Mar 2017 - 1:20

    merciiiiiii
    Christtinne
    Christtinne
    FémininAge : 38Messages : 205

    Ven 17 Mar 2017 - 22:22

    merci
    Sakura Sinister
    Sakura Sinister
    FémininAge : 38Messages : 35

    Mer 19 Avr 2017 - 11:02

    Merci Very Happy
    Tomoe
    Tomoe
    FémininAge : 24Messages : 13

    Mer 19 Avr 2017 - 17:21

    Merci !
    Cornelia
    Cornelia
    FémininAge : 36Messages : 118

    Ven 21 Avr 2017 - 13:54

    merci
    Vani
    Vani
    FémininAge : 40Messages : 154

    Sam 22 Avr 2017 - 18:10

    J'aime beaucoup, merci !
    RigoloDiabolo_
    RigoloDiabolo_
    MasculinAge : 23Messages : 15

    Dim 23 Avr 2017 - 12:06

    mrc
    Fleuve Éternel
    Fleuve Éternel
    FémininAge : 22Messages : 13

    Ven 12 Mai 2017 - 14:31

    Merci :) c'est très jolie c:
    Mahora
    Mahora
    FémininAge : 39Messages : 16

    Jeu 18 Mai 2017 - 20:02

    Merci



    Catégories beiges et vertes - Page 13 Signs_14
    cacapipi
    cacapipi
    FémininAge : 26Messages : 11

    Jeu 18 Mai 2017 - 23:39

    Merci , vraiment jolie ! Very Happy
    ArgelTown
    ArgelTown
    MasculinAge : 25Messages : 23

    Lun 22 Mai 2017 - 14:09

    Merci :)
    Wonderwall
    Wonderwall
    FémininAge : 30Messages : 20

    Lun 22 Mai 2017 - 21:03

    Merci !
    Mikee
    Mikee
    MasculinAge : 28Messages : 4

    Mer 14 Juin 2017 - 13:08

    Merci
    Momiji-chan
    Momiji-chan
    FémininAge : 26Messages : 38

    Jeu 22 Juin 2017 - 22:19

    Merci :)
    Firamary
    Firamary
    FémininAge : 26Messages : 15

    Mer 19 Juil 2017 - 2:36

    Merci beaucoup <3
    Revo-Games-YTB
    Revo-Games-YTB
    MasculinAge : 24Messages : 3

    Ven 21 Juil 2017 - 16:18

    Merci
    Destan
    Destan
    MasculinAge : 46Messages : 38

    Ven 4 Aoû 2017 - 23:16

    Merci
    Not'
    Not'
    MasculinAge : 27Messages : 3

    Mar 29 Aoû 2017 - 1:01

    Découvert via une vidéo Youtube pour ma part, un grand merci pour nous faire partager tes connaissances Wink
    Doomdom
    Doomdom
    MasculinAge : 39Messages : 25

    Lun 25 Sep 2017 - 23:35

    merci <3
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 22:51