1. 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?

Discussion in 'Styling and Customization Questions' started by xenTheory, Apr 7, 2013.

  1. xenTheory

    xenTheory Active Member

    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
     
  2. Andrej

    Andrej Well-Known Member

  3. xenTheory

    xenTheory Active Member

    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.
     
  4. Andrej

    Andrej Well-Known Member

    Ah sorry, missed that. Not sure how you archived that, so I hope someone will chime in. :)
     
  5. xenTheory

    xenTheory Active Member

    Anyone?
     
  6. xenTheory

    xenTheory Active Member

    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.
     
  7. EQnoble

    EQnoble Well-Known Member

    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.
     
    Tracy Perry and Shelley like this.
  8. Shelley

    Shelley Well-Known Member

    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. xenTheory

    xenTheory Active Member


    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. xenTheory

    xenTheory Active Member

    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. xenTheory

    xenTheory Active Member

    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. xenTheory

    xenTheory Active Member

    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.
     
  13. Shelley

    Shelley Well-Known Member

    background-repeat: no-repeat; would have stopped that repeating btw.
     
  14. xenTheory

    xenTheory Active Member

    I know, or even adding no-repeat before the ; on background-image works, however it then wouldn't display at all.
     

Share This Page