Couleur d'un lien qui change quand clic

Couleur d'un lien qui change quand clic - HTML/CSS - Programmation

Marsh Posté le 09-09-2010 à 01:49:18    

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.

Reply

Marsh Posté le 09-09-2010 à 01:49:18   

Reply

Marsh Posté le 09-09-2010 à 08:25:00    

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)

Reply

Marsh Posté le 09-09-2010 à 22:58:48    

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');

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed