Le Deal du moment :
Cdiscount : -30€ dès 300€ ...
Voir le deal

Terrible :: Codes forum :: Catégories et forums

Check mate

Awful
Lun 11 Juin - 22:45
Awful
Check mate IFxEEl4

Le premier forum est un forum sans nouveau message, le second avec nouveau message et le dernier est un forum verrouillé. La petite couronne est l'icône de nouveau message. Il est possible de la changer. Il suffit de choisir une icône ici et de remplacer dans le CSS le code unicode.

Code:
.awf-cfs1-img::before {
    content: "\f445";
}

Check mate GZOfabB

Au survol du forum, les sous-forums s'affichent.
Créditez-moi quelque part sur votre forum si vous utilisez ces codes

Codes et explications


phpBB2


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".

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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Roboto|Caveat" 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 -->
 
 </td>
 </tr>
</table>
<div class="top-links">
  <!-- BEGIN switch_user_logged_in -->
  <div><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></div>
  <div><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></div>
  <!-- END switch_user_logged_in -->
  <div><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></div>
</div>
<div id="breadcrumbs">
  <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="awf-cfs1-cat">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div><div class="wrap-forum">
 <!-- END tablehead -->
 <!-- BEGIN cathead -->


 <!-- END cathead -->
 <!-- BEGIN forumrow -->
<div class="awf-cfs1">
    <div class="awf-cfs1-title">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="awf-cfs1-mid">
        <div class="awf-cfs1-desc">
            <div>
                {catrow.forumrow.FORUM_DESC}
            </div>
      </div>
        <div class="awf-cfs1-right">
            <div class="awf-cfs1-stats">
                <div>{catrow.forumrow.TOPICS} topics</div>
                <div>{catrow.forumrow.POSTS} posts</div>
            </div>
            <div class="awf-cfs1-subforums">
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
            <div class="awf-cfs1-img">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div>
        </div>
    </div>
    <div class="awf-cfs1-last">
        {catrow.forumrow.LAST_POST}
    </div>
</div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
  
 <!-- END catfoot -->
 <!-- BEGIN tablefoot --></div></div>
<!-- END tablefoot --><!-- END catrow -->
<script>
  $(document).ready(function(){
  $('.awf-cfs1').each(function(){
  $(this).find('.awf-cfs1-img img[title="Nouveaux messages"]').parent().addClass('nouveau');
  $(this).find('img[title="Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets."]').parent().addClass('lock');
  $(this).find('.sprite-icon_reply_new').closest('a').addClass('nouveau-icon');
  });
  });
</script>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
Code:
/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/


/*Fil d'ariane au-dessus du forum*/

#breadcrumbs {
    display: flex;
    background: #286f58;
    font-size: 0;
}

#breadcrumbs a {
    font-size: 9px;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    color: #2d2d2d;
    font-weight: normal;
    padding: 5px;
    border-right: 1px solid #318369;
    display: block;
    letter-spacing: 1px;
    transition: all 0.3s;
    background: transparent;
    text-decoration: none!important;
}

#breadcrumbs a:hover {
    background: #318369;
}

#breadcrumbs h1 {
    margin: 0;
    font-weight: normal;
}


/*Liens "voir les nouveaux messages", etc*/

.top-links {
    display: flex;
    justify-content: center;
    padding: 15px 0px;
}

.top-links a {
    text-decoration: none!important;
    font-size: 8px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    border: 1px solid #cbcbcb;
    margin: 0 10px;
    padding: 5px 10px;
    letter-spacing: 1px;
    color: #747474;
    transition: all 0.3s;
}

.top-links a:hover {
    border: 1px solid #747474;
    color: #cbcbcb;
}


/*Corps catégorie*/

.awf-cfs1-cat {
    width: 900px;
    background: #d8d8d8;
    margin: 0px auto;
}


/*Titre de catégorie*/

.titre-cate {
    flex: 100%;
    height: 60px;
    background: #318369;
    padding: 0 0 0 40px;
}

.titre-cate h2 {
    margin: 0;
    line-height: 60px;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    color: #e6e6e6;
}


/*Bloc contenant les forums*/

.wrap-forum {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 30px 15px 20px;
    box-sizing: border-box;
}


/*Bloc forum*/

.awf-cfs1 {
    height: 260px;
    background: #bbbbbb;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 5px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
}

.awf-cfs1 a {
    text-decoration: none!important;
}


/*Titre de forum*/

.awf-cfs1-title {
    padding: 0px 10px;
    height: 25px;
    background: #318369;
}

.awf-cfs1-title a {
    font-family: 'Caveat', cursive;
    font-weight: 900;
    font-size: 24px;
    color: #fff !important;
    transition: all 0.3s;
    transform: translateY(5px);
    display: inline-block;
    text-shadow: 0px 1px 0 #318369, 0px -1px 0 #318369, 1px 0 0 #318369, -1px 0 0 #318369;
}

.awf-cfs1-title a:hover {
    color: #9bccb2!important;
}


/*Bloc du milieu*/

.awf-cfs1-mid {
    display: flex;
    height: 165px;
}


/*Description*/

.awf-cfs1-desc {
    width: 70%;
    height: 100%;
    padding: 20px;
    background: #d8d8d8;
    box-sizing: border-box;
}

.awf-cfs1-desc>div {
    font-size: 11px;
    padding-right: 10px;
    overflow: auto;
    text-align: justify;
    height: 100%;
    color: #121212;
}


/*Scrollbar de la description (uniquement sous Chrome)*/

.awf-cfs1-desc>div::-webkit-scrollbar {
    width: 2px;
}

.awf-cfs1-desc>div::-webkit-scrollbar-track {
    background: #c1c1c1;
}

.awf-cfs1-desc>div::-webkit-scrollbar-thumb {
    background: #318369;
}


/*Bloc à droit (stats, image de nouveau message et sous-forums)*/

.awf-cfs1-right {
    flex: 1;
    position: relative;
    padding: 15px;
    font-size: 10px;
    background: #ccc;
    overflow: hidden;
}


/*Statistiques*/

.awf-cfs1-stats {
    margin-bottom: 15px;
}

.awf-cfs1-stats div {
    border-bottom: 1px solid #bbb;
    color: #318369;
    margin-top: 10px;
    padding-bottom: 2px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
}


/*Image nouveau message / pas de nouveau message / verrouillé*/

.awf-cfs1-img {
    text-align: center;
}

.awf-cfs1-img img {
    display: none;
}

.awf-cfs1-img::before {
    content: "\f445";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 65px;
    color: #bbb;
    transform: rotate(-25deg);
    position: absolute;
    bottom: 0;
    right: 0;
}

.awf-cfs1-img.nouveau::before {
    color: #34b58c;
}

.awf-cfs1-img.lock::before {
    content: "\f023";
}


/*Sous-forums*/

.awf-cfs1-subforums {
    position: absolute;
    width: 100%;
    padding: 8px 15px 0 8px;
    height: 100%;
    background: #ccc;
    overflow: auto;
    box-sizing: border-box;
    bottom: 0px;
    right: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    font-size: 0;
}

.awf-cfs1:hover .awf-cfs1-subforums {
    opacity: 1;
    visibility: visible;
}

.awf-cfs1-subforums:empty {
    display: none;
}

.awf-cfs1-subforums a {
    display: block;
    text-transform: uppercase;
    border-bottom: 1px solid #bbb;
    color: #696969;
    font-size: 8px;
    letter-spacing: 1px;
    padding-bottom: 2px;
    margin-bottom: 5px;
    position: relative;
    transition: all 0.3s;
}

.awf-cfs1-subforums a::after {
    content: "";
    height: 1px;
    width: 0%;
    position: absolute;
    background: #286f58;
    left: 0;
    bottom: -1px;
    transition: width 0.3s;
}

.awf-cfs1-subforums a:hover::after {
    width: 100%;
}

.awf-cfs1-subforums a:hover {
    color: #ccc;
}


/*Bloc du bas*/

.awf-cfs1-bot {
    flex: 1;
    display: flex;
}


/*Dernier message*/

.awf-cfs1-last {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    background: #318369;
    color: #ddd;
}

.awf-cfs1-last>span>a {
    color: #fff;
    transition: color 0.3s;
}

.awf-cfs1-last>span>a:hover {
    color: #4abd99;
}

.awf-cfs1-last .last-post-icon img,
.awf-cfs1-last .sprite-icon_reply_new {
    display: none;
}

.awf-cfs1-last .last-post-icon:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3e5";
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-weight: 900;
    font-size: 30px;
    color: #2a715a;
    transition: color 0.3s;
}

.awf-cfs1-last .last-post-icon:hover:before {
    color: #fff;
}

.awf-cfs1-last a[href*="view=newest"]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3e5";
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-weight: 900;
    font-size: 30px;
    color: #34b58c;
    transition: color 0.3s;
}

.awf-cfs1-last a[href*="view=newest"]:hover:before {
    color: #2a715a;
}


phpBB3


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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Roboto|Caveat" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :
Code:
<ul class="linklist2">
 <!-- 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="awf-cfs1-cat">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div><div class="wrap-forum">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
  <div class="awf-cfs1">
    <div class="awf-cfs1-title">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="awf-cfs1-mid">
        <div class="awf-cfs1-desc">
            <div>
                {catrow.forumrow.FORUM_DESC}
            </div>
      </div>
        <div class="awf-cfs1-right">
            <div class="awf-cfs1-stats">
                <div>{catrow.forumrow.TOPICS} topics</div>
                <div>{catrow.forumrow.POSTS} posts</div>
            </div>
            <div class="awf-cfs1-subforums">
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
            <div class="awf-cfs1-img">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div>
        </div>
    </div>
    <div class="awf-cfs1-last">
        <!-- BEGIN switch_topic_title -->
      <div><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a></div>
      <!-- END switch_topic_title -->
      {catrow.forumrow.USER_LAST_POST}
    </div>
</div>
 
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </div></div>
 <!-- END tablefoot -->
<!-- END catrow -->
<script>
  $(document).ready(function(){
  $('.awf-cfs1').each(function(){
  $(this).find('.awf-cfs1-img img[title="Nouveaux messages"]').parent().addClass('nouveau');
  $(this).find('img[title="Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets."]').parent().addClass('lock');
  $(this).find('.sprite-icon_reply_new').closest('a').addClass('nouveau-icon');
  });
  });
</script>
<!-- BEGIN switch_on_index -->
<ul class="linklist2">
 <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 -->

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :
Code:
/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/


/*Liens "voir les nouveaux messages", etc*/

.linklist2 {
    display: flex;
    justify-content: center;
    padding: 15px 0px;
}

.linklist2 a {
    font-size: 8px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    border: 1px solid #cbcbcb;
    margin: 0 10px;
    padding: 5px 10px;
    letter-spacing: 1px;
    color: #747474;
    transition: all 0.3s;
    text-decoration: none!important;
}

.linklist2 a:hover {
    border: 1px solid #747474;
    color: #cbcbcb;
}


/*Corps catégorie*/

.awf-cfs1-cat {
    width: 900px;
    background: #d8d8d8;
    margin: 0px auto;
}


/*Titre de catégorie*/

.titre-cate {
    flex: 100%;
    height: 60px;
    background: #318369;
    padding: 0 0 0 40px;
}

.titre-cate h2 {
    margin: 0;
    line-height: 60px;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    color: #e6e6e6;
}


/*Bloc contenant les forums*/

.wrap-forum {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 30px 15px 20px;
    box-sizing: border-box;
}


/*Bloc forum*/

.awf-cfs1 {
    height: 260px;
    background: #bbbbbb;
    box-sizing: border-box;
    padding: 5px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
}

.awf-cfs1 a {
    text-decoration: none!important;
}


/*Titre de forum*/

.awf-cfs1-title {
    padding: 0px 10px;
    height: 25px;
    background: #318369;
}

.awf-cfs1-title a {
    font-family: 'Caveat', cursive;
    font-weight: 900;
    font-size: 24px;
    color: #fff !important;
    transition: all 0.3s;
    transform: translateY(5px);
    display: inline-block;
    text-shadow: 0px 1px 0 #318369, 0px -1px 0 #318369, 1px 0 0 #318369, -1px 0 0 #318369;
}

.awf-cfs1-title a:hover {
    color: #9bccb2!important;
}


/*Bloc du milieu*/

.awf-cfs1-mid {
    display: flex;
    height: 165px;
}


/*Description*/

.awf-cfs1-desc {
    width: 70%;
    height: 100%;
    padding: 20px;
    background: #d8d8d8;
    box-sizing: border-box;
}

.awf-cfs1-desc>div {
    font-size: 11px;
    padding-right: 10px;
    overflow: auto;
    text-align: justify;
    height: 100%;
    color: #121212;
}


/*Scrollbar de la description (uniquement sous Chrome)*/

.awf-cfs1-desc>div::-webkit-scrollbar {
    width: 2px;
}

.awf-cfs1-desc>div::-webkit-scrollbar-track {
    background: #c1c1c1;
}

.awf-cfs1-desc>div::-webkit-scrollbar-thumb {
    background: #318369;
}


/*Bloc à droit (stats, image de nouveau message et sous-forums)*/

.awf-cfs1-right {
    flex: 1;
    position: relative;
    padding: 15px;
    font-size: 10px;
    background: #ccc;
}


/*Statistiques*/

.awf-cfs1-stats {
    margin-bottom: 15px;
}

.awf-cfs1-stats div {
    border-bottom: 1px solid #bbb;
    color: #318369;
    margin-top: 10px;
    padding-bottom: 2px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
}


/*Image nouveau message / pas de nouveau message / verrouillé*/

.awf-cfs1-img {
    text-align: center;
}

.awf-cfs1-img img {
    display: none;
}

.awf-cfs1-img::before {
    content: "\f445";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 65px;
    color: #bbb;
    transform: rotate(-25deg);
    position: absolute;
    bottom: 0;
    right: 0;
}

.awf-cfs1-img.nouveau::before {
    color: #34b58c;
}

.awf-cfs1-img.lock::before {
    content: "\f023";
}


/*Sous-forums*/

.awf-cfs1-subforums {
    position: absolute;
    width: 100%;
    padding: 8px 15px 0 8px;
    height: 100%;
    background: #ccc;
    overflow: auto;
    box-sizing: border-box;
    bottom: 0px;
    right: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    font-size: 0;
}

.awf-cfs1:hover .awf-cfs1-subforums {
    opacity: 1;
    visibility: visible;
}

.awf-cfs1-subforums:empty {
    display: none;
}

.awf-cfs1-subforums a {
    display: block;
    text-transform: uppercase;
    border-bottom: 1px solid #bbb;
    color: #696969;
    font-size: 8px;
    letter-spacing: 1px;
    padding-bottom: 2px;
    margin-bottom: 5px;
    position: relative;
    transition: all 0.3s;
}

.awf-cfs1-subforums a::after {
    content: "";
    height: 1px;
    width: 0%;
    position: absolute;
    background: #286f58;
    left: 0;
    bottom: -1px;
    transition: width 0.3s;
}

.awf-cfs1-subforums a:hover::after {
    width: 100%;
}

.awf-cfs1-subforums a:hover {
    color: #286f58;
}


/*Bloc du bas*/

.awf-cfs1-bot {
    flex: 1;
    display: flex;
}


/*Dernier message*/

.awf-cfs1-last {
    flex: 1;
    box-sizing: border-box;
    position: relative;
    font-size: 10px;
    padding: 10px;
    background: #318369;
    color: #ddd;
}

.awf-cfs1-last>span>a {
    color: #fff;
    transition: color 0.3s;
}

.awf-cfs1-last>span>a:hover {
    color: #4abd99;
}

.awf-cfs1-last .last-post-icon img,
.awf-cfs1-last .sprite-icon_topic_newest {
    display: none;
}

.awf-cfs1-last .last-post-icon:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3e5";
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-weight: 900;
    font-size: 30px;
    color: #474747;
    transition: color 0.3s;
}

.awf-cfs1-last .last-post-icon:hover:before {
    color: #ccc;
}

.awf-cfs1-last a[href*="view=newest"]:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3e5";
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-weight: 900;
    font-size: 30px;
    color: #318369;
    transition: color 0.3s;
}

.awf-cfs1-last a[href*="view=newest"]:hover:before {
    color: #474747;
}
Devenir partenaire ?
Offrez-moi un café ! ♥
Design et codage par Awful © 2021