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.


    Catégories beiges et vertes

    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    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
    Mezou
    Mezou
    FémininAge : 20Messages : 56

    le Lun 20 Oct 2014 - 13:32

    C'est magnifique ! **
    Bunny Lune
    Bunny Lune
    FémininAge : 29Messages : 145

    le Lun 20 Oct 2014 - 19:33

    J'aime beaucoup, merci du partage
    Lamire
    Lamire
    FémininAge : 26Messages : 96

    le Jeu 23 Oct 2014 - 0:35

    Merci~
    Laetitia
    Laetitia
    FémininAge : 37Messages : 89

    le Sam 25 Oct 2014 - 16:01

    super
    catkiller
    catkiller
    FémininAge : 24Messages : 70

    le Mar 28 Oct 2014 - 5:19

    Waouh! Très stylé! J'adore!!!!
    Natsumi13
    Natsumi13
    FémininAge : 23Messages : 64

    le Mar 28 Oct 2014 - 10:02

    Thank you c:
    Afterglow
    Afterglow
    FémininAge : 24Messages : 138

    le Mar 28 Oct 2014 - 14:04

    Très jolie, j'aime beaucoup merci du partage ^^



    How do you get up from an all time low?
    Amaluna
    Amaluna
    FémininAge : 28Messages : 103

    le Mer 29 Oct 2014 - 21:32

    J'adore ! Cela sera parfait pour la prochaine version du forum ! ♥
    Zaidko
    Zaidko
    FémininAge : 17Messages : 81

    le Mer 29 Oct 2014 - 22:10

    Merci, c'est très joli ! Very Happy
    skyfighter
    skyfighter
    MasculinAge : 36Messages : 352

    le Jeu 30 Oct 2014 - 22:35

    merci




    Catégories beiges et vertes - Page 3 Signat10
    Angy38
    Angy38
    FémininAge : 49Messages : 232

    le Sam 1 Nov 2014 - 9:31

    Magnifique



    Catégories beiges et vertes - Page 3 Jvie
    Chroma
    Chroma
    FémininAge : 22Messages : 28

    le Sam 1 Nov 2014 - 17:37

    J'adore merci !
    Arpège
    Arpège
    FémininAge : 21Messages : 111

    le Sam 1 Nov 2014 - 18:37

    Sympa *^*
    Merci du partage ^^



    Catégories beiges et vertes - Page 3 170221084427548922
    Writers World commence à ouvrir !
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Mer 5 Nov 2014 - 12:05

    Merci pour le partage
    Wilster
    Wilster
    FémininAge : 24Messages : 31

    le Jeu 6 Nov 2014 - 18:30

    Thanks
    Dastan
    Dastan
    MasculinAge : 35Messages : 111

    le Jeu 6 Nov 2014 - 19:02

    Merci!
    Hayate747
    Hayate747
    MasculinAge : 29Messages : 196

    le Sam 8 Nov 2014 - 11:17

    Merciii !
    petit lu
    petit lu
    FémininAge : 27Messages : 184

    le Sam 8 Nov 2014 - 12:01

    J'addorreee
    merci du partage ♥
    0smose
    0smose
    FémininAge : 23Messages : 165

    le Sam 8 Nov 2014 - 14:33

    Une très belle mise en forme ! Je risque de me laisser tenter...



    Catégories beiges et vertes - Page 3 Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Fayzl4D
    Fayzl4D
    MasculinAge : 23Messages : 84

    le Lun 10 Nov 2014 - 11:03

    merci
    Tyra'
    Tyra'
    MasculinAge : 24Messages : 87

    le Lun 10 Nov 2014 - 19:31

    Merci beaucoup!



    Catégories beiges et vertes - Page 3 Sans_t11
    EAVENN
    EAVENN
    FémininAge : 23Messages : 162

    le Mar 11 Nov 2014 - 14:34

    Merci c'est super joli !
    Pwaar
    Pwaar
    FémininAge : 24Messages : 107

    le Mar 11 Nov 2014 - 21:55

    C'est très classe et épuré, merci beaucoup *^*
    Neverose
    Neverose
    FémininAge : 28Messages : 93

    le Dim 16 Nov 2014 - 17:09

    Merci bien



    Catégories beiges et vertes - Page 3 E9SQItc
    P'tit loup
    P'tit loup
    MasculinAge : 36Messages : 447

    le Dim 16 Nov 2014 - 18:18

    merci pour le partage ^^



    Catégories beiges et vertes - Page 3 30xivrd
    Contenu sponsorisé


      La date/heure actuelle est Lun 14 Oct 2019 - 20:03