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 : -48%
Philips Hue Pack Decouverte 2024 : lightstrip 3M + ...
Voir le deal
119 €

    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
    Idril Palanén
    Idril Palanén
    FémininAge : 32Messages : 83

    Lun 22 Sep 2014 - 16:57

    Je trouve se code génial ! Very Happy Je vais surement l'utiliser pour mon forum. Very Happy
    Mandinoux
    Mandinoux
    FémininAge : 35Messages : 38

    Mar 23 Sep 2014 - 22:52

    C'est super. Merci beaucoup
    Monaka
    Monaka
    FémininAge : 32Messages : 137

    Jeu 25 Sep 2014 - 20:48

    c4EST EXACTEMENT CE QUE JE RECHERCHE? MERCI DU PARTAGE
    Angie Harkness
    Angie Harkness
    FémininAge : 41Messages : 725

    Ven 26 Sep 2014 - 17:49

    yahou je prend j'adore ^^
    .lovely
    .lovely
    FémininAge : 27Messages : 54

    Ven 26 Sep 2014 - 21:47

    MERCIIII
    Shadaan
    Shadaan
    FémininAge : 32Messages : 80

    Mar 30 Sep 2014 - 16:42

    Merciiii Very Happy



    Catégories beiges et vertes - Page 2 897455signnu
    Lutine
    Lutine
    FémininAge : 37Messages : 102

    Mar 30 Sep 2014 - 21:35

    Merci!
    Liquid Dreams
    Liquid Dreams
    FémininAge : 35Messages : 38

    Mer 1 Oct 2014 - 19:35

    Merci pour le code!
    Versiri
    Versiri
    FémininAge : 23Messages : 16

    Mer 1 Oct 2014 - 22:04

    Magnifique ! Merci :3



    Cadeau d'Azaraa :3 I like :)
    Catégories beiges et vertes - Page 2 244266versir10
    Anonymous
    Invité

    Jeu 2 Oct 2014 - 19:18

    J'aime beaucoup, et je veux voir ce que cela peut donner sur mon forum merci du partage <3
    Lisou
    Lisou
    FémininAge : 24Messages : 351

    Sam 4 Oct 2014 - 9:04

    Merci ♥
    avatar
    Phénix'
    FémininAge : 23Messages : 95

    Sam 4 Oct 2014 - 13:10

    C'est super jolie *-* Merci !
    Mayiie
    Mayiie
    FémininAge : 34Messages : 39

    Lun 6 Oct 2014 - 18:44

    Magnifique !
    Miss Houpette
    Miss Houpette
    FémininAge : 27Messages : 76

    Lun 6 Oct 2014 - 19:30

    Aw trop bow ! Merci ! *^*
    The_Psychocat
    The_Psychocat
    MasculinAge : 30Messages : 37

    Mar 7 Oct 2014 - 22:31

    Merci pour ce joli code !
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Mer 8 Oct 2014 - 21:54

    merci pour voir :) bisous



    Patricia :)
    Orphanine
    Orphanine
    FémininAge : 38Messages : 14

    Jeu 9 Oct 2014 - 9:15

    J'adore ! Merci beaucoup =)
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 25Messages : 304

    Sam 11 Oct 2014 - 16:47

    Wow merci *-*



    Just want to be yours.
    Iguolta
    Iguolta
    MasculinAge : 25Messages : 209

    Dim 12 Oct 2014 - 13:13

    Merci :)
    plushmasters
    plushmasters
    FémininAge : 32Messages : 71

    Lun 13 Oct 2014 - 19:00

    je love
    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Mar 14 Oct 2014 - 21:27

    J'adore merci
    Selmacke
    Selmacke
    FémininAge : 34Messages : 100

    Ven 17 Oct 2014 - 12:52

    C'est trop sublime *_*
    Kathlyn
    Kathlyn
    FémininAge : 28Messages : 33

    Sam 18 Oct 2014 - 0:35

    merciiiii =)
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Lun 20 Oct 2014 - 8:15

    Magnifique tout sa merci :)



    :heart: :heart:
    Leelo
    Leelo
    FémininAge : 33Messages : 157

    Lun 20 Oct 2014 - 11:54

    magnifique merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 8:57