Tic tac toe

Apparence des topics avec un nouveau message et des topics verrouillés :

L'ajout d'une description de topic est possible. Si elle est longue, la hauteur du topic s'adaptera.

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

phpBB2

Dans panneau d'administration > Général > Messages et emails > Configuration. Dans le bloc "Messages", à "Séparer les annonces et notes des messages :", cochez "Par un tableau".
Optionnel : Pour activer l'affichage des descriptions de topics, panneau d'administration > Général > Messages et emails > Configuration. Dans le bloc "sujets", à "Afficher la description des sujets :", cochez "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=Roboto|Montserrat:400,900" rel="stylesheet">

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

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->
<div class="topic-wrap">
<table class="topic-wrap-table" width="100%" border="0" cellspacing="0" cellpadding="0">

   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
          <td colspan="7">
          <div class="topic">
            <div class="topic-img">
            <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </div>
            <div class="topic-left">
           
            <div class="topic-titre">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2>
               <a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>
              <div class="topic-auteur">{topics_list_box.row.TOPIC_AUTHOR}<div>{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></div></div>
            <!-- BEGIN switch_description -->
         <div class="topic-desc">
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </div>
         <!-- END switch_description -->
            </div>
            <div class="topic-stats"><div>{topics_list_box.row.REPLIES} réponses</div><div>{topics_list_box.row.VIEWS} vues</div></div>
            <div class="topic-last">{topics_list_box.row.LAST_POST_TIME}<div>{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</div></div>
            <!-- BEGIN single_selection -->
      <div class="topic-select">
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            </div>
      <!-- END single_selection -->
            <!-- BEGIN multi_selection -->
      <div class="topic-select">
                  <input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            </div>
   <!-- END multi_selection -->
          </div>
          </td>
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td> <span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
  </table></div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
  <script>
    $(document).ready(function(){
    $('.topic').each(function(){
    $('.topic-img img[title="Nouveaux messages"]').closest('.topic').addClass('nouveau');
    $('.topic-img img[title="Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses."]').closest('.topic').addClass('verrouille');
    });
    $('.topic-wrap').find('th').closest('.topic-wrap-table').addClass('topic-note');
    });
  </script>

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

Code:

/*LISTE DES SUJETS PAR AWFUL*/
/*Customisation du bloc contenant les sujets (ajout d'un titre, etc)*/
.topic-wrap {
    margin: 10px 0;
}
 .topic-wrap th {
    display: none;
}
 .topic-wrap-table::before , .topic-wrap th:first-child::before {
    content: "topics";
    background: #e9c343;
    display: block;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 20px;
    text-transform: uppercase;
    color: #000;
}
 .topic-wrap-table.topic-note::before {
    content: "notes & annonces";
}
 .topic-wrap th:first-child {
    display: block;
    position: relative;
    height: 20px;
    padding: 0;
}
 .topic-wrap th:first-child::before {
    content: "topics";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*Bloc topic */
 .topic {
    display: flex;
    min-height: 50px;
    background: #202020;
    border: 1px solid #151515;
    color: #868686;
    font-family: "Roboto", sans-serif;
    border-bottom: 0;
}
.topic a, .topic a:hover, .topic a:active {
    text-decoration: none!important;
}
 .topic-left, .topic-stats, .topic-last {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
/*Image nouveau message, verrouillé, etc*/
 .topic-img {
    width: 50px;
    position: relative;
}
 .topic-img img {
    display: none;
}
/*L'image est supprimée et remplacée par un cercle*/
 .topic-img::before {
    content: "";
    height: 30px;
    width: 30px;
    border: 5px solid #2a2a2a;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 15px);
    box-sizing: border-box;
    top: calc(50% - 15px);
}
/*Si le topic est verrouillée, l'image est remplacée par une croix*/
 .topic.verrouille .topic-img::before {
    content: "×";
    height: 30px;
    width: 30px;
    border: 0;
    position: absolute;
    left: calc(50% - 15px);
    box-sizing: border-box;
    top: calc(50% - 15px);
    text-align: center;
    font-size: 50px;
    line-height: 30px;
    color: #2a2a2a;
}
/*Changement de couleur en cas de nouveau message*/
 .topic.nouveau .topic-img::before {
    border-color: #e9c343;
}
 .topic.nouveau.verrouille .topic-img::before {
    color: #e9c343;
}
 .topic-left {
    flex: 1;
}
/*Titre de topic*/
 .topic-titre {
    display: flex;
}
 .topic-titre img {
    align-self: center;
    margin-right: 10px;
}
 .topic-titre h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    margin: 0;
}
 .topic-titre a {
    color: #f3f3f3;
    transition: all 0.3s;
}
 .topic-titre a:hover {
    color: #aaa;
}
 .topic-titre strong {
    margin-right: 3px;
    color: #3e3e3e;
}
/*Auteur du topic*/
 .topic-auteur {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 8px;
    display: flex;
    color: #848484;
}
 .topic-auteur br, .topic-auteur > div img {
    display: none;
}
 .topic-auteur > div {
    align-self: center;
    font-family: "Roboto", sans-serif;
    font-size: 7px;
    margin-left: 10px;
}
 .topic-auteur > div a, .topic.nouveau .topic-last > div > a::before {
    color: #e9c343;
    margin-left: 2px;
    transition: all 0.3s;
}
 .topic-auteur > div a:hover, .topic-last > div > a:hover::before {
    color: #8a7d4f;
}
/*Description de topic*/
 .topic-desc {
    font-size: 9px;
    text-align: justify;
    padding-right: 10px;
}
/*Statistiques*/
 .topic-stats {
    width: 120px;
    text-align: center;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #151515;
    background: #1b1b1b;
    border-right: 1px solid #151515;
    border-left: 1px solid #151515;
}
 .topic-stats > div:first-child {
    position: relative;
    margin-bottom: 8px;
}
 .topic-stats > div:first-child::after {
    position: absolute;
    content:"";
    width: 70px;
    height: 1px;
    background: #2d2d2d;
    bottom: -4px;
    left: calc(50% - 35px);
}
/*Dernier message*/
 .topic-last {
    width: 200px;
    font-size: 10px;
    padding: 0 10px;
}
 .topic-last > div > a::before {
    content: "►";
    margin-left: 0;
    color: #666;
}
 .topic-last > div > a img {
    display: none;
}
.topic-select {
    display: flex;
    align-items: center;
    padding-right: 10px;
}
.topic-select input {
    margin: 0;
}

En bas de votre feuille CSS, dans le bloc d'options, à "Optimiser votre CSS", cochez "Non".

phpBB3

Dans panneau d'administration > Général > Messages et emails > Configuration. Dans le bloc "Messages", à "Séparer les annonces et notes des messages :", cochez "Par un tableau".
Optionnel : Pour activer l'affichage des descriptions de topics, panneau d'administration > Général > Messages et emails > Configuration. Dans le bloc "sujets", à "Afficher la description des sujets :", cochez "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=Roboto|Montserrat:400,900" rel="stylesheet">

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

Code:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
  <!-- BEGIN multi_selection -->
      <script type="text/javascript">

      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
      {
        alert('MAIN');

        var all_checked = true;

        for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
        {
            if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
            {
              all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
            }
        }

        document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }

      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
      {
        alert('ALL');

        for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
        {
            if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
            {
              document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
            }
        }
      }

      </script>
  <!-- END multi_selection -->

  <div class="topic-wrap announcement">
      <div class="inner">

      <ul class="topiclist topics bg_none">
<!-- END header_table -->

<!-- BEGIN header_row -->
      <strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->

  <!-- BEGIN table_sticky -->
        </ul>
</div>
      </div>
      <div class="topic-wrap">
      <div class="inner">

      <ul class="topiclist topics bg_none">
  <!-- END table_sticky -->

      <li <!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >

<div class="topic">
            <div class="topic-img">
            <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </div>
            <div class="topic-left">

            <div class="topic-titre">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2>
              <a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
        </div>
              <div class="topic-auteur">{topics_list_box.row.TOPIC_AUTHOR}<div>{topics_list_box.row.GOTO_PAGE_NEW} <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree --></div></div>
            <!-- BEGIN switch_description -->
        <div class="topic-desc">
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </div>
        <!-- END switch_description -->
            </div>
            <div class="topic-stats"><div>{topics_list_box.row.REPLIES} réponses</div><div>{topics_list_box.row.VIEWS} vues</div></div>
            <div class="topic-last">{topics_list_box.row.LAST_POST_TIME}<div>{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</div></div>
          </div>

      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
  <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
  </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
  </div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
  <script>
    $(document).ready(function(){
    $('.topic').each(function(){
    $('.topic-img img[title="Nouveaux messages"]').closest('.topic').addClass('nouveau');
    $('.topic-img img[title="Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses."]').closest('.topic').addClass('verrouille');
    });

    });
  </script>

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

Code:

/*LISTE DES SUJETS PAR AWFUL*/
/*Customisation du bloc contenant les sujets (ajout d'un titre, etc)*/
.topic-wrap::before {
    content: "topics";
    background: #e9c343;
    display: block;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 20px;
    text-transform: uppercase;
    color: #000;
}
 .topic-wrap.announcement::before {
    content: "notes & annonces";
}
/*Bloc topic */
 .topic {
    display: flex;
    min-height: 50px;
    background: #202020;
    border: 1px solid #151515;
    color: #868686;
    font-family: "Roboto", sans-serif;
    border-bottom: 0;
}
.topic a, .topic a:hover, .topic a:active {
    text-decoration: none!important;
}
 .topic-left, .topic-stats, .topic-last {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
/*Image nouveau message, verrouillé, etc*/
 .topic-img {
    width: 50px;
    position: relative;
}
 .topic-img img {
    display: none;
}
/*L'image est supprimée et remplacée par un cercle*/
 .topic-img::before {
    content: "";
    height: 30px;
    width: 30px;
    border: 5px solid #2a2a2a;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 15px);
    box-sizing: border-box;
    top: calc(50% - 15px);
}
/*Si le topic est verrouillée, l'image est remplacée par une croix*/
 .topic.verrouille .topic-img::before {
    content: "×";
    height: 30px;
    width: 30px;
    border: 0;
    position: absolute;
    left: calc(50% - 15px);
    box-sizing: border-box;
    top: calc(50% - 15px);
    text-align: center;
    font-size: 50px;
    line-height: 30px;
    color: #2a2a2a;
}
/*Changement de couleur en cas de nouveau message*/
 .topic.nouveau .topic-img::before {
    border-color: #e9c343;
}
 .topic.nouveau.verrouille .topic-img::before {
    color: #e9c343;
}
 .topic-left {
    flex: 1;
}
/*Titre de topic*/
 .topic-titre {
    display: flex;
}
 .topic-titre img {
    align-self: center;
    margin-right: 10px;
}
 .topic-titre h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    margin: 0;
    font-weight: bold;
}
 .topic-titre a {
    color: #f3f3f3;
    transition: all 0.3s;
}
 .topic-titre a:hover {
    color: #aaa;
}
 .topic-titre strong {
    margin-right: 3px;
    color: #3e3e3e;
    font-size: 15px;
}
/*Auteur du topic*/
 .topic-auteur {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 8px;
    display: flex;
    color: #848484;
}
 .topic-auteur br, .topic-auteur > div img {
    display: none;
}
 .topic-auteur > div {
    align-self: center;
    font-family: "Roboto", sans-serif;
    font-size: 7px;
    margin-left: 10px;
}
 .topic-auteur .pagination {
    float: none;
    margin-top: 0;
    text-align: right;
    width: auto;
    font-weight: normal;
}
 .topic-auteur .pagination::before {
    content: "aller à la page";
}
 .topic-auteur > div::before {
    content: "[";
    margin-right: 3px;
}
 .topic-auteur > div::after {
    content: "]";
    margin-left: 3px;
}
 .topic-auteur > div:empty {
    display: none;
}
 .pagination span.page-sep {
    display: inline;
}
 .topic-auteur .pagination span a, .topic-auteur .pagination span a:active, .topic-auteur .pagination span a:link, .topic-auteur .pagination span a:visited {
    background-color: transparent;
    border: 0;
    color: #e9c343;
    font-size: inherit;
    margin: 0 0 0 2px;
    padding: 0;
    transition: all 0.3s;
}
 .topic.nouveau .topic-last > div > a::before {
    color: #e9c343;
    margin-left: 2px;
    transition: all 0.3s;
}
 .topic-auteur .pagination span a:hover {
    background-color: transparent;
    color: #8a7d4f;
}
 .topic-last > div > a:hover::before {
    color: #8a7d4f;
}
/*Description de topic*/
 .topic-desc {
    font-size: 9px;
    text-align: justify;
    padding-right: 10px;
}
/*Statistiques*/
 .topic-stats {
    width: 120px;
    text-align: center;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #151515;
    background: #1b1b1b;
    border-right: 1px solid #151515;
    border-left: 1px solid #151515;
}
 .topic-stats > div:first-child {
    position: relative;
    margin-bottom: 8px;
}
 .topic-stats > div:first-child::after {
    position: absolute;
    content:"";
    width: 70px;
    height: 1px;
    background: #2d2d2d;
    bottom: -4px;
    left: calc(50% - 35px);
}
 .topic-last {
    width: 200px;
    font-size: 10px;
    padding: 0 10px;
}
 .topic-last > div > a::before {
    content: "►";
    margin-left: 0;
    color: #666;
}
 .topic-last > div > a img {
    display: none;
}


En bas de votre feuille CSS, dans le bloc d'options, à "Optimiser votre CSS", cochez "Non".