• Hello everybody !

    I search everywhere a solution for my problem, but impossible to find a topic or a plugin who can help me.

    I wish that when a post is read for a user, the title change the color to mark it as read. Like we can see in a lot of forums or links.

    I can give more information if you want.

    Thanks for reading.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You need to modify your CSS.

    The title should be an . Just create a css entry like the following:

    a.blahblah:visited, a.blahblah:hover { color: #f00; }

    or if that doesn’t work…

    a.blahblah:visited, a.blahblah:hover { color: #f00 !important; }

    That should do it.

    Thread Starter haloavandaha

    (@haloavandaha)

    Thanks for answer !
    I find my style.css, and one things seems what you say me :

    h2.title a{text-decoration:none;color:#4e4e4e;}
    h2.title a:hover{color:#ed1e24;text-decoration:none;}

    Is it possible to add before or after ?

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

    The thing you posted should work:
    h2.title a:visited{color: #f00; }
    h2.title a:hover{color: #f00 !important; }

    Cheers

    [signature removed per forum rules]

    Thread Starter haloavandaha

    (@haloavandaha)

    I tried it… but not works… ??
    I doesn’t like put a big code, and i don’t wanna someone do my works… but it’s very important for me.
    Is there a order or a place to write my code ?
    Do i delete the line h2.title a{text-decoration:none;color:#4e4e4e;}
    h2.title a:hover{color:#ed1e24;text-decoration:none;} ?

    /* post */
    .post, .page{margin:1em 0 2em 0;padding:0 0 .6em;display:block;background:transparent url(images/dot.gif) repeat-x left bottom;}
    .post.preview-title{background:none;}
    body.single-page .page, body.single-post .post{background: none;margin:0;padding:0;}
    
    .post.asides{
      border: 4px solid #eee;
      background-color: #fff;
      background-image: none;
      padding: 5px 10px;
    }
    
    .post.sticky{
      /* needs redesigned */
    }
    
    h2.title{
      font-weight: bold;
      font-size: 180%;
      margin:0 0 .2em 0;
      padding:.2em 0 0 0;
      text-shadow: #fff 1px 1px 1px;
    }
    
    .post.asides h2.title{
      font-size: 130%;
      font-style: italic;
      letter-spacing: -0.02em;
    }
    
    .post.sticky h2.title{
      font-size: 300%;
    }
    
    h2.title a{text-decoration:none;color:#4e4e4e;}
    h2.title a:hover{color:#f00;text-decoration:none;}
    
    h3.title{font-size:140%;font-weight:bold;margin:1em 0 0 0;padding:0;}
    h3.title a{text-decoration:none;color:#4e4e4e;}
    h3.title a:hover{color:#ed1e24;text-decoration:none;}
    
    .post-excerpt{font-size:90%;font-style:italic;color:#666;}
    .post-short-info{margin:0;padding:0;}
    
    .post-thumb img{border:4px solid #eee;}
    .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;}
    .post-info a{font-weight:bold;color:#999;}
    .post-info a:hover{color:#ed1e24;}
    .post-info p.author{padding: 0 0 0 6px;margin:0;line-height:32px;}
    .post-info p.comments{padding: 0 12px 0 0;margin:0;line-height:32px;}
    .post-info p.comments a.comments{background:transparent url(images/icons.png) no-repeat 0px -49px;padding-left:20px;}
    .post-info p.comments a.no.comments{background-position:0px 1px;}
    .post-date{background:transparent url(images/info-bar.png) no-repeat left -75px;padding-left:11px;float:left;text-transform:uppercase;font-weight:bold;}
    .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;}
    
    .post-content p{margin:0 0 .8em 0;padding:0;}
    .post-content a.post-edit-link{border:#ddd 1px solid;background-color:#fff;padding:3px 6px;text-decoration:none;}
    .post-content a.post-edit-link:hover{border:#ff284b 1px solid;background-color:#ed1e24;color:#fff;}
    .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;}
    .post-content a.more-link:hover{background-color:#999;color:#fff;text-shadow:#666 1px 1px 1px;}
    .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;}
    
    .post-tags{background:transparent url(images/icons.png) no-repeat 0px -104px;font-style:italic;padding-left:20px;line-height:22px;}
    
    .category-description{
      font-size: 115%;
      font-style: italic;
    }
    
    .about_the_author{
      padding: 8px 10px;
      line-height: 150%;
      background-color: #5e5e5e;
      color: #ccc;
      font-style: italic;
    }
    
    .about_the_author a{
      color: #f9f9f9;
      text-decoration: underline;
    }
    
    .about_the_author a:hover{
      color: #fff;
      text-decoration: none;
    }
    
    .about_the_author h3{
      margin: 0;
      padding: 0;
      font-size: 130%;
      font-weight: bold;
      font-style: normal;
      color: #f9f9f9;
    }
    
    .about_the_author div.avatar{
      float: left;
      margin-right: 8px;
    }
    
    .about_the_author div.avatar img{
      border: 6px solid #333;
    }
    
    .post-meta{padding:6px 4px;border-top:1px solid #ddd;background-color:#f6f6f6;color:#999;display:block;}
    .post-meta td, .post-meta tr:hover td{
      background-color: transparent;
      border: 0;
      padding: 0 2px;
      margin: 0;
    }
    
    .post-meta a{color:#666;text-decoration:underline;}
    .post-meta a:hover{color:#ed1e24;text-decoration:none;}
    
    .post-meta .details{font-size:80%;line-height:150%;}
    
    .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;}
    
    .post-meta a.control:hover, .post-meta a.control:hover a{background-color:#0071bb;text-shadow:#666 1px 1px 1px;color:#fff;}

    Thanks again for reading.
    Chris

    Thread Starter haloavandaha

    (@haloavandaha)

    Finally i don’t touch the CSS, cause a found a plugin “mark_as_read” and i modified it source to color title by user view.

    Thanks, goodbye !

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to change color title when post read’ is closed to new replies.