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é
VOTEZ !
Bonjour tout le monde !
Merci à tous les participants ! C'est le temps de voter pour votre code préféré
Premier code, celui de catégories :
![[Gagnant : Onyx] Créativ'mess pour les 12 ans de NU - Les Souvenirs CzgOdid](https://i.imgur.com/CzgOdid.png)
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 :
![[Gagnant : Onyx] Créativ'mess pour les 12 ans de NU - Les Souvenirs G9bJEvN](https://i.imgur.com/G9bJEvN.jpg)
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} {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;
}
![[Gagnant : Onyx] Créativ'mess pour les 12 ans de NU - Les Souvenirs 1476882517-signa](https://2img.net/image.noelshack.com/fichiers/2016/42/1476882517-signa.png)