Skip to content
Sudonix

Forum customisation

Customisation
  • JACundefined

    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 1 Reply
    0
  • phenomlabundefined phenomlab marked this topic as a regular topic
  • DownPWundefined

    @JAC said in Forum customisation:

    I wish to change the colours of the buttons below.

    .link-primary, .text-primary {
    color: var(--bs-link-color) !important;
}

    @JAC said in Forum customisation:

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

    .border-secondary {
    --bs-border-opacity: 1;
    border-color: var(--bs-border-color) !important;
    border-radius: 10px !important;
}

[component="widget/board-stats"] .text-bg-secondary:first-child {
    color: var(--bs-link-color) !important;
    background-color: var(--bs-node-card-cap-bg) !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

[component="widget/board-stats"] .text-bg-secondary {
    color: var(--bs-link-color) !important;
    background-color: var(--bs-node-card-cap-bg) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

    PW and WS Spirit alive

    1
  • JACundefined

    Perfect @DownPW, thank you very much!

    I’ll try these on the laptop later.

    0
  • phenomlabundefined

    @JAC Worth noting that @DownPW (like myself) uses CSS variables, so if you copy this like for like, it won’t work. You’d need to use actual HEX values for colours etc.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    2
  • phenomlabundefined

    @JAC said in Forum customisation:

    I wish to change the colours of the buttons below.

    I’d do this a bit different to @DownPW and be more specific with the target. Obviously, change #ffffff to whatever value you require

    [component="post/actions"] a i, [component="post/actions"] span i {
    color: #ffffff !important;
}

    This should produce something like the below (obviously not the dark background), and not white, but you get the idea.

    65c886f4-27b2-4d0f-a57c-a34a547eb8b1-image.png

    The below CSS should not be used in this instance because it will target several other elements on the site and produce undesirable results

    .link-primary, .text-primary {
    color: var(--bs-link-color) !important;
}

    @JAC said in Forum customisation:

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

    I’d use something like this, which will target the widget background and the colour of the text in use

    [component="widget/board-stats"] {
    background: #000000;
    color: #ffffff;
}

    And the below, which will target the background and text colour of the header

    [component="widget/board-stats"] h3 {
    background: red !important;
    color: yellow !important;
}

    So the actual CSS you need is

    [component="widget/board-stats"] {
    background: #194F90;
    color: #ffffff;
}
[component="widget/board-stats"] h3 {
    background: #000000 !important;
}
.widget-board-stats.border.border-secondary a {
    color: #FFC557;
}

    This should produce

    bc4fd490-b000-4052-a929-35b6a8be4ba8-image.png

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1
  • JACundefined

    Thanks very much for all the guidance, I’m currently away and don’t have the laptop on me so I’ll get to these changes next week.

    0

Related Topics
  • Pandaundefined

    www. Infront stops website access?

    Solved Configure
    10
    1 Votes
    10 Posts
    443 Views
    phenomlabundefined

    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.

  • Pandaundefined

    Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    273 Views
    phenomlabundefined

    @Panda said in Nodebb design:

    One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum.

    From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over.

    @Panda said in Nodebb design:

    The “write api” is preferred for server-to-server interactions.

    This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write.

    A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase.

    You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.

  • DownPWundefined

    nodebb-user-level customisation : popover element

    Solved Customisation
    15
    6 Votes
    15 Posts
    1k Views
    DownPWundefined

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

  • Pandaundefined

    adding some console.log to Nodebb

    Solved Customisation
    4
    1 Votes
    4 Posts
    548 Views
    phenomlabundefined

    @eeeee if you’re using the console, you could try

    node app.js > app.log 2>&1

    This would redirect stdout to a file named app.log and redirect stderr to stdout.

    I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log.

    Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.

  • Pandaundefined

    build nodebb Warning in entrypoint size limit

    Solved Performance
    2
    0 Votes
    2 Posts
    206 Views
    phenomlabundefined

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

  • DownPWundefined

    NODEBB: Nginx error performance & High CPU

    Solved Performance
    69
    14 Votes
    69 Posts
    6k Views
    DownPWundefined

    @phenomlab

    Seems to be better with some scaling fix for redis on redis.conf. I haven’t seen the message yet since the changes I made

    # I increase it to the value of /proc/sys/net/core/somaxconn tcp-backlog 4096 # I'm uncommenting because it can slow down Redis. Uncommented by default !!!!!!!!!!!!!!!!!!! #save 900 1 #save 300 10 #save 60 10000

    If you have other Redis optimizations. I take all your advice

    https://severalnines.com/blog/performance-tuning-redis/

  • crazycellsundefined

    optional "snow falling" theme

    Solved Customisation
    6
    6 Votes
    6 Posts
    358 Views
    phenomlabundefined

    @Sala ok, but that’s still the same loop which is going to have an impact on the CPU.

  • JACundefined

    Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    737 Views
    phenomlabundefined

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation