[NodeBB] First post customization

Solved Customisation

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💗

  • 1 Votes
    1 Posts
    42 Views

    I thought I had already created a dedicated thread for this elsewhere, but clearly not - it was probably bundled in with another topic.

    If you want to create an “Author” badge on each post that looks like the below, you can do this using pure CSS

    d983d994-c4b6-4063-ae1e-74bba88d75b5-image.png

    Required CSS

    .topic-owner-post [itemprop=name]:after { border: 2px solid var(--bs-border-color); border-radius: 0.25rem !important; color: var(--bs-body-color); content: "Author"; margin-left: 5px; padding: 2px 10px; display: inline-block; }

    However, things get slightly more complicated if you want to add an icon in the same element, like the below

    a81318a0-a15c-45f1-94f7-ee17a1931433-image.png

    As the above example makes use of the :after pseudo element, it’s not possible to have two font-family statements when using content: ""

    To facilitate this, you’d need a jQuery function that looks like the below

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $(".topic-owner-post [itemprop=name]").append("<span class='author'><span class='author-icon'><i class='fa-light fa-bullhorn'></i>Author</span>"); }); });

    Here, you use span tags to insert both the icon, and text 🙂

    Obviously, you need to ensure that the css for .author and .author-icon exist.

    Here’s an example

    span.author { border: 2px solid var(--bs-border-color); border-radius: 0.25rem !important; color: var(--bs-body-color); content: "Author"; margin-left: 5px; padding: 2px 10px; display: inline-block; } span.author-icon i { margin-right: 5px; }
  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    117 Views

    @Panda said in Email validation NodeBB:

    Did you configure that as a custom change to the usual quote icon. How do you do that?
    I notice on NodeBB site its a solid blue quotes

    Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.

  • NodeBB inline videoplayer

    Solved Customisation
    12
    3 Votes
    12 Posts
    152 Views

    @phenomlab
    YAY! It works
    Thanks so much

  • 7 Votes
    10 Posts
    285 Views

    @phenomlab Thanks 🙏

  • 0 Votes
    7 Posts
    256 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    319 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.

  • 9 Votes
    47 Posts
    1k Views

    @phenomlab said in RSS parser script [NodeBB]:

    @jac Not yet. Sorry. Have some other work commitments I need to prioritise. Hoping to get to this over the weekend.

    No worries at all mate, thanks 👍🏻

  • 1 Votes
    6 Posts
    295 Views

    @jac said in [NodeBB] custom Gravatar image not showing:

    @phenomlab said in [NodeBB] custom Gravatar image not showing:

    @jac are you using Custom ?

    Sure am mate 👍🏻

    Confirmed Fixed