Skip to content

[NODEBB] Help for my custom CSS

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 💗

  • Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    466 Views

    @phenomlab thanks a lot for these, both of the below are awesome! ♥

    https://codepen.io/bennettfeely/pen/vYLmYJz

    https://codepen.io/C-L-the-selector/pen/MWZbWBo

  • Nodebb icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    598 Views

    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.

  • NodeBB v3 Android Problem

    Solved Configure
    4
    4 Votes
    4 Posts
    189 Views

    thank you fixed.

  • 0 Votes
    2 Posts
    458 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

    0bda6e07-efca-4039-a132-c94060a6fec4-image.png

  • 1 Votes
    2 Posts
    611 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.

  • Quote design CSS

    Solved Customisation
    15
    4 Votes
    15 Posts
    685 Views

    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning.

    Good spot 🙂

  • New message CSS problem

    Unsolved Customisation
    11
    2 Votes
    11 Posts
    550 Views

    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?

  • NodeBB Design help

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