Personaliser sa toolbar

[Invité]

Bonjour

j'ai activé la toolbar de FA, supprimé le partage réseaux sociaux mais à la place j'aimerais y ajouter mes propres liens

- se présenter
- Lien vers le site

Comment faire SVP ? j'ai vu que certains forums avaient réussi à le faire ( je suis en phpBB3)

[FANCH 56]

Bonsoir

Prends ce script comme base.

Code:

$(function(){$(function(){
             
          $('#fa_left').append(' <a href="http://LIEN DU FORUM DE PRÉSENTATION" style="margin-left: 6px; margin-right: 6px; color: red; ">SE PRÉSENTER</a>');
             
        })});

Il faut faire un script pour chaque lien

[Invité]

Bonjour et merci de ta réponse Fanch

chez moi ça ne marche pas, j'ai ce message dans mon Pa :

Votre CSS a bien été mis à jour.
Remarque :
Les balises html génèrent des erreurs dans les feuilles de style.
Une correction vient donc d'être effectuée afin de supprimer les balises html que vous avez placées dans la feuille de style.

le code est remplacé par celui-ci

Code:

$(function(){$(function(){
                   
                  $('#fa_left').append(' SE PRÉSENTER');
                   
                })});

Mais rien ne s’affiche dans la toolbar ( enfin rien de nouveau)

[Yoshkill]

Bonjour, je m'incruste car ça m'intéresse. Comment fait-on pour ajouter un lien ou du texte mais à droite de la barre de recherche (mais collé sur la gauche, comme les boutons Facebook et Twitter) ?

[Automne]

Bonjour,

Se script ne va pas dans le css, mais dans pa << module << gestion des codes javascript. Activer les javascript : oui, enregistrer. Créer un nouveau javascript et coller votre code, cocher sur toutes les pages et enregistrer.

[FANCH 56]

Bonjour

Comme je possède un widget RECHERCHE, je souhaîtes retire le recherche de la barre pour faire de la place pour d'autres liens.

J'ai mis le code CSS ci-dessous, mais apparemment cela ne fonctionne pas

/* **************************RETIRER RECHERCHE********** */

#fa_textarea { display: none!important!; }

[Automne]

Salut,

Je pense que tu as mis un ! de trop essais comme çà
#fa_textarea { display: none !important; }

[Invité]

Bonjour, Franch

il y a un point exclamation de trop !!
essai ce code

Code:

#fa_textarea { display: none !important; }

Cordialement

EDIT : Désolé Automne en meme temps

[FANCH 56]

Merci automne et danynou

Et pour tout retirer loupe et case j'ai mis ceci.

Code:

/* **************************RETIRER RECHERCHE et LOUPE********** */

#fa_textarea { display: none!important; }
#fa_magnifier { display: none!important; }

Je vais donc avoir de la place pour y mettre autre chose.

Résolu

[Invité]

Merci Franch pour le tuyau

[Yoshkill]

Bien, bien, merci Fanch pour cette astuce. Et qu'en est-il de mettre des éléments (textes, liens...) à l'endroit où se trouvent les icônes Facebook, Twillter, et cetera ?

[FANCH 56]

Attention si on mets trop de texte, celui-ci passe en dessous de la barre pour les écrans plus petit que 21 pouces.

[Invité]

Je me pose également la même question que Yoshkill. À savoir, comment faire pour insérer des liens juste après la barre de recherche (donc à sa droite) ?

Merci par avance.

[FANCH 56]

Hé bien si tu as déjà un champ recherche sur ton forum, tu supprimes Recherche et loupe

Code:

/* **************************RETIRER RECHERCHE et LOUPE de la toolbar ********** */

#fa_textarea { display: none!important; }
#fa_magnifier { display: none!important; }

Ou tu peu remplacer left par right dans sle java

Code:

$(function(){$(function(){
                   
                  $('#fa_left').append(' <a href="http://LIEN DU FORUM DE PRÉSENTATION" style="margin-left: 6px; margin-right: 6px; color: red; ">SE PRÉSENTER</a>');
                   
                })});

[Invité]

Merci, mais je ne désire pas supprimer ma barre de recherche. Je souhaite simplement ajouter des liens à sa droite.

[FANCH 56]

Tu remplaces donc left pr right, mais tu verras bien si c'est possible

[Invité]

"Left" me met les liens entre le copyright FA et la barre de recherche, tandis que "right" me les met à l'extrême droite de la toolbar.

Sinon j'ai essayé avec "center" et "middle" mais ça ne change rien.

[FANCH 56]

Et voilà pourquoi j'ai retire RECHERCHE. cqfd

[Yoshkill]

Je n'ai pas compris.

Il n'y a pas moyen de garder la Recherche mais de mettre des trucs juste à droite ?

[FANCH 56]

Ben j'ai pas réussi, mais bon................

[Ea]

Bonjour,

Je me pose également la même question que Yoshkill. À savoir, comment faire pour insérer des liens juste après la barre de recherche (donc à sa droite) ?

Merci par avance.

La barre est constituée de :

Code:

<div id="fa_right" class="fa_tbMainElement">Menu bienvenue + Notification + Flèche de repli</div>
<span id="fa_left" class="fa_tbMainElement">Lien forumactif</span>
<div id="fa_search" class="fa_tbMainElement">Barre de recherche</div>
<span id="fa_share" class="fa_tbMainElement">Icônes de partage</div>

Pour plus de détails on peut utiliser la console de chrome, l'inspecteur de firefox ( CTRL + SHIFT + I pour les ouvrir ), ou les équivalents d'autres navigateurs.

Donc une fois qu'on a le id="identifiant" qui nous intéresse, on peut mettre :

Code:

$(function(){$(function(){
                 
  $('#identifiant').action(' contenu à ajouter ');
                 
})});

où action peut-être :

- append : pour ajouter le contenu à la fin à l'intérieur de l'élément dont on a l'identifiant
- prepend : pour ajouter le contenu au début à l'intérieur de l'élément dont on a l'identifiant
- after : pour ajouter le contenu après l'élément dont on a l'identifiant
- before : pour ajouter le contenu avant l’élément dont on a l'identifiant

Pour ce qui est du contenu à ajouter, il doit s'agir de texte ou html sous la forme de chaîne javascript, si vous ne savez pas comment en faire une, cet outil le permet : http://www.maonyn.com/h16-

Par exemple pour ajouter après le bouton google plus un bouton reddit, et avant le bouton rss un bouton de recherche google on pourrait faire :

Code:

$(function(){$(function(){

  $('#fa_gp').after('<a style="width:30px;height:30px;background-image:url(http://i.imgur.com/A7SLP47.png);" href="http://fr.reddit.com/submit?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'"></a>');
  $('#fa_rss').before('<a style="width:30px;height:30px;background-image:url(http://i.imgur.com/44ZsXHT.png);" href="https://www.google.com/search?q='+encodeURIComponent(document.title+' site:'+location.host)+'"></a>');

})});

Ou bien comme demandé ici, pour mettre quelque chose après la barre de recherche, on pourrait faire :

Code:

$(function(){$(function(){

  $('#fa_search').after('<span class="fa_tbMainElement">quelque chose</span>');

})});

ou bien ceci qui serait totalement équivalent :

Code:

$(function(){$(function(){

  $('#fa_share').before('<span class="fa_tbMainElement">quelque chose</span>');

})});

Attention si on mets trop de texte, celui-ci passe en dessous de la barre pour les écrans plus petit que 21 pouces.

En fait l'élément :

Code:

<span id="fa_left" class="fa_tbMainElement">Lien forumactif</span>

auquel tout est ajouté sur le forum anciens-cols-bleus.net est un élément de type inline-block, et quand il est trop rempli il se met à la ligne suivante ( afin de pouvoir être sur une largeur entière ).

Plutôt que tout mettre dans le bloc #fa_left, on pourrait plutôt faire :

Code:

$(function (){$(function (){

      $('#fa_left').after(
        '<span id="toolbar_add"><span class="fa_tbMainElement"><a href="/f19-" style="color:red">SE PRÉSENTER</a></span>'+
        '<span class="fa_tbMainElement"><a href="mailto:adresse@email" style="color:blue">Contact</a></span>'+
        '<span class="fa_tbMainElement"><a href="/h1-liens-amis" style="color:blue">Liens amis</a></span>'+
        '<span class="fa_tbMainElement"><a href="/donate.forum" style="color:black">Contribution</a></span>'+
        '<span class="fa_tbMainElement"><a href="/t18237-#652414" style="color:#C03000">Réglement et Charte A.C.B.</a></span>'+
        '<span class="fa_tbMainElement"><a href="/t20091-" style="color:blue">Qui mieux que nous ??</a></span></span>'
      )

})});

afin d'avoir un inline-bloc pour chaque lien, de cette façon si cela dépasse, toute la ligne ne descendra pas mais juste les éléments qui dépassent :
https://i.imgur.com/x815s1D.png

( pour simplifier un peu j'ai entouré par <span id="toolbar_add">...</span> et mis dans le css #toolbar_add span { margin:0 6px; } )

Ensuite pour ces éléments qui dépassent, à mon avis, le mieux serait d'avoir mis les liens les moins important en dernier et d'ajouter dans le css :

Code:

#fa_toolbar { overflow: hidden; }

de cette manière les liens qui dépasseraient pour ceux qui ont des petits résolutions devraient juste être cachés :
https://i.imgur.com/Zq84IhF.png

Cordialement.

[Invité]

Merci EA pour ces précisions

[FANCH 56]

Merci EA

Comme d'habitude efficace !!!

Je cherchais justement comment regrouper sainement les codes java.

Tout fonctionne

[Invité]

Merci beaucoup pour les codes, Ea !

[Invité]

Bonjour

Merci pour les précisions Automne c'est bon et encore merci à Fanch pour le code
Merci aussi à Ea
Je pense que je peux passer en résolu au vu des derniers messages
Bon dimanche