Skip to content

NodeBB v3 Vote Icon

Solved Customisation
  • Hi Mark

    Could you please share with me codes which are changing to up vote, down vote icons to heart and down finger? Also when it voted the icon should be red color as my v2 version.

  • @cagatay Try this CSS

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-quote-right::before {
        content: "\f004";
    }
    

    This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.

    @phenomlab said in NodeBB v3 Vote Icon:

    [component=“post”] .fa-chevron-down::before {
    content: “\f0a7”;
    }
    [component=“post”] .fa-quote-right::before {
    content: “\f004”;
    }

    Code should be;

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-chevron-up::before {
        content: "\f004";
    }
    
  • Hi Mark

    Could you please share with me codes which are changing to up vote, down vote icons to heart and down finger? Also when it voted the icon should be red color as my v2 version.

    @cagatay This is in fact @nodebb/nodebb-plugin-reactions 🙂

  • @cagatay This is in fact @nodebb/nodebb-plugin-reactions 🙂

    @phenomlab No i mean those icons changes;
    27311eae-54dd-4a36-aedd-2401a2f7b3ae-image.png

  • @phenomlab No i mean those icons changes;
    27311eae-54dd-4a36-aedd-2401a2f7b3ae-image.png

    @cagatay Try this CSS

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-quote-right::before {
        content: "\f004";
    }
    

    This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.

  • @cagatay Try this CSS

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-quote-right::before {
        content: "\f004";
    }
    

    This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.

    @phenomlab i saved those codes from v2;

    span.tag:before {
        content: "\f02c";
        font-family: "Font Awesome 5 Free";
        margin-right: 3px;
        margin-left: 2px;
        font-weight: 600;
    	font-size: 9px;
    	vertical-align: 0;
    }
    .fa-chevron-up:before {
        font-family: 'Font Awesome 5 Free';
    
            color: red; 
        }
     }
     
    span.votes {
        .fa-chevron-down:before {
            content: "\f165";
            font-weight: 400;
        }
        .downvoted .fa-chevron-down:before {
            content: "\f165";
            font-weight: 900;
            color: red; 
        }
     }
    .fa-chevron-down:before  {
        font-family: 'Font Awesome 5 Free';
    	font-weight: 300;
    	font-size: 16px;
    	content: '\f165';
    	margin-right: 4px;
    	vertical-align: -1px;
    	color: red;
    }
    
    span.votes {
        .fa-chevron-up:before {
            content: "\f004";
            font-weight: 400;
        }
        .upvoted .fa-chevron-up:before {
            content: "\f004";
            font-weight: 900;
    
    
  • @cagatay Try this CSS

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-quote-right::before {
        content: "\f004";
    }
    

    This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.

    @phenomlab there previous icon cant changed with this code just added new one as photo; .fa-quote-right is false Mark, it should be about chevron up or something like that

    e9bcad3e-c73b-4b03-861d-ee7c7fb9dafa-image.png

  • @cagatay Try this CSS

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-quote-right::before {
        content: "\f004";
    }
    

    This will change the icons. However, changing the colour when an upvote is received will require custom code. We never did this on v2 of your forum (from memory - I could be wrong) - it was for the bookmarks.

    @phenomlab said in NodeBB v3 Vote Icon:

    [component=“post”] .fa-chevron-down::before {
    content: “\f0a7”;
    }
    [component=“post”] .fa-quote-right::before {
    content: “\f004”;
    }

    Code should be;

    [component="post"] .fa-chevron-down::before {
        content: "\f0a7";
    }
    [component="post"] .fa-chevron-up::before {
        content: "\f004";
    }
    
  • Yes, sorry - you’re right. The problem is that the icons are hidden unless you hover over them in each post, so difficult to target. If you add color: red; to each of those classes, they will be in red regardless of voting state (for example, will trigger even if there are no votes) and I’m pretty sure that isn’t what you want?

  • Yes, sorry - you’re right. The problem is that the icons are hidden unless you hover over them in each post, so difficult to target. If you add color: red; to each of those classes, they will be in red regardless of voting state (for example, will trigger even if there are no votes) and I’m pretty sure that isn’t what you want?

    @phenomlab forget it, look likes good with your codes.

  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Whitespace fixes in Nodebb

    Solved Customisation
    18
    2
    7 Votes
    18 Posts
    1k Views
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • NodeBB: Consent policy popup

    Solved Customisation
    2
    1
    0 Votes
    2 Posts
    543 Views
    @mventures said in NodeBB: Consent policy popup: How did you implement this consent pop-up? This is located in /admin/settings/cookies @mventures said in NodeBB: Consent policy popup: Does it appear every new day for a user who has accepted it? No. It places a cookie on the machine of the user who visits the site, and once they accept it, it doesn’t appear again unless you select [image: 1682678520417-0bda6e07-efca-4039-a132-c94060a6fec4-image.png]
  • [NodeBB] greeting message

    Solved Customisation
    2
    1
    3 Votes
    2 Posts
    705 Views
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [NODEBB] Scroll Button

    Solved Customisation
    7
    1
    0 Votes
    7 Posts
    980 Views
    @downpw ooops. Forgot that. Thanks for adding.
  • [NodeBB] username cards

    Solved Customisation
    8
    5 Votes
    8 Posts
    1k Views
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    1k Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    932 Views
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation