Skip to content

Forum customisation

Customisation
  • Hi Mark,

    I’d like some help customising two forums running NodeBB please if possible.

    I wish to change the colours of the buttons below.

    1000005618.png

    And how can I change the board stats widget to look similar to this…

    1000005620.png

    As always, thank you! 🤝.

  • phenomlabundefined phenomlab marked this topic as a regular topic

Related Topics
  • Test of youtube embeds

    Solved Configure
    13
    8 Votes
    13 Posts
    148 Views

    @Sampo2910 yes, you could try

    iframe[src*="youtube"] { height: 400px; width: 400px; }

    This is of course an example that looks for “youtube” in the src string. You’d need to adapt it as necessary. The only other way possible here would be to assign a div ID to the container but that would require a change to the underlying plugin code.

  • Email validation NodeBB

    Bugs
    21
    3 Votes
    21 Posts
    1k 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.

  • Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    2k Views

    @mventures I’ve not done anything here.

  • Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    661 Views

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • fading in /tags page

    Solved Customisation
    32
    30 Votes
    32 Posts
    3k Views

    Fix working perfectly 👍 🙂

  • ineffecient use of space on mobile

    Solved Customisation
    10
    7 Votes
    10 Posts
    648 Views

    @phenomlab Thanks 🙏

  • 5 Votes
    9 Posts
    1k Views

    is there any way to see whose reputation is changed by this plugin?

  • NodeBB Discord Plugins

    Unsolved Customisation
    7
    0 Votes
    7 Posts
    937 Views

    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?