• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Adding a 'New Posts' indicator?

xenTheory

Active member
#1
I use a different icon per node, however I don't use an alternative version to let users know if there is a new post or not, what I previously had was the following, however I can't remember what needed editing :(

Untitled-2.png
 

xenTheory

Active member
#3

Andrej

Well-known member
#4
From what I can see that looks like the node icons, I already have those. It's the 'NEW POSTS' bit that I'm trying to re-add, which only shows up if there are posts within the node which haven't been read yet.
Ah sorry, missed that. Not sure how you archived that, so I hope someone will chime in. :)
 

xenTheory

Active member
#6
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.
 

EQnoble

Well-known member
#7
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.
ghfghdgh.png
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.
 

Shelley

Well-known member
#8
I still think lowering the opacity or greyscaling the node icons for unread postings will be the better method. Saves on placement problems and saves on the edits. Simplicity is key here and definitely at your disposal.
 
#9
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.
View attachment 44123
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 :p
 
#10
I still think lowering the opacity or greyscaling the node icons for unread postings will be the better method. Saves on placement problems and saves on the edits. Simplicity is key here and definitely at your disposal.
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:

Untitled-2.png
 
#11
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.

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;
}
 
#12
I'm sure it's been posted somewhere but I spent a long time searching and found very little so I've posted this as a resource with instructions in order to help others who might find it a little confusing.
 

Shelley

Well-known member
#13
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:

View attachment 44143
background-repeat: no-repeat; would have stopped that repeating btw.