Rendre les liens plus visibles (en couleur)

[-Méphisto-]

Bonjour  

Quand on poste un "mot lien cliquable" grâce au bouton "Insérer un lien", celui-ci passe parfois inaperçu ou n'est pas toujours interprété comme un lien sur lequel cliquer, car étant de la même couleur que les mots normaux.

Y a-t-il moyen de paramétrer le mot lien de façon à ce qu'il soit par défaut d'une certaine taille ou  couleur par exemple ?

Merci d'avance pour vos réponses.

[néco]

salut !

vas sur ton panneau d'admin et à l'onglet "affichage" >>> tu vas sur "couleurs"



sur la seconde ligne tu décide de la nouvelle couleur de tous les liens clicable ! (attention , ça les fait tous tous , même ceux auquel tu ne pense pas ! ^^ )

sur ma capture , la flèche verte t'indique où choisir une couleur pour le lien survolé
ça veux dire qu'il deviens de la couleur que tu as choisi lorsque l'on passe la souris dessus uniquement !
(la fléche rouge indique la couleur que tu lui donne lorsqu'on ne passe pas la souris dessus , sa couleur constante quoi ! ^^ )

espérant t'avoir peut-être aidé !


bizzz

[demeter1]

Neco, l'utilisation de cette partie modifie également l'ensemble des liens cliquables sur l'index et les sous forums.
Si Méphisto utilise cette méthode, il lui faudra modifier tous les titres de son forum en leur appliquant directement une couleur.

[birguite]

bonjour,

moi je me sers de l'éditeur en choisissant une police plus grande
comme ceci:

Voir ici
ou
plus visible encore



cordialement

[-Méphisto-]

C'est ce que je fais jusqu'à présent, mais je pensais surtout aux messages des membres que je dois souvent éditer pour que tous vient le lien posté qui passait inaperçu ...

Dommage qu'il n'y ait pas de solution intermédiaire permettant de configurer une couleur et une taille uniquement pour les liens postés dans les messages ...  

J'ignore si techniquement c'est possible de le faire par une manip, ou si ça peut faire l'objet d'une suggestion techniquement réalisable. Sinon, ce ne serait pas la peine de le faire.

[Nothal]

Salut. C'est pour le forum de ton profil ? Si oui, essai :

Code:

.postbody a{
  font-size: 20px;
  color: #CC0000;
}

tu configures selon tes besoins.

[birguite]

ok ok  


j'ai changé la couleur de certains liens avec ceci dans le CSS

Code:

h1.page-title {
          color: #543800 !important;/*couleur certains liens fixes*/
        }

ça marche pour le phpb3


 

[-Méphisto-]

---

Chez moi, ni l'un ni l'autre n'a fonctionné  

Il fallait modifier des espaces, faire autre chose ?

L'un comme l'autre était bien pour le CSS ?

[MlleAlys]

bonjour,
je crois que tu as déjà un code de ce genre dans ton css :

Code:

.postbody a {
  color: #33c;
  font-size: 20px;
}

essaye d'ajouter !important derrière le code couleur :

Code:

.postbody a {
  color: #33c !important;
  font-size: 20px;
}

et si tu veux ajouter un soulignement :

Code:

.postbody a {
  color: #33c !important;
  font-size: 20px;
  text-decoration: underline !important;
}

et ces codes ce mettent bien dans le css ^^

[-Méphisto-]

Han, merci beaucoup MlleAlys, c'est génial !!!!

En plus, du premier coup la couleur que je souhaitais !  


Juste au cas où, y a-t-il moyen que ça change de couleur au passage du curseur, comme c'est souvent le cas des lien ?

Pourrait-on configurer de la même manière une taille ou une police par exemple ?

[MlleAlys]

(oui pour la oculeur j'ai reprise celle que j'ai trouvée sur ton forum xD)

et oui tout ça est possible ^^
par contre on va peut être modifier le code précédent du coup...

je me demandais, as tu ces codes là dans ton css ?

Code:

a.postlink:visited {
color: #000;
text-decoration: none;
}

Code:

a.postlink:link {
color: #000;
text-decoration: none;
}

Si oui tu peux les supprimer, à moins qu'ils ne te servent à quelque chose de particulier autre part sur ton forum...
Et, si tu les a supprimer, alors la suite est facile : déjà on peut retirer les "!important" mis dans le code précédent :

Code:

.postbody a {
  color: #33c;
  font-size: 20px;
  text-decoration: underline;
}

Je crois qu'il y a alors déjà un effet de couleur au passage de la souris sur le lien...
Si tu veux modifier la couleur, tu peux utiliser ce code :

Code:

.postbody a:hover {
  color: COULEUR;
}

où tu remplace COULEUR par le code de la couleur désirée du lien au survol de la souris ^^
(.postbody permet de se restreindre aux messages, a correspond aux liens, :hover pour seulement au passage de la souris ^^)

Pour modifier la taille des liens, tu as déjà la ligne nécessaire dans le code donné auparavant, et tu peux ajouter une ligne pour la police :

Code:

/*mise en forme des liens dans les messages*/
.postbody a {
  color: #33c;  /*couleur des liens*/
  font-size: 20px;  /*taille de la police des liens*/
  font-family: time news roman;  /*police des liens*/
  text-decoration: underline;  /*liens soulignés*/
}

tu peux bien sûr modifier la valeur pour la taille ainsi que la police ^^
Si c'est au survol du lien que tu veux modifier cela, alors il faut compléter le code que j'ai donné juste au dessus, sur le même principe :

Code:

/*mise en forme des liens dans les messages au survol de la souris*/
.postbody a:hover {
  color: COULEUR;
  font-size: 20px;  /*taille de la police des liens au survol*/
  font-family: time news roman;  /*police des liens au survol*/
}

[-Méphisto-]

Il me semble qu'un détail doit clocher, mais comme je jongle entre plein d'activités et que je suis peu chez moi ces jours-ci, je poste pour que le topic ne soit pas verrouiller (mais il semble que les liens ne changent pas de couleur au passage de la souris par exemple)

[MlleAlys]

Il me semble qu'ils le font si tu as supprimé les codes que j'avais précisé au dessus et retiré les "!important" , c'est une option du panneau d'administration, dans "couleurs" : "couleur du lien au survol", mais cette option du panneau modifie les liens de tous le forum, et pas seulement dans les messages, contrairement au code que j'ai donné dans mon message précédent

[-Méphisto-]

(oui pour la oculeur j'ai reprise celle que j'ai trouvée sur ton forum xD)

et oui tout ça est possible ^^
par contre on va peut être modifier le code précédent du coup...

je me demandais, as tu ces codes là dans ton css ?

Code:

a.postlink:visited {
color: #000;
text-decoration: none;
}

Code:

a.postlink:link {
color: #000;
text-decoration: none;
}

Si oui tu peux les supprimer, à moins qu'ils ne te servent à quelque chose de particulier autre part sur ton forum...

Ce ne sont pas les mêmes codes, mais j'ai juste une mention "texte-decoration" comme dans ceux que tu cites :

Code:

.postbody a {
          color: #33c !;
          font-size: 20px;
          text-decoration: underline !;
        }

J'ai mis ça pour la couleur, mais au passage de la souris, pas de changement de couleur (mais les modifs de taille sont effectives)

Code:

    /*mise en forme des liens dans les messages au survol de la souris*/
        .postbody a:hover {
          color: color=#ff3333;
          font-size: 21px;  /*taille de la police des liens au survol*/
          font-family: time news roman;  /*police des liens au survol*/
        }

[MlleAlys]

Code:

.postbody a {
  color: #33c !;
  font-size: 20px;
  text-decoration: underline !;
}

Il faut également retirer les point d'exclamations

Et il y a une erreur dans le dernier code, tu as mis color: color=#ff3333;
Il faut changer en color:#ff3333;

[FANCH 56]

Bonsoir

Essaie ceci dans ton CSS. Tu peux modifier le code couleur

Code:

/* ************** LIENS ********************************************************* */

a:link, a:visited, a:hover, a:active, a:focus {

 text-decoration: none;
}

a:visited {

 color: #770011;
}

a:hover {

 font-style:italic;
}

a:hover {

 text-decoration: none !important;
}


Voilà ce que cela donne :

[-Méphisto-]

Mais moi je me suis un peu perdue, du coup, il ne reste que le souci de la couleur au survol ? ^^" (rem : le changement de couleur ne fonctionne pas si le lien est dans le message entouré d'une balise color)

Désolé, moi aussi, je commence un peu ...

Ça marche en partie !

Mais cette astuce marche-t-elle pour les "liens mots" également ?

Car comme avant je les écrivais avec un code couleur en les écrivant, mais même en enlevant le code couleur du message, le code couleur css ne prend pas le relais, sauf pour le soulignement quand on passe la souris (mais pas de soulignement du mot lien dans le message sans survol, alors que les liens de pages internet sont déjà colorés et soulignés.


Vois par exemple le mot lien dans ce topic, qui devrait être bleu et souligné (partie 1)

http://cafet.1fr1.net/t15-charte-d-utilisation-du-forum

Et en-dessous tu trouves des liens de pages internet, déjà en bleu et souligné ...

[-Méphisto-]

Bonsoir

Essaie ceci dans ton CSS. Tu peux modifier le code couleur

Code:

/* ************** LIENS ********************************************************* */

a:link, a:visited, a:hover, a:active, a:focus {

 text-decoration: none;
}

a:visited {

 color: #770011;
}

a:hover {

 font-style:italic;
}

a:hover {

 text-decoration: none !important;
}


Voilà ce que cela donne :

Merci à toi aussi, je jette un œil après manger  

[MlleAlys]

J'ai mis ça pour la couleur, mais au passage de la souris, pas de changement de couleur (mais les modifs de taille sont effectives)

Code:

     /*mise en forme des liens dans les messages au survol de la souris*/
        .postbody a:hover {
          color: color=#ff3333;
          font-size: 21px;  /*taille de la police des liens au survol*/
          font-family: time news roman;  /*police des liens au survol*/
        }

Et il y a une erreur dans le dernier code, tu as mis color: color=#ff3333;
Il faut changer en color:#ff3333;  

Désolée, j'avais édité, mais trop tard apparemment, je ne sais pas si tu as vu ^^"

[-Méphisto-]

Voici ce que j'ai actuellement :

Code:

/*mise en forme des liens dans les messages*/
        .postbody a {
          color: #33c;  /*couleur des liens*/
          font-size: 20px;  /*taille de la police des liens*/
          font-family: time news roman;  /*police des liens*/
          text-decoration: underline;  /*liens soulignés*/
        }
        /*mise en forme des liens dans les messages au survol de la souris*/
        .postbody a:hover {
          color: #ff3333;
          font-size: 21px;  /*taille de la police des liens au survol*/
          font-family: time news roman;  /*police des liens au survol*/
        }

Je change ça

[-Méphisto-]

A présent, j'ai ceci, mais les mots liens ne sont ni bleu ni souligné avant passage de la souris.

Code:

/*mise en forme des liens dans les messages*/
        .postbody a {
          color:#33c;  /*couleur des liens*/
          font-size: 20px;  /*taille de la police des liens*/
          font-family: time news roman;  /*police des liens*/
          text-decoration: underline;  /*liens soulignés*/
        }
        /*mise en forme des liens dans les messages au survol de la souris*/
        .postbody a:hover {
          color:#ff3333;
          font-size: 21px;  /*taille de la police des liens au survol*/
          font-family: time news roman;  /*police des liens au survol*/
        }

[MlleAlys]

Est-ce que je pourrais voir ton css complet s'il te plait ? ^^ Pour voir s'il y a d'autres endroits où les liens sont mis en forme...

[-Méphisto-]

Il me semble qu'il y avait un code mis en place avant le changement d'interface et qui permettait de mettre les boutons "gras" "italiques" cerclé de bleu au passage du curseur, comme c'était le cas ici aussi "à l'époque". C'est peut-être ça :

Code:

/*NE PAS TOUCHER Decalage des bouton citer etc*/
.post-options span{position:relative;right:50px;}
/*Fin*/

/*NE PAS TOUCHER On masque les votes définis par le FDF*/
div.vote .vote-no-bar, div.vote div.vote-bar + div.vote-button, div.vote div.vote-no-bar + div.vote-button
{ display: none; }
/*Fin*/
/*NE PAS TOUCHER On défini un endroit precis pour le module des votes*/
.M14_vote {position:absolute;margin-top:5px;margin-left:-40px;width:30px;height:20px;}
/*Fin
/*Apparence des votes affiches */

.vote-count
{
background: url("http://milouze14.fr/billboard32.png") no-repeat scroll 0 0 transparent;/*modifie l image ici*/
color: #4AAE00;
font-size: 10px;
font-weight: 700;
height: 32px;/*mettre la hauteur de l image*/
padding-top:3px;
text-align: center;
width: 32px;/*mettre la largeur de l image*/
cursor:pointer;
  -webkit-transition: all 1s ease;  
-moz-transition: all 1s ease;  
-o-transition: all 1s ease;  
transition: all 1s ease;
}
/*Fin*/
/*Couleur différente au survol des votes affiches*/
.vote-count:hover {color:#91003F;}
/*Fin*/
.bouhautbas
{    
  bottom: 40px;    
  left: 10px; /* remplacez left par right pour afficher les boutons à droite */    
  position: fixed;    
  z-index: 100;
}
 



.signature_div img
{
max-height:150px;
max-width:600px;
}

        
       /* ****************** OUI POUR INVISIBLE SUPPRIMÉ*************** */
       
       input[name=hideonline] { display:none; }
        
         
        button.button2:hover , input.button2:hover
        {
            background-position: 0px 100%;
            border: 1px solid #00A5CD !important;
            box-shadow: 1px 1px 5px !important;
            color: #00A5CD !important;
            text-decoration:none !important;
          -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        }

/*taille smileys et masquage bouton heure et date*/
        /*---  Smileys ---*/
        
       .sceditor-emoticons {
        width: 350px !important;
        height: 250px !important;
        overflow: auto !important;
        }
        img.smiley {
        width: auto !important;
        height : auto !important;
        }

.sceditor-button.sceditor-button-date {
  display: none;
}


.sceditor-button.sceditor-button-time {
  display: none;
}

.sceditor-button.sceditor-button-pastetext, .sceditor-button.sceditor-button-removeformat {
       display: none;
}

/*Avatar réponse rapide*/
                       #av_quickreply img{
          position: relative;
          top: 35px;
          left: 15px;
        }
        
       #av_quickreply {
          float: left;
        }
/*agrandissement réponse rapide*/
           .sceditor-container textarea, .sceditor-container iframe {
            height: 300px !important;  /*hauteur éditeur*/
        }    
   
        table.forumline.noprint .sceditor-container.ltr.wysiwygMode iframe {
        width: 900px !important;
        }

        /*cadre sans espace gris sous smileys et fenetre*/
        #smileyContainer iframe {
            height: 300px;
        }
        .sceditor-container.ltr.wysiwygMode {
            margin-bottom: -15px;
        }
        #sceditor_smilies body {
            background: none;  /*pas de fond*/
            border: 1px solid black;    /*bordure*/
        }
        /*mise en forme des liens dans les messages*/
        .postbody a {
          color:#33c;  /*couleur des liens*/
          font-size: 20px;  /*taille de la police des liens*/
          font-family: time news roman;  /*police des liens*/
          text-decoration: underline;  /*liens soulignés*/
        }
        /*mise en forme des liens dans les messages au survol de la souris*/
        .postbody a:hover {
          color:#ff3333;
         font-size: 21px;  /*taille de la police des liens au survol*/
          font-family: time news roman;  /*police des liens au survol*/
        }

[MlleAlys]

Bon je n'ai rien vu, alors on va essayer avec ça : remplace ce qu'on a fait jusqu'ici par ça :

Code:

/*MISE EN FORME DES LIENS DANS LES MESSAGES*/

.postbody a, .postbody a:link, .postbody a:visited, .postbody a:active, .postbody a.postlink, .postbody a.postlink:link, .postbody a.postlink:visited, .postbody a.postlink:active {
    color:#33c;  /*couleur des liens*/
    font-size: 20px;  /*taille de la police des liens*/
    font-family: time news roman;  /*police des liens*/
    text-decoration: underline;  /*liens soulignés*/
}

.postbody a:hover, .postbody a.postlink:hover {
    color:#ff3333 !important;  /*couleur des liens au survol*/
    font-size: 21px;  /*taille de la police des liens au survol*/
    font-family: time news roman;  /*police des liens au survol*/
}


/*FIN DE LA MISE EN FORME DES LIENS*/

(j'ai repris le code précédent et je l'ai appliqué j'espère à toutes les sortes de liens qui apparaissent dans les messages sur ton forum)

...
Est-ce que c'est bon cette fois ? ^^" ou bien ya encore un truc qui coince ? =/

[-Méphisto-]

Je ne vois pas de changement  

Les liens de pages internet sont toujours bons (en couleur, souligné, et avec changement de couleur au passage de la souris) mais les "liens mots" restent sans couleur et sans soulignement (mais ils changent de couleur au passage de la souris et sont soulignés qu'à ce moment-là)


Regarde l'exemple de la page que je t'ai donnée, où on trouve un "mot lien" dans la partie 1)
mais il n'est pas de suite identifié visuellement comme un lien.

http://cafet.1fr1.net/t15-charte-d-utilisation-du-forum

[MlleAlys]

grrrrr !

Code:

/*MISE EN FORME DES LIENS DANS LES MESSAGES*/

.postbody a, .postbody a.postlink {
    color:blue;  /*couleur des liens*/
    font-size: 20px;  /*taille de la police des liens*/
    font-family: time news roman;  /*police des liens*/
    text-decoration: underline;  /*liens soulignés*/
}

.postbody a:hover, .postbody a.postlink:hover {
    color:red;
    font-size: 21px;  /*taille de la police des liens au survol*/
    font-family: time news roman;  /*police des liens au survol*/
}


/*FIN DE LA MISE EN FORME DES LIENS*/

Je suis revenue à quelque chose de plus simple... quand j'essaye ça a l'air de fonctionner pour l'exemple précis que tu m'as donné ! Mais je ne comprends pas pourquoi le précédent ne fonctionne pas, j'ai dû faire une erreur bête quelque part, ou alors il y a une explication logique, mais c'est très frustrant ! ><"


...
alors ? =S

[-Méphisto-]

Là, a priori, c'est nickel !!!!!!!!
Un grand merci pour tout, et plus encore pour ta patience et ta persévérance !

[MlleAlys]

hip hip hip: hourra! pour nous !!! \o/
et désolée pour tous les codes inutiles plus tôt alors =S

(et n'oublie pas de passer le sujet en  ^^)