Surligné les liens Hypertextes.

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

Résolu Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 14:24

Détails techniques

Version du forum : phpBB3
Poste 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 Smile

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

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 14:39

Bonjour ^^

Un code tout simple qu'il vous suffira de compléter ou corriger

Right 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;
}
Ici les liens auront une taille de police de 10 points, seront verts et non soulignés.
Lors du survol (a:hover) les liens deviendront rouges, soulignés et plus gros.

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 14:59

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Vable le Mer 19 Nov 2014 - 15:11

Tu peux mettre ton code sur ce sélecteur : a.topictitle:hover et logiquement ça devrait marcher. Smile

Vable
Nouveau membre

Masculin
Messages : 8
Inscrit(e) le : 19/11/2014

http://designtest.forumactif.fr
Vable a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 15:16

@Vable a écrit:Tu peux mettre ton code sur ce sélecteur : a.topictitle:hover et logiquement ça devrait marcher. Smile

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 15:44

Essayez plutôt avec les sélecteurs

.postbody a {
...
}

et
.postbody a:hover {
...
}

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 16:02

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 16:28

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.

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 16:41

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 16:51

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

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 17:00

Neptune- a écrit:
Lien par défaut : Forumactif

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 Smile


Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 18:06

Un code de ce style suffit
Code:
div.content.clearfix a {
  color: #00ff00;
}
Ici le lien apparaîtra en vert

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.

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

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 18:20

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)

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 18:33

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.

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 19:51

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 20:46

Essayez avec ceci

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)

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 20:57

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 Sad

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 20:59

@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 Sad

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.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 21:07

Phase 1

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('/'));
          }
        });
C'est du javascript et je saisis pas ce que ça vient faire dans une feuille CSS

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.

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 21:18

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 Smile 

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

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Neptunia le Mer 19 Nov 2014 - 21:30

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 :

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 Wink


Dernière édition par Neptune- le Mer 19 Nov 2014 - 21:39, édité 1 fois

Neptunia
+ Hyperactif +

Féminin
Messages : 11003
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Surligné les liens Hypertextes.

Message par Balkor le Mer 19 Nov 2014 - 21:37

Entendu, merci pour votre aide sur ce problème.

Je vais alors ouvrir un autre sujet sur ce nouveau problème Very Happy 

Merci beaucoup pour votre aide et votre patience.

Cordialement.

Balkor
**

Masculin
Messages : 57
Inscrit(e) le : 04/12/2009

http://aab-airsoft.frenchboard.com/
Balkor 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