Surligné les liens Hypertextes.
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Surligné les liens Hypertextes.
Détails techniques
Version du forum : phpBB3Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Question rébarbative de plusieurs membres du forum.
Lien du forum : http://aab-airsoft.frenchboard.com/
Description du problème
Bonjour à toutes et à tous,je souhaite mettre en place, pour une question de visibilité, un CCS qui me permettrai ou passage de la souris de faire grossir un lien Hypertexte avec une transition de couleur, je m'explique:
Au passage de la souris sur un lin Hypertexte je souhaiterai que ce dernier grossisse de une à deux taille de la police initiale et change de couleur par celle souhaité et mise dans le CSS.
J'espère m'être exprimé le plus clairement possible pour être compris
Mon forum est en phpBB3, mes CSS sont personnalisé et je tourne sous GC.
Merci d'avance.
Cordialement.
Dernière édition par Balkor le Mer 19 Nov 2014 - 21:38, édité 1 fois
Re: Surligné les liens Hypertextes.
Bonjour ^^
Un code tout simple qu'il vous suffira de compléter ou corriger
PA > Affichage > Images et couleurs > Couleurs > Onglet Feuille de style CSS
Rajouter :
Lors du survol (a:hover) les liens deviendront rouges, soulignés et plus gros.
Un code tout simple qu'il vous suffira de compléter ou corriger
PA > Affichage > Images et couleurs > Couleurs > Onglet Feuille de style CSS
Rajouter :
- Code:
a {
font-size: 10px;
color: #00ff00;
text-decoration: none;
}
a:hover {
font-size: 16px;
color: #ff0000;
text-decoration: underline;
}
Lors du survol (a:hover) les liens deviendront rouges, soulignés et plus gros.
Re: Surligné les liens Hypertextes.
Merci de votre aide mais j'aurais encore quelque chose à vous demandez ?
Quelle ligne dois-je modifié pour éviter que cela le fasse a tout les liens ?
Car je ne souhaite que ce CSS soit appliquer que dans les sujets.
Cordialement.
Quelle ligne dois-je modifié pour éviter que cela le fasse a tout les liens ?
Car je ne souhaite que ce CSS soit appliquer que dans les sujets.
Cordialement.
Re: Surligné les liens Hypertextes.
Tu peux mettre ton code sur ce sélecteur : a.topictitle:hover et logiquement ça devrait marcher.
Re: Surligné les liens Hypertextes.
Vable a écrit:Tu peux mettre ton code sur ce sélecteur : a.topictitle:hover et logiquement ça devrait marcher.
Cela ne change rien sa m'annule tout donc rien ne fonctionne cela reste comme avant.
J'ai remarqué aussi que les premières ligne de code
- Code:
a {
font-size: 10px;
color: #00ff00;
text-decoration: none;
}
Ne font rien, tout les liens sont blanc et deviennent rouge et plus gros quand je passe la souris dessus.
Re: Surligné les liens Hypertextes.
Essayez plutôt avec les sélecteurs
et
.postbody a {
...
}
et
.postbody a:hover {
...
}
Re: Surligné les liens Hypertextes.
Cela fonctionne bien mieux merci beaucoup Neptune.
Mais j'aurais souhaité faire plus "propre" si je puis m'exprime ainsi, les tires des poste sont eux aussi concerné et j'aurais souhaité que non.
Par ailleurs si on ne passe pas la souris sur les liens en question, dans le message posté, ils restes normaux car comme je l'ai explique plus haut on ne différencie pas l'avant d'après.
J'espère être compréhensible dans mes dires.
Pardonner moi d'être aussi pointilleux.
Mais j'aurais souhaité faire plus "propre" si je puis m'exprime ainsi, les tires des poste sont eux aussi concerné et j'aurais souhaité que non.
Par ailleurs si on ne passe pas la souris sur les liens en question, dans le message posté, ils restes normaux car comme je l'ai explique plus haut on ne différencie pas l'avant d'après.
J'espère être compréhensible dans mes dires.
Pardonner moi d'être aussi pointilleux.
Re: Surligné les liens Hypertextes.
Pour le premier point :
Utilisez les sélecteurs suivants pour n'impacter que le corps des messages
div.content.clearfix a
div.content.clearfix a:hover
ou ceci pour impacter message + signature.
div.content.clearfix a, div.signature_div a
div.content.clearfix a:hover, div.signature_div a:hover
Pour le deuxième point, bah soit j'ai pas compris le problème, soit vous n'avez pas compris ma réponse.
En principe les liens impactés ne changeront qu'au survol et reviendront "normaux" dès la fin du survol.
Si ce qui pose souci est que mon code modifie vos liens pré-existants il suffit de ne garder que les sélecteurs incluant :hover et de supprimer les autres qui reprendront leurs caractèristiques actuelles.
Utilisez les sélecteurs suivants pour n'impacter que le corps des messages
div.content.clearfix a
div.content.clearfix a:hover
ou ceci pour impacter message + signature.
div.content.clearfix a, div.signature_div a
div.content.clearfix a:hover, div.signature_div a:hover
Pour le deuxième point, bah soit j'ai pas compris le problème, soit vous n'avez pas compris ma réponse.
En principe les liens impactés ne changeront qu'au survol et reviendront "normaux" dès la fin du survol.
Si ce qui pose souci est que mon code modifie vos liens pré-existants il suffit de ne garder que les sélecteurs incluant :hover et de supprimer les autres qui reprendront leurs caractèristiques actuelles.
Re: Surligné les liens Hypertextes.
Pour le premier point, merci beaucoup c'est exactement ce que je souhaiter merci encore.
Concernant le deuxième point c'est surement moi qui me suis mal exprimé, pour faire simple je souhaite différencier les liens Hypertexte du texte général par une couleur et/ou une taille et par la suite une fois que la souris passe dessus agrandir la taille de la police de ceux dernier ou bien alors différencier les liens Hypertexte du texte général par une taille plus grande ou avec une couleur et un soulignement sans avoir le "survol" de la souris.
Merci par avance.
Concernant le deuxième point c'est surement moi qui me suis mal exprimé, pour faire simple je souhaite différencier les liens Hypertexte du texte général par une couleur et/ou une taille et par la suite une fois que la souris passe dessus agrandir la taille de la police de ceux dernier ou bien alors différencier les liens Hypertexte du texte général par une taille plus grande ou avec une couleur et un soulignement sans avoir le "survol" de la souris.
Merci par avance.
Re: Surligné les liens Hypertextes.
Pour le changement au survol c'est le pseudo élément :hover qui s'en charge.
Pour ce qui est de différencier le lien du reste du message, il y a quelques limites.
L'élément a permet de définir l'aspect des liens mais si par exemple vous décidez que les liens présents dans les messages de votre forum doivent être rouges, gras et de taille 12px et que vous avez un membre qui écrit systématiquement en gras, rouge et en taille 12, bah aucun css ne viendra contrecarrer le formatage choisi par l'auteur du message.
De la même façon on peut avec un peu de bbcode forcer la couleur d'un lien.
Lien par défaut : Forumactif
Lien coloré et graissé par l'utilisateur : Forumactif
Pour ce qui est de différencier le lien du reste du message, il y a quelques limites.
L'élément a permet de définir l'aspect des liens mais si par exemple vous décidez que les liens présents dans les messages de votre forum doivent être rouges, gras et de taille 12px et que vous avez un membre qui écrit systématiquement en gras, rouge et en taille 12, bah aucun css ne viendra contrecarrer le formatage choisi par l'auteur du message.
De la même façon on peut avec un peu de bbcode forcer la couleur d'un lien.
Lien par défaut : Forumactif
Lien coloré et graissé par l'utilisateur : Forumactif
Re: Surligné les liens Hypertextes.
Entendu je comprends.
Pour ceux qui est des membres ils ont consignes de n'écrire qu'en blanc standard ( pas en gras, italique ou autre ) je leurs et conseillé de mettre les liens Hypertexte en couleur si possible et souligné pour les différencier, d'où ma question et ce sujet.
Pour citer un exemple plus contrait, je souhaite avoir le résultat comme vous avez indiqué par le lien défaut pour éviter plusieurs manipulations aux membres de mon forum, certain n'y connaissant pas grand chose
Re: Surligné les liens Hypertextes.
Un code de ce style suffit
Si ça ne suffit pas, il faudra nous donner le lien d'un message visible en invité et contenant au moins un lien pour comprendre ce qui rentre en conflit.
A noter que votre bloc de css pour le survol peut contenir des attributs (color, font-size ...) plus nombreux ou différents de ceux présents pour le même élément non survolé.
- Code:
div.content.clearfix a {
color: #00ff00;
}
Si ça ne suffit pas, il faudra nous donner le lien d'un message visible en invité et contenant au moins un lien pour comprendre ce qui rentre en conflit.
A noter que votre bloc de css pour le survol peut contenir des attributs (color, font-size ...) plus nombreux ou différents de ceux présents pour le même élément non survolé.
Re: Surligné les liens Hypertextes.
Non cela ne change rien le lien reste blanc il n'y a aucun changement sauf si l'on passe la souris dessus.
Voici le lien d'un message concerné:
Message
C'est le deuxième message en partant du bas de la deuxième page, le lien est nommé (Celle-ci)
Voici le lien d'un message concerné:
Message
C'est le deuxième message en partant du bas de la deuxième page, le lien est nommé (Celle-ci)
Re: Surligné les liens Hypertextes.
J'ai beau regarder, je vois bien (celle-ci) mais ce n'est pas cliquable, donc ce n'est pas un lien et le css n'y changera rien.
En revanche le lien de fin de ce message est cliquable et a un effet au survol.
En revanche le lien de fin de ce message est cliquable et a un effet au survol.
Re: Surligné les liens Hypertextes.
Le lien de ( celle-ci ) est bien cliquable il ramène bien au site conforme.
Par contre sa ne différencie pas automatique, par la couleur, le lien Hypertexte du texte général si on ne le fait pas manuellement.
Par contre sa ne différencie pas automatique, par la couleur, le lien Hypertexte du texte général si on ne le fait pas manuellement.
Re: Surligné les liens Hypertextes.
Essayez avec ceci
Je pense pas que ça marchera mais sait on jamais.
Si cela ne fonctionne pas, merci de fournir :
- L'intégralité de votre feuille CSS (j'ai cru y apercevoir un bout de code javascript dedans)
- Une capture écran de la page Affichage > Couleurs
Seul le haut de page m’intéresse
- Couleur du Texte :
- Couleur du Lien :
- Couleur du Lien Visité :
- Couleur du Lien Actif :
- Couleur du Lien survolé :
PS : je me suis inscrit pour voir en live. Je vous demanderai de supprimer mon compte lorsque le souci sera réglé (ou que j'aurai abandonné lol)
- Code:
div.content.clearfix a {
color: #00ff00 !important;
}
Je pense pas que ça marchera mais sait on jamais.
Si cela ne fonctionne pas, merci de fournir :
- L'intégralité de votre feuille CSS (j'ai cru y apercevoir un bout de code javascript dedans)
- Une capture écran de la page Affichage > Couleurs
Seul le haut de page m’intéresse
- Couleur du Texte :
- Couleur du Lien :
- Couleur du Lien Visité :
- Couleur du Lien Actif :
- Couleur du Lien survolé :
PS : je me suis inscrit pour voir en live. Je vous demanderai de supprimer mon compte lorsque le souci sera réglé (ou que j'aurai abandonné lol)
Re: Surligné les liens Hypertextes.
- Code:
.sceditor-container textarea{
color:#FFFFFF!important;
}
.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://i82.servimg.com/u/f82/18/23/88/22/share-10.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}#quick_reply #av_quickreply{
display: table-cell;
width: 200px;
}
#quick_reply #textarea_content{
width: 800px !important;
display: table;
}
#quick_reply #text_editor_controls{
position: relative;
left: 100px;
}ul.topiclist dd.dterm, ul.topiclist dt {
padding-left: 70px;
width: 50%;
}span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span { display: none; }
.panel, .module, .forabg { border-radius: 5px; }
#main { padding-left: 10px; }
$(function() {
var links = $('.post a'), local = document.URL.replace(location.hash, '').replace(location.pathname, ''), reg = /\.(png|jpg|jpeg|gif)$/i;
for(var i = 0, l; (l = links[i++]); ) {
if(l.innerHTML !== l.href) continue;
if(reg.test(l.href)) l.innerHTML = '';
if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
}
});
div.content.clearfix a {
color: #00ff00 !important;
}
div.content.clearfix a:hover {
font-size: 14px;
color: #FFEA00;
}
Le dernier que vous m'avez donné ne change rien
Voici un screen du PA comme demander plus haut:
Vous avez bien fait de vous inscrire pour voir le problème en direct, je me suis permis de changer les droits pour que vous ayez plus de liberté par la suite si il en faut plus nous aviserons.
Re: Surligné les liens Hypertextes.
Balkor a écrit:
- Code:
.sceditor-container textarea{
color:#FFFFFF!important;
}
.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://i82.servimg.com/u/f82/18/23/88/22/share-10.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}#quick_reply #av_quickreply{
display: table-cell;
width: 200px;
}
#quick_reply #textarea_content{
width: 800px !important;
display: table;
}
#quick_reply #text_editor_controls{
position: relative;
left: 100px;
}ul.topiclist dd.dterm, ul.topiclist dt {
padding-left: 70px;
width: 50%;
}span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span { display: none; }
.panel, .module, .forabg { border-radius: 5px; }
#main { padding-left: 10px; }
$(function() {
var links = $('.post a'), local = document.URL.replace(location.hash, '').replace(location.pathname, ''), reg = /\.(png|jpg|jpeg|gif)$/i;
for(var i = 0, l; (l = links[i++]); ) {
if(l.innerHTML !== l.href) continue;
if(reg.test(l.href)) l.innerHTML = '';
if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
}
});
div.content.clearfix a {
color: #00ff00 !important;
}
div.content.clearfix a:hover {
font-size: 14px;
color: #FFEA00;
}
Le dernier que vous m'avez donné ne change rien
Voici un screen du PA comme demander plus haut:
Vous avez bien fait de vous inscrire pour voir le problème en direct, je me suis permis de changer les droits pour que vous ayez plus de liberté par la suite si il en faut plus nous aviserons.
EDIT:
Le survol de la souris sur les liens du message fonctionne parfaitement mais la choses qui pose problème est que sans cette "manip" rien n'est différent sauf si modifications de l'utilisateur lui même.
Re: Surligné les liens Hypertextes.
Phase 1
Essayez de supprimer la portion suivante de votre feuille CSS
Regardez ce que ça donne sans, puis
Phase 2 :
Mettez le code suivant :
Si la phase 2 fonctionne, essayez pour la phase 3 d'enlever le !important.
Essayez de supprimer la portion suivante de votre feuille CSS
- Code:
$(function() {
var links = $('.post a'), local = document.URL.replace(location.hash, '').replace(location.pathname, ''), reg = /\.(png|jpg|jpeg|gif)$/i;
for(var i = 0, l; (l = links[i++]); ) {
if(l.innerHTML !== l.href) continue;
if(reg.test(l.href)) l.innerHTML = '';
if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
}
});
Regardez ce que ça donne sans, puis
Phase 2 :
Mettez le code suivant :
- Code:
div.content.clearfix a, div.content.clearfix a:link, div.content.clearfix a:visited {
color: #00ff00 !important;
}
Si la phase 2 fonctionne, essayez pour la phase 3 d'enlever le !important.
Re: Surligné les liens Hypertextes.
Pour le javascript je ne sais pas non plus qu'es que sa fou la et ne l'avais pas vue, se n'est pas moi qui l'ai incorporé mais surement une autre personne, bref.
Pour ceux qui est de la phase 2 et 3 cela fonctionne très bien ! Si je le pouvais je vous embrasserai
Sinon juste une dernière question est-il possible, sans bien vous acharné encore :p , de faire un soulignement automatique des liens hypertextes via la feuille CSS ? :$
EDIT:
Je viens de m'apercevoir que le texte dans les "cases" de message ( la ou on rédige avec de poster ) et assez gris foncé sur le fond noir cela gêne la visibilité.
Pour ceux qui est de la phase 2 et 3 cela fonctionne très bien ! Si je le pouvais je vous embrasserai
Sinon juste une dernière question est-il possible, sans bien vous acharné encore :p , de faire un soulignement automatique des liens hypertextes via la feuille CSS ? :$
EDIT:
Je viens de m'apercevoir que le texte dans les "cases" de message ( la ou on rédige avec de poster ) et assez gris foncé sur le fond noir cela gêne la visibilité.
Re: Surligné les liens Hypertextes.
Et simplement en retirant le javascript sans toucher au reste, ça changeait rien ?
Pour le soulignement me semble qu'il faut rajouter text-decoration: underline ce qui donnerait au final :
Pour votre edit, la question est sans rapport avec le traitement des liens dans les messages. Je vous invite à ouvrir un sujet à part.
Merci pour la suppression de mon compte
Pour le soulignement me semble qu'il faut rajouter text-decoration: underline ce qui donnerait au final :
- Code:
div.content.clearfix a, div.content.clearfix a:link, div.content.clearfix a:visited {
color: #00ff00;
text-decoration: underline;
}
Pour votre edit, la question est sans rapport avec le traitement des liens dans les messages. Je vous invite à ouvrir un sujet à part.
Merci pour la suppression de mon compte
Dernière édition par Neptune- le Mer 19 Nov 2014 - 21:39, édité 1 fois
Re: Surligné les liens Hypertextes.
Entendu, merci pour votre aide sur ce problème.
Je vais alors ouvrir un autre sujet sur ce nouveau problème
Merci beaucoup pour votre aide et votre patience.
Cordialement.
Je vais alors ouvrir un autre sujet sur ce nouveau problème
Merci beaucoup pour votre aide et votre patience.
Cordialement.
Sujets similaires
» Affichage des liens forum différent des liens messages
» Mettre un liens hypertextes
» Utilisateur surligné
» changer la couleur quand on surligne
» Problème d'apparence des liens survolés et des liens cliqués sur page d'accueil et pop-up ?
» Mettre un liens hypertextes
» Utilisateur surligné
» changer la couleur quand on surligne
» Problème d'apparence des liens survolés et des liens cliqués sur page d'accueil et pop-up ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum