Demande d'aide concernant 2 modifications sur le forum

[Kid13]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : https://intranet-fbi.forumactif.com/

Description du problème

Bonsoir, je cherche a faire deux choses sur mon forum.

La premiere est de modifier la toolbar, la placer sous le logo de mon site et retirer la plupart des options inutiles comme ceci :

https://imgur.com/Js5S3DG

Deuxieme chose j'aimerais modifier les groupes tout en bas, en passant de l'apparence classique, a une apparence comme ceci :


https://imgur.com/qijQvz0

Si quelqu'un peut m'expliquer comment faire ca serait cool, merci.

PS : J'suis une vrai brele en informatique0

Fichiers joints

fofo1.png Vous n'avez pas la permission de télécharger les fichiers joints.(31 Ko) Téléchargé 0 fois

fofo2.png Vous n'avez pas la permission de télécharger les fichiers joints.(13 Ko) Téléchargé 0 fois

[Invité]

Hello Kid13,
alors cette version à une barre de navigation scrollable ,
donc on va intervenir dans trois templates et faire des modifications afin de placer la barre de navigation sous le logo et supprimer le script qui permet de placer cette barre en haut de page et pour finir les groupes.

Pour chaque template concerné:
il faudra cliquer sur le petit engrenage  

Dans le template overall_footer_end :
Affichage/Templates/Général/overall_footer_end

Recherches et supprimes ceci:

Code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $(window).scroll(function() {
 var header_top = $('#headerbar-top');

 if (header_top.hasClass('w-toolbar')) {
 if ($(window).scrollTop() >= 42) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 } else {
 if ($(window).scrollTop() >= 1) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 }
 });
});
//]]>
</script>

Penses a enregistrer puis à valider en cliquant respectivement sur  puis


Dans le template overall_header:
Affichage/Templates/Général/ overall_header

Recherches et supprimes ceci ligne 278 environ):

Code:


<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>


Plus bas recherches (ligne 289) :

Code:

<!-- BEGIN switch_ticker_new -->

Juste avant déposes ceci

Code:

 <div class="M14_NAV_BAR" style="background-color: #1D262C;"><ul class="navbar navlinks{NAVBAR_BORDERLESS}"><li>{GENERATED_NAV_BAR}</li></ul></div>

Penses a enregistrer puis à valider en cliquant respectivement sur  puis


Voilà les templates sont modifiés pour la barre de navigation.

On va ensuite intervenir dans le template ou sont placés les groupes.



Dans le template index_body:
Affichage/Templates/Général/index_body

Recherches ceci (ligne63):

Code:


<div class="block-footer"><strong>{LEGEND}:</strong>&nbsp;{GROUP_LEGEND}</div>



Supprimes et remplaces par:

Code:


<div class="block-footer M14_QEEL"><strong>Direction</strong> <strong class="M14_Legende">&nbsp;{GROUP_LEGEND}</strong></div>



Penses a enregistrer puis à valider en cliquant respectivement sur  puis

Puis pour finir donner un sens à tout cela :

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


/*TOUS LES ONGLETS DE LA LEGENDE*/
.block-footer.M14_QEEL strong:first-child,.block-footer.M14_QEEL strong.M14_Legende b
{padding:6px;border-radius:5px;}
.block-footer.M14_QEEL strong.M14_Legende{font-size:0;}
.block-footer.M14_QEEL strong.M14_Legende b{font-size:12px !important;margin:0px 4px;}
.block-footer.M14_QEEL strong.M14_Legende b a.gensmall[href^="/g"]{color:white !important;}
/*L ONGLET DIRECTION*/
.block-footer.M14_QEEL strong:first-child
{background:#E0D10C;color:white !important;}
/*LE PREMIER  GROUPE*/
.block-footer.M14_QEEL strong.M14_Legende b:nth-child(1)
{background:#E0D10C;}
/*LE DEUXIEME GROUPE*/
.block-footer.M14_QEEL strong.M14_Legende b:nth-child(2)
{background:#83807E;}
/*LE TROISIEME GROUPE*/
.block-footer.M14_QEEL strong.M14_Legende b:nth-child(3)
{background:#0C7BC3;}


Penses à cliquer sur le bouton



Pour les onglets en dehors de "Direction" car celui-ci est modifié directement dans le template:

Code:

<strong>Direction</strong>

Sinon, les autres sont commentés:

Code:


/*LE PREMIER  GROUPE*/
.block-footer.M14_QEEL strong.M14_Legende b:nth-child(1)
{background:#E0D10C;}


Donc si tu veux en ajouter un quatrième , il faudra à la suite déposer (en changeant la couleur de fond) ceci:

Code:


/*LE QUATRIEME  GROUPE*/
.block-footer.M14_QEEL strong.M14_Legende b:nth-child(4)
{background:code couleur;}


Tu peux t'aider de ce site pour les couleurs:
https://www.code-couleur.com/

Et remplacer "code couleur" par celle de ton choix.

Les rendus en visu:






a++

[Kid13]

Eh bah merci beaucoups tu as été très clair et malgrés le fait que je sois vraiment une brele en informatique j'ai réussi du premier coups grace à tes explications ^^

Merci encore de ton aide.