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!
3 posters
How to show that a forum has new posts with custom icons
Pendo- Forumember
- Posts : 217
Reputation : 13
Language : English
Location : USA
brandon_g- Manager
- Posts : 10113
Reputation : 923
Language : English
Location : USA
Hello,
Can you provide us the code your using currently?
-Brandon
Can you provide us the code your using currently?
-Brandon
Remember to mark your topic when a solution is found.
General Rules | Tips & Tricks | FAQ | Forgot Founder Password?
Team Leader
Review Section Rules | Request A Review | Sticker Points
Pendo- Forumember
- Posts : 217
Reputation : 13
Language : English
Location : USA
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):
The CSS:
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- Administrator
- Posts : 51498
Reputation : 3523
Language : English
Location : United States
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.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Pendo- Forumember
- Posts : 217
Reputation : 13
Language : English
Location : USA
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.
brandon_g- Manager
- Posts : 10113
Reputation : 923
Language : English
Location : USA
@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:
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
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
Remember to mark your topic when a solution is found.
General Rules | Tips & Tricks | FAQ | Forgot Founder Password?
Team Leader
Review Section Rules | Request A Review | Sticker Points
brandon_g- Manager
- Posts : 10113
Reputation : 923
Language : English
Location : USA
Remember to mark your topic when a solution is found.
General Rules | Tips & Tricks | FAQ | Forgot Founder Password?
Team Leader
Review Section Rules | Request A Review | Sticker Points
Pendo- Forumember
- Posts : 217
Reputation : 13
Language : English
Location : USA
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.