AccueilFAQRechercherMembresGroupesS'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 sombres

    Partagez
    avatar
    Onyx
    FémininAge : 25Messages : 3139

    le Lun 1 Sep 2014 - 5:40

    Rappel du premier message :




    Catégories sombres


    Voici un petit LS de catégories plutôt sombres que j'ai fait pour la demande de Nana-Yankee.

    Pour voir l'aperçu avant survol : cliquez ici.
    Pour voir l'aperçu après survol : cliquez ici.

    Ce LS est en trois 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.
    • Finalement, nous allons mettre un code dans les descriptions de forums et voir où éditer l'image et la description des forums.

    - 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. Les 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' />
    <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 -->
    <table class="cate_bloc" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2" width="100%" class="cate_title">
          {catrow.tablehead.L_FORUM}
        </td>
      </tr>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
      <tr>
        <td valign="middle">
          <table class="forum_fbloc" width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td colspan="3" valign="middle">
                <span class="forumlink_span">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                  {catrow.forumrow.FORUM_NAME}
                  </a>
                </span>
              </td>
            </tr>
            <tr>
              <td valign="middle" class="forum_lbloc">
                {catrow.forumrow.FORUM_DESC}
              </td>
              <td valign="middle">
                <div class="forum_sf">
                  <span id="subforums">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  </span>
                  <script type="text/javascript">
                    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
                  </script>
                </div>
              </td>
              <td align="center" valign="middle">
                <div class="forum_stats_last">
                  <span class="forum_stats">
                    {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
                  </span>
                  <span class="forum_last">
                    {catrow.forumrow.LAST_POST}
                  </span>
                </div>
              </td>
            </tr>
          </table>
        </td>
        <td align="center" valign="middle">
          <img class="forum_newoldlock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </td>
      </tr>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </table>
    <!-- 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 *********************************************/

    /*Bloc qui contient chaque catégorie*/
    .cate_bloc {
      background: #000000;
      border-radius: 50px 50px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      padding-right: 15px;
      border: 4px solid #353535;
      border-left: 2px solid #353535;
      border-right: 2px solid #353535;
    }

    /*Titre de catégorie*/
    .cate_title h2 {
      color: white;
      font-family: parisienne;
      font-size: 36;
      margin: 10px;
      text-align: center;
      letter-spacing: 0px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre de catégorie au survol*/
    .cate_title h2:hover {
      color: red;
      letter-spacing: 3px;
    }

    /*Bloc de chaque forum sans le NewOldLock*/
    .forum_fbloc {
      position: relative;
      margin-top: 50px;
      margin-left: 20px;
      margin-rigth: 20px;
      margin-bottom: 20px;
      background-color: #151515;
      border: 4px solid #101010;
      border-left: 2px solid #101010;
      border-right: 2px solid #101010;
      width: 800px;
      height: 120px;
      padding: 10px;
      padding-top: 0px;
      padding-bottom: 0px;
      color: #757575;
      font-family: times new roman;
      font-size: 14px;
    }

    /*Titre de forum*/
    .forumlink_span {
      display: block;
      position: absolute;
      top: -50px;
      left: -2px;
      width: 795px;
      text-align: left;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Lien du titre de forum*/
    a.forumlink {
      font-family: Shadows into light;
      font-weight: bold;
      font-style: italic;
      font-size: 26px;
      color: red!important;
      text-decoration: none!important;
    }
    /*Titre de forum au survol de l'image*/
    .forum_fbloc:hover .forumlink_span {
      left: 200px;
    }

    /*Image de chaque forum*/
    .forum_img {
      dispay: block;
      z-index: 1;
      position: absolute;
      top: -3px;
      left: -2px;
      width: 800px;
      height: 150px;
      box-shadow: 0 0 15px 5px #353535;
      opacity: 1;
      filter: alpha(opacity=100);
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Disparition de l'image au survol*/
    .forum_fbloc:hover .forum_img {
      z-index: -1;
      opacity: 0;
      filter: alpha(opacity=0);
    }

    /*Description de forum*/
    .forum_desc {
      background: #101010;
      border: solid 1px #000000;
      margin-top: 16px;
      padding: 5px;
      width: 420px;
      height: 94px;
      font-family: times new roman;
      font-size: 14px;
      overflow: auto;
      text-align: justify;
    }

    /*Sous_forums*/
    .forum_sf {
      background: #101010;
      border: solid 1px #000000;
      padding: 5px;
      width: 150px;
      height: 94px;
      overflow: auto;
      text-align: center;
    }
    /*Liens des Sous_forums*/
    .forum_sf a.gensmall {
      font-family: times new roman;
      font-size: 14px;
    }

    /*Bloc des stats et dernier message*/
    .forum_stats_last {
      background: #101010;
      border: solid 1px #000000;
      padding: 5px;
      width: 150px;
      height: 94px;
      font-family: times new roman;
      font-size: 14px;
    }
    /*Couleur des liens dans ce bloc*/
    .forum_last a, .forum_sf a.gensmall {
      color: #545454;
    }
    /*Couleur des liens au survol dans ce bloc*/
    .forum_last a:hover, .forum_sf a.gensmall:hover {
      color: #858585;
    }
    /*Stats*/
    .forum_stats {
      font-size: 13px;
      display: block;
      border-bottom: 1px solid #000000;
      padding: 5px;
    }
    /*Dernier message*/
    .forum_last {
      display: block;
      padding-top: 10px;
    }
    .forum_last a.gensmall {
      font-size: 14px;
    }

    /*Image NewOldLock*/
    .forum_newoldlock {
      margin-top: 30px;
      margin-left: 25px;
      width: 125px;
      height: 125px;
      box-shadow: 0 0 15px 5px #353535;
    }
    /********************************************* FIN DES CATÉGORIES *********************************************/



    3. Descriptions de forum


    C'est bien beau, mais il nous manque quand même des choses. Dans les descriptions des forums, il va y avoir la description elle-même, l'image qui cache le tout et les liens utiles.

    Pour les mettre,  nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > GÉNÉRAL
    > > > FORUM
    > > > > CATÉGORIES ET FORUMS

    Puis, vous aller pouvoir mettre ce code à la place de vos descriptions de forum. L'image de chaque forum peut être modifiée et la description en elle-même va à la place du charabia en latin :
    Code:
    <img class="forum_img" src="url de l'image" />
    <div class="forum_desc">
     Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.
    </div>

    C'est tout!

    À plus !


    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Onyx le Mer 30 Mai 2018 - 21:12, édité 3 fois
    avatar
    Pillonis
    MasculinAge : 22Messages : 11

    le Ven 14 Nov 2014 - 16:53

    merci =)
    avatar
    cali60
    FémininAge : 33Messages : 58

    le Ven 5 Déc 2014 - 17:37

    merci :)
    avatar
    Madras
    FémininAge : 33Messages : 281

    le Sam 6 Déc 2014 - 15:52

    Merci du partage
    avatar
    Cola
    FémininAge : 19Messages : 81

    le Dim 7 Déc 2014 - 1:13

    Merciii



    avatar
    Solitude
    FémininAge : 43Messages : 286

    le Sam 13 Déc 2014 - 16:03

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Oror
    FémininAge : 28Messages : 95

    le Ven 19 Déc 2014 - 19:37

    Merci beaucoup pour le partage =)



    avatar
    Isy
    FémininAge : 32Messages : 27

    le Mar 6 Jan 2015 - 21:52

    Un énorme merci pour ce partage!
    avatar
    Dark-Ice
    FémininAge : 23Messages : 173

    le Mer 7 Jan 2015 - 18:37

    Merci <3



    avatar
    P'tit loup
    MasculinAge : 36Messages : 445

    le Lun 12 Jan 2015 - 16:29

    Thanks my dear ^^



    avatar
    British Cookie
    FémininAge : 28Messages : 34

    le Ven 16 Jan 2015 - 19:00

    Merci beaucoup, je teste de suite **
    avatar
    Lamire
    FémininAge : 25Messages : 96

    le Sam 17 Jan 2015 - 20:21

    Merci~~
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Mar 27 Jan 2015 - 21:48

    Ho ! MERCI vous êtes des champions quand même avec vos codages c'est formidable merci beaucoup
    Patricia :)
    Bisous



    Patricia :)
    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Ven 13 Fév 2015 - 13:43

    Merci beaucoup, le codage est génial Wink
    avatar
    Neko Mimi
    FémininAge : 28Messages : 162

    le Lun 23 Fév 2015 - 11:46

    Thank you **



    avatar
    Thalia Grace
    FémininAge : 22Messages : 65

    le Lun 23 Fév 2015 - 13:27

    Wow c'est superbe! Merci ♥
    avatar
    Idril Palanén
    FémininAge : 26Messages : 77

    le Lun 23 Fév 2015 - 23:02

    Merci beaucoup pour ce partage, j'adore ! :)
    avatar
    CaNL
    FémininAge : 26Messages : 9

    le Mar 24 Fév 2015 - 7:32

    Merci!
    avatar
    Dooh-Nem
    FémininAge : 25Messages : 139

    le Lun 2 Mar 2015 - 17:38

    Merci
    avatar
    Darkrages24
    MasculinAge : 30Messages : 6

    le Dim 5 Avr 2015 - 18:54

    merci super travail^^
    avatar
    Coquelicot
    FémininAge : 22Messages : 48

    le Lun 6 Avr 2015 - 19:33

    Merci *O*
    avatar
    BloodyMoony
    FémininAge : 26Messages : 76

    le Dim 12 Avr 2015 - 17:49

    J'aime beaucoup la structure que tu propose derrière le hover :)
    Merci pour ce partage.
    avatar
    Chèlha
    FémininAge : 25Messages : 121

    le Lun 20 Avr 2015 - 18:06

    Merci
    avatar
    Carlotta Besascar
    FémininAge : 18Messages : 26

    le Dim 17 Mai 2015 - 17:08

    Je prend j'adore *_* merci du partage !
    avatar
    Haniwa
    FémininAge : 24Messages : 206

    le Lun 1 Juin 2015 - 23:24

    Merci
    avatar
    MajorNeuf
    MasculinAge : 23Messages : 19

    le Jeu 4 Juin 2015 - 17:58

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 19:14