Skip to content
Sudonix

[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 💗

  • DownPWundefined

    NodeBB socket with CloudFlare

    Unsolved Performance
    23
    1 Votes
    23 Posts
    2k Views
    phenomlabundefined

    @DownPW it’s your only realistic option at this stage.

  • cagatayundefined

    Header Menu After Upgrading V3.1.1

    Solved Customisation
    2
    2 Votes
    2 Posts
    149 Views
    phenomlabundefined

    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right.

    If you’d like to retain the original behavior, you can add this css class

    [data-widget-area="brand-header"] { justify-content: end; display: flex; }

    Further information here

    https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296

  • Pandaundefined

    build nodebb Warning in entrypoint size limit

    Solved Performance
    2
    0 Votes
    2 Posts
    156 Views
    phenomlabundefined

    @eeeee they are nothing to worry about, and can be ignored.

  • Pandaundefined

    Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    613 Views
    phenomlabundefined

    @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.

  • JACundefined

    NodeBB templates

    Locked Chitchat
    12
    4 Votes
    12 Posts
    761 Views
    phenomlabundefined

    Placing this here for reference
    https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher

    Further information and posts can be found at this link

  • crazycellsundefined

    tag icon in front of tags

    Solved Customisation
    5
    3 Votes
    5 Posts
    381 Views
    crazycellsundefined

    @phenomlab said in tag icon in front of tags:

    @crazycells Are you using Font Awesome Free ? If so, try this

    span.tag:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; margin-right: 5px; margin-left: 5px; font-weight: 900; }

    yeap, this worked 👍 thanks a lot.

  • DownPWundefined

    Border Frame WYSIWYG CSS

    Solved Customisation
    6
    2 Votes
    6 Posts
    364 Views
    phenomlabundefined

    @DownPW just circling back to this, as I did eventually find the class. Seems you can disable the outline using the below CSS

    textarea { outline: none; }
  • DownPWundefined

    Bug Navbar CSS

    Solved Customisation
    3
    1 Votes
    3 Posts
    302 Views
    DownPWundefined

    Not better way.

    Thanks.