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

Go down

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

Post by Pendo on February 4th 2020, 12:54 am

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!
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

http://lorecraft.forumotion.com/

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by brandon_g on February 4th 2020, 2:27 am

Hello,

Can you provide us the code your using currently?

-Brandon


How to show that a forum has new posts with custom icons Brando10
Remember to mark your topic How to show that a forum has new posts with custom icons Solved15 when a solution is found.
brandon_g
brandon_g
Manager
Manager

Male Posts : 8813
Reputation : 791
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by Pendo on February 4th 2020, 3:40 am

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;
}
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

http://lorecraft.forumotion.com/

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by SLGray on February 4th 2020, 4:11 am

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.


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

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 47155
Reputation : 3291
Language : English
Location : United States

https://help.forumotion.com/

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by Pendo on February 4th 2020, 4:42 am

@SLGray wrote: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.
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

http://lorecraft.forumotion.com/

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by brandon_g on February 6th 2020, 12:18 am

@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. Wink

Hope this helps!
-Brandon


How to show that a forum has new posts with custom icons Brando10
Remember to mark your topic How to show that a forum has new posts with custom icons Solved15 when a solution is found.
brandon_g
brandon_g
Manager
Manager

Male Posts : 8813
Reputation : 791
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by brandon_g on February 14th 2020, 2:45 pm

@Pendo,

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

-Brandon


How to show that a forum has new posts with custom icons Brando10
Remember to mark your topic How to show that a forum has new posts with custom icons Solved15 when a solution is found.
brandon_g
brandon_g
Manager
Manager

Male Posts : 8813
Reputation : 791
Language : English
Location : USA

https://www.broadcastingduo.com

Back to top Go down

In progress Re: How to show that a forum has new posts with custom icons

Post by Pendo on February 18th 2020, 11:11 pm

@brandon_g wrote:@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.
avatar
Pendo
Forumember

Male Posts : 215
Reputation : 13
Language : English
Location : USA

http://lorecraft.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum