News Accueil

Terrible

Libre-service de codages pour vos forums


Pastel red

par Awful le le Ven 27 Jan - 11:47




Créditez-moi quelque part sur votre forum si vous utilisez ces codes

L'icône nouveau message / pas de nouveaux messages est de préférence au format 40x50px. Je vous fournis celles que j'ai fait, si ça vous dit, elles sont là :


La scrollbar est seulement stylée sous Chrome

Les sous-forums apparaissent au survol du petit triangle en bas à gauche


Codes et explications


Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Lien vers les niveaux inférieurs", cocher "oui".

Pour activer l'affichage de l'avatar, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les avatars dans la colonne 'Derniers messages'", cocher "oui".

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:
<link href="https://fonts.googleapis.com/css?family=Arimo|Montserrat:400,700" rel="stylesheet">


Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  
  <div class="forum-wrap">
  <div class="forum-title">
    <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a class="a-title" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
    <div class="forum-desc">
      {catrow.forumrow.FORUM_DESC}
      </div>
  </div>
    <div class="sous-forum"><div class="sous-forum-content">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
    <div class="stats-forum">
         <b>{catrow.forumrow.TOPICS}</b> topics <b>{catrow.forumrow.POSTS}</b> posts
  </div>
  <div class="forum-avatar"><!-- BEGIN avatar -->
            {catrow.forumrow.avatar.LAST_POST_AVATAR}
            <!-- END avatar -->
    </div>
  <div class="forum-last">{catrow.forumrow.LAST_POST}</div>
  <div class="forum-img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </div>
</div>

  
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->


Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:
/*Personnalisation des catégories par Awful*/

/*Titre des catégories*/
.titre-cate  {
    width: 800px;
    margin: auto;
}
.titre-cate h2 {
    font-family: Montserrat, sans-serif;
    font-size: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e0dedb;
    text-shadow: 1px 1px 0 #f86c6d;
    margin: auto auto -10px;
}

/*Bloc forum*/
.forum-wrap {
    width: 800px;
    height: 150px;
    position: relative;
    margin: 30px auto;
    font-family: 'Arimo', sans-serif;
    background-color: #f86c6d;
    color: #fff;
}
.forum-wrap a,
.forum-wrap a:hover {
    text-decoration: none!important;
}
.forum-title {
    width: 50%;
    height: 40px;
    position: absolute;
    top: 0;
    padding: 10px;
}

/*Titre des forums*/
.forum-title .a-title {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #fff!important;
}
.forum-title .a-title:after {
    content: "";
    height: 2px;
    width: 10px;
    position: absolute;
    left: 0;
    bottom: -5px;
    background: #fff;
}

/*Description des forums*/
.forum-desc {
    text-align: justify;
    font-size: 11px;
    padding-right: 8px;
    height: 70px;
    overflow: auto;
    margin-top: 20px;
}
/*scrollbar sous chrome*/
.forum-desc::-webkit-scrollbar {
    width: 3px;
}
.forum-desc::-webkit-scrollbar-track {
    background-color: #ce5a5b;
}
.forum-desc::-webkit-scrollbar-thumb {
    background: #ffa5a6;
}

/*Avatar dernier forum*/
.forum-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 4px solid #fff;
}
.forum-avatar img {
    width: 60px;
}

/*Dernier message*/
.forum-last {
    height: 50px;
    width: 150px;
    background: #fff;
    position: absolute;
    right: 80px;
    top: 40px;
    border-radius: 10px;
    color: #000;
    font-size: 10px;
    box-sizing: border-box;
    padding: 8px 10px;
}
.forum-last:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 5px solid #fff;
    border-radius: 20px 0 0 0;
    bottom: -15px;
    right: 10px;
    width: 12px;
    height: 12px;
    transform: rotate(-80deg);
}
.forum-last:empty,
.forum-avatar:empty {
    display: none;
}

/*Image nouveaux messages*/
.forum-img {
    height: 50px;
    width: 40px;
    background: #efefef;
    position: absolute;
    right: 10px;
    top: -10px;
}
.forum-img:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 10px 5px;
    border-color: transparent transparent #ce5a5b transparent;
    position: absolute;
    right: 40px;
    top: 0;
}

/*Statistiques des forums*/
.stats-forum {
    text-align: right;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
    top: 5px;
    position: absolute;
    right: 60px;
}

/*Sous forums*/
.sous-forum {
    height: 20px;
    width: 20px;
    bottom: 0;
    left: 0;
    position: absolute;
}
.sous-forum-content {
    background: #f86c6d;
    box-sizing: border-box;
    height: 150px;
    left: 0px;
    padding: 15px;
    position: absolute;
    bottom: 0px;
    transition: all .2s;
    width: 450px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate(50px, 0);
    font-size: 0;
}
.sous-forum-content a {
    background: #fff;
    font-size: 8px;
    padding: 2px 3px;
    margin-right: 4px;
    color: #888!important;
    display: inline-block;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
/*Petit triangle en bas à gauche. Editer l'hexa du border-color pour changer la couleur du triangle*/
.sous-forum:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: transparent transparent transparent #ce5a5b;
    position: absolute;
    left: 0px;
    bottom: 0;
}
.sous-forum:hover .sous-forum-content {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0px);
}