Personaliser sa toolbar

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Personaliser sa toolbar

Message par cathy1970 le Mer 6 Fév 2013 - 17:29

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)


Dernière édition par cathy1970 le Dim 10 Fév 2013 - 10:48, édité 1 fois

cathy1970
*****

Féminin
Messages : 842
Inscrit(e) le : 25/06/2007

http://www.jamesblunt-french.net
cathy1970 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Mer 6 Fév 2013 - 18:31

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

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par cathy1970 le Jeu 7 Fév 2013 - 11:17

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)

cathy1970
*****

Féminin
Messages : 842
Inscrit(e) le : 25/06/2007

http://www.jamesblunt-french.net
cathy1970 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Yoshkill le Jeu 7 Fév 2013 - 12:22

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) ?

Yoshkill
*****

Masculin
Messages : 627
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Automne le Jeu 7 Fév 2013 - 12:32

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.

Automne
+ Hyperactif +

Messages : 8422
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 13:39

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!; }

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Personaliser sa toolbar

Message par Automne le Jeu 7 Fév 2013 - 14:01

Salut,

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

Automne
+ Hyperactif +

Messages : 8422
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Jeu 7 Fév 2013 - 14:02

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 15:33

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

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Jeu 7 Fév 2013 - 18:15

Merci Franch pour le tuyau Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Yoshkill le Jeu 7 Fév 2013 - 19:17

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 ?

Yoshkill
*****

Masculin
Messages : 627
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 20:24

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

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Jeu 7 Fév 2013 - 20:31

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 20:36

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>');
                   
                })});



FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Jeu 7 Fév 2013 - 20:39

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 20:41

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

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Jeu 7 Fév 2013 - 20:45

"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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 20:48

Et voilà pourquoi j'ai retire RECHERCHE. cqfd Very Happy

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Yoshkill le Jeu 7 Fév 2013 - 20:57

Je n'ai pas compris.

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

Yoshkill
*****

Masculin
Messages : 627
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Jeu 7 Fév 2013 - 23:08

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

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Personaliser sa toolbar

Message par Ea le Ven 8 Fév 2013 - 0:52

Bonjour,


Tenebraska a écrit: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>');

})});
@FANCH 56 a écrit: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 :
http://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 :
http://i.imgur.com/Zq84IhF.png

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Ven 8 Fév 2013 - 9:05

Merci EA pour ces précisions Very Happy

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par FANCH 56 le Ven 8 Fév 2013 - 9:22

Merci EA

Comme d'habitude efficace !!!

Je cherchais justement comment regrouper sainement les codes java.

Tout fonctionne

FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par Invité le Sam 9 Fév 2013 - 14:06

Merci beaucoup pour les codes, Ea !

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personaliser sa toolbar

Message par cathy1970 le Dim 10 Fév 2013 - 10:48

Bonjour

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

cathy1970
*****

Féminin
Messages : 842
Inscrit(e) le : 25/06/2007

http://www.jamesblunt-french.net
cathy1970 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum