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 : -48%
Philips Hue Pack Decouverte 2024 : lightstrip 3M + ...
Voir le deal
119 €

    Forums en images de fond

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 18 Déc 2014 - 10:18

    Rappel du premier message :



    Forums en images de fond



    Ceci est un code de mise en forme des forums, idée survenue suite à la Demande d'Ayfoth et tiré d'un schéma qui trainait sur mon bureau x)

    Pour PHPBB2 & Invision ▬ CSS3 & HTML5 ▬ Ce que ça donne en PHPBB2Ce que ça donne sous Invision


    Les effets et images


    L'image de fond est en 400 pixels de largeur et 250 pixels de hauteur.
    Votre forum doit faire 850px de largeur.

    Au passage de la souris, les "sous-titre" disparait, et la description vient en slidant depuis le côté droit. Aparaissent alors les sous-froums avec la description, ainsi que le denrier message en-dessous.
    Notez qu'optimalement, vous avez un nombre paire de sous-forums. Avec un nombre impair, vous risquez d'avoir quelques soucis d'alignements ^^"

    Les deux polices utilisées sont Amatic SC et Courgette. Vous retrouverez leurs link dans le template, comme ceci:
    Code:
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                      <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    . Vous pouvez les changer/retirer, mais pensez alors à retirer ou changer chacune de leurs apparitions dans le CSS (sous la forme de font-family: 'Amatic SC' et font-family: 'Courgette' )!

    PHPBB2: Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Attention!: C'est le template en entier! /!\ :
    Code:
    <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>
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                      <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
                        <tr>
          {catrow.tablehead.L_FORUM} 
       </tr>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
             <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                   <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
             </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
              <div class="un_forum">
                        <div class="un_titre">
                          <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                              {catrow.forumrow.FORUM_NAME}
                            </a>
                          </h{catrow.forumrow.LEVEL}>
        </div>
                        <div class="image_messages">
                          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                        </div>
                        <div class="description">
                          {catrow.forumrow.FORUM_DESC}
                          <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                        </div>
                        <div class="dernier_message">
                          <span class="mess_et_sujets">
                            {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                          </span>
                          <span id="last" class="liens_mess">
                            <!-- BEGIN switch_topic_title -->
                            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                              {catrow.forumrow.LATEST_TOPIC_NAME}
                            </a>
                            <!-- END switch_topic_title -->
                            {catrow.forumrow.USER_LAST_POST}
                          </span>
                                  <script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
                        </div>
                      </div>
          </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Le code a mettre dans les descriptions des catégories:
    Code:
    <img class="img_forum" src="http://i.imgur.com/3tu5jih.jpg" />
    <div class="sous_titre">
      Sous-titre 
    </div>
    <div class="contour_desciption">
     <p>
          Description du forum   
     </p>
    </div>

    Le CSS:
    Code:
    /********** DÉBUT FORUMS **********/
            /* Retire le bord du forumline */   
            .forumline {
              border: 0px solid;
            }

            /* Retire le padding du bodyline */   
            .bodyline {
              padding: 0px;
            }

            /* Met une marge à droite pour chaque catégories impaire (1, 3, 5, ...) */
            .un_forum:nth-child(odd) {
              margin-right: 25px;
            }

            /* Met une marge en bas aux deux derniers forums por qu'ils ne soient pas collés à la catéories suivante. */
            .un_forum:last-child, .un_forum:nth-last-child(2) {
              margin-bottom: 20px;
            }

            /* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
            .un_forum {
              /* Ne pas toucher */
              position: relative;
              display: inline-block;
              vetical-align: top;
              /* Largeur puis hauteur */
              width: 400px;
              height: 250px;
              /* Marge du haut */
              margin-top: 20px;
              /* Empêche que ce qui dépasse soit vu: ne pas toucher. */
              overflow: hidden;
              /* Applique un bord, puis une ombre */
              border: 3px solid white;
              border-radius: 5px;
              box-shadow: 0 1px 4px grey;
            }

            /* Mise en forme du titre de forum */
            .un_titre {
              position: relative;
              /* Largeur: prend toute la largeur, puis hauteur */
              width: auto;
              height: 40px;
              /* Dot être de la même taille que "height": centre le texte */
              line-height: 40px;
              padding: 10px;
              /* Taille de la police */
              font-size: 30px;
              overflow: hidden;
            }

            /* Met la police au titre de forum */
            .un_titre h3, .un_titre h2 {
              font-family: 'Amatic SC';
            }

            .un_titre .hierarchy {
              font-size: 30px;
            }

            /* Couleur du titre forum et effet au passage de la souris */
            .un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
              color:black;
              text-decoration: none !important;
              text-shadow: 1px 1px 5px white;
              letter-spacing: 5px;
              transition: all ease 1s;
            }

            /* Effet du titre au passage de la souris */
            .un_titre a:hover {
              color: white;
              text-decoration: none !important;
              text-shadow: 1px 1px 5px black;
              letter-spacing: 2px;
              transition: all ease 1s;
            }

            /* On met tout le reste en position absolue */
            .image_messages, .img_forum, .sous_titre, .dernier_message {
              position: absolute;
            }

            /* On place l'image au-dessus de tout */
            .img_forum{
              top: 0;
              left: 0;
              z-index: 1;
            }

            /*On place out le reste au-dessus */
            .un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums {
              z-index: 2;
            }

            /* On place l'image de new/nonew/etc en haut à droite */
            .image_messages {
              top: 0;
              right: 0;
            }

            /* Mise en forme du sous-titre du forum qui se trouve dans la description */
            .un_forum .sous_titre {
              /* Placement */
              top: 65px;
              left: 20px;
              padding: 5px 10px;
              /* Couleur de fond puis de texte */
              background: rgba(0, 0, 0, 0.8);
              color: white;
              /* Police, taille et mise en gras */
              font-family: 'Courgette';
              font-size: 15px;
              font-weight: bold;
              /* Largeur maximale du titre = la moitié de la taille - le padding */
              max-width: 180px;
              /* Visible si la souris n'est pas dessus */
              opacity: 1;
              transition: all ease 1s;
            }

            /* Effet sur le sous-titrE: il devient invisible au passage de la souris: */
            .un_forum:hover .sous_titre {
              opacity: 0;
              transition: all ease 1s;
            }

            /* Mise en forme de la description du sous-forums */
            .un_forum .description .contour_desciption {
              overflow: visible;
              position: relative;
              /* Taille. Width: il prend toute la largeur. */
              width: auto;
              height: 100px;
              padding: 10px;
              /* Couleur de fond */
              background: rgba(0, 0, 0, 0.8);
              /* Police, puis taille de police, puis couleur du texte */
              font-family: 'Courgette';
              font-size: 13px;
              color: white;
              /* On le met au-dessus de tout le reste */
              z-index: 3;
              /* Alignement du texte */
              text-align: justify;
              /* Effet de disparition */
              -webkit-transform: translateX(400px);
              transform: translateX(400px);
              transition: all ease 0.8s;
            }

            /* Effet d'apparition de la description du forum */
            .un_forum:hover .description .contour_desciption {
              -webkit-transform: translateX(0px);
              transform: translateX(0px);
              transition: all ease 0.8s;
            }

            /* Mise en forme du texte de description */
            .description .contour_desciption p {
              /* Fait apparaitre une barre de défilement */
              overflow: auto;
              position: relative;
              /* Prend toute la largeur et donne une certaine hauteur (= 80px à cause du padding) */
              width: auto;
              height: 60px;
              padding: 10px;
              text-align: justify;
              font-family: 'Courgette';
              font-size: 13px;
              color: white;
            }

            /* Mise en forme des liens vers les sous-froums */
            .un_forum .sous_forums {
              /* Placement */
              position: relative;
              top: -42px;
              /* Prennent toute la largeur et font 40 px de haut */
              width: auto;
              height: 20px;
              padding: 10px;
              /* PAr-dessus tout le reste */
              z-index: 3;
              /* S'il y en a trop une barre de défilement apparait */
              overflow: auto;
              /* N'apparaissent pas normalement */
              opacity: 0;
              transition: all ease 0.2s;
            }

            /* Effet d'apparition des liens vers les sous-forums */
            .un_forum:hover .sous_forums {
              opacity: 1;
              transition: all 0.8s ease 0.5s;
            }

            /* Mise en forme des leins de sous-forums */
            .sous_forums a, .sous_forums a:link, .sous_forums a:active, .sous_forums a:visited  {
              /* Taille, police, puis couleur */
              font-size: 15px;
              font-family: 'Amatic SC';
              color: white;
              /* On retire le sous-lignement */
              text-decoration: none !important;
              /* Effet sur le texte. */
              letter-spacing: 3px;
              transition: all ease 1s;
            }

            /* Effet sur les liens de sous-forums au passage de la souris */
            .sous_forums a:hover  {
              text-decoration: none !important;
              letter-spacing: 1px;
              transition: all ease 1s;
            }

            /* Mise en forme du dernier message */
            .un_forum .dernier_message {
              /* Poistionnement */
              bottom: 10px;
              /* Taille */
              width: 380px;
              height: 40px;
              /* S'il est trop long une barre de défilement apparait */
              overflow: auto;
              padding: 5px 10px;
              /* Mise en forme du texte: police, taille, couleur, ombre du texte */
              font-family: 'Courgette';
              font-size: 15px;
              color: white;
              text-shadow: 1px 1px 5px black;
              /* Effet de disparition */
              opacity: 0;
              transition: all ease 1s;
            }

            /* Effet d'apparition du denrier message */
            .un_forum:hover .dernier_message {
              opacity: 1;
              transition: all ease 1s;
            }

            /* Mise en forme du texte "message et sujets" */
            .dernier_message .mess_et_sujets {
              display: block;
              margin-bottom: 5px;
            }

            /* Mise en forme de la date du dernier message: taille */
            .dernier_message .liens_mess {
              font-size: 8px;
            }

            /* Mise en forme de tout le reste pour le dernier message: taille */
            .dernier_message .liens_mess a {
              font-size: 15px;
              text-decoration: none !important;
              color: white;
            }

    /********** FIN FORUMS **********/

    Invision: Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Attention!: C'est le template en entier! /!\ :
    Code:
        <div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
        </div>
        <div class="main">
        <!-- BEGIN catrow -->
        <!-- BEGIN tablehead -->
        <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
        </div>
        <div class="main-content">
                          <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
                          <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
        <!-- END tablehead -->

        <!-- BEGIN forumrow -->
                          <div class="un_forum">
                            <div class="un_titre">
                              <h{catrow.forumrow.LEVEL} class="hierarchy">
                                <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                                  {catrow.forumrow.FORUM_NAME}
                                </a>
                              </h{catrow.forumrow.LEVEL}>
            </div>
                            <div class="image_messages">
                              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                            </div>
                            <div class="description">
                              {catrow.forumrow.FORUM_DESC}
                              <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                            </div>
                            <div class="dernier_message">
                              <span class="mess_et_sujets">
                                {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                              </span>
                              <span id="last" class="liens_mess">
                                <!-- BEGIN switch_topic_title -->
                                <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
                                  {catrow.forumrow.LATEST_TOPIC_NAME}
                                </a>
                                <!-- END switch_topic_title -->
                                {catrow.forumrow.USER_LAST_POST}
                              </span>
                                      <script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
                            </div>
                          </div>
       
        <!-- END forumrow -->

        <!-- BEGIN tablefoot -->
                         
        </div>
        <!-- END tablefoot -->
        <!-- END catrow -->
        </div>

        <!-- BEGIN switch_on_index -->
        <div class="main-box clearfix">
        <ul>
        <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
        <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
        <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
        </ul>
        <!-- BEGIN switch_delete_cookies -->
        <p class="right">
        <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
        </p>
        <!-- END switch_delete_cookies -->
        </div>
        <!-- END switch_on_index -->

    Le code a mettre dans les descriptions des catégories:
    Code:
    <img class="img_forum" src="http://i.imgur.com/3tu5jih.jpg" />
    <div class="sous_titre">
      Sous-titre 
    </div>
    <div class="contour_desciption">
     <p>
          Description du forum   
     </p>
    </div>

    Le CSS:
    Code:
    /********** DÉBUT FORUMS **********/
            /* Retire le contour et la couleur de fond des catégories */
        .pun .main-content {
          border: 0px solid;
          background: none;
        }

        /* Met une marge à droite pour chaque catégories impaire (1, 3, 5, ...) */
        .un_forum:nth-child(odd) {
          margin-right: 37px;
        }

        /* Met une marge en bas aux deux derniers forums por qu'ils ne soient pas collés à la catéories suivante. */
        .un_forum:last-child, .un_forum:nth-last-child(2) {
          margin-bottom: 20px;
        }

        /* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
        .un_forum {
          /* Ne pas toucher */
          position: relative;
          display: inline-block;
          vetical-align: top;
          /* Largeur puis hauteur */
          width: 400px;
          height: 250px;
          /* Marge du haut */
          margin-top: 20px;
          /* Empêche que ce qui dépasse soit vu: ne pas toucher. */
          overflow: hidden;
          /* Applique un bord, puis une ombre */
          border: 3px solid white;
          border-radius: 5px;
          box-shadow: 0 1px 4px grey;
        }

        /* Mise en forme du titre de forum */
        .un_titre {
          position: relative;
          /* Largeur: prend toute la largeur, puis hauteur */
          width: auto;
          height: 40px;
          /* Dot être de la même taille que "height": centre le texte */
          line-height: 40px;
          padding: 10px;
          /* Taille de la police */
          font-size: 30px;
          overflow: hidden;
        }

        /* Met la police au titre de forum */
        .un_titre h3, .un_titre h2 {
          font-family: 'Amatic SC';
        }

        /* Couleur du titre forum et effet au passage de la souris */
        .un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
          color:black;
          text-decoration: none;
          text-shadow: 1px 1px 5px white;
          letter-spacing: 5px;
          transition: all ease 1s;
        }

        /* Effet du titre au passage de la souris */
        .un_titre a:hover {
          color: white;
          text-decoration: none;
          text-shadow: 1px 1px 5px black;
          letter-spacing: 2px;
          transition: all ease 1s;
        }

        /* On met tout le reste en position absolue */
        .image_messages, .img_forum, .sous_titre, .dernier_message {
          position: absolute;
        }

        /* On place l'image au-dessus de tout */
        .img_forum{
          top: 0;
          left: 0;
          z-index: 1;
        }

        /*On place out le reste au-dessus */
        .un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums {
          z-index: 2;
        }

        /* On place l'image de new/nonew/etc en haut à droite */
        .image_messages {
          top: 0;
          right: 0;
        }

        /* Mise en forme du sous-titre du forum qui se trouve dans la description */
        .un_forum .sous_titre {
          /* Placement */
          top: 65px;
          left: 20px;
          padding: 5px 10px;
          /* Couleur de fond puis de texte */
          background: rgba(0, 0, 0, 0.8);
          color: white;
          /* Police, taille et mise en gras */
          font-family: 'Courgette';
          font-size: 15px;
          font-weight: bold;
          /* Largeur maximale du titre = la moitié de la taille - le padding */
          max-width: 180px;
          /* Visible si la souris n'est pas dessus */
          opacity: 1;
          transition: all ease 1s;
        }

        /* Effet sur le sous-titrE: il devient invisible au passage de la souris: */
        .un_forum:hover .sous_titre {
          opacity: 0;
          transition: all ease 1s;
        }

        /* Mise en forme de la description du sous-forums */
        .un_forum .description .contour_desciption {
          overflow: visible;
          position: relative;
          /* Taille. Width: il prend toute la largeur. */
          width: auto;
          height: 100px;
          padding: 10px;
          /* Couleur de fond */
          background: rgba(0, 0, 0, 0.8);
          /* Police, puis taille de police, puis couleur du texte */
          font-family: 'Courgette';
          font-size: 13px;
          color: white;
          /* On le met au-dessus de tout le reste */
          z-index: 3;
          /* Alignement du texte */
          text-align: justify;
          /* Effet de disparition */
          -webkit-transform: translateX(400px);
          transform: translateX(400px);
          transition: all ease 0.8s;
        }

        /* Effet d'apparition de la description du forum */
        .un_forum:hover .description .contour_desciption {
          -webkit-transform: translateX(0px);
          transform: translateX(0px);
          transition: all ease 0.8s;
        }

        /* Mise en forme du texte de description */
        .description .contour_desciption p {
          /* Fait apparaitre une barre de défilement */
          overflow: auto;
          position: relative;
          /* Prend toute la largeur et donne une certaine hauteur (= 80px à cause du padding) */
          width: auto;
          height: 60px;
          padding: 10px;
          text-align: justify;
        }

        /* Mise en forme des liens vers les sous-froums */
        .un_forum .sous_forums {
          /* Placement */
          position: relative;
          top: -42px;
          /* Prennent toute la largeur et font 40 px de haut */
          width: auto;
          height: 20px;
          padding: 10px;
          /* PAr-dessus tout le reste */
          z-index: 3;
          /* S'il y en a trop une barre de défilement apparait */
          overflow: auto;
          /* N'apparaissent pas normalement */
          opacity: 0;
          transition: all ease 0.2s;
        }

        /* Effet d'apparition des liens vers les sous-forums */
        .un_forum:hover .sous_forums {
          opacity: 1;
          transition: all 0.8s ease 0.5s;
        }

        /* Mise en forme des leins de sous-forums */
        .sous_forums a, .sous_forums a:link, .sous_forums a:active, .sous_forums a:visited  {
          /* Taille, police, puis couleur */
          font-size: 15px;
          font-family: 'Amatic SC';
          color: white;
          /* On retire le sous-lignement */
          text-decoration: none;
          /* Effet sur le texte. */
          letter-spacing: 3px;
          transition: all ease 1s;
        }

        /* Effet sur les liens de sous-forums au passage de la souris */
        .sous_forums a:hover  {
          text-decoration: none;
          letter-spacing: 1px;
          transition: all ease 1s;
        }

        /* Mise en forme du dernier message */
        .un_forum .dernier_message {
          /* Poistionnement */
          bottom: 10px;
          /* Taille */
          width: 380px;
          height: 40px;
          /* S'il est trop long une barre de défilement apparait */
          overflow: auto;
          padding: 5px 10px;
          /* Mise en forme du texte: police, taille, couleur, ombre du texte */
          font-family: 'Courgette';
          font-size: 15px;
          color: white;
          text-shadow: 1px 1px 5px black;
          /* Effet de disparition */
          opacity: 0;
          transition: all ease 1s;
        }

        /* Effet d'apparition du denrier message */
        .un_forum:hover .dernier_message {
          opacity: 1;
          transition: all ease 1s;
        }

        /* Mise en forme du texte "message et sujets" */
        .dernier_message .mess_et_sujets {
          display: block;
          margin-bottom: 5px;
        }

        /* Mise en forme de la date du dernier message: taille */
        .dernier_message .liens_mess {
          font-size: 8px;
        }

        /* Mise en forme de tout le reste pour le dernier message: taille */
        .dernier_message .liens_mess a {
          font-size: 15px;
          text-decoration: none;
          color: white;
        }
    /********** FIN FORUMS **********/

    Voilà qui est tout! ^^ En espérant que ça va vous plaire! :hug:

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par NyoTheNeko le Jeu 18 Déc 2014 - 12:23, édité 1 fois



    Iliass
    Iliass
    MasculinAge : 33Messages : 24

    Dim 15 Fév 2015 - 13:53

    merci
    Chhaya
    Chhaya
    FémininAge : 39Messages : 1213

    Dim 15 Fév 2015 - 14:39

    Merci du partage ♥



    Forums en images de fond - Page 2 200412081714641513

      Merci Sparrow :3
    MOON LEE
    MOON LEE
    FémininAge : 30Messages : 149

    Dim 15 Fév 2015 - 19:51

    Merci
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Lun 16 Fév 2015 - 19:12

    Merci ! Je vais disséquer ton code jusqu'à ce qu'il soit à mouahahahahahaaaaa ! *se prépare à s'écorcher le cerveau sur les angles râpeux des sélecteurs CSS3*



    Alumine
    Err0r
    Err0r
    FémininAge : 31Messages : 134

    Mer 18 Fév 2015 - 23:17

    c'est trop beau :o (c'est un coup à être perdue quand on à pas l'habitude xD)



    Forums en images de fond - Page 2 150519095409324327
    Madras
    Madras
    FémininAge : 39Messages : 285

    Jeu 19 Fév 2015 - 21:14

    Merci du partage
    avatar
    Lupa
    FémininAge : 28Messages : 183

    Jeu 19 Fév 2015 - 23:45

    Merci beaucoup <3



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Frosty Blue
    Frosty Blue
    FémininAge : 28Messages : 162

    Sam 21 Fév 2015 - 16:56

    Merci beaucoup ^^
    Anonymous
    Invité

    Sam 21 Fév 2015 - 19:00

    Merci pour le partage.
    Alcida
    Alcida
    FémininAge : 35Messages : 33

    Sam 21 Fév 2015 - 19:01

    Trop classe !



    Forums en images de fond - Page 2 Alcida10
    Hayate747
    Hayate747
    MasculinAge : 35Messages : 196

    Sam 28 Fév 2015 - 11:21

    Merci Wink
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Mar 3 Mar 2015 - 23:50

    Ouaw, j'adooore !!
    Solitude
    Solitude
    FémininAge : 49Messages : 294

    Jeu 5 Mar 2015 - 18:30

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Forums en images de fond - Page 2 Sign510
    Maya Seiko
    Maya Seiko
    FémininAge : 31Messages : 129

    Ven 6 Mar 2015 - 9:58

    ohhh *0* merci
    Anonymous
    Invité

    Lun 9 Mar 2015 - 17:31

    Merci pour ce tutoriel ! :)
    Anonymous
    Invité

    Mar 10 Mar 2015 - 7:07

    Waouh merci pour le partage, je suis curieuse de le voir en oeuvre Very Happy
    Kyu
    Kyu
    FémininAge : 25Messages : 42

    Sam 14 Mar 2015 - 12:32

    Merci beaucoup ♥
    Isiiis
    Isiiis
    FémininAge : 31Messages : 39

    Sam 14 Mar 2015 - 12:35

    C'est vraiment un beau rendu après, bravo.
    Et merci du partage, si j'ai l'envie de l'utiliser, je n'hésiterais pas Forums en images de fond - Page 2 22235610
    Abysse Yclette
    Abysse Yclette
    FémininAge : 32Messages : 123

    Mer 18 Mar 2015 - 12:33

    Super ! Très intéressant, merci



    Forums en images de fond - Page 2 742880velo
    Adèle
    Adèle
    FémininAge : 33Messages : 96

    Sam 28 Mar 2015 - 10:46

    Très joli, merci ♥
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Sam 28 Mar 2015 - 20:26

    Merci beaucoup :)



    :heart: :heart:
    Phoenix Elen
    Phoenix Elen
    FémininAge : 32Messages : 93

    Sam 4 Avr 2015 - 22:33

    Oh... j'adore ! 
    C'est la deuxième catégories qui m'attire et les deux viennent de toi. 
    Beau travail et merci beaucoup pour ce codage.



    Forums en images de fond - Page 2 1u4i
    moram22
    moram22
    MasculinAge : 30Messages : 7

    Mar 7 Avr 2015 - 20:03

    Merci !
    Oror
    Oror
    FémininAge : 34Messages : 97

    Jeu 9 Avr 2015 - 10:17

    C'est très sympa j'aime beaucoup le rendu ! =)
    Merci pour le partage ! =)



    Forums en images de fond - Page 2 351490minion
    Sweetdead
    Sweetdead
    FémininAge : 29Messages : 38

    Ven 10 Avr 2015 - 23:16

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 9:20