AccueilRechercherS'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 : -40%
Aspirateur balai sans fil Xiaomi Dreame V9
Voir le deal
157.24 €

    Catégories beiges et vertes

    Onyx
    Onyx
    FémininAge : 26Messages : 3312

    le Ven 5 Sep 2014 - 19: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 - 19:40, édité 4 fois
    Maya Seiko
    Maya Seiko
    FémininAge : 26Messages : 126

    le Ven 6 Mar 2015 - 8:46

    merci ^^
    Lux'Uriante
    Lux'Uriante
    FémininAge : 31Messages : 21

    le Sam 7 Mar 2015 - 19:43

    yep merci Wink
    AyaseNeko
    AyaseNeko
    FémininAge : 23Messages : 55

    le Dim 8 Mar 2015 - 10:25

    magnifique je tente (je suis nulle en codage donc je change a chaque fois pour pas me compliquer la vie xD )
    Amacky
    Amacky
    FémininAge : 28Messages : 135

    le Mar 10 Mar 2015 - 9:14

    Merci :)
    Madras
    Madras
    FémininAge : 35Messages : 282

    le Mar 10 Mar 2015 - 9:34

    Merci
    pixelman
    pixelman
    FémininAge : 39Messages : 241

    le Mer 11 Mar 2015 - 13:19

    J'adore le rendu franchement ! Merci pour le partage.




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Inoue Musaki
    Inoue Musaki
    FémininAge : 30Messages : 147

    le Jeu 12 Mar 2015 - 6:04

    Merci ^^
    Pee-Boo
    Pee-Boo
    FémininAge : 27Messages : 28

    le Jeu 12 Mar 2015 - 18:39

    Merci ! :hug2:
    Lakia
    Lakia
    FémininAge : 21Messages : 126

    le Ven 13 Mar 2015 - 15:41

    merci ^^
    Neilia
    Neilia
    FémininAge : 28Messages : 101

    le Ven 13 Mar 2015 - 20:51

    merci beaucoup c est superbe *o*
    Foxe
    Foxe
    FémininAge : 19Messages : 122

    le Sam 14 Mar 2015 - 0:15

    Magnifique ! Merci beaucoup



    Catégories beiges et vertes - Page 6 Wet_ha10
    Kamui Kyuuji
    Kamui Kyuuji
    MasculinAge : 28Messages : 30

    le Mer 18 Mar 2015 - 16:29

    Merci beaucoup.
    agriteam67
    agriteam67
    MasculinAge : 28Messages : 12

    le Sam 21 Mar 2015 - 1:16

    merci
    Théine
    Théine
    MasculinAge : 39Messages : 24

    le Sam 21 Mar 2015 - 14:47

    merci!
    Loud Clash
    Loud Clash
    MasculinAge : 26Messages : 67

    le Sam 21 Mar 2015 - 21:13

    Merci c'Est splendide Very Happy
    Asaoka
    Asaoka
    MasculinAge : 26Messages : 1706

    le Sam 21 Mar 2015 - 21:47

    Merci beaucoup Very Happy



    Ex-Chasseur d'image, ex-Responsable N-U Games.
    Habitant du navire depuis le 07/01/2008

    Catégories beiges et vertes - Page 6 89318_mini_bowser
    Kajo
    Kajo
    MasculinAge : 23Messages : 8

    le Ven 27 Mar 2015 - 2:30

    Mon dieu que j'aime merci beaucoup !
    John Parker
    John Parker
    MasculinAge : 37Messages : 58

    le Sam 28 Mar 2015 - 15:18

    Merci ^^



    Catégories beiges et vertes - Page 6 Ange_s10
    Pikabouh
    Pikabouh
    FémininAge : 18Messages : 123

    le Dim 29 Mar 2015 - 11:48

    Merci pour le code, il est magnifique ♥
    TUC
    TUC
    FémininAge : 32Messages : 103

    le Dim 29 Mar 2015 - 16:42

    merci :)



    Catégories beiges et vertes - Page 6 Tumblr_msx9fygOsJ1qlujrso1_250 Catégories beiges et vertes - Page 6 Tumblr_msx9fygOsJ1qlujrso2_250 Catégories beiges et vertes - Page 6 Tumblr_msx9fygOsJ1qlujrso3_250 Catégories beiges et vertes - Page 6 Tumblr_msx9fygOsJ1qlujrso4_250
    remrem
    remrem
    MasculinAge : 22Messages : 48

    le Mer 8 Avr 2015 - 18:52

    Merci beaucoup !!! Very Happy
    PrincesseÔ
    PrincesseÔ
    FémininAge : 22Messages : 220

    le Sam 11 Avr 2015 - 7:12

    Merci *w*
    luna-chan86
    luna-chan86
    FémininAge : 31Messages : 194

    le Sam 11 Avr 2015 - 14:39

    Très joli merci beaucoup :)
    Ivy
    Ivy
    FémininAge : 24Messages : 45

    le Lun 13 Avr 2015 - 21:08

    Merci :)
    Litonya
    Litonya
    FémininAge : 18Messages : 149

    le Mer 15 Avr 2015 - 10:36

    michi
    Contenu sponsorisé


      La date/heure actuelle est Dim 7 Juin 2020 - 8:27