How to show that a forum has new posts with custom icons

[Pendo]

My website is http://lorecraft.forumotion.com/ and I used a trick to replace the "new, no new and locked" forum icons with an individual icon for each forum. They're transparent by default but become opaque when you hover over them. What I'd like to do is set it to where the icon will be opaque by default when there are new posts in that forum. That and maybe display a tiny image of a green dot in the corner of the icon as well. I'd like to do both but if only one is possible, that's fine. If the whole idea is impossible then I'm sorry for wasting anyone's time. I'd be so very grateful if anyone could help me with this though!

[brandon_g]

Hello,

Can you provide us the code your using currently?

-Brandon

[Pendo]

Sorry in advance, I know my code is probably a mess but I believe I included everything.

The HTML (placed at the beginning of each forum's name):

Code:

<img src="" class="category-picture" />

The CSS:

Code:

.category-picture {
  position: absolute;
  margin-left: -56px;
  margin-top: 3px;
  display: initial !important;
  width: 45px;
  height: 45px;
}

a.forumlink:hover > img.category-picture {
        -webkit-filter: brightness(100%); /* Safari 6.0 - 9.0 */
    filter: brightness(100%);
  transition: 0.1s all linear;
 
}

a.forumlink:focus > img.category-picture {
        -webkit-filter: brightness(25%); /* Safari 6.0 - 9.0 */
    filter: brightness(25%);
  transition: 0.1s all linear;
    -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

th.secondarytitle h2 img.category-picture {
 display: none !important;
}

a.nav img.category-picture {
 display: none !important;
}

a.gensmall img.category-picture {
  display: none !important;
}

.category-picture {
      -webkit-filter: brightness(40%); /* Safari 6.0 - 9.0 */
    filter: brightness(40%);
  transition: 0.4s all linear;
 
}

.category-picture:hover {
      -webkit-filter: brightness(100%); /* Safari 6.0 - 9.0 */
    filter: brightness(100%);
  transition: 0.4s all linear;
}

.category-picture:focus
{
    -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
      -webkit-filter: brightness(50%); /* Safari 6.0 - 9.0 */
    filter: brightness(50%);
  transition: 0.1s all linear;
}

[SLGray]

I believe you will not be able to do this with CSS only.  You will need a script.  You will have to get the signal that there are new topics then have the icon to match that.

[Pendo]

I believe you will not be able to do this with CSS only.  You will need a script.  You will have to get the signal that there are new topics then have the icon to match that.

I figured as much, I'm just not sure how to go about it. My knowledge of javascript is lacking.

[brandon_g]

@Pendo

So I think your css coding is a little bit more complicated then it really needs to be. You can quite easily accomplish transparency on hover by changing only a couple lines.

For the image transparency on hover, replace all css you have for '.category-picture' and replace it with this instead:

Code:

.category-picture {
position: abosolute;
margin-left: -56px;
margin-top: 3px;
display: initial !important;
width: 45px;
height: 45px;
opacity: 1.0;
}

.category-picture:hover {
position: abosolute;
margin-left: -56px;
margin-top: 3px;
display: initial !important;
width: 45px;
height: 45px;
opacity: 0.2;
}

You can adjust the level of transparency by playing with the numbers after 'opacity'. The smaller the number, the more transparent it will be and vice versus. Note though that anything 1.0 or higher will not appear as transparent.

Hope this helps!
-Brandon

[brandon_g]

@Pendo,

Is this solved? If not, please let me know within 72 so I can assist you further.

-Brandon

[Pendo]

@Pendo,

Is this solved? If not, please let me know within 72 so I can assist you further.

-Brandon

Sorry for the late reply! I haven't had internet access the past week or so. While the replies were helpful in simplifying/cleaning up my CSS code, I still don't know what javascript code will allow me to check a forum for new posts and change the forum icon accordingly. If it's at all possible, I'd appreciate any help on the matter. Otherwise, feel free to mark this topic as resolved or trash it. Thank you to everyone for your time so far, I just haven't gotten the kind of answer I'm looking for.