Membres connectés récemment
[PhpBB2] Changer le lien d'une image par une icone font awesone
2 participants
Page 1 sur 1
- Version du forum :PhpBB2
- Templates modifiés :oui
- Navigateur :Opera
- Version du forum :PhpBB2
- Templates modifiés :oui
- Navigateur :Opera
Bonjour à tous,
j'ai ce js sur lequel il me faudrait changer l'image par une icone font awesone dans cette partie :
L'image en question
https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png
Le js :
le code font awesone : \f024
Ce js permet de rajouter le lien d'un message citée sous cette forme
en direct
Il suffit de cliquer sur le drapeau pour se rendre directement sur le message cité.
Vous auriez une idée de la manière de procéder ?
Merci par avance
j'ai ce js sur lequel il me faudrait changer l'image par une icone font awesone dans cette partie :
- Code:
[url=https://altitudetropicale.forums-actifs.com"+e+"-quotealtitudetropicale#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]
L'image en question
https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png
Le js :
- Code:
/* Citation avec ancre*/
$(function(){$("a[href*='&mode=quote']").on("click",function(t){t.preventDefault();var e=location.pathname.slice(0,location.pathname.indexOf("-")),i=$(this).attr("href").slice(8,$(this).attr("href").indexOf("&")),a=$(this).attr("href");$.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val("[url=https://altitudetropicale.forums-actifs.com"+e+"-quotealtitudetropicale#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]"+quote_text_info+"\n"),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotealtitudetropicale#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})});
le code font awesone : \f024
Ce js permet de rajouter le lien d'un message citée sous cette forme
- Code:
[url=https://altitudetropicale.forums-actifs.com/t4650-quotealtitudetropicale#38121][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url][quote="grandan08"]Il est tout récent et dans un pot enterré, il passera l'hiver au sous sol car il peut faire assez froid par ici...
D'ailleurs c'est quoi la limite basse pour le zébrina ?[/quote]
en direct
grandan08 a écrit:Il est tout récent et dans un pot enterré, il passera l'hiver au sous sol car il peut faire assez froid par ici...
D'ailleurs c'est quoi la limite basse pour le zébrina ?
Il suffit de cliquer sur le drapeau pour se rendre directement sur le message cité.
Vous auriez une idée de la manière de procéder ?
Merci par avance
Hello Stéphane,
tu peux tester ce script:
J'ai purement remplacé le contenu du textarea:
Par:
On passe donc du Bbcode au html.
Tout ce changement afin d'avoir une class("M14_AncoR_PosT") .
Puis le style:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
Penses a cliquer sur le bouton
Ce qui suit est facultatif Stéphane:
Ensuite, tu peux utiliser cet autre script qui va rechercher l'image actuelle déjà présente sur tes messages:
et va ajouter la même class à la balise a[href] et avec la css on masquera l'image pour laisser s'afficher l'icône de la bibliothèque Awesome .
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mets un titre explicite.
Coches Sur les sujets
Déposes ceci:
Penses a cliquer sur le bouton
Et le style dans la feuille de style:
tu peux tester ce script:
- Code:
$(function(){
$('a[href*="&mode=quote"]').on('click',function(t){t.preventDefault();
var e=location.pathname.slice(0,location.pathname.indexOf("-")),i=$(this).attr("href").slice(8,$(this).attr("href").indexOf("&")),a=$(this).attr("href");
$.get(a,function(t){quote_text_info=$("textarea",t).val(),
$(".sceditor-container").find("textarea").sceditor("instance").val('<a class="M14_AncoR_PosT"href="https://altitudetropicale.forums-actifs.com'+e+'-quotealtitudetropicale#'+i+'"></a>\n'+quote_text_info+'\n'),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){
$(".sceditor-container").find("textarea").focus()})})}),
$("a[href*='-quotealtitudetropicale#']").each(function(){
$(this).prependTo($(this).next().find("cite:first"))})});
J'ai purement remplacé le contenu du textarea:
- Code:
.val("[url=https://altitudetropicale.forums-actifs.com"+e+"-quotealtitudetropicale#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]"+quote_text_info+"\n")
Par:
- Code:
.val('<a class="M14_AncoR_PosT"href="https://altitudetropicale.forums-actifs.com'+e+'-quotealtitudetropicale#'+i+'"></a>\n'+quote_text_info+'\n')
On passe donc du Bbcode au html.
Tout ce changement afin d'avoir une class("M14_AncoR_PosT") .
Puis le style:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
- Code:
a.M14_AncoR_PosT:before
{content: "\f024";font-family: FontAwesome;}
Penses a cliquer sur le bouton
Ce qui suit est facultatif Stéphane:
Ensuite, tu peux utiliser cet autre script qui va rechercher l'image actuelle déjà présente sur tes messages:
et va ajouter la même class à la balise a[href] et avec la css on masquera l'image pour laisser s'afficher l'icône de la bibliothèque Awesome .
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mets un titre explicite.
Coches Sur les sujets
Déposes ceci:
- Code:
$(function(){
$('img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]').each(function(){
$(this).closest('a').addClass('M14_AncoR_PosT');});});
Penses a cliquer sur le bouton
Et le style dans la feuille de style:
- Code:
a.M14_AncoR_PosT img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]{display: none !important;}
Bonjour Philippe,
merci pour cette aide et pour avoir pensé à mettre en conformité l'ensemble des quotes avec le deuxième js.
Sur le premier js, tout fonctionne hormis l'affichage de l'icone.
Bizarrement, celle-ci s'affiche bien sur d'autres parties du forum mais le css n'a pas d'effet avec ce nouveau js
J'ai installé le css dans l'overall header en tout début de la feuille de style .
en code par contre, tout baigne :
merci pour cette aide et pour avoir pensé à mettre en conformité l'ensemble des quotes avec le deuxième js.
Sur le premier js, tout fonctionne hormis l'affichage de l'icone.
Bizarrement, celle-ci s'affiche bien sur d'autres parties du forum mais le css n'a pas d'effet avec ce nouveau js
J'ai installé le css dans l'overall header en tout début de la feuille de style .
en code par contre, tout baigne :
- Code:
<a class="M14_AncoR_PosT"href="https://altitudetropicale.forums-actifs.com/t2849-quotealtitudetropicale#26676"></a>
[quote="jeff"]Bonjour
[url=http://fern72.free.fr/growinglist/titre2.htm][color=#ff0000]LIEN[/color][/url]
ces listes ne prennent en compte que les plantes qui me sont cheres ( celles qui m'interessent vraiment ) , certaines sont tempérées ,d'autres plus de climats tropicaux- subtropicaux -equatoriaux , sous le ciel de la sarthe plutot en chambre de culture ou terrarium et non en exterieur sauf pour quelques unes en été.
bien sur j'ai un petit jardin exterieur avec d'autres vegetaux + ou - rares ( qui ne sont pas reportées dans ces listes)
si comme moi vous avez des plantes hobby qui deviennent vos spécialités , n’hésitez pas a poster vos listes . Peut être trouverez vous , alors, votre alter ego pour des échanges .
:dingo:
NB: merci aux administrateurs pour cette nouvelle rubrique qui j’espère vous servira .
jeff[/quote]
Re Stéphane,
tu as bien déposé:
si l'icône Awesome ne s'affiche pas, c'est que tu n'as pas installer la bibliothèque:
Si tu as un lien a me donner sur ton fofo, ce serait un plus pour le visuel.
https://forum.forumactif.com/t377879-comment-installer-et-utiliser-font-awesome-sur-son-forum#3187002
Suivre cette procédure:
tu as bien déposé:
- Code:
a.M14_AncoR_PosT:before
{content: "\f024";font-family: FontAwesome;}
si l'icône Awesome ne s'affiche pas, c'est que tu n'as pas installer la bibliothèque:
Si tu as un lien a me donner sur ton fofo, ce serait un plus pour le visuel.
https://forum.forumactif.com/t377879-comment-installer-et-utiliser-font-awesome-sur-son-forum#3187002
Suivre cette procédure:
- Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
{T_HEAD_STYLESHEET}
Je reviens sur le non affichage:
sur ce message:
https://altitudetropicale.forums-actifs.com/t2849-listes-de-culture-de-jeff#38137
On voit bien le drapeau Stéphane:
De plus, tu as un doublon de style:
Celui-ci peut être supprimé:
sur ce message:
https://altitudetropicale.forums-actifs.com/t2849-listes-de-culture-de-jeff#38137
On voit bien le drapeau Stéphane:
De plus, tu as un doublon de style:
- Code:
a.M14_AncoR_PosT::before {
content: "\f024";
font-family: FontAwesome;
}
a.M14_AncoR_PosT::before {
content: "\f024" !important;
font-family: FontAwesome !important;
}
Celui-ci peut être supprimé:
- Code:
a.M14_AncoR_PosT::before {
content: "\f024" !important;
font-family: FontAwesome !important;
}
Ah merdouille,
pas de soucis Stéphane,en regardant ce message:
https://altitudetropicale.forums-actifs.com/t3631-mettre-une-image-derriere-les-videos-youtube#38043
Le drapeau donne ce code html:
En fait le lien reprend le src de l'image
pas de soucis Stéphane,en regardant ce message:
https://altitudetropicale.forums-actifs.com/t3631-mettre-une-image-derriere-les-videos-youtube#38043
Le drapeau donne ce code html:
- Code:
<a href="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"><img src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png" alt="mettre une image derriére les vidéos youtube Flag_r10" class="" id="M14_img_0" style="display:inline" border="0"></a>
En fait le lien reprend le src de l'image
Coucou Stéphane,
tu peux ajouter ce script sur ton fofo(pour les anciennes citations nommées):
Puis dans ta feuille de style proprement dit: ajoutes ceci (tu as encore de la place):
Car comme je ne trouvais pas la c.s.s mentionnée ici:
https://www.milouze14.com/t32230-phpbb2-changer-le-lien-d-une-image-par-une-icone-font-awesone#613475
Il faudra la chercher et la supprimer puisque tu l'as déposé dans ta feuille de style .
Avec le script on avait la balise a ayant la class "M14_AncoR_PosT" .
Ce n'est donc plus une obligation de mettre la balise a avec la class:
Hum, je ne sais pas si je me suis bien fait comprendre car même moi je m'y perd
tu peux ajouter ce script sur ton fofo(pour les anciennes citations nommées):
- Code:
$(function(){
$('img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]').each(function(){
$(this).replaceWith('<span class="M14_AncoR_PosT"></span>');
});});
Puis dans ta feuille de style proprement dit: ajoutes ceci (tu as encore de la place):
- Code:
.M14_AncoR_PosT:before
{
content: "\f024";
font-family: FontAwesome;
position: absolute;
margin: 0px 0px 0px -16px;
}
Car comme je ne trouvais pas la c.s.s mentionnée ici:
https://www.milouze14.com/t32230-phpbb2-changer-le-lien-d-une-image-par-une-icone-font-awesone#613475
Il faudra la chercher et la supprimer puisque tu l'as déposé dans ta feuille de style .
Avec le script on avait la balise a ayant la class "M14_AncoR_PosT" .
Ce n'est donc plus une obligation de mettre la balise a avec la class:
- Code:
a.M14_AncoR_PosT
- Code:
<span class="M14_AncoR_PosT"></span>'
Hum, je ne sais pas si je me suis bien fait comprendre car même moi je m'y perd
Hum, tu vas avoir de la lecture .
Dans ton template, tu ne prends pas l'url directe mais juste l'ancre.
On va remédier à cela en cachant l'url du message ainsi que son titre.
J'ai testé un autre script toujours dans la même optique mais lui va te donner le lien du sujet et au survol de l'icône, tu auras le titre.
Dans ton template viewtopic_body (ligne 238) ,
tu as ceci:
Juste après dépose ceci:
Penses a enregistrer puis à valider en cliquant respectivement sur puis
Ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penses a cliquer sur le bouton
Puis le script de citation nommée:
Avec ce script tu arriveras directement au message désiré sans avoir besoin d'ouvrir une nouvelle fenêtre.
Dans ton template, tu ne prends pas l'url directe mais juste l'ancre.
On va remédier à cela en cachant l'url du message ainsi que son titre.
J'ai testé un autre script toujours dans la même optique mais lui va te donner le lien du sujet et au survol de l'icône, tu auras le titre.
Dans ton template viewtopic_body (ligne 238) ,
tu as ceci:
- Code:
<td> <span class="postdetails"style="float: left;">
Juste après dépose ceci:
- Code:
<a class="M14_topic" href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
Penses a enregistrer puis à valider en cliquant respectivement sur puis
Ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
a.M14_topic{display:none;}
Penses a cliquer sur le bouton
Puis le script de citation nommée:
- Code:
/* Citation avec ancre*/
$(function(){
$('a[href*="&mode=quote"]').on('click',function(t){t.preventDefault();
var a=$(this).attr('href');
var e=$(this).closest('table').next().find('a.M14_topic[href^="/t"]').attr('href');
var f=$(this).closest('table').next().find('a.M14_topic[href^="/t"]').text();
$.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val('<a class="M14_AncoR_PosT"href="'+e+'"title="'+f+'"></a>\n'+quote_text_info+'\n'),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotetestdesforums#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})});
Avec ce script tu arriveras directement au message désiré sans avoir besoin d'ouvrir une nouvelle fenêtre.
Bonjour Philippe,
Oups, désolé pour ce retard de suivi .
Je teste tout cela de suite.
edit : tout fonctionne hormis la redirection des anciens quotes qui ne s'effectue plus .
par exemple :
https://altitudetropicale.forums-actifs.com/t4318-colocasia-morning-dew#37883
Merci encore pour cette aide Philippe
Oups, désolé pour ce retard de suivi .
Je teste tout cela de suite.
edit : tout fonctionne hormis la redirection des anciens quotes qui ne s'effectue plus .
par exemple :
https://altitudetropicale.forums-actifs.com/t4318-colocasia-morning-dew#37883
Merci encore pour cette aide Philippe
Hello Stéphane,
ce qui me choque est que je ne touche pas au lien présent mais bel et bien à l'image.
A l'heure actuelle,comme mentionné ici:
https://www.milouze14.com/t32230-phpbb2-changer-le-lien-d-une-image-par-une-icone-font-awesone#613479
Je ne trouve pas la cause, es tu certain que ces anciens codes html étaient fonctionnels auparavant ?
ce qui me choque est que je ne touche pas au lien présent mais bel et bien à l'image.
A l'heure actuelle,comme mentionné ici:
https://www.milouze14.com/t32230-phpbb2-changer-le-lien-d-une-image-par-une-icone-font-awesone#613479
Je ne trouve pas la cause, es tu certain que ces anciens codes html étaient fonctionnels auparavant ?
Bonjour Philippe,
tout fonctionnait à la base.
Je suis tout aussi étonné que toi vu que l'url de redirection est bien présente.
Je viens d'aposer le script (avec les modifs de lien du forum) sur floratropica
http://floratropica.forumactif.org/t85-pour-milouze#465
le script
tout fonctionnait à la base.
Je suis tout aussi étonné que toi vu que l'url de redirection est bien présente.
- Code:
[url=https://altitudetropicale.forums-actifs.com/t4650-quotealtitudetropicale#38121][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url][quote="grandan08"]Il est tout récent et dans un pot enterré, il passera l'hiver au sous sol car il peut faire assez froid par ici...
D'ailleurs c'est quoi la limite basse pour le zébrina ?[/quote]
Je viens d'aposer le script (avec les modifs de lien du forum) sur floratropica
http://floratropica.forumactif.org/t85-pour-milouze#465
le script
- Code:
/* Citation avec ancre*/
$(function(){$("a[href*='&mode=quote']").on("click",function(t){t.preventDefault();var e=location.pathname.slice(0,location.pathname.indexOf("-")),i=$(this).attr("href").slice(8,$(this).attr("href").indexOf("&")),a=$(this).attr("href");$.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val("[url=http://floratropica.forumactif.org/"+e+"-quotefloratropica#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]"+quote_text_info+"\n"),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotefloratropica#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})});
Coucou Stéphane,
ce script génère une erreur, en passant le curseur de la souris sur le drapeau, on s'aperçoist que le lien est erroné Stéphane:
Il devrait récupérer ;
http://floratropica.forumactif.org/t85-pour-milouze#462
On se retrouve avec une double barre slash:
http://floratropica.forumactif.org//t85-pour-milouze#462
ce script génère une erreur, en passant le curseur de la souris sur le drapeau, on s'aperçoist que le lien est erroné Stéphane:
Il devrait récupérer ;
http://floratropica.forumactif.org/t85-pour-milouze#462
On se retrouve avec une double barre slash:
http://floratropica.forumactif.org//t85-pour-milouze#462
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum