Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2516 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Couleur d'un lien qui change quand clic

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Couleur d'un lien qui change quand clic

n°2021976
Haloavanda​ha
Posté le 09-09-2010 à 01:49:18  profilanswer
 

Bonjour,
 
Je developpe actuellement un blog sous Wordpress. Une simple base avec plusieurs utilisateurs, qui iront saisir chaque jours des informations, dans des articles (posts).
Actuellement, lorsqu'un utilisateur clique sur un message, le lit, et il reviens sur la page "home". Le titre du post qu'il a lu n'a pas changé. Ce que je voudrai, c'est changé la couleur du titre, afin qu'il y ai une vision globale de ce qu'il a lu ou pas (comme sur la plupart des forums).
Apres avoir recherché, j'ai appris qu'il fallait que je modifie mon style.css.
J'ai recup 2 lignes de code, mais je suis tres neophyte en programmation.

Code :
  1. h2.title a:visited{color: #f00; }
  2. h2.title a:hover{color: #f00 !important; }


 
Voici le bout de code dans lequel il faudrai surement l'intégrer :

Code :
  1. /* post */
  2. .post, .page{margin:1em 0 2em 0;padding:0 0 .6em;display:block;background:transparent url(images/dot.gif) repeat-x left bottom;}
  3. .post.preview-title{background:none;}
  4. body.single-page .page, body.single-post .post{background: none;margin:0;padding:0;}
  6. .post.asides{
  7.   border: 4px solid #eee;
  8.   background-color: #fff;
  9.   background-image: none;
  10.   padding: 5px 10px;
  11. }
  13. .post.sticky{
  14.   /* needs redesigned */
  15. }
  17. h2.title{
  18.   font-weight: bold;
  19.   font-size: 180%;
  20.   margin:0 0 .2em 0;
  21.   padding:.2em 0 0 0;
  22.   text-shadow: #fff 1px 1px 1px;
  23. }
  25. .post.asides h2.title{
  26.   font-size: 130%;
  27.   font-style: italic;
  28.   letter-spacing: -0.02em;
  29. }
  31. .post.sticky h2.title{
  32.   font-size: 300%;
  33. }
  35. h2.title a{text-decoration:none;color:#4e4e4e;}
  36. h2.title a:hover{color:#f00;text-decoration:none;}
  38. h3.title{font-size:140%;font-weight:bold;margin:1em 0 0 0;padding:0;}
  39. h3.title a{text-decoration:none;color:#4e4e4e;}
  40. h3.title a:hover{color:#ed1e24;text-decoration:none;}
  42. .post-excerpt{font-size:90%;font-style:italic;color:#666;}
  43. .post-short-info{margin:0;padding:0;}
  45. .post-thumb img{border:4px solid #eee;}
  46. .post-info{background:transparent url(images/info-bar.png) no-repeat right top;height:42px;margin-left:11px;color:#bbb;text-shadow:#fff 1px 1px 1px;}
  47. .post-info a{font-weight:bold;color:#999;}
  48. .post-info a:hover{color:#ed1e24;}
  49. .post-info p.author{padding: 0 0 0 6px;margin:0;line-height:32px;}
  50. .post-info p.comments{padding: 0 12px 0 0;margin:0;line-height:32px;}
  51. .post-info p.comments a.comments{background:transparent url(images/icons.png) no-repeat 0px -49px;padding-left:20px;}
  52. .post-info p.comments a.no.comments{background-position:0px 1px;}
  53. .post-date{background:transparent url(images/info-bar.png) no-repeat left -75px;padding-left:11px;float:left;text-transform:uppercase;font-weight:bold;}
  54. .post-date p.day{background:transparent url(images/info-bar.png) no-repeat right -42px;height:33px;padding:0 16px 0 0;margin:0;line-height:31px;color:#fff;}
  56. .post-content p{margin:0 0 .8em 0;padding:0;}
  57. .post-content a.post-edit-link{border:#ddd 1px solid;background-color:#fff;padding:3px 6px;text-decoration:none;}
  58. .post-content a.post-edit-link:hover{border:#ff284b 1px solid;background-color:#ed1e24;color:#fff;}
  59. .post-content a.more-link{background-color:#eee;text-decoration:none;color:#666;text-shadow:#fff 1px 1px 1px;padding:2px 6px 3px 6px;margin:0;font-size:85%;text-transform:uppercase;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
  60. .post-content a.more-link:hover{background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;}
  61. .post-content a.more-link.loading{border:0;margin:0 4px;padding:3px 8px;border:0;background:transparent url(images/loader-white.gif) no-repeat center center;}
  63. .post-tags{background:transparent url(images/icons.png) no-repeat 0px -104px;font-style:italic;padding-left:20px;line-height:22px;}
  65. .category-description{
  66.   font-size: 115%;
  67.   font-style: italic;
  68. }
  70. .about_the_author{
  71.   padding: 8px 10px;
  72.   line-height: 150%;
  73.   background-color: #5e5e5e;
  74.   color: #ccc;
  75.   font-style: italic;
  76. }
  78. .about_the_author a{
  79.   color: #f9f9f9;
  80.   text-decoration: underline;
  81. }
  83. .about_the_author a:hover{
  84.   color: #fff;
  85.   text-decoration: none;
  86. }
  88. .about_the_author h3{
  89.   margin: 0;
  90.   padding: 0;
  91.   font-size: 130%;
  92.   font-weight: bold;
  93.   font-style: normal;
  94.   color: #f9f9f9;
  95. }
  97. .about_the_author div.avatar{
  98.   float: left;
  99.   margin-right: 8px;
  100. }
  102. .about_the_author div.avatar img{
  103.   border: 6px solid #333;
  104. }
  106. .post-meta{padding:6px 4px;border-top:1px solid #ddd;background-color:#f6f6f6;color:#999;display:block;}
  107. .post-meta td, .post-meta tr:hover td{
  108.   background-color: transparent;
  109.   border: 0;
  110.   padding: 0 2px;
  111.   margin: 0;
  112. }
  114. .post-meta a{color:#666;text-decoration:underline;}
  115. .post-meta a:hover{color:#ed1e24;text-decoration:none;}
  117. .post-meta .details{font-size:80%;line-height:150%;}
  119. .post-meta a.control{display:block;padding:2px 6px 4px;background-color:#eee;text-shadow:#fff 1px 1px 1px;font-style:italic;text-decoration:none;font-size:115%;border:1px solid #fff;border-radius:3px;text-align:center;letter-spacing:-0.02em;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;}
  121. .post-meta a.control:hover, .post-meta a.control:hover a{background-color:#0071bb;text-shadow:#666 1px 1px 1px;color:#fff;}


 
Bien sur, je ne demande pas a ce qu'on me le fasse sans rien comprendre, j'aimerai savoir appliquer si quelqu'un a la solution.
Merci d'avoir lu.

mood
Publicité
Posté le 09-09-2010 à 01:49:18  profilanswer
 

n°2021986
aspirateur
Posté le 09-09-2010 à 08:25:00  profilanswer
 

Tu colles tes 2 lignes dans le fichier CSS et c'est tout.
 
Mets le à la place de la ligne 36 (cf ton extrait de code)

n°2022211
Haloavanda​ha
Posté le 09-09-2010 à 22:58:48  profilanswer
 

Bonjour Aspirateur,
 
D'abord, merci d'avoir repondu ! J'avais deja essayé de mettre à coté/remplacé les lignes 35 et 36. J'ai abouti en effet au resultat que je voulais, cependant il n'y a aucun parametre ni controle en fonction des utilisateurs.
J'ai trouvé une autre alternative pour résoudre mon probleme :
J'ai ajouté un plugin "Mark as read" qui consiste à créer une liste des articles non lu par utilisateur (il cree une table qui va relier userID, postID et une valeur). Avec ceci, j'ai modifié le code en rajoutant en PHP :

Code :
  1. //fonction modifier couleur titre article
  2. function color_title ($text) {
  3. global $post;
  4. global $current_user;
  5. if (check_read_post ($current_user->ID, $post->ID)!=false) {
  6.   return "<span style=\"color:salmon\">". $text. "</span>";
  7. }
  8. return $text;
  9. }
  11. //insertion de la fonction dans le filtre the_title
  12. add_filter('the_title', 'color_title');


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Couleur d'un lien qui change quand clic

 

Sujets relatifs
lien externe sur zone cliquablezedgraph graphique avec nuances de couleur
Lien qui ne fonctionne pas!!truc incompréhensible!Lien direct vers skype...?
lien#Accélération d'une macro couleur
lien sur image avec IE8afficher un objet de transmission d'un lien
Faire apparaitre un calque au survol d'un lien 
Plus de sujets relatifs à : Couleur d'un lien qui change quand clic

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.087 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR