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 sombres turquoises

    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le Jeu 29 Sep 2016 - 23:43




    Catégories sombres turquoises


    Salut !

    Voici un petit LS de catégories que j'ai faites pour la demande de TénébreuseRP.

    Pour voir l'aperçu : cliquez ici.
    Pour voir l'aperçu au survol du bloc de gauche, de sujets et de messages : 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 PhpBB3.

    Mettre un crédit vers Never-Utopia est obligatoire.



    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:
    <ul class="linklist">
      <!-- BEGIN switch_user_logged_in -->
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
      <!-- END switch_user_logged_in -->
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <!-- BEGIN switch_user_logged_in -->
      <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
      <!-- END switch_user_logged_in -->
    </ul>

    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
        {catrow.tablehead.L_FORUM}
        <img class="cate_title_img" src="http://img4.hostingpics.net/pics/376602lastchaospng.png" />
      </div>
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
      <div class="forum_bloc">
        <div class="forum_bloc_left">
          <a href="{catrow.forumrow.U_VIEWFORUM}" class="forum_title">
            {catrow.forumrow.FORUM_NAME}
          </a>
          <div class="forum_sf">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div>
          <div class="forum_oldnewlock">
            <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
          </div>
        </div>
        <div class="forum_bloc_middle">
          <div class="forum_desc">
            {catrow.forumrow.FORUM_DESC}
          </div>
        </div>
        <div class="forum_bloc_right">
          <div class="forum_lastmess">
            <!-- BEGIN switch_topic_title -->
            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
              {catrow.forumrow.LATEST_TOPIC_NAME}
            </a>
            <br />
            <!-- END switch_topic_title -->
            {catrow.forumrow.USER_LAST_POST}
          </div>
          <div class="forum_nbsujets">
            Sujets
            <div class="forum_nbsujets_hide">
              {catrow.forumrow.TOPICS}
            </div>
          </div>
          <div class="forum_nbmessages">
            Messages
            <div class="forum_nbmessages_hide">
              {catrow.forumrow.POSTS}
            </div>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
      <!-- END forumrow -->
      <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->

    <!-- BEGIN switch_on_index -->
    <ul class="linklist">
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> •&nbsp;</li>
      <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
      <!-- BEGIN switch_delete_cookies -->
      <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
      <!-- END switch_delete_cookies -->
    </ul>
    <!-- END switch_on_index -->



    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:
    /*Bloc de 1 catégorie*/
    .cate_bloc {
      width: 100%;
      margin: 20px auto 10px auto;
    }
    /*Haut de catégorie*/
    .cate_title {
      text-align: center;
      margin-bottom: 15px;
    }
    /*Images de titre de catégorie*/
    .cate_title_img {
      width: 120px;
      height: 76px;
      vertical-align: middle;
    }
    /*Titre de catégorie*/
    .cate_title h2 {
      display: inline-block;
      margin: 0px;
      padding: 0px 10px 0px 10px;
      line-height: 76px;
      vertical-align: middle;
      font-family: 'Dancing Script', cursive;
      font-size: 45px;
      color: #c4c4c4;
      text-shadow: 1px 1px 1px #000000;
    }

    /*Bloc de 1 forum*/
    .forum_bloc {
      position: relative;
      width: 100%;
      margin: auto;
      height: 200px;
      margin-bottom: 20px;
      background: #172326;
      border: 2px solid #26464d;
      font-size: 13px;
      font-family: 'Verdana';
      color: #a3a3a3;
    }

    /*Bloc de droite*/
    .forum_bloc_left {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 250px;
      height: 200px;
      border-right: 2px solid #1b4f59;
    }
    /*Titre de forum*/
    .forum_title {
      dislay: block;
      position: absolute;
      width: 240px;
      padding: 5px 5px 10px 5px;
      text-align: center;
      top: 0px;
      left: 0px;
      z-index: 4;
      font-family: 'Dancing Script', cursive;
      font-size: 30px;
      color: #2a858c!important;
      text-decoration: none;
      text-shadow: 1px 1px 1px #000000;
    }
    /*Titre survolé*/
    .forum_title:hover {
      color: #35a9b3!important;
    }
    /*Bloc Image OldNewLock*/
    .forum_oldnewlock {
      position: absolute;
      width: 152px;
      height: 154px;
      top: 10px;
      left: -52px;
      z-index: 2;
      background: url('http://img4.hostingpics.net/pics/774596Normal.png');
    }
    /*Image OldNewLock*/
    .forum_oldnewlock img {
      display: inline-block;
      margin: 2px 0px 0px 2px;
      visibility: visible;
      opacity: 1;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    /*Bloc des sous-forums*/
    .forum_sf {
      dislay: block;
      position: absolute;
      width: 240px;
      padding-right: 5px;
      height: 105px;
      bottom: 5px;
      left: 5px;
      z-index: 3;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      font-size: 13px;
      font-family: 'Verdana';
      text-align: center;
      color: #2a858c;
    }
    /*Liens des sous-forums*/
    .forum_sf .gensmall {
      font-size: 13px;
      font-family: 'Verdana';
      color: #2a858c;
    }
    .forum_sf .gensmall:hover {
      color: #35a9b3;
    }
    /*Actions au hover du titre*/
    .forum_bloc_left:hover .forum_sf {
      visibility: visible;
      opacity: 1;
    }
    .forum_bloc_left:hover .forum_oldnewlock img {
      visibility: hidden;
      opacity: 0;
    }

    /*Bloc de milieu*/
    .forum_bloc_middle {
      margin-left: 252px;
      margin-right: 202px;
    }
    /*description des forums*/
    .forum_desc {
      margin: 5px 0px 5px 5px;
      padding-right: 5px;
      overflow: auto;
      height: 190px;
      text-align: justify;
    }

    /*Bloc de gauche*/
    .forum_bloc_right {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 200px;
      height: 200px;
      border-left: 2px solid #1b4f59;
      text-align: center;
    }
    /*Dernier message*/
    .forum_lastmess {
      height: 73px;
      padding: 25px 5px 0px 5px;
      line-height: 16px;
      vertical-align: middle;
    }
    /*Lien de dernier message*/
    .forum_lastmess a {
      color: #2a858c;
    }
    .forum_lastmess a:hover {
      color: #35a9b3;
    }
    /*Bloc de sujets et messages*/
    .forum_nbsujets, .forum_nbmessages {
      position: relative;
      width: 180px;
      height: 29px;
      font-size: 14px;
      padding: 10px;
      line-height: 29px;
      vertical-align: middle;
      border-top: 2px solid #1b4f59;
    }
    /*Bloc du nombre de sujets et messages*/
    .forum_nbsujets_hide, .forum_nbmessages_hide {
      position: absolute;
      width: 180px;
      height: 29px;
      line-height: 29px;
      vertical-align: middle;
      padding: 10px;
      top: 0px;
      left: 0px;
      opacity: 0;
      background: #172326;
      text-shadow: 1px 1px 1px #000000;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    /*Apparition des nombres*/
    .forum_nbsujets:hover .forum_nbsujets_hide,
    .forum_nbmessages:hover .forum_nbmessages_hide {
      opacity: 1;
    }

    Voilà les boutons Nouveau, Pas de de Nouveaux Messages et Verrouillé :
    https://redcdn.net/hpimg4/pics/233690CatgorieForum.png
    https://redcdn.net/hpimg4/pics/881805CatgorieNouveau.png
    https://redcdn.net/hpimg4/pics/231407CatgorieVerrouill.png

    Sinon, dans le CSS, vous avez une image dans la class "forum_oldnewlock" que vous voudrez peut-être modifier si vous voulez personnaliser le tout :
    https://redcdn.net/hpimg4/pics/774596Normal.png




    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

    À plus !


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Onyx le Ven 31 Mar 2017 - 19:21, édité 1 fois



    Vanessa sassa
    Vanessa sassa
    FémininAge : 28Messages : 31

    le Mer 8 Fév 2017 - 15:26

    merci
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2085

    le Mer 8 Fév 2017 - 17:29

    Merci pour le partage !
    Cath Graph
    Cath Graph
    FémininAge : 55Messages : 21

    le Dim 23 Juin 2019 - 22:14

    Joli, merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Oct 2019 - 15:57