KoalaVolant
Ven 24 Fév 2023 - 9:01
Version du forum : PHPBB2
Particularités du code :
- Crédits : Mina & KoalaVolant
- Les images se redimensionnent toutes seules
- Ca s'adapte sur mobile normalement
- Crédits : Mina & KoalaVolant
- Les images se redimensionnent toutes seules
- Ca s'adapte sur mobile normalement
Couleurs & Fonts
- Ce code utilise un système de “variables” rangé dans un “:root”.
Si vous trouvez :root { } dans votre CSS déjà actuel, coller ce qu’il y a à l’intérieur du :root suivant, dans celui que vous possédez déjà.
Attention, il peut y avoir des conflits de variable. Il ne peut pas y avoir deux mêmes variables. (genre, pas deux fois de --color1). Si c’est le cas, il suffit de renommer “--fond” par exemple en “--main-color-banane” (ce que vous voulez), partout dans le code.
Pour rechercher et remplacer dans tout un code : https://convertir.github.io/outils/remplacer-texte-en-ligne.html
Si vous trouvez ça galère, vous pouvez venir demander :
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{
--white:#f0f0f0;
--text:#111;
--fond:#a64b4b;
--fond2:#6b2424;
--fontbarre:'Bad Script', cursive;
}
- Vous pouvez bien sûr changer la font par autre chose, en allant vous servir sur Google Fonts
HTML
- Avec le compte fondateur, il faut aller dans Panneau d'administration > Affichage > Templates > overall_header
Appuyez sur la roue crantée pour le modifier - Repérez le code suivant :
- Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
- Remplacez le par :
- Code:
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<script type="text/javascript">$(function(){
$('.vavacon').replaceWith(_userdata.avatar);
});</script>
<div class="barreuhnav"><!-- BEGIN switch_user_logged_in -->
<div class="divava">
<div class="vavacon">Avatar</div>
</div><!-- END switch_user_logged_in -->
</div>
<div class="navnavnavnav">{GENERATED_NAV_BAR}</div>
- Validez une fois que c'est bon (il faut confirmer la modification une fois de retour dans la page des templates
- Allez dans Modules > Toolbar > Configuration
- Puis "Activer la toolbar" et "Fixer la toolbar" en oui
CSS
- Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS
- Copier coller ça en plus à l'intérieur :
- Code:
/* TOOLBAR ET NAV PAR MINA ET KOALAVOLANT */
#fa_toolbar{ background:var(--white); color:var(--text) !important; position:fixed; z-index:80; height:60px; }
#fa_toolbar a{ color:var(--text); }
/* DISPLAY NONE RESET */
#fa_toolbar #fa_left, #fa_toolbar #fa_share, #fa_right #fa_welcome, #fa_hide{ display:none !important; }
#fa_notifications{ position:fixed; top:70px; left:10px; background:var(--fond); font-family:var(--fontbarre); color:var(--white) !important; font-size:17px !important; padding:5px !important; display:block; transition:500ms; }
#fa_notifications:hover{ text-decoration:none !important; letter-spacing:1px; transition:500ms; }
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications{ background:var(--fond2); }
#notif_list{ position:absolute; top:155px; left:10px !important; }
/* Notifications */
#notif_list{ width:244px; }
#notif_list > li{ width:235px; }
#notif_list .see_all{ width:231px; }
#notif_list .content{ position:relative; }
#fa_toolbar #fa_right #notif_list li .content{ width:235px; }
#fa_toolbar #fa_right #notif_list li .contentText{ width:219px; }
#fa_toolbar #fa_right #notif_list li a.delete{ position:absolute; right:0px; }
/* AVATAR */
.barreuhnav{ position:fixed; top:5px; left:5px; z-index:100; }
.divava img{ width:50px; height:50px; object-fit:cover; border-radius:50%; }
/* SEARCH */
#fa_search{ position:relative; left:50px; top:50%; transform:translateY(-50%);}
#fa_search input{ background:var(--fond); display:block;}
#fa_search #fa_magnifier{ position:absolute; right:0; }
/* BARRE DE NAVIGATION */
.navnavnavnav img{ display:none; }
.navnavnavnav{ position:fixed; left:300px; top:15px; z-index:150;}
.navnavnavnav a{ color:var(--text); font-family:var(--fontbarre); font-size:17px; margin:0 5px; }
@media (max-width:768px){
.navnavnavnav{ left:120px; background:var(--white); padding:5px; top:0px; }
.navnavnavnav a{ font-size:13px; }
#fa_notifications{ top:45px; }
}
|
|
|
