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 à ne pas rater :
Coffret Collection Poster Pokémon EV8.5 Évolutions Prismatiques : ...
Voir le deal

    Catégories sombres

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    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 Ven 26 Juin 2020 - 18:20, édité 5 fois
    AdmireLeParadox
    AdmireLeParadox
    MasculinAge : 35Messages : 7

    Ven 6 Mai 2016 - 6:53

    Merci bcp pour le beau travail :)
    Kira de Shola
    Kira de Shola
    FémininAge : 27Messages : 60

    Ven 6 Mai 2016 - 18:09

    merci
    Discorde
    Discorde
    FémininAge : 24Messages : 63

    Ven 3 Juin 2016 - 16:40

    Merci ! Very Happy



    Recherche d'avatar ! Ça se passe ici : www
    Mustique
    Mustique
    FémininAge : 29Messages : 10

    Ven 24 Juin 2016 - 12:31

    Merci ! Je suis sûr qu'il ressortira bien le thème de mon forum !
    Donquichotte
    Donquichotte
    MasculinAge : 29Messages : 48

    Jeu 30 Juin 2016 - 8:23

    merci
    Thanos
    Thanos
    MasculinAge : 29Messages : 84

    Mer 20 Juil 2016 - 3:34

    Merci j'aime.
    Applauze
    Applauze
    MasculinAge : 28Messages : 167

    Ven 22 Juil 2016 - 15:18

    Merci
    wasa
    wasa
    MasculinAge : 32Messages : 6

    Mer 27 Juil 2016 - 18:37

    Merci pour ce travail, c'est trop super
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Mer 27 Juil 2016 - 19:39

    J'adore !!! *3*
    Reyneur
    Reyneur
    MasculinAge : 32Messages : 7

    Jeu 28 Juil 2016 - 7:00

    Nice! Merci
    Calkrys
    Calkrys
    FémininAge : 27Messages : 49

    Mer 3 Aoû 2016 - 2:41

    Merci !
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Dim 21 Aoû 2016 - 16:55

    Merci :)
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Jeu 1 Sep 2016 - 20:02

    C'est sympa merci du partage :)
    charly45700
    charly45700
    MasculinAge : 28Messages : 31

    Sam 3 Sep 2016 - 12:30

    merci
    benflame
    benflame
    MasculinAge : 27Messages : 5

    Jeu 15 Sep 2016 - 18:07

    Merci beaucoup Very Happy



    yo :batte:
    benflame
    benflame
    MasculinAge : 27Messages : 5

    Jeu 15 Sep 2016 - 18:35

    faut il une sorte d'image précise? car je n'en trouve pas qui fonctionne



    yo :batte:
    Shaolan
    Shaolan
    MasculinAge : 33Messages : 121

    Dim 25 Sep 2016 - 2:52

    Merci beaucoup
    Aladiah
    Aladiah
    FémininAge : 27Messages : 58

    Dim 25 Sep 2016 - 19:04

    Merci :)
    Ombresia
    Ombresia
    FémininAge : 29Messages : 46

    Dim 9 Oct 2016 - 1:16

    Merci ^^
    MARLEY SMITH.
    MARLEY SMITH.
    FémininAge : 30Messages : 156

    Dim 9 Oct 2016 - 16:22

    Merci pour le partage :)
    luna-chan86
    luna-chan86
    FémininAge : 35Messages : 201

    Jeu 13 Oct 2016 - 10:01

    merci pour le partage :)



    Anonymous
    Invité

    Mar 18 Oct 2016 - 19:40

    j'aimerais beaucoup voir ce que ça donne sur mon forum Very Happy Merci :)
    Bryan1997
    Bryan1997
    MasculinAge : 27Messages : 51

    Mer 26 Oct 2016 - 16:49

    merci
    Dreamzz
    Dreamzz
    FémininAge : 31Messages : 30

    Jeu 27 Oct 2016 - 9:06

    Merci pour ce partage!



    Juliette, oh!
    Silver Angel
    Silver Angel
    MasculinAge : 109Messages : 170

    Sam 5 Nov 2016 - 21:27

    Jolie présentation !
    Contenu sponsorisé


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