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 : -23%
OCEANIC – Table de cuisson induction 3 foyers ...
Voir le deal
99.99 €

    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
    bloodyclouds
    bloodyclouds
    FémininAge : 30Messages : 20

    Sam 3 Jan 2015 - 6:02

    Merci!
    fraumali
    fraumali
    FémininAge : 44Messages : 140

    Sam 3 Jan 2015 - 17:09

    Superbe code que voilà, merci de ce partage Very Happy
    Téoz
    Téoz
    FémininAge : 35Messages : 38

    Sam 3 Jan 2015 - 18:05

    Merci :)
    webs
    webs
    MasculinAge : 31Messages : 1097

    Sam 3 Jan 2015 - 19:35

    merciii



    Catégories beiges et vertes - Page 5 Img-0107360bb1h
    Pastiche
    Pastiche
    FémininAge : 30Messages : 78

    Dim 4 Jan 2015 - 20:16

    Très joli, merci du partage ! ♥
    JEG Elo
    JEG Elo
    FémininAge : 33Messages : 42

    Lun 5 Jan 2015 - 21:03

    Merci à toi :hug:

    Bravo pour ta création elle est juste magnifique Very Happy
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Mar 6 Jan 2015 - 5:12

    Merci
    XaLis
    XaLis
    FémininAge : 27Messages : 44

    Sam 10 Jan 2015 - 19:03

    c'est superbe *-*
    xodramm
    xodramm
    FémininAge : 46Messages : 286

    Lun 12 Jan 2015 - 16:34

    merci
    British Cookie
    British Cookie
    FémininAge : 34Messages : 34

    Ven 16 Jan 2015 - 20:35

    Merci **
    CiitronxMelon
    CiitronxMelon
    FémininAge : 29Messages : 36

    Mer 21 Jan 2015 - 3:19

    Wow c'est trop beau !
    Pollux
    Pollux
    FémininAge : 34Messages : 99

    Ven 30 Jan 2015 - 19:30

    Merci
    mackay
    mackay
    MasculinAge : 36Messages : 124

    Mar 10 Fév 2015 - 11:08

    merci Cool
    Haly
    Haly
    FémininAge : 33Messages : 15

    Mar 10 Fév 2015 - 16:08

    Merci, beau travail !
    Meika
    Meika
    FémininAge : 24Messages : 12

    Mar 10 Fév 2015 - 21:44

    merci !
    Chadot
    Chadot
    FémininAge : 36Messages : 248

    Lun 16 Fév 2015 - 12:50

    Très réussi, merci beaucoup.
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Mar 17 Fév 2015 - 9:32

    J'aime le style, merci
    Seaphie
    Seaphie
    FémininAge : 25Messages : 49

    Sam 21 Fév 2015 - 23:32

    J'aime beaucoup.
    Suny-Chan
    Suny-Chan
    FémininAge : 25Messages : 2

    Mar 24 Fév 2015 - 17:56

    C'est beau, merci. ^^
    Oo-diieux
    Oo-diieux
    MasculinAge : 34Messages : 2

    Mer 25 Fév 2015 - 1:23

    Merci beaucoup exactement ce qu'il me falait
    ninoute3012
    ninoute3012
    FémininAge : 30Messages : 82

    Mer 25 Fév 2015 - 10:44

    Magnifique. Par contre est il possible de modifier la partie de droite qui est en losange est mettre un carré ou un rectangle ?
    Lexa
    Lexa
    FémininAge : 28Messages : 43

    Mer 25 Fév 2015 - 21:49

    merci :)
    avatar
    Etoile*
    FémininAge : 33Messages : 82

    Ven 27 Fév 2015 - 21:36

    Merci!
    Aspartame
    Aspartame
    FémininAge : 31Messages : 6

    Mer 4 Mar 2015 - 19:45

    J'adoooooore ce codage, c'est magnifique :love:
    J'ai hâte de le tester ♥
    Rubis-Hope
    Rubis-Hope
    FémininAge : 31Messages : 46

    Jeu 5 Mar 2015 - 20:41

    Très très sympa ces categories.
    Merci du partage
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 16:17