| Sujet: Codes css - htlm utilisés - maj mai 2022 • Dim 1 Mai - 11:08 | |
| Pour régler le souci de distance entre le header et la barre de navigation sur téléphone : ajout du code au CSS à : a.postbody - Code:
-
width:auto; Pour régler le souci des caractères spéciaux de la PA : à placer dans les pages Htlm, après le css et avant le contenu de la PA, juste après la balise - Code:
-
</style> - Code:
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Pour règler les caractères gras de la barre de navigation et des liens renvoyants vers les sous-forums : à placer dans le CSS, avant text-decoration : none - Code:
-
font-weight:300 - Code:
-
/***** GENERAL****/ a:link {font-weight: 300; text-decoration: none; } a:visited {font-weight: 300; text-decoration: none; } a:active {font-weight: 300;text-decoration: none; } a:hover {font-weight: 300;text-decoration: none !important;} - Code:
-
a.forumlink : font-weight: lighter; Le Switcheroo : tuto forumactif Never Utopia Le CSS est annoté pour retrouver où changer les couleurs du bouton au survol et l'emplacement par rapport à la toolbar forumactif. - Prérequis:
Switcheroo nécessite quelques modifications de votre part avant d'être installer et je vais expliquer comment tout bien préparer : Tout d'abord, il vous faudra autoriser les formulaires non-officiel à poster leurs données sur votre forum. Pour ce faire, rien de compliqué : accédez au panneau d'administration et suivez ce chemin Général > Forum > Sécurité. Il faudra décocher l'option "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum" et sauvegarder les changements (image). Cette modification permettra au formulaire de Switcheroo de fonctionner avec Fetch, une API de Javascript. Ensuite, vous devrez vous assurez que la Toolbar de ForumActif est activée. Si ce n'est pas le cas, faites-le en suivant ce chemin : Module > Toolbar > Configuration (image). Si elle était désactivée parce que vous ne l'utilisiez pas, je proposerai plus bas une façon de la rendre invisible, ne vous en faites pas. Cette modification nous permettra de récupérer facilement l'ID d'un membre ainsi que son avatar et de savoir s'il est connecté ou non. En dernier, la barre de navigation principale de votre forum (celle qui permet de faire une recherche, de se connecter, de s'inscrire et de se déconnecter) devra être présente quelque part sur toutes les pages. Si vous l'avez retiré de vos templates, assurez-vous de l'ajouter quelque part, dans un quelconque et de la cacher avec un style="display: none;". C'est avec cette barre que nous récupérons l'ID temporaire de votre session, qui permettra de changer de compte instantanément.
Installation
Le plugin en lui-même est très simple à installer. Il comprend deux fichiers Javascript hébergés sur dropbox – ce qui me permettra de pouvoir patcher directement les scripts en cas de besoin. Le premier, monomer_core.js, est un outil où je centralise toutes les fonctions utilitaires dont je me sers. Notamment, c'est grâce à ce script que le formulaire de connexion du plugin est appelé en popup. Le deuxième fichier, c'est le plugin : switcheroo.js. - CSS:
- Code:
-
/* Switcheroo css*/ :root { --color-text: rgba(255, 255, 255, 0.87); --color-bg: none; --color-delete: #e74c3c; --color-tooltip: #010203; --color-squircle: #201f2e; --color-accent: #b14255; --color-button: #da8a5e; /*change la couleur du bouton au survol*/ --color-pill: #ffffff; --gap-size: 16px; --ease: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56); }
.switcheroo { color: var(--color-text); background-color: var(--color-bg); font-size: 16px; } .switcheroo[position="static"] { position: relative; } .switcheroo[position="top"] { position: fixed; margin-top : 20px; /*permet de monter ou descendre le bouton*/ top: 0; left: 0; z-index: 100; } .switcheroo[position="bottom"] { position: fixed; bottom: 0; left: 0; z-index: 100; } .switcheroo[direction="horizontal"] { width: 100%; } .switcheroo[direction="vertical"] { height: 100%; }
.switcheroo__squircles { display: flex; margin: 0; padding: 0; list-style: none; padding: var(--gap-size); gap: var(--gap-size); } .switcheroo[direction="horizontal"] .switcheroo__squircles { flex-direction: row; } .switcheroo[direction="vertical"] .switcheroo__squircles { flex-direction: column; }
/* squircle */ .switcheroo[theme="discord"] .switcheroo__squircle { position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--color-squircle); } .switcheroo[theme="discord"] .switcheroo__squircle { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; transition: border-radius 128ms var(--ease); } .switcheroo[theme="discord"] .switcheroo__squircle:hover { border-radius: 36%; } .switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before { content: ""; width: 100%; height: 100%; display: block; background-color: var(--color-pill); position: absolute; border-radius: 4px; top: 50%; transform: translate(-100%, -50%) scale(0); transition: transform 128ms, opacity 64ms; pointer-events: none; opacity: 0; } .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before { content: ""; width: 100%; height: 100%; display: block; background-color: var(--color-pill); position: absolute; border-radius: 4px; left: 50%; transform: translate(-50%, -100%) scale(0); transition: transform 128ms, opacity 64ms; pointer-events: none; opacity: 0; } .switcheroo[theme="discord"] .switcheroo__squircle.active { border-radius: 36%; cursor: default; } .switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before { opacity: 1; transform: translate(-100%, -50%) scale(0.5); } .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before { opacity: 1; transform: translate(-50%, -100%) scale(0.5); }
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before { opacity: 1; transform: translate(-85%, -50%) scale(0.2); border-radius: 50%; } .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before { opacity: 1; transform: translate(-50%, -85%) scale(0.2); border-radius: 50%; }
/* tooltip */ .switcheroo__popper { background-color: var(--color-tooltip); padding: 0.68rem 1rem; position: absolute; width: -webkit-max-content; width: max-content; border-radius: 4px; z-index: 0; opacity: 0; transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce); pointer-events: none; color: #fff; } .switcheroo[direction="vertical"] .switcheroo__popper { left: 155%; top: 50%; transform-origin: left; transform: translateY(-50%) scale(0.98); } .switcheroo[direction="horizontal"] .switcheroo__popper { top: 155%; left: 50%; transform-origin: top; transform: translateX(-50%) scale(0.98); } .switcheroo__popper:before { content: ""; position: absolute; width: 24px; height: 24px; background-color: var(--color-tooltip); z-index: -1; } .switcheroo[direction="vertical"] .switcheroo__popper:before { left: -2px; top: 50%; transform: translateY(-50%) rotate(-45deg); } .switcheroo[direction="horizontal"] .switcheroo__popper:before { left: 50%; top: -2px; transform: translateX(-50%) rotate(-45deg); }
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper { opacity: 1; transform: translateY(-50%) scale(1); } .switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper { opacity: 1; transform: translateX(-50%) scale(1); } .switcheroo__squircle:hover:before { opacity: 1; transform: translate(-100%, -50%) scale(0.5); }
/* avatar */ .switcheroo[theme="discord"] .switcheroo__avatar { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; } .switcheroo[theme="discord"] .switcheroo__avatar img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* divider */ .switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider { width: 100%; height: 2px; background-color: var(--color-pill); border-radius: 1px; opacity: 0.06; transform: scale(0.8); } .switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider { width: 2px; background-color: var(--color-pill); border-radius: 1px; opacity: 0.06; transform: scale(0.8); } /* delete button */ .switcheroo[theme="discord"] .switcheroo__delete { display: flex; justify-content: center; position: absolute; width: 16px; line-height: 14px; height: 16px; top: -2px; right: -2px; border-radius: 50%; background-color: var(--color-delete); transform: scale(0); opacity: 1; transition: transform 128ms var(--ease), opacity 64ms var(--ease); cursor: pointer; font-size: 13px; } .switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete { opacity: 1; transform: scale(1); } /* logo */ .switcheroo[theme="discord"] .switcheroo__logo { } .switcheroo[theme="discord"] .switcheroo__logo img { width: 32px; } .switcheroo[theme="discord"] .switcheroo__logo:hover { background-color: var(--color-accent); } /* buttons */ .switcheroo[theme="discord"] .switcheroo__squircle--button { transition: border-radius 128ms var(--ease); color: var(--color-button); } .switcheroo[theme="discord"] .switcheroo__squircle--button:hover { color: #fff; background-color: var(--color-button); } /* modal */ .switcheroo__form { padding: 48px; } .switcheroo__form-row { display: flex; flex-flow: column; align-items: flex-start; margin-bottom: 16px; } .switcheroo__form-label { margin-bottom: 8px; font-size: 14px; text-transform: uppercase; color: var(--color-text) !important; } .switcheroo__form-input { padding: 6px !important; font-size: 16px !important; border-radius: 4px !important; width: 100% !important; border-bottom: 2px solid var(--color-accent) !important; background-color: var(--color-bg) !important; color: var(--color-text) !important; cursor: text !important; } .switcheroo__form-button { border-radius: 8px; padding: 8px; border: none; outline: none; box-shadow: none; text-transform: uppercase; font-size: 14px; align-self: flex-end; color: #fff; background-color: var(--color-accent); }
.monomer-overlay { position: fixed; z-index: 999; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; transition: 0.2s opacity ease; background: rgba(0, 0, 0, 0.6); }
.monomer-modal { position: fixed; z-index: 999; top: 50%; left: 50%; opacity: 0; width: 94%; padding: 24px 20px; transition: 0.2s opacity ease; transform: translate(-50%, -50%); border-radius: 2px; background: var(--color-squircle); color: var(--color-text); }
.monomer-modal.monomer-open.monomer-anchored { top: 20px; transform: translate(-50%, 0); }
.monomer-modal.monomer-open { opacity: 1; }
.monomer-overlay.monomer-open { opacity: 1; }
.monomer-close { font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 24px; text-align: center; width: 24px; height: 24px; position: absolute; top: -5px; right: -5px; padding: 5px; cursor: pointer; color: #fff; border: 0; outline: none; background: var(--color-delete); border-radius: 50%; padding: 0; } .monomer-close:hover { opacity: 0.8; } /* Fin Switcheroo css */
Template : à placer tout en bas, avant la balise - Template general Overall_footer_end:
- Code:
-
<nav id="switcheroo" class="switcheroo" theme="discord" direction="vertical" position="top"></nav>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script> <script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>
<script> (function() { new Switcheroo('#switcheroo', { enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */ updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */ customButtons: [], /* boutons personnalisés, explication plus bas */ confirm: true, /* demande une confirmation avant le changement de compte */ confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */ deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */ addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */ errorMsg: 'Une erreur est surviendue lors du Switcheroo.', }); })(); </script> Pour régler le problème de bordure : Dans postdetail_profil img : Il fallait centrer l'image. - Code:
-
.border a img{ -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; opacity:0,7; border: 5px solid #c9745b; }
|
|