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

Add Indicator after node title

New indicator appear after node title for unread posts

  1. Shelley

    Shelley Well-Known Member

    Shelley submitted a new resource:

    Add Indicator after node title - New indicator appear after node title for unread posts

    Read more about this resource...
     
    Rize, Pierre Boulanger, Alu03 and 7 others like this.
  2. M@rc

    M@rc Well-Known Member

    This is really cool. Thanks!
     
  3. RoldanLT

    RoldanLT Well-Known Member

    Very nice tip, but what would be the nice color combination for Dark Theme :D
     
  4. Shelley

    Shelley Well-Known Member

    A dark theme. *thinks* black, go with black. :p
     
  5. RoldanLT

    RoldanLT Well-Known Member

    Yes, I mean Flexile Dark/Black :)
     
  6. Shelley

    Shelley Well-Known Member

    black indicator. :D I dunno, pick a colour you like and apply the hex value to the background-color
     
  7. Kevin

    Kevin Well-Known Member

    To quote my review.... :D

    Quick, simple and effective in catching the users attention -- I like!
     
    Shelley likes this.
  8. abbychase

    abbychase Active Member

    Looks good.
    I was playing around with it
    [​IMG]

    Simply Add the following to your extra.css:
    Code:
    .node .unread .nodeTitle:after {
    background-color: #65a5d1;
    content: "NEW";
    color: white;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    margin-left: 79%;
    padding: 1px 5px;
    font-size: 9px;
    }
     
    Shelley likes this.
  9. Shelley

    Shelley Well-Known Member

    Nice. I tried that and floated it right but felt people might prefer it not far from the title but anyone can alter it to their preference. Nice job. :)

    Here's what it looks like with many unread posts so you get a feel what it looks like.

    new-indicator1.png
     
  10. RoldanLT

    RoldanLT Well-Known Member

    Subforum problem.
     

    Attached Files:

  11. Shelley

    Shelley Well-Known Member

    I knew it was too good to be true. :D

    Try pasting the following in extra

    Code:
    .subForumsMenu .node .unread .nodeTitle:after {display: none;}
    
     
    Robyn Unc Privette and abbychase like this.
  12. erich37

    erich37 Well-Known Member

    how to make it exactly the same as the current alerts, just having the "Alert Balloon" at the left ? :)
    I'm sure Shelley knows the tricks ;)

    alert-balloon.png

    Many thanks!
     
    abbychase likes this.
  13. abbychase

    abbychase Active Member

    I would like this also, but for the other way Pointing to the right. For my edit :p
     
  14. CyberAP

    CyberAP Well-Known Member

    Or to fix this another way:

    Code:
    .nodeInfo.unread .nodeTitle:after
    {
      /* Code here */
    }
     
    Shelley likes this.
  15. kkm323

    kkm323 Well-Known Member

    Can we have another one for thread list, great work(y)
     
    erich37 likes this.
  16. CyberAP

    CyberAP Well-Known Member


    Code:
    .nodeInfo.unread .nodeTitle:after,
    .discussionListItem.unread .title:after
    {
      /* Your code here */
    }
     
    Kevin and kkm323 like this.
  17. kkm323

    kkm323 Well-Known Member

    Code:
    .nodeInfo.unread .nodeTitle:after,
    .discussionListItem.unread .title:after
    {
    background-color: #E03030;
    content: "new";
    color: white;
    border-radius: 2px;
    margin-left: 5px;
    padding: 1px 5px;
    font-size: 9px;
    margin-top: 5%;}
    
    it works
    thanks
     
  18. Shelley

    Shelley Well-Known Member

    Excellent spot. Modified the code on the resource side to reflect the changes. Thanks CyberAP. :)
     
    CyberAP likes this.
  19. Shelley

    Shelley Well-Known Member

    Seriously use the following at your own risk (it was trickier to do than i thought) and you may need to modify it a little if alignment is out. :D

    Code:
    .nodeInfo.unread .nodeTitle:after {
    background-image: url("@imagePath/xenforo/icons/new-indicator-bb.png");
    background-repeat: no-repeat;
    content: "NEW";
    color: white;
    padding: 3px 12px;
    font-size: 9px; 
    margin-left: 5px;
    }
    
    new-indicator-arrow.png
     

    Attached Files:

  20. erich37

    erich37 Well-Known Member

    hmmm..... I thought that was possible to do entirely with CSS (without the need for an image) ?

    :notworthy:
     

Share This Page