epsilon
forum de libre service de codage,
possibilité de commander des designs,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
RENDU:
Topic list 04 — Frozen in Time 6zjs

Liste des sujets 04

— frozen in time —
Fiche technique
Version(s) des navigateurs : Chrome, Mozilla, Safari, Brave.
Dimensions : 950px de large, donc largeur minimum du forum 950px et plus.
Version(s) du forum : ModernBB.
Couleurs proposées : Teintes de bleu du plus foncé au plus clair : #1f2326, #1e3030, #1a494f
Police(s) utilisée(s) : Castoro & Open Sans.


Autre(s) détail(s)
Pour afficher les mentions "notes & annonces" et "sujets", il faut aller dans le Panneau d'administration -> Général -> Messages et Emails
-> Configuration -> Trouver "Séparer les annonces et notes des autres sujets :" -> Cocher "par un tableau" (sinon ça ne fonctionnera pas.)
Me créditer n'est pas une option.
Sherlock | www.


Sherlock
Sherlock
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Mediocrity knows nothing higher than itself; but talent instantly recognizes genius.
Template topics_list_box en entier :

Code:
<div class="FIT_topiclist_blockgeneral">
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<div class="FIT_topiclist_titleannouncement">{topics_list_box.row.L_TITLE}</div>
<ul class="topiclist topics bg_none">
<!-- END header_table -->
<!-- BEGIN header_row -->
<!-- END header_row -->
<!-- BEGIN topic -->
<!-- BEGIN table_sticky -->
</ul>
<div class="FIT_topiclist_titleannouncement">{topics_list_box.row.topic.table_sticky.L_TITLE}</div>
<ul class="topiclist topics bg_none">
<!-- END table_sticky -->

<div class="FIT_topiclist_background">
  
  <div class="FIT_topiclist_blocklastpost">      
    <p>Dernier message</p>
    <div style="width: 280px;height:35px;">{topics_list_box.row.LAST_POST_AUTHOR}</div>
        <div>{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}</div>
  </div>
  
  <div class="FIT_topiclist_blockavatar">
<!-- BEGIN avatar -->
{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
    </div>
  
<div class="FIT_topiclist_blockinformations">
<div class="FIT_topiclist_titleforum"><a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></div>

  <div class="FIT_topiclist_description">
  <!-- BEGIN switch_description -->
  {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
<!-- END switch_description -->
    </div>
  <div class="FIT_topiclist_blockpostauthor">
  <div>{topics_list_box.row.TOPIC_AUTHOR}</div>
  </div>
  
  <div class="FIT_topiclist_blockstats">
  <div>{topics_list_box.row.REPLIES} réponse(s)</div>
<div>{topics_list_box.row.VIEWS} vue(s)</div>
  </div>

  </div>
</div>
<!-- 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>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
</div>

Template viewforum_body en entier :

Code:
{BOARD_INDEX}

<div class="FIT_topiclist_title">
  <div>{FORUM_NAME}</div>

  <p> <a href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}</p>
</div>

<!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
 <!-- END switch_user_authpost -->

{TOPICS_LIST_BOX}

<div class="topic-actions">
<div class="FIT_subjectlist_pagination">{PAGINATION}</div>
</div>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
 <fieldset class="vf_jumpbox">
 <label>{L_JUMP_TO}:</label>
 {S_JUMPBOX_SELECT}
 <input class="button2" type="submit" value="{L_GO}" />
 </fieldset>
</form>

<div class="FIT_subjectlist_moderators">
 <div>{L_TABS_PERMISSIONS}</div>
 <p>{S_AUTH_LIST}</p>
 </div>

CSS :

Code:
:root {
--font-titre: 'Castoro', serif;
--font-normal: 'Open Sans', sans-serif;
  
--first-color: #1f2326; /* bleu foncé presque noir */
--second-color: #1e3030; /* bleu-vert foncé */
--third-color: #1a494f; /* couleur teal */
--font-color: #f1f1f1; /* couleur blanche de la font */
}

/* -------------------- DEBUT LISTE DES SUJETS || SHERLOCK © ME CREDITER QUELQUE PART N'EST PAS UNE OPTION -------------------- */
/* ----- DEBUT TEMPLATE TOPIC_LIST_BOX ----- */
.FIT_topiclist_blockgeneral {
  width:950px;
  height:auto;
  margin:0 auto;
}
.FIT_topiclist_titleannouncement {
    width: 950px;
    margin: 10px 0;
    height: 50px;
    background-color: var(--first-color);
    padding: 10px;
    color: #111;
    color: var(--font-color);
    font: 25px var(--font-titre);
    border-bottom: 10px var(--third-color) solid;
}
.FIT_topiclist_background {
    width: 950px;
    height: 135px;
    margin: 10px auto;
    display: flex;
    background-color: var(--second-color);
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
}
.FIT_topiclist_blocklastpost {
    width: 300px;
    height: 135px;
    background-color: var(--second-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.FIT_topiclist_blocklastpost > p {
    font: 12px var(--font-normal);
    color: var(--font-color);
    border-bottom: 1px var(--font-color) solid;
    height: 25px;
    letter-spacing: 1px;
    width: 300px;
    margin: 10px;
    padding: 5px;
}
.FIT_topiclist_blocklastpost > div {
    font: 11px var(--font-normal);
    font-weight: 100;
    width: 280px;
    margin: 0 auto 10px auto;
    height: 20px;
    background-color: #f1f1f1;
    padding: 4px;
    text-align: center;
}
.FIT_topiclist_blocklastpost strong {
    font: 12px var(--font-titre);
    text-transform: uppercase;
    line-height: 28px;
    text-align: center;
}
.FIT_topiclist_blockavatar {
    width: 200px;
    background-color: var(--third-color);
}
.FIT_topiclist_blockavatar img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 100%;
    border: 5px #f1f1f1 solid;
    margin: 12px 45px;
}
.FIT_topiclist_blockinformations {
    width: 450px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #1f2326;
}
.FIT_topiclist_titleforum {
    width: 450px;
    height: 20px;
    margin: 10px;
    border-bottom: 1px #f1f1f1 solid;
    text-align: right;
}
.FIT_topiclist_titleforum a {
    font: 12px var(--font-normal);
    letter-spacing: 2px;
    color: var(--font-color);
    padding:5px;
}
.FIT_topiclist_blockstats {
    width: 450px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0px 0;
}
.FIT_topiclist_blockstats > div {
    background-color: var(--second-color);
    width: 205px;
    height: 25px;
    padding: 5px;
    text-align: center;
    font: 12px var(--font-normal);
    font-weight: 100;
    color: var(--font-color);
}
.FIT_topiclist_blockpostauthor {
    background-color: var(--third-color);
    width: 430px;
    height: 35px;
    text-align: center;
    margin-top: -8px;
    letter-spacing: 1px;
}
.FIT_topiclist_blockpostauthor > div {
    text-align: center;
    font: 15px var(--font-titre);
    padding: 9px;
}
.FIT_topiclist_description {
    width: 450px;
    font: 12px var(--font-normal);
    color: var(--font-color);
    font-weight: 100;
    padding: 10px;
    margin: -25px auto;
    min-height: 20px;
    overflow: auto;
}
/* ----- FIN TOPIC_LIST_BOX ----- */

/* ----- DEBUT VIEWFORUM_BODY ----- */
.FIT_topiclist_title {
    text-align: center;
    width: 950px;
    height: 110px;
    background-color: var(--first-color);
    border-right: 50px var(--third-color) solid;
    margin: 10px 0;
}
.FIT_topiclist_title > div {
    font: 50px var(--font-titre);
    text-transform: uppercase;
    color: var(--font-color);
    padding-top:20px;
}
.FIT_topiclist_title > p {
    font: 12px var(--font-normal);
    margin-top: -10px;
}
.FIT_topiclist_title > p a{
  color:var(--font-color);
}
.FIT_subjectlist_pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px var(--first-color) solid;
    width: 950px;
    height: 50px;
    text-align: center;
    font-size: 0;
    margin: 0 auto;
}
.FIT_subjectlist_pagination > a {
    font: 12px var(--font-normal);
    color: var(--first-color);
    margin-top: 13px;
}
.FIT_subjectlist_pagination span strong {
    background-color: rgba(0,0,0,0.8);
    border-radius: 3px;
    display: inline-block;
    font: 12px var(--font-normal);
    color: var(--font-color);
    line-height: 30px;
    margin: 10px 10px 0 20px;
    width: 40px;
}
.FIT_subjectlist_pagination span a:active, .FIT_subjectlist_pagination span a:link, .FIT_subjectlist_pagination span a:visited {
    background-color: rgba(255,255,255,0.8);
    border-radius: 3px;
    color: var(--first-color);
    display: inline-block;
    font: 12px var(--font-normal);
    line-height: 30px;
    margin: 10px 10px 0 0;
    width: 40px;
}
.FIT_subjectlist_pagination span a.pag-img img {
display:none;
}
.FIT_subjectlist_moderators {
    width: 950px;
    height: 100px;
    background-color: var(--first-color);
    border-right: 50px var(--third-color) solid;
    padding: 10px;
    margin: 10px auto;
}
.FIT_subjectlist_moderators > div {
    color: var(--third-color);
    font: 20px var(--font-titre);
    border-bottom: 1px var(--third-color) solid;
    height: 30px;
    text-align: center;
}
.FIT_subjectlist_moderators > p {
  color:var(--font-color);
font: 12px var(--font-normal);
padding:10px;
  text-align:center;
}
/* ----- FIN TEMPLATE VIEWFORUM_BODY ----- */
/* -------------------- FIN LISTE DES SUJETS || SHERLOCK © -------------------- */

Si vous voulez changer les couleurs et/ou de police, il suffit de changer les valeurs que vous souhaitez à cet endroit (les valeurs : la couleur et le nom de la police) :

Code:
:root {
--font-titre: 'Castoro', serif;
--font-normal: 'Open Sans', sans-serif;
  
--first-color: #1f2326; /* bleu foncé presque noir */
--second-color: #1e3030; /* bleu-vert foncé */
--third-color: #1a494f; /* couleur teal */
--font-color: #f1f1f1; /* couleur blanche de la font */
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum