Adding a 'New Posts' indicator?
- Thread starter xenTheory
- Start date
http://xenforo.com/community/threads/custom-forum-node-icons-sprites.32576/#post-372121
The first half of the code is for read icon and the other half is for the unread icon. Create two versions of the icons (For instance one dimmed and one normal).
The first half of the code is for read icon and the other half is for the unread icon. Create two versions of the icons (For instance one dimmed and one normal).
Ah sorry, missed that. Not sure how you archived that, so I hope someone will chime in.
It sort of works using the ".node. 'something'.unread {background:}" etc and I had it previously set up however I'm sure there's a simple way of doing it. After all it's basically setting one image for the 'unread' status and positioning it half way over the node, like the my screenshot. I find xF very well built and powerful, however the CSS classes do confuse me a little on there but I've worked most of it out.
Well you can do this but you will need to use a custom class as well as the css...
it will also have to address a few things...
like your sections that have really long titles...you would need a way for a user per page load to be able to dismiss that image laid out on top as there is no way to always put it between due to size constraints.
I did this live on your page with firebug real quick ...I didn't add an image because that is just secondary to the issue and I could just as easily removed the background color and used an image. We are looking for position first then beauty.
The real issue is a consistent placement regardless of the title length. If you do manage to accomplish this with css only you will run into problems in the long run.
I see you said you have things sorted out almost so if you can manage by yourself good for you but if you want some help let me know.
it will also have to address a few things...
like your sections that have really long titles...you would need a way for a user per page load to be able to dismiss that image laid out on top as there is no way to always put it between due to size constraints.
I did this live on your page with firebug real quick ...I didn't add an image because that is just secondary to the issue and I could just as easily removed the background color and used an image. We are looking for position first then beauty.
The real issue is a consistent placement regardless of the title length. If you do manage to accomplish this with css only you will run into problems in the long run.
I see you said you have things sorted out almost so if you can manage by yourself good for you but if you want some help let me know.
I had this set up before and it took a few seconds by adding a few lines into extra.css, however I can't remember what I did - well I can - but it doesn't seem to work now.
What I did was set all .unread to use one image, for main forums and sub forums. It displayed in the same place on each. I just can't remember the class I used for it - it's built into xF. Like I said before, I find xF classes confusing - that's not a problem, or criticism, of xF but part of my Asperger's
This is the code I was previously using... and it works to a point.
Code:
.forumNodeInfo.unread, .categoryForumNodeInfo.unread {
background-image: url(http://vondroid.com/site-img/unread.png) !important;
}However background positioning doesn't appear to work so it repeats the image used. If I try and add positioning of any sort then it disappears without trace, I assume under another div, here's a screenshot:
I've decided the easiest way is just to use opacity. For anyone else who wants an easier way of doing it here's the code:
Although -moz and -ktml are not needed, they provide backwards compatibility.
Although -moz and -ktml are not needed, they provide backwards compatibility.
Code:
.node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {
zoom: 1 !important;
opacity: 0.5 !important;
-moz-opacity: 0.5 !important;
-khtml-opacity: 0.5 !important;
filter:alpha(opacity=50) !important;
}
.node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
zoom: 1 !important;
opacity: 1.0 !important;
-moz-opacity: 1.0 !important;
-khtml-opacity: 1.0 !important;
filter:alpha(opacity=100) !important;
}
background-repeat: no-repeat; would have stopped that repeating btw.
Similar threads
- Solved
- Question
