La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
La tambouille des râleuses

Tutoriels, libre-service, entraide et partage en gestion de forums, animation et codage (HTML, CSS, Javascript, Template) pour forum sous ForumActif.

Le deal à ne pas rater :
LEGO Icons 10331 – Le martin-pêcheur
35 €
Voir le deal

Catégories simples et épurées

La tambouille des râleuses :: Coup de pouce :: Codes en libre-service
Répondre au sujet
Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Très peu présente en ce moment Sad
----
Idea Viens papoter avec nous sur le discord
Messages : 4099
https://tambouille-raleuses.forumactif.com/
+

Catégories simples et épurées Empty Catégories simples et épurées

Sam 3 Aoû 2019 - 22:12

Catégories simples et épurées


Hello !

Voilà pour toi un petit LS pour des catégories simples et épurées : titre et descriptions mis en page et colonne "messages et sujets" supprimés.
Si tu veux des catégories jolies mais que tu n'y connais rien en code, c'est fait pour toi Smile

Le rendu:

Idea Prérequis :
• Tu dois avoir accès aux templates
• je pars de templates qui n'ont pas été modifié
• Il existe un code par version de FA. Tout a été testé mais une coquille a pu se glisser, si tu en constate une, pas de panique, dis le moi et je corrigerai Smile

PhpBB2

Modification de template

Voilà le code à coller dans PA > Affichage > Template > Général > Index_box
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 --><table class="forumline" width="90%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
 <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
 </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"> </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <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}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <div class="description">{catrow.forumrow.FORUM_DESC}</div>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
                  <span class="gensmall">{catrow.forumrow.LAST_POST}<br/>
                  {catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets </span>
 </td>
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Mise en page via la CSS

La CSS commentée succinctement, tu peux me demander de l'aide si tu n'arrives pas à personnaliser.
Elle est à placer dans PA > Affichage > Couleurs > Feuille de style CSS
Code:
.forumline{
 width:100%;
}
a.forumlink {
font-variant: small-caps; /** Les liens de forums sont en petites majuscules ****/
display:block;
text-align:center;
border-bottom: 1px solid #4A3E18; /** La ligne sous le lien **/
font-size:14px;
letter-spacing: 2px; /** Les lettres sont espacées **/
padding: 4px 0px 4px 0px;
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière le lien // il est possible de mettre une simple couleur **/
background-repeat:repeat;
margin:0;
}

div.description{
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière les descriptions // il est possible de mettre une simple couleur **/
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border: 3px double #4A3E18;
border-radius: 10px;
font-size: 13px;
margin: -10px auto 5px;
min-height: 40px;
padding: 4px;
text-align: justify;
text-indent: 10px;
}

PhpBB3

Modification de template

Voilà le code à coller dans PA > Affichage > Template > Général > 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="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>
 <ul class="topiclist">
 <li class="header">
 <dl class="icon">
 <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
 <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist forums">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <li class="row">
 <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
 <dd class="dterm">
 <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 <br />
 <div class="description">
                                                                  {catrow.forumrow.FORUM_DESC}
                                                          </div>

 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </div>
 </dd>
 <dd class="lastpost">
 <!-- BEGIN ads -->
 <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
 </span>
                            <!-- END ads -->
 
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- 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>
                                                  <br />
                                                  {catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn> sujets - {catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn> messages
 </dd>
 </dl>
 </li>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </ul>

 <span class="corners-bottom"><span></span></span></div>
 </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 -->

Mise en page via la CSS

La CSS commentée succinctement, tu peux me demander de l'aide si tu n'arrives pas à personnaliser.
Elle est à placer dans PA > Affichage > Couleurs > Feuille de style CSS
Code:
.hierarchy {
display:block;
font-variant: small-caps; /** Les liens de forums sont en petites majuscules ****/
text-align:center;
border-bottom: 1px solid #4A3E18; /** La ligne sous le lien **/
font-size:14px !important;
letter-spacing: 2px; /** Les lettres sont espacées **/
padding: 4px 0px 4px 0px;
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière le lien // il est possible de mettre une simple couleur **/
background-repeat:repeat;
margin:0;
}
ul.topiclist dd.dterm, ul.topiclist dt {
    width:88%;
}
ul.topiclist dd.lastpost{
 text-align:center;
  width:10% !important;
}
dd.lastpost span{
 display:inline;
}
dd.lastpost span.color-groups{
 float:none;
}
div.description{
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière les descriptions // il est possible de mettre une simple couleur **/
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border: 3px double #4A3E18;
border-radius: 10px;
font-size: 13px;
margin: -10px auto 5px;
min-height: 40px;
padding: 4px;
text-align: justify;
text-indent: 10px;
}

PunBB

Modification de template

Voilà le code à coller dans PA > Affichage > Template > Général > Index_box
Code:
<div class="pun-crumbs">
 <p class="crumbs"><a href="{U_INDEX}"><span>{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">
 <table cellspacing="0" class="table">
 <thead>
 <tr>
 <th class="tcl">{L_FORUM}</th>
 <th class="tcr">{L_LASTPOST}</th>
 </tr>
 </thead>
 <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr>
 <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
 <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </span>
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <br />
                                                  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
 <!-- BEGIN switch_moderators_links -->
 <br />
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </td>
 <td class="tcr">
                            <!-- BEGIN ads -->
 <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
 </span>
                            <!-- END ads -->
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- 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>
                                                  <br />
                                                  {catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages
 </td>
 </tr>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </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 -->

Mise en page via la CSS

La CSS commentée succinctement, tu peux me demander de l'aide si tu n'arrives pas à personnaliser.
Elle est à placer dans PA > Affichage > Couleurs > Feuille de style CSS
Code:
.hierarchy {
display:block;
font-variant: small-caps !important; /** Les liens de forums sont en petites majuscules ****/
text-align:center;
border-bottom: 1px solid #4A3E18; /** La ligne sous le lien **/
font-size:14px !important;
letter-spacing: 2px; /** Les lettres sont espacées **/
padding: 4px 0px 4px 0px;
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière le lien // il est possible de mettre une simple couleur **/
background-repeat:repeat;
margin:0;
}
div.description{
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière les descriptions // il est possible de mettre une simple couleur **/
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border: 3px double #4A3E18;
border-radius: 10px;
font-size: 13px;
margin: -10px auto 5px;
min-height: 40px;
padding: 4px;
text-align: justify;
text-indent: 10px;
}
.pun table .tcr {
    text-align: center;
    width: 10%;
}
.pun table .tcl {
    width: 90%;
}

Invision

Modification de template

Voilà le code à coller dans PA > Affichage > Template > Général > Index_box
Code:
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="borderwrap">
 <div class="maintitle floated clearfix">
 {catrow.tablehead.L_FORUM}
 <div class="contract" id="b{catrow.tablehead.ID}" onclick="toggleCategory('{catrow.tablehead.ID}');">
    
 </div>
 </div>

 <table cellpadding="0" cellspacing="0" id="{catrow.tablehead.ID}" class="ipbtable index-box">
 <thead>
 <tr>
 <th class="forum">{L_FORUM}</th>
 <th class="last post-info">{L_LASTPOST}</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td colspan="2">

 </td>
 </tr>
 </tfoot>
 <tbody>
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr>
 <td class="row2 icon" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
 <span class="status clearfix" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" />
 </span>
 <div class="par forum-name">
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                                                  <div class="description"><p class="forum-desc">{catrow.forumrow.FORUM_DESC}</p></div>
 </div>
 <!-- BEGIN switch_moderators_links -->
 <div class="mods">
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 </div>
 <!-- END switch_moderators_links -->
 <p>
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </p>

 </td>
 <td class="row1 last-post">
                        <!-- BEGIN ads -->
                        <span class="AD_LastPA">
                            <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                            <span class="AD_LastInfos">
                                <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                {catrow.forumrow.ads.DATE}<br />
                                {catrow.forumrow.ads.LOCATION}
                            </span>
                        </span>
                        <!-- END ads -->
                        <!-- BEGIN avatar -->
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- 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>
                                          <br />
                                          {catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages
 </td>
 </tr>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </div>
 <br />
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
 <ul>
 <!-- BEGIN switch_delete_cookies -->
 <li><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 -->
 <!-- BEGIN switch_user_logged_in -->
 <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 <!-- END switch_user_logged_in -->
 </ul>
</div>
<!-- END switch_on_index -->

Mise en page via la CSS

La CSS commentée succinctement, tu peux me demander de l'aide si tu n'arrives pas à personnaliser.
Elle est à placer dans PA > Affichage > Couleurs > Feuille de style CSS
Code:
.hierarchy {
display:block;
font-variant: small-caps !important; /** Les liens de forums sont en petites majuscules ****/
text-align:center;
border-bottom: 1px solid #4A3E18; /** La ligne sous le lien **/
font-size:14px !important;
letter-spacing: 2px; /** Les lettres sont espacées **/
padding: 4px 0px 4px 0px;
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière le lien // il est possible de mettre une simple couleur **/
background-repeat:repeat;
margin:0;
}
div.description {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: url(https://2img.net/s/t/20/71/54/i_back_title.png);
    border: 3px double #4A3E18;
    border-radius: 10px;
    font-size: 13px;
    margin: 5px auto 5px;
    min-height: 40px;
    padding: 4px;
    text-align: justify;
    text-indent: 10px;
}
table.ipbtable th.forum {
    width: 90%;
}
.last-post{
 text-align:center;
}

ModernBB

Modification de template

Voilà le code à coller dans PA > Affichage > Template > Général > Index_box
Code:
<ul class="linklist top">
 <!-- BEGIN switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
 </li>
 <li>
 <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
 </li>
 <!-- END switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
 </li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside">
 <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
 </li>
 <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="forabg">
 <ul class="topiclist">
 <li class="header">
 <dl class="icon">
 <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
 <dd class="lastpost"><i class="ion-android-time" data-tooltip="{L_LASTPOST}"></i></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist forums">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <li class="row">
 <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
 <dd class="dterm">
 <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 <div class="description">
                                                                  {catrow.forumrow.FORUM_DESC}
                                                          </div>

 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </div>
 </dd>
 <dd class="lastpost">
 <!-- BEGIN ads -->
 <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
 </span>
                            <!-- END ads -->
 
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- 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>
                                                  <br />
                                                  {catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn> sujets - {catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn> messages
 </dd>
 </dl>
 </li>
 <!-- END forumrow -->

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

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
 <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"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var btn_collapse = $('<div></div>', {
 class: 'btn-collapse'
 });

 var btn_collapse_show = $('<i></i>', {
 class: 'ion-android-add-circle hidden',
 'data-tooltip': '{L_EXPEND_CAT}'
 }).appendTo(btn_collapse);

 var btn_collapse_hide = $('<i></i>', {
 class: 'ion-android-remove-circle',
 'data-tooltip': '{L_HIDE_CAT}'
 }).appendTo(btn_collapse);

 var collapsed = [];

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 $(document).on('click', '.btn-collapse', function() {
 $(this).children('.ion-android-add-circle').toggleClass('hidden');
 $(this).children('.ion-android-remove-circle').toggleClass('hidden');
 $(this).parents('.forabg').toggleClass('hidden');

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 if (!$(this).parents('.forabg').hasClass('hidden')) {
 removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

 createCookie('collapsed', collapsed);
 } else {
 collapsed.push('' + $(this).parents('.forabg').data('cindex'));

 createCookie('collapsed', collapsed);
 }
 });

 $('.forabg').each(function(i) {
 $(this).data('cindex', '' + i);

 $(btn_collapse)
 .clone()
 .attr('id', 'forabg' + i)
 .appendTo($(this).find('.header'));

 if ($.inArray('' + i, collapsed) > -1) {
 $(this).toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
 }
 });
});

function removeFromArray(item, array) {
 var i = array.indexOf(item);

 if (i > -1) {
 array = array.splice(i, 1);
 }
}

function createCookie(name, value, days) {
 var expires;

 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 expires = "; expires=" + date.toGMTString();
 } else {
 expires = "";
 }
 document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = encodeURIComponent(name) + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
 }
 return null;
}
//]]>
</script>

Mise en page via la CSS

La CSS commentée succinctement, tu peux me demander de l'aide si tu n'arrives pas à personnaliser.
Elle est à placer dans PA > Affichage > Couleurs > Feuille de style CSS
Code:
.hierarchy {
display:block;
font-variant: small-caps; /** Les liens de forums sont en petites majuscules ****/
text-align:center;
border-bottom: 1px solid #4A3E18; /** La ligne sous le lien **/
font-size:14px !important;
letter-spacing: 2px; /** Les lettres sont espacées **/
padding: 4px 0px 4px 0px;
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière le lien // il est possible de mettre une simple couleur **/
background-repeat:repeat;
margin:0;
}
ul.topiclist dd.dterm, ul.topiclist dt {
    width:80%;
}
ul.topiclist dd.lastpost{
 text-align:center;
  width:20% !important;
}
dd.lastpost span{
 display:inline;
}
dd.lastpost span.color-groups{
 float:none;
}
div.description{
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière les descriptions // il est possible de mettre une simple couleur **/
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border: 3px double #4A3E18;
border-radius: 10px;
font-size: 13px;
margin: 5px auto 5px;
min-height: 40px;
padding: 4px;
text-align: justify;
text-indent: 10px;
}

AwesomeBB

Modification de template

Voilà le code à coller dans PA > Affichage > Template > Général > Index_box
Code:
<ul class="action-bar action-bar-top">
    <!-- BEGIN switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_NEW}">
            <i class="material-icons">new_releases</i> {L_SEARCH_NEW}
        </a>
    </li>
    <li>
        <a href="{U_SEARCH_SELF}">
            <i class="material-icons">account_box</i> {L_SEARCH_SELF}
        </a>
    </li>
    <!-- END switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_UNANSWERED}">
            <i class="material-icons">chat_bubble_outline</i> {L_SEARCH_UNANSWERED}
        </a>
    </li>
    <!-- BEGIN switch_user_logged_in -->
    <li class="rightside">
        <a href="{U_MARK_READ}" accesskey="m">
            <i class="material-icons">done_all</i> {L_MARK_FORUMS_READ}
        </a>
    </li>
    <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="forum {catrow.tablehead.TYPE_TABLE_SECTION}">
    <div class="forum-header">
        <div class="category-title">
            <i class="material-icons">description</i>
            <span>{catrow.tablehead.L_FORUM}</span>
        </div>
        <div class="forum-statistics-header">
        </div>
        <div class="forum-lastpost-header">
            <i class="material-icons" data-tooltip="{L_LASTPOST}">watch_later</i>
            <span>{L_LASTPOST}</span>
        </div>
    </div>
    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
    <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">
        <div class="forum-icon" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">
            <i class="material-icons">forum</i>
        </div>
        <div class="forum-content">
            <div class="forum-description">
                <h3><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h3>
                <div class="bloc-description">
                  <p>{catrow.forumrow.FORUM_DESC}</p>
                </div>
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
            <div class="forum-lastpost">
                <div class="avatar-default">
                    <!-- BEGIN avatar -->
                    {catrow.forumrow.avatar.LAST_POST_AVATAR}
                    <!-- END avatar -->
                    <!-- BEGIN ads -->
                    <img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" />
                    <!-- END ads -->
                </div>
                <div class="forum-lastpost-inner">
                    <!-- BEGIN switch_topic_title -->
                    <a class="topic-title" href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
                    <!-- END switch_topic_title -->
                    <!-- BEGIN ads -->
                    <a class="topic-title" href="{catrow.forumrow.ads.LINK}" title="{catrow.forumrow.ads.TITLE}">{catrow.forumrow.ads.TITLE}</a>
                    <!-- END ads -->
                    <span>
 <!-- BEGIN ads -->
 <span class="forum-lastpost-location">
 <i class="material-icons">place</i>{catrow.forumrow.ads.LOCATION}
 </span>
                        <!-- END ads -->
 <span class="forum-lastpost-author">
 <i class="material-icons">person</i>{catrow.forumrow.USER_LAST_POST}
                                <!-- BEGIN ads -->
                                {catrow.forumrow.ads.ALIAS}
                                <!-- END ads -->
 </span>
 <span class="forum-lastpost-time">
 <i class="material-icons">access_time</i><a href="{catrow.forumrow.U_LATEST_TOPIC_POST}">{catrow.forumrow.LAST_POST_HOUR}</a>
                                <!-- BEGIN ads -->
                                {catrow.forumrow.ads.DATE}
                                <!-- END ads -->
                                                          <br />
                                                          {catrow.forumrow.TOPICS} <span>{L_TOPICS}</span> - {catrow.forumrow.POSTS} <span>{L_POSTS}
 </span>
 </span>
                 
                </div>
            </div>
        </div>
    </div>
    <!-- END forumrow -->

    <!-- BEGIN tablefoot -->
</div><!-- <div class="forum" /> -->
<!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="action-bar action-bar-bottom">
    <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">
            <i class="material-icons">delete</i>&nbsp;{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}
        </a>
    </li>
    <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var btn_collapse = $('<div/>', {
            class: 'forum-hide',
            html: '<div class="forum-hide-icon-a"></div><div class="forum-hide-icon-b"></div>',
        });

        var collapsed = [];

        if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
        }

        $(document).on('click', '.forum-hide', function() {
            $(this).toggleClass('forum-show');
            $(this).parents('.forum').toggleClass('forum-hidden');

            if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
                collapsed = readCookie('collapsed').split(',');
            }

            if (!$(this).parents('.forum').hasClass('forum-hidden')) {
                removeFromArray('' + $(this).parents('.forum').data('cindex'), collapsed);

                createCookie('collapsed', collapsed);
            } else {
                collapsed.push('' + $(this).parents('.forum').data('cindex'));

                createCookie('collapsed', collapsed);
            }
        });

        $('.forum').each(function(i) {
            $(this).data('cindex', '' + i);

            $(btn_collapse)
                .clone()
                .attr('id', 'forum' + i)
                .appendTo($(this).find('.forum-header'));

            if ($.inArray('' + i, collapsed) > -1) {
                $(this).find('.forum-hide').toggleClass('forum-show');
                $(this).toggleClass('forum-hidden');
            }

            if ($(this).find('.type-classified').length) {
                $(this)
                    .addClass('type-table-classified')
                    .find('.forum-statistics-header-posts, .forum-statistics-posts').remove();
            }
        });
    });

    function removeFromArray(item, array) {
        var i = array.indexOf(item);

        if (i > -1) {
            array = array.splice(i, 1);
        }
    }

    function createCookie(name, value, days) {
        var expires;

        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = encodeURIComponent(name) + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
        }
        return null;
    }
    //]]>
</script>

Mise en page via la CSS

La CSS commentée succinctement, tu peux me demander de l'aide si tu n'arrives pas à personnaliser.
Elle est à placer dans PA > Affichage > Couleurs > Feuille de style CSS
Code:
.forum-description h3 {
display:block;
font-variant: small-caps; /** Les liens de forums sont en petites majuscules ****/
text-align:center;
border-bottom: 1px solid #4A3E18; /** La ligne sous le lien **/
font-size:14px !important;
letter-spacing: 2px; /** Les lettres sont espacées **/
padding: 4px 0px 4px 0px !important;
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière le lien // il est possible de mettre une simple couleur **/
background-repeat:repeat;
margin:0;
  float:none;
}
.forum-description{
    width: 70%;
}
.forum-lastpost{
text-align:center;
    width: 30%;
}
div.bloc-description{
background: url('https://2img.net/s/t/20/71/54/i_back_title.png');/** le fond derrière les descriptions // il est possible de mettre une simple couleur **/
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border: 3px double #4A3E18;
border-radius: 10px;
font-size: 13px;
margin: 5px auto 5px;
min-height: 40px;
padding: 4px;
text-align: justify;
text-indent: 10px;
}


J'espère que ça te plaira =) N'hésite surtout pas si tu as besoin d'aide pour personnaliser tout ça.

Revenir en haut
La tambouille des râleuses :: Coup de pouce :: Codes en libre-service
Répondre au sujet
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses

•