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.


    [Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs

    Sondage

    Quel est votre code préféré?

    [ 1 ]
    [Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs Empty33%[Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs Empty [33%] 
    [ 2 ]
    [Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs Empty67%[Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs Empty [67%] 

    Total des votes: 3
    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le Sam 13 Juil 2019 - 22:29

    Créativ'mess pour les 12 ans de NU - Les Souvenirs
    VOTEZ !

    Bonjour tout le monde !

    Merci à tous les participants ! C'est le temps de voter pour votre code préféré Wink


    Premier code, celui de catégories :
    [Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs CzgOdid

    Codes :
    Spoiler:
    Template index_box :
    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="encadre-categorie">

                              <div class="titre-categorie">
                                {catrow.tablehead.L_FORUM} 
                              </div>

      <!-- END tablehead -->

      <!-- BEGIN forumrow -->
                      <div class="titre-forum">
                      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                         
                        </div>
                     
                      <div class="encadre-categorie-bas">

                        <div class="icons-cate">

                      <td class="{catrow.forumrow.INC_CLASS}" 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}" />-->
                       
    <img style="bakcground:url('{catrow.forumrow.L_FORUM_FOLDER_ALT}')" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />                                 
                     
                      </td>
                       
                        </div>

                        <div class="image-cate">
                        {catrow.forumrow.FORUM_DESC} 
                        <div class="sous-forum">
                        <!-- BEGIN switch_moderators_links -->
              {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
              <!-- END switch_moderators_links -->
                          <span class="virgule">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
              <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                         
                          </div>
                         
                          </div>
                   

                        <div class="description-cate">
                         
                          <div class="sujet-rep">
                            <span class="nb-message">{catrow.forumrow.TOPICS} {L_TOPICS}</span>  <span class="etoile">☆</span> 
            <span class="nb-message">{catrow.forumrow.POSTS} {L_POSTS}</span>
                          </div>

                      <div class="dernier-mess">

                        <!-- BEGIN avatar -->
                                <div class="avatar-dernier-posteur">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                                <!-- END avatar -->
                            <span>
            <!-- 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}
            </span>
                          </div>
                         
                        </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> • </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 -->

    CSS :
    Code:
    /*Taille du body*/

    #page-body {
      background-color:#ffffff;
      padding-top:85px;
    }

    div#wrap {
      width: 800px;
      background-color: #ffffff;
      margin-top: -25px;
    }

    ul.linklist.clearfix {
      display: none;
    }

    a.icon-home {
      display:none;
    }

    a.mainmenu
    {
      display: none !important;
    }

    /*FORUM ET CATEGORIE*/
    .encadre-categorie {
      border: box-sizing: border-box;padding: 5px;background: #f2f2f2;
      margin-top:-5px;
    }

    .encadre-categorie-bas{
      border: box-sizing: border-box;padding: 5px;background: #eaeaea;
      height:7_px;
      display:flex;
      flex-direction:row;
    }
     
    .titre-categorie {

      text-align:center;
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 5px;background:#74a0d5;
      margin-bottom:4px;
      text-transform:uppercase;

    }

    .titre-categorie h2 {
      font-family: 'PT Sans Narrow', sans-serif;
    }

    .titre-categorie h2{
      margin-top:-1px;
      color:white;
      text-shadow:1px 1px 1px #939393;
      font-size:10px;
      letter-spacing: .2rem;
    }

    .titre-forum {
      padding:2px;
      margin-top:2px;
      margin-bottom:2px;
      background-color:#f7f7f7;
      padding:3px;
    }

    a.forumtitle {
      color:#74a0d5;
      text-transform:uppercase;
      letter-spacing: .1rem;
      font-size:10px;
      font-family: 'PT Sans Narrow', sans-serif;

    }

    .bloc-categorie {
      background-color:#f7f7f7;
      width:200px;
      height:30px;
    }

    .bloc-categorie-droit {
      width:200px;
      height:30px;
      float:right;
      background-color:pink;

    }

    .icons {
      width:300px;
      background-color:orange;
    }

    .description-cate {
      width:180px;
      margin-left:5px;
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 3px;background:#f7f7f7;
    }

    .icons-cate {
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 3px;background:#f7f7f7;
      background-color:white;
      margin-right:4px;
    }

    .image-cate {
      width:400px;
    }

    .image-cate img {
      z-index: 3;
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 2px;background:#f7f7f7;
      background-color:#74a0d5;
      margin-right:8px;
      margin-left:4px;
      margin-top:3px;
      overflow:hidden;
      width:110px;
      height:69px;
      }

    .image-cate {
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 3px;background:#f7f7f7;
      width:580px;
      text-align:justify;
      height:85px;
      }

    .sous-forum {
      border: 1px solid #eeeeee;box-sizing: border-box;padding: 1px;background:#f7f7f7;
      background-color:#fdfdfd;
      width:402px;
      margin-left:123px;
      display:block;
    }

    .sujet-rep {
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 1px;background:#e0e0e0;
      padding:3px;
      background-color:white;
      text-align:center;
    }

    .avatar-dernier-posteur{
      float: left;
      padding-left:3px;
      padding-right:5px;
    }
    .avatar-dernier-posteur img {
      width: 32px;
      height: 45px;
      padding:2px;
      border: 1px solid #dfdfdf;box-sizing: border-box;padding: 1px;background:#f7f7f7;
      background-color:white;
      margin-bottom:4px;
    }

    .dernier-mess {
      margin-top:5px;
      color:#949494;
    }

    .etoile {
      color: #74a0d5;
    }

    .nb-message {
      color: #b3b3b3;
    }

    .paragraphe-desc {
      margin-top:4px;
      color:#949494;
      font-size:9px;
    }

    .virgule {
      font-size:0px;
    }

    .virgule a {
      font-size:10px;
    }

    .virgule a:last-child {
      padding-right:0px;
    }

    .virgule a:after {
      content:" • "; /* ou bien content:url('URL_IMG'); */
     
    }
    .virgule a:last-child:after {
      content:"";
    }

    ------------------------

    Deuxième code, celui de la page des membres :
    [Votes] Créativ'mess pour les 12 ans de NU - Les Souvenirs G9bJEvN

    Codes :
    Spoiler:
    Template memberlist_body :
    Code:
    <h1 class="listmember_title">{PAGE_TITLE}</h1>

    <form action="{S_MODE_ACTION}" method="get">
      <div class="listmember pannel">
       
        <h2 class="h3">{L_ORDER_OR_SELECT}</h2>
        <p style="text-align:right; margin: 0; padding: 0;">
          {L_USER_SELECT} <input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
          {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
          {L_ORDER} {S_ORDER_SELECT}      
          {S_HIDDEN_SID}
          <input class="button2" type="submit" name="submit" value="{L_SUBMIT}" />
        </p>
       
        <div id="memberlist">
          <!-- BEGIN memberrow -->
          <div class="{memberrow.ROW_CLASS}">
            <div class="memberlist_in">
              {memberrow.AVATAR_IMG}
              <div>
                <a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><br />
                {memberrow.PM_IMG}&nbsp;{memberrow.WWW_IMG}<br />
                Inscrit le : {memberrow.JOINED}<br />
                Dernière visite : {memberrow.LASTVISIT}<br />
                Messages : {memberrow.POSTS}
              </div>
            </div>
          </div>
          <!-- END memberrow -->
         
          <!-- BEGIN switch_no_user -->
          {switch_no_user.L_NO_USER}
          <!-- END switch_no_user -->
        </div>
       
      </div>
    </form>

    <div class="pagination" style="float:none;">
      <!-- BEGIN switch_pagination -->
      {PAGINATION}<br /><br />
      <!-- END switch_pagination -->
    </div>

    CSS :
    Code:
    /*Titre de liste des membres*/
    .listmember_title {
      color: #3e464c;
      font-family: Roboto, sans-serif;
      font-size: 3rem;
      font-weight: 500;
      width: 90%;
      margin: auto;
    }
    /*Liste des membres*/
    .listmember {
      border-radius: 0px;
      width: 90%;
      margin: 10px auto 20px;
      background: #EBE8DD;
      box-shadow: 0px 0px 3px #757575;
      border: 1px solid #fff;
      padding: 10px;
    }
    /*Partie des membres*/
    #memberlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    /*Bloc de 1 membre*/
    #memberlist > div {
      width: 170px;
      height: 250px;
      margin: 20px 10px 10px 10px;
      border: 10px solid #fff;
      background: #c4c4c4;
      padding: 1px;
      box-shadow: 0px 0px 3px #a3a3a3;
      box-sizing: content-box;
    }
    /*Intérieur du bloc de 1 membre*/
    .memberlist_in {
      position: relative;
      width: 170px;
      height: 250px;
      background: #efefef;
      overflow: hidden;
    }
    /*Avatar*/
    .memberlist_in > img {
      width: 170px;
      height: 320px;
      background: #efefef;
    }
    /*Contient le nom et les informations*/
    .memberlist_in > div {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 170px;
      height: 50px;
      box-sizing: border-box;
      background: rgba(255,255,255,0.7);
      color: #555555;
      text-align: center;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Nom du membre*/
    .memberlist_in > div > a {
      font-size: 16px;
      letter-spacing: 1px;
    }
    /*Apparition des informations*/
    .memberlist_in > div:hover {
      height: 250px;
    }




      La date/heure actuelle est Lun 21 Oct 2019 - 17:32