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.
-40%
Le deal à ne pas rater :
-40% Nike Crater Impact SE
68.97 € 114.99 €
Voir le deal

Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
[CATÉGORIES - PURPLE AND ROUND] M7laO2C
L'image grise/en dégradé sur la seconde catégorie correspond à l'image que vous pouvez mettre dans vos catégories directement depuis votre panneau d'administration.

Remplacer l'intégralité de votre template index_box par le HTML :
Code:
<div class="ashita_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 -->
</div>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->   

<div class="ashita_cat_title">{catrow.tablehead.L_FORUM}</div>

<!-- END tablehead -->
<!-- BEGIN forumrow -->

<div class="ashita_cat_total">
  
  <div class="ashita_cat_left">
    <div class="ashita_cat_inside_title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    
    <div class="ashita_cat_middle">
      <div class="ashita_cat_ima"></div>
    <div class="ashita_cat_desc">{catrow.forumrow.FORUM_DESC}</div>
    </div>
    
    <div class="ashita_cat_soufo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
    <div class="ashita_cat_stats">{catrow.forumrow.TOPICS} sujets ♚ {catrow.forumrow.POSTS} messages</div>
  </div>
  
  <div class="ashita_cat_right">
    <div class="ashita_cat_icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat 100%;"></div>
    <div class="ashita_cat_ava">
      <!-- BEGIN avatar -->
      <div class="ashita_cat_inside_ava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
      <!-- END avatar -->
    </div>
    
    <div class="ashita_cat_lastpost">
      <!-- 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}
    </div>
  </div>
  
</div>

<!-- END forumrow -->

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

<!-- BEGIN switch_on_index -->
<div class="ashita_link_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 -->
</div>
<!-- END switch_on_index -->

Puis ajoutez dans votre CSS :
Code:
@font-face {font-family: 'goku';
  src: url('https://dl.dropbox.com/s/f0xz75ihp348uvx/goku-webfont.woff2')
    format('woff2'), url('https://dl.dropbox.com/s/gk8u3q89you9tbd/goku-webfont.woff')
    format('woff');
  font-weight: normal;
  font-style: normal;
}
.ashita_cat_title {
    padding: 20px;
    background-image: url(https://imgur.com/HJVr1aF.png);
    border-radius: 30px;
    background-color: #6c7499;
    background-blend-mode: color-dodge;
}
.ashita_cat_title h2 {
    text-align: center;
    color: #2b2b2b;
    font: 45px Goku;
    letter-spacing: 2px;
    text-transform: lowercase;
    text-shadow: 1px 1px 1px #ccc;
}
.ashita_cat_total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px;
    border-radius: 30px;
    background: #2b2b2b;
    margin: 15px 0px;
    position: relative;
    z-index:9;
    overflow: hidden;
}
.ashita_cat_total::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: url(https://imgur.com/iAQMszb.png);
    width: 230px;
    height: 150px;
    background-size: 100%;
    margin: -30px 0px 0px -30px;
    mix-blend-mode: color-burn;
    opacity: 0.4;
}
.ashita_cat_left {
    width: 566px;
    padding-right: 30px;
    position:relative;
}
.ashita_cat_inside_title {
    width: 100%;
    border-bottom: 2px dotted #9d93ac;
}
.ashita_cat_inside_title a {
    font: 25px Goku;
    background: linear-gradient(to right, #cecad4, #9d93ac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: lowercase;
    letter-spacing: 2px;
}
.ashita_cat_middle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.ashita_cat_ima {
    width: 150px;
    height: 92px;
    margin-top: 15px;
    background: linear-gradient(to right, #2b2b2b, #9d93ac);
    border-radius: 30px;
}
.ashita_cat_desc {
    text-align: justify;
    padding: 0px 10px 0px 0px;
    color: #ccc;
    font: 10px Montserrat;
    height: 92px;
    overflow: auto;
    margin: 15px 0px;
    width: 370px;
}
.ashita_cat_desc img {
    position: absolute;
    left: 0px;
    height: 92px;
    width: 150px;
    border-radius: 30px;
}
.ashita_cat_soufo {
    font-size: 0px;
    height: 30px;
    overflow: auto;
}
.ashita_cat_soufo a {
    display: inline-block;
    padding: 5px;
    margin: 3px;
    color: #2b2b2b;
    background: linear-gradient(to right, #cecad4, #9d93ac);
    font: 10px Raleway;
    text-transform: lowercase;
    border-radius: 30px;
}
.ashita_cat_stats {
    font: 50px Goku;
    text-transform: lowercase;
    color: #cecad4;
    position: absolute;
    margin: -14px 0px 0px 4px;
    opacity: 0.05;
}
.ashita_cat_right {
  width:300px;
  position:relative;
}
.ashita_cat_icon {
    position: absolute;
    width: 200px;
    height: 200px;
    object-fit: cover;
    transform: rotateY(180deg);
    background-size: 100% !important;
    margin: -80px 0px 0px 150px;
}
.ashita_cat_ava {
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.ashita_cat_inside_ava {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    overflow: hidden;
    border: solid 10px #6c7499;
}
.ashita_cat_inside_ava img {
  width:100%;
}
.ashita_cat_lastpost {
    text-align: right;
    color: #ccc;
    font: 9px Raleway;
    padding-top: 10px;
    height: 54px;
}
.ashita_cat_lastpost a {
    font: 15px Goku;
    text-transform: lowercase;
    letter-spacing: 1px;
}

Pas de nouveau message :
Code:
https://imgur.com/n2F3ZL4.png

Nouveau message :
Code:
https://imgur.com/qrB49E1.png

Pensez bien à cocher "non" à "optimisation de votre CSS" et le tour sera joué ! Pensez également à bien rajouter un ".01" ou un "#01" devant le titre de votre catégorie dans le panneau d’administration !
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum