Ajouter un logo + lien sur la Toolbar

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

Résolu Ajouter un logo + lien sur la Toolbar

Message par JeYx83 le Mer 4 Nov 2015 - 15:02

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/

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par Feuilla' le Mer 4 Nov 2015 - 15:32

Bonjour,
on peut commencer par ceci :
résolu http://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. Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par Milouze14 le Mer 4 Nov 2015 - 15:34

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 Wink .
Penses à cliquer sur le bouton

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par JeYx83 le Mer 4 Nov 2015 - 22:38

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

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par Milouze14 le Jeu 5 Nov 2015 - 3:56

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

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




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 Very Happy
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 Wink

Et voilà



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par JeYx83 le Jeu 5 Nov 2015 - 13:42

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

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

http://arrogance.taguilde.net/
JeYx83 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par Milouze14 le Jeu 5 Nov 2015 - 15:19

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é Wink .

Bonne continuation.
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajouter un logo + lien sur la Toolbar

Message par JeYx83 le Jeu 5 Nov 2015 - 18:59

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 ! thumright

JeYx83
**

Messages : 71
Inscrit(e) le : 25/03/2014

http://arrogance.taguilde.net/
JeYx83 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