Artemis
| Sujet: Catégories #5 Ven 8 Mai - 17:14 | |
| Codes
Code compatible avec les forums PHPBB2 Ces catégories ont été maquettées par Hozber, du forum WOORURU, merci de la créditer également ! Template index_box : - Code:
-
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"/> <!-- BEGIN catrow --> <!-- BEGIN tablehead --> <section class="titre_categories"> {catrow.tablehead.L_FORUM} </section> <!-- END tablehead --> <!-- BEGIN cathead --> <!-- END cathead --> <!-- BEGIN forumrow --> <div class="categories_content"> <div class="image_description_et_stats"> <div> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </div> <div class="image_description"></div> <div class="stats_categories"> {catrow.forumrow.POSTS} {L_POSTS} - {catrow.forumrow.TOPICS} {L_TOPICS} </div> <div class="avatar_membre"> <!-- BEGIN avatar --> {catrow.forumrow.avatar.LAST_POST_AVATAR} <!-- END avatar --> </div> </div> <div class="description_et_dernier_message"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <p> {catrow.forumrow.FORUM_DESC} </p> <div class="dernier_message"> {catrow.forumrow.LAST_POST} </div> </div> </div> <div class="sous_forum_liens"> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} </div> <!-- END forumrow --> <!-- BEGIN catfoot --> <!-- BEGIN inc --> <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"> <img src="{SPACER}" height="0" width="46" /> </td> <!-- END inc --> <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"> <img src="{SPACER}" alt="" height="1" width="1" /> </td> <!-- END catfoot --> <!-- BEGIN tablefoot --> <img src="{SPACER}" alt="" height="5" width="1" /> <!-- END tablefoot --> <!-- END catrow --> CSS :
- Code:
-
.titre_categories { width: 1000px; height: 70px; margin: auto; }
.titre_categories h2 { width: 100%; text-align: center; color: #5cb3b3; text-transform: uppercase; font: 55px 'fjalla one', sans-serif; margin: 0; }
.categories_content { width: 1000px; height: 188px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #efefef; margin: auto; position: relative; -webkit-box-shadow: 0px 0px 5px #d5d5d5; box-shadow: 0px 0px 5px #d5d5d5; margin-bottom: 20px; }
.image_description_et_stats { width: 380px; height: 190px; position: relative; text-align: center; }
.image_description_et_stats .image_description { position: absolute; top: 0; left: 0; z-index: 1; }
.image_description_et_stats div:nth-child(1) { position: relative; z-index: 2; display: inline-block; width: 100px; margin-top: -10px; height: auto; }
.image_description_et_stats div:nth-child(1) img { -webkit-box-shadow: 0px 0px 3px #cfcfcf; box-shadow: 0px 0px 3px #cfcfcf; }
.stats_categories { width: 250px; height: 31px; display: inline-block; position: absolute; background: rgba(251, 251, 251, 0.7); z-index: 3; bottom: 15px; left: 15px; font: 17px 'fjalla one', sans-serif; text-transform: uppercase; color: #4f7944; line-height: 32px; }
.avatar_membre { width: 100px; height: 100px; overflow: hidden; border-radius: 50%; position: absolute; z-index: 4; right: 5px; top: 45px; border: 5px solid white; -webkit-box-shadow: 0px 0px 9px #aaa9a9; box-shadow: 0px 0px 9px #aaa9a9; }
.avatar_membre img { width: 100px; height: 100px; -o-object-fit: cover; object-fit: cover; }
.description_et_dernier_message { width: 820px; height: 188px; background: #efefef; position: absolute; right: 0; }
.description_et_dernier_message > a { width: 610px; height: 40px; font: 30px 'fjalla one', sans-serif; text-transform: uppercase; color: #a8d056 !important; display: block; position: absolute; right: 0; text-align: center; text-decoration: none; line-height: 70px; }
.description_et_dernier_message p { width: 585px; height: 95px; margin: 60px 0px 0px 210px; text-align: justify; overflow: auto; font: 12px 'calibri', sans-serif; color: #558456; line-height: 11px; }
.dernier_message { width: 695px; height: 23px; position: absolute; bottom: 0; right: 0; font: 12px 'calibri', sans-serif; color: #558456; z-index: 99; text-align: center; }
.dernier_message a { font: 12px 'calibri', sans-serif; text-decoration: none; color: #5cb3b3; display: inline-block !important; margin-right: 2px; }
.dernier_message strong { font: 12px 'calibri', sans-serif; font-weight: normal; }
.dernier_message br { display: none; }
.dernier_message link { display: inline-block; }
.sous_forum_liens { width: 710px; min-height: 40px; margin: auto; margin-left: 317px; margin-top: -20px; text-align: center; font-size: 0; padding-top: 10px; padding-bottom: 10px; }
.sous_forum_liens a { font: 16px 'fjalla one', sans-serif; text-transform: uppercase; text-decoration: none; color: #4f7944; }
.sous_forum_liens a:nth-of-type(2n+1) { color: #91af99; }
.sous_forum_liens a::after { content: " "; }
.categories_content p img { position: absolute !important; top: 0 !important; left: -180px !important; z-index: 1; width: 380px; height: 188px; -o-object-fit: cover; object-fit: cover; -webkit-clip-path: polygon(0 0, 100% 0%, 69% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 69% 100%, 0% 100%); border: 4px solid white; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; } En cas de soucis avec ce code, laissez-moi un petit message ici ! c: |
|