Fiche générale

Pisrale :: Codages :: Thèmes complets :: Glassomorphism

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
- Il y a une version avec onglets ou sans onglets

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.

CSS

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

Copier coller ça à l'intérieur :

Code:

/* FICHE GENERALE */ .fichegeng{ width:100%; background:var(--fond2); padding:15px; border-radius:10px; text-align:justify; } .fichegeng.fichegenonglets{ padding:0; border-radius:0; background:none; } .fichegeng .fg-title{ font-size:20px; padding:10px; font-weight:900; border:1px solid var(--border1); border-radius:15px;} .fichegeng .fg-sstitle{ font-weight:bold; font-size:15px; background:var(--fond5); display:inline-block; border-radius:5px; padding:5px; } .fichegeng .fg-imgtxt{ display:flex; justify-content:space-between; margin:10px 0; } .fichegeng .fg-imgtxt img{ width:30%; object-fit:cover; border-radius:10px; outline:1px solid var(--txt1); outline-offset:-10px; } .fichegeng .fg-imgtxt.reverse{ flex-direction:row-reverse; } .fichegeng .fg-imgtxt span{ width:69%; max-height:200px; overflow:auto; padding:10px; } .fichegeng .fg-threeimg{ width:80%; margin:5px auto; display:flex; justify-content:space-between; } .fichegeng .fg-threeimg img{ width:32%; border-radius:10px; height:100px; object-fit:cover; outline:1px solid var(--txt1); outline-offset:-10px;}

Si vous utilisez la version avec les onglets, il faut ajouter ça après ce CSS :

Code:

/* Avec onglets */ .fichegeng.fichegenonglets{ display:flex; justify-content:space-between; } .fichegeng.fichegenonglets .genong-t{ width:15%; } .fichegeng.fichegenonglets .genong-t div{ background:var(--fond3); padding:5px; border-radius:5px; font-weight:bold; margin-bottom:10px;font-size:14px; text-align:center; } .fichegeng.fichegenonglets .genong-t .actif{ background:var(--fond3hover); } .fichegeng.fichegenonglets .genong-t br{ display:none; } .fichegeng.fichegenonglets .genong-c{ width:82%; } .fichegeng.fichegenonglets .genong-c .conglet{ display:none; background:var(--fond2); padding:10px; border-radius:10px; } .fichegeng.fichegenonglets .genong-c .conglet.actif{ display:block; } .fichegeng.fichegenonglets .genong-c br{ display:none; } .fichegeng.fichegenonglets .genong-c .conglet br{ content:none; display:inline; }

HTML SANS ONGLETS

Il vous suffit de copier coller ça sur un message :

Code:

<div class="fichegeng"><div class="fg-title">Règlement ou un titre plus long</div>  <div class="fg-sstitle">Petit sous titre pour voir</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. <div class="fg-imgtxt"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div> <div class="fg-imgtxt reverse"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div> <div class="fg-threeimg"><img src="https://i.pinimg.com/originals/87/59/fc/8759fc10b242ffe8025e2033b53770dd.gif"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><img src="https://static.tumblr.com/287b61b7ef3df0a6ac6d0d39443cd82b/wwutgi8/3huoayusd/tumblr_static_9i8rg8sl7m040k0csggc4gcgs_2048_v2.gif"></div>  </div>

Dans cette fiche générale il y a plusieurs blocs qui peuvent vous servir et ils sont tous commentés au besoin.

HTML AVEC ONGLETS

Il faut copier coller ça sur un message :

Code:

<div class="fichegeng fichegenonglets"> <div class="genong-t"> <div class="onglet actif" data-onglet="onglet1">Onglet 1</div> <div class="onglet" data-onglet="onglet2">Onglet 2</div> <div class="onglet" data-onglet="onglet3">Onglet 3</div> <div class="onglet" data-onglet="onglet4">Onglet 4</div> </div> <div class="genong-c"> <div class="conglet actif" data-onglet="onglet1"><div class="fg-title">Règlement ou un titre plus long</div>  <div class="fg-sstitle">Petit sous titre pour voir</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. <div class="fg-imgtxt"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div> <div class="fg-imgtxt reverse"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat. Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div> <div class="fg-threeimg"><img src="https://i.pinimg.com/originals/87/59/fc/8759fc10b242ffe8025e2033b53770dd.gif"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><img src="https://static.tumblr.com/287b61b7ef3df0a6ac6d0d39443cd82b/wwutgi8/3huoayusd/tumblr_static_9i8rg8sl7m040k0csggc4gcgs_2048_v2.gif"></div> </div>  <div class="conglet" data-onglet="onglet2">blabla onglet 2</div>  <div class="conglet" data-onglet="onglet3">blabla onglet 3</div>  <div class="conglet" data-onglet="onglet4">blabla onglet 4</div>   </div></div>

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(){ $('.genong-t .onglet').click(function(){ var onglet_id = $(this).attr('data-onglet'); $('.onglet').removeClass('actif'); $(this).addClass('actif'); $('.conglet').removeClass('actif'); $('.conglet[data-onglet=' + onglet_id + ']').addClass('actif'); }); });

Dans cette fiche générale il y a plusieurs blocs qui peuvent vous servir et ils sont tous commentés au besoin.

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

Code:

<div class="onglet" 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="conglet" data-onglet="onglet4">blabla onglet 4</div>