Ajouter un logo + lien sur la Toolbar

[JeYx83]

Détails techniques

Version du forum : Invision
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://arrogance.taguilde.net/

Description du problème

Salut tout le monde,

Il y a forcément déjà un tuto à ce sujet là mais en naviguant sur internet je n'ai rien trouvé de concret...

Je souhaiterais ajouter un logo centré sur ma toolbar qui redirigerais vers un lien.

L'URL du logo : https://abrak.fr/assets/img/logo-aegia-blue.png
Le lien de redirection : https://abrak.fr/

[Feuilla']

Bonjour,
on peut commencer par ceci :
https://forum.forumactif.com/t360495-ajout-de-bouton-avec-lien-cliquable-de-youtube-daylimotion-sur-la-toolbar#3060181
Et ensuite modifier les liens et les adresses des images.
Bonne journée !

[Invité]

Salut JeYx83,


Tu as volontairement supprimé cet id sur ta toolbar:

Code:

#fa_share_text

L'image va être redimensionnée car elle est trop haute pour la Toolbar , avec une image de 28 px:
cela donne ceci:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur l'index.

Déposes ceci:

Code:


$(function(){
$(function(){
$('<a href="https://abrak.fr/"style="margin-right:250px;"><img src="http://i21.servimg.com/u/f21/11/26/21/37/chk_js11.png"/></a>').insertBefore( '#fa_menu' );
   
      })});


A toi de jouer avec la valeur "250px" dans le script afin de centrer le bouton .
Penses à cliquer sur le bouton

a++

[JeYx83]

C'est exactement ce que je voulais Milouze14, merci ! Mais il n'y a vraiment aucun moyen de centrer le logo ? Parce-qu'en utilisant la valeur en px, les membres de mon forum qui n'ont pas la même résolution que moi ne le verront pas centrer comme moi...

[Invité]

Salut JeYx83,

Mais il n'y a vraiment aucun moyen de centrer le logo ? Parce-qu'en utilisant la valeur en px, les membres de mon forum qui n'ont pas la même résolution que moi ne le verront pas centrer comme moi...

Ayant une image en pixels, tu ne trouveras rien de bien concret .

Il faut mieux placer l'image ici comme cela tout le monde la verra au même endroit .




Tu as ceci dans ta feuille de style afin de masquer les boutons de partages

Code:




/*Supprimer les boutons de partage de la Toolbar*/
span#fa_share {
display:none!important;
}


Autant placer ce bouton à la place et tout le monde verra ce petit au même endroit
Il suffit donc de modifier le script en l'éditant:
Supprimes le contenu et remplaces par celui-ci:

Code:


$(function(){
$(function(){
$('<a href="https://abrak.fr/"style="margin-left:20px;"><img src="http://i21.servimg.com/u/f21/11/26/21/37/chk_js11.png"/></a>').insertAfter( '#fa_search' );
})});



Joues avec le

Code:

margin-left:20px;

pour la marge de gauche

Et voilà



a++

[JeYx83]

Merci pour ton conseil mais je crois que ça revient au même puisqu'on utilise toujours une valeur en px...

J'ai essayé ceci, dit moi ce que tu en penses

Code:

$(function(){
$(function(){
$('<P align="center"><a href="https://abrak.fr/"><img src="http://i21.servimg.com/u/f21/11/26/21/37/chk_js11.png"/></a></P>').insertAfter( '#fa_search' );
})});

Le logo se centre pour tout les utilisateurs mais il n'est plus sur la Toolbar

[Invité]

Re,
non cela ne revient pas à l'identique car avec le script donné,
c'est placé à coté d'un élément donc la taille restera .
Il suffit éventuellement de diminuer la valeur.
De plus le logo n'est plus trop visible avec ton procédé .

Bonne continuation.
a++

[JeYx83]

J'ai beaucoup cherché sur internet et j'ai trouvé :

Code:

$(function(){
$(function(){
$('<a class="abrak" href="https://abrak.fr/"><img src="http://i21.servimg.com/u/f21/11/26/21/37/chk_js11.png"/></a>').insertAfter( '#fa_search' );
})});

J'ai ajouté ça à mon CSS :

Code:

a.abrak {
position: absolute;
    left: 50%;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

ça a l'air de centrer mon logo pour tout les utilisateurs. Merci quand même pour tes efforts Milouze14, j'apprécie !

Sujet résolu !