Idyllic Test Forum
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Idyllic Test Forum

Forum test

Le Deal du moment :
Display Star Wars Unlimited Ombres de la Galaxie : ...
Voir le deal

WIP // Catégories full width 1
Idyllic Test Forum :: Votre 1ère catégorie :: Section aléatoire 2
Jei
Jei
Administrateur
Messages : 19
Date d'inscription : 31/07/2022
https://idyllic-test2.forumactif.com
#13
index_box
Code:
<style>
div#wrap {
    max-width: unset;
    padding: 24px 0;
}
</style>

<div class="categories">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="catcontainer" data-name="{catrow.tablehead.L_FORUM}">
   <div class="cat_name">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->

<!-- BEGIN forumrow -->
   <div class="forumrow" data-folder="{catrow.forumrow.FORUM_FOLDER_IMG}">
      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
             <div class="forumdesc">{catrow.forumrow.FORUM_DESC}</div>
             <div style="display: none !important;" class="forumtestlinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}{forumrow.L_SUBFORUM_STR}{forumrow.SUBFORUMS}</div>
             <div class="forumshowlinks">Voir les sous-forums</div>
             <div class="forumlinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}{forumrow.L_SUBFORUM_STR}{forumrow.SUBFORUMS}</div>
      
             <div class="lastpost">
         <!-- BEGIN avatar --><span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span><!-- END avatar -->
         <!-- 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 -->
                     <div class="lastpost_ulp">{catrow.forumrow.USER_LAST_POST}</div>
             </div>
     </div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>

CSS
Code:
.catcontainer[data-name="<h2>Votre 1ère catégorie</h2>"] {
    background-color: #ff5500;
    padding-top: 2%;
    background-image: url('https://i.imgur.com/kuJvJUy.png');
    background-size: 100% auto;
}

.catcontainer[data-name="<h2>Votre 1ère catégorie</h2>"]::after {
    content: url("data:image/svg+xml; utf8,%3Csvg id='wave' style='transform:rotate(180deg); transition: 0.3s' viewBox='0 0 1440 100' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sw-gradient-0' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop stop-color='%23ff5500' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23ff5500' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath style='transform:translate(0, 0px); opacity:1' fill='url(%23sw-gradient-0)' d='M0,20L60,28.3C120,37,240,53,360,63.3C480,73,600,77,720,70C840,63,960,47,1080,33.3C1200,20,1320,10,1440,20C1560,30,1680,60,1800,61.7C1920,63,2040,37,2160,23.3C2280,10,2400,10,2520,11.7C2640,13,2760,17,2880,26.7C3000,37,3120,53,3240,58.3C3360,63,3480,57,3600,58.3C3720,60,3840,70,3960,73.3C4080,77,4200,73,4320,73.3C4440,73,4560,77,4680,70C4800,63,4920,47,5040,35C5160,23,5280,17,5400,18.3C5520,20,5640,30,5760,28.3C5880,27,6000,13,6120,18.3C6240,23,6360,47,6480,58.3C6600,70,6720,70,6840,60C6960,50,7080,30,7200,28.3C7320,27,7440,43,7560,46.7C7680,50,7800,40,7920,36.7C8040,33,8160,37,8280,40C8400,43,8520,47,8580,48.3L8640,50L8640,100L8580,100C8520,100,8400,100,8280,100C8160,100,8040,100,7920,100C7800,100,7680,100,7560,100C7440,100,7320,100,7200,100C7080,100,6960,100,6840,100C6720,100,6600,100,6480,100C6360,100,6240,100,6120,100C6000,100,5880,100,5760,100C5640,100,5520,100,5400,100C5280,100,5160,100,5040,100C4920,100,4800,100,4680,100C4560,100,4440,100,4320,100C4200,100,4080,100,3960,100C3840,100,3720,100,3600,100C3480,100,3360,100,3240,100C3120,100,3000,100,2880,100C2760,100,2640,100,2520,100C2400,100,2280,100,2160,100C2040,100,1920,100,1800,100C1680,100,1560,100,1440,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z'%3E%3C/path%3E%3C/svg%3E");
}

.cat_name {
    display: block;
    margin-top: 15px;
}

.catcontainer::after {
    display: block;
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: -100px;
    left: 0;
    z-index: 2;
}

.catcontainer {
    padding: 100px 2.5% 2% 2.5%;
    position: relative;
    text-align: center;
}

.catcontainer[data-name="<h2>Partie RPG</h2>"] {
    background-color: #6236a1;
    background-image: url('https://i.imgur.com/qxgs2ns.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.catcontainer[data-name="<h2>Partie RPG</h2>"]::after {
    content: url("data:image/svg+xml; utf8,%3Csvg id='wave' style='transform:rotate(180deg); transition: 0.3s' viewBox='0 0 1440 100' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sw-gradient-0' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop stop-color='%236236a1' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%236236a1' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath style='transform:translate(0, 0px); opacity:1' fill='url(%23sw-gradient-0)' d='M0,20L60,28.3C120,37,240,53,360,63.3C480,73,600,77,720,70C840,63,960,47,1080,33.3C1200,20,1320,10,1440,20C1560,30,1680,60,1800,61.7C1920,63,2040,37,2160,23.3C2280,10,2400,10,2520,11.7C2640,13,2760,17,2880,26.7C3000,37,3120,53,3240,58.3C3360,63,3480,57,3600,58.3C3720,60,3840,70,3960,73.3C4080,77,4200,73,4320,73.3C4440,73,4560,77,4680,70C4800,63,4920,47,5040,35C5160,23,5280,17,5400,18.3C5520,20,5640,30,5760,28.3C5880,27,6000,13,6120,18.3C6240,23,6360,47,6480,58.3C6600,70,6720,70,6840,60C6960,50,7080,30,7200,28.3C7320,27,7440,43,7560,46.7C7680,50,7800,40,7920,36.7C8040,33,8160,37,8280,40C8400,43,8520,47,8580,48.3L8640,50L8640,100L8580,100C8520,100,8400,100,8280,100C8160,100,8040,100,7920,100C7800,100,7680,100,7560,100C7440,100,7320,100,7200,100C7080,100,6960,100,6840,100C6720,100,6600,100,6480,100C6360,100,6240,100,6120,100C6000,100,5880,100,5760,100C5640,100,5520,100,5400,100C5280,100,5160,100,5040,100C4920,100,4800,100,4680,100C4560,100,4440,100,4320,100C4200,100,4080,100,3960,100C3840,100,3720,100,3600,100C3480,100,3360,100,3240,100C3120,100,3000,100,2880,100C2760,100,2640,100,2520,100C2400,100,2280,100,2160,100C2040,100,1920,100,1800,100C1680,100,1560,100,1440,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z'%3E%3C/path%3E%3C/svg%3E");
}

.cat_name {
    margin: 2% .5%;
    text-align: left;
}

.cat_name h2 {
    color: white;
    font-weight: 400;
    font-size: 24pt;
}

.forumrow {
    display: inline-block;
    width: 30%;
    background-color: #ffffffd1;
    vertical-align: top;
    min-height: 250px;
    margin: 1%;
    box-sizing: border-box;
    padding: 2% 2% 100px 2%;
    text-align: left;
    position: relative;
}

a.forumtitle {
    color: black !important;
    font-weight: 500;
    font-size: 15pt;
}

.forumrow .lastpost {
    position: absolute;
    left: 2%;
    bottom: 2%;
    height: 75px;
    width: 96%;
    background-color: #ffffff75;
    box-sizing: border-box;
    padding: 8px 2% 0 2%;
}

.forumlinks {
    background-color: #efefef;
    padding: 1% 200px 1% 2%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    font-size: 0;
    display: none;
}

.forumlinks:empty {
    display: none !important;
}

.forumlinks:empty {
    display: none;
}

.forumrow a.last-post-icon {
    background-color: #00000025;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 7pt;
    padding: .75% 1.5%;
    margin-left: 1%;
    opacity: .65;
    transition: all .5s ease-in-out;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

.forumrow a.last-post-icon img {
    display: none;
}

.forumrow a.last-post-icon::before {
    content: "Voir le dernier message";
}

.forumrow a.last-post-icon:hover {
    opacity: 1;
    color: black;
}

.forumshowlinks {
    background-color: #00000025;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 7pt;
    padding: .75% 1.5%;
    margin-left: 1%;
    opacity: .65;
    transition: all .5s ease-in-out;
    position: absolute;
    right: calc(2% + 5px);
    top: calc(2% + 5px);
    cursor: pointer;
    z-index: 3;
}

.forumshowlinks:hover {
    opacity: 1;
    color: black;
}

.forumlinks a {
    font-size: 10.5pt;
    display: block;
    margin: 1% 0 1% 2%;
    font-weight: 500;
}

.catcontainer[data-name="<h2>Votre 1ère catégorie</h2>"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75px;
    background-image: linear-gradient(0deg, #ff5500, transparent);
}

JS
Code:
$('.forumshowlinks').on('click', function() {
    $(this).next().fadeToggle('150');
});
Lun 17 Oct - 21:01
Vous ne pouvez pas répondre aux sujets dans ce forum