KoalaVolant

Lun 13 Mai 2024 - 9:58

Version du forum : ModernBB

Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Glassormophism"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".

Particularités du code :
- Crédits : KoalaVolant
- Les images se redimensionnent toutes seules

Couleurs & Fonts

Pour rappel, ce code appartient à un thème complet. Si vous utilisez déjà d'autres codes de ce thème, vous pouvez esquiver cette partie. Elle concerne les couleurs, et les polices d'écriture.

Sinon : les couleurs sont à placer où vous voulez dans le CSS, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.

Ce code utilise un système de “variables de couleurs". En gros, vous modifiez les couleurs directement dans les variables, et elles se modifient partout où cette variable aura été placée.
Exemple : Si vous modifiez --color1:#fff; par --color1:black; tous les endroits du CSS qui possèdent --color1 en variable seront en noir.

Si l'agencement ne vous plais pas, vous pouvez bien sûr changer le nom des variables, changer qui a quel variable (changer color1 en color2).

Note : Si vous voulez qu’on modifie les codes pour vous, suivez un de ces boutons

Personnaliser mon code
Signaler un souci

Pour copier coller le ":root" il faut aller dans le Panneau d'administration > Affichage > Couleurs et CSS > Feuille de style CSS et copier coller ça :

Code:

:root{ --color1:#C8BBDE; --color2: #806E9F; --font1:Montserrat; --fond1: linear-gradient(90deg, #3C395B 50%, #3F2E3A 73.23%); --fond2: rgba(103, 100, 148, 0.50); --fond3: linear-gradient(180deg, rgba(201, 137, 190, 0.20) 0%, rgba(146, 131, 176, 0.16) 100%); --fond3hover:linear-gradient(-180deg, rgba(201, 137, 190, 0.40) 0%, rgba(146, 131, 176, 0.40) 100%); --fond4:rgba(255,255,255,0.3); --fond5: rgba(156, 115, 144, 0.30); --fond6: rgb(94,68,86); --txt1:#DEDEDE; --txt2:#E1BCDB; --txt3:#fff; --border1:#847FC1; --border2: #AF86A3; }

Attention, la police d'écriture utilisées sur ce thème est "Montserrat". Il faut aller dans le panneau d'administration > templates > haut du forum et mettre ça avant le < /head> :

Code:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Par une autre font que vous trouverez sur Google Fonts. Au pire, venez demander un ajustement de code dans les commandes sur Pisrale.

HTML

Allez dans une message

Copier coller ça à l'intérieur :

Code:

<div class="fichepresgl"> <div class="fichepres-entete"> <img src="https://i.ibb.co/yfBz7BN/Kyoko-Mogami1.jpg" class="fichepres-entimg"> <div class="fichepres-entxt"> <span class="fichepres-entitle">Prénom P. Nom</span> <span class="fichepres-txt">Résumé du personnage, son groupe, son âge, ses TWs, etc, bref les bases pour connaître le personnage en peu de temps. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span> </div></div> <div class="fichepres-onglets"> <div class="fichepres-tonglets"> <div class="tonglets actif" data-onglet="onglet1">Identité</div> <div class="tonglets" data-onglet="onglet2">Anecdotes</div> <div class="tonglets" data-onglet="onglet3">Histoire</div> </div> <div class="fichepres-conglets"> <div class="conglets actif" data-onglet="onglet1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi et orci vestibulum condimentum ut sit amet arcu. Aliquam ultricies posuere massa in efficitur. Maecenas pharetra turpis vitae libero pulvinar, porta egestas libero mollis. Morbi felis erat, mattis sit amet nulla sed, lacinia blandit tortor. Mauris maximus scelerisque sapien, vitae semper lectus semper non. Nam ut libero erat. Aliquam vel egestas diam. Morbi magna lacus, lobortis at tortor non, vehicula tempor libero. Sed fermentum leo orci, nec rutrum augue dignissim vitae. In hac habitasse platea dictumst. Nulla lacus lacus, malesuada eget tortor ut, vestibulum vulputate ligula. In accumsan mauris a tincidunt placerat. Sed nec lectus fermentum, tempor velit vitae, tempor massa. Aenean tincidunt velit quis tempor egestas. Cras odio leo, rhoncus vel fringilla vel, pharetra quis mauris. Proin varius sit amet lorem a suscipit. Quisque eget bibendum sapien. Aliquam erat volutpat. Fusce in nunc mauris. Proin maximus, purus tempor vulputate convallis, urna dolor mollis sem, laoreet porta nisl nibh sit amet sem. Sed enim tellus, euismod ac elit nec, venenatis pellentesque turpis. Ut fermentum ex sed neque faucibus pharetra. Suspendisse potenti. In eros nunc, dapibus non turpis convallis, molestie varius orci. Nunc mauris ipsum, tincidunt sit amet tempus at, tincidunt ut ipsum. Etiam dictum risus ac elit egestas eleifend. Morbi at placerat libero. Curabitur sagittis, lectus ac interdum fringilla, dolor nibh volutpat leo, at mollis quam sem a neque. Aenean iaculis viverra odio eu rutrum. Cras pulvinar nisl ac ornare lacinia. Mauris et facilisis ex. Mauris augue urna, placerat quis dui id, vehicula facilisis nibh. Ut sit amet est accumsan, aliquam quam id, luctus orci. In odio risus, ornare vitae efficitur a, sagittis nec mi. Praesent cursus lacus augue, non efficitur mi malesuada sit amet. </div> <div class="conglets" data-onglet="onglet2"> onglet 2</div> <div class="conglets" data-onglet="onglet3"> onglet 3</div> </div></div> <div class="fichepres-joueur">  <div class="fichepres-jtitre">Pseudo</div>  <div class="fichepres-jtxt">In accumsan mauris a tincidunt placerat. Sed nec lectus fermentum, tempor velit vitae, tempor massa. Aenean tincidunt velit quis tempor egestas. Cras odio leo, rhoncus vel fringilla vel, pharetra quis mauris. Proin varius sit amet lorem a suscipit. Quisque eget bibendum sapien. Aliquam erat volutpat. Fusce in nunc mauris. </div>  <img src="https://i.ibb.co/0D9cdMB/PDg-ONb-Kyoko-Mogami1.jpg"> </div> </div>

CSS

Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS

Copier coller ça à l'intérieur :

Code:

/* Fiche de présentation */ .fichepresgl, .fichepresg1 *{ box-sizing:border-box; text-align:justify; } .fichepresgl{ width:100%; } .fichepresgl br{ display:none; } .fichepresgl .fichepres-entxt .fichepres-txt br, .fichepresgl .fichepres-conglets .conglets.actif br{ display:inline; content:none; } .fichepresgl .fichepres-entete{ padding:10px; background:var(--fond3); display:flex; justify-content:space-between; align-items:center; border-radius:10px; } .fichepresgl .fichepres-entete img{ width:20%; height:100%; object-fit:cover; border-radius:15px; } .fichepresgl .fichepres-entete .fichepres-entxt{ width:78%;} .fichepresgl .fichepres-entete .fichepres-entxt .fichepres-entitle{ font-weight:900; font-size:18px; padding:10px; border-radius:10px; color:var(--txt1); border:1px solid var(--txt1); display:block;} .fichepresgl .fichepres-entete .fichepres-entxt .fichepres-txt{ margin-top:10px; height:130px; overflow:auto; display:block; padding:10px; } .fichepresgl .fichepres-conglets .conglets{ display:none; background:var(--fond5); padding:10px; border-radius:10px; } .fichepresgl .fichepres-conglets .conglets.actif{ display:block; height:400px; overflow:auto;} .fichepresgl .fichepres-onglets{ display:flex; justify-content:space-between; margin-top:20px;} .fichepresgl .fichepres-tonglets{ width:22%; } .fichepresgl .fichepres-conglets{ width:75%; } .fichepresgl .fichepres-tonglets div{ background:var(--fond3); padding:5px; border-radius:5px; font-weight:bold; margin-bottom:10px;font-size:14px; text-align:center; } .fichepresgl .fichepres-tonglets .actif{ background:var(--fond3hover); } .fichepresgl .fichepres-joueur{ width:100%; display:flex; flex-direction:column; position:relative; justify-content:flex-end; align-items:flex-end; margin-top:15px;} .fichepresgl .fichepres-joueur img{ position:absolute; transform:rotate(5deg); width:120px; height:130px; border-radius:10px; object-fit:cover; top:-15px;} .fichepresgl .fichepres-joueur .fichepres-jtitre{ font-weight:900; font-size:15px; padding:5px; border-radius:10px; color:var(--txt1); border:1px solid var(--txt1); display:block; position:absolute; right:130px; top:-5px; } .fichepresgl .fichepres-joueur .fichepres-jtxt{ position:relative; width:50%; right:120px; background:var(--fond3); padding:10px; height:80px; overflow:auto; margin-top:30px; border-radius:5px;}

JAVASCRIPT

Dans le panneau d'administration > modules > Pages javascript
Assurez vous que le javascript est actif
Ajoutez une page javascript en cochant "Sur toutes les pages"
Puis ajouter ça :

Code:

$(document).ready(function(){ $('.fichepres-tonglets .tonglets').click(function(){ var onglet_id = $(this).attr('data-onglet'); $('.tonglets').removeClass('actif'); $(this).addClass('actif'); $('.conglets').removeClass('actif'); $('.conglets[data-onglet=' + onglet_id + ']').addClass('actif'); }); });

AJOUTER/SUPPRIMER LES ONGLETS

Pour ajouter un onglet, il faut ajouter dans les titres ce code:

Code:

<div class="tonglet" data-onglet="onglet4">Onglet 4</div>

Avec dans le data-onglet un "onglet5" (ou 6 ou 7 ou x)
Et même chose dans le contenu :

Code:

<div class="conglets" data-onglet="onglet4">blabla onglet 4</div>