Jawn

# [CATÉGORIES - PURPLE AND ROUND] - Jeu 28 Oct - 1:43
![[CATÉGORIES - PURPLE AND ROUND] M7laO2C](https://imgur.com/M7laO2C.png)
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
|
|