Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.4k 3
  • @DownPW Looking at the code, it seems to come down to this

    <img src="https://storage.ko-fi.com/cdn/logomarkLogo.png" alt="Icône café" class="me-2 img-fluid">
    

    cbcd08c7-6090-4d4c-8680-320b833958e5-image.png

    If you remove the img-fluid class, it works as intended

    936bf2bf-1518-4236-aab6-1cbab0c6ca85-image.png

    The question is where the img-fluid class is being added.

    wrote on last edited by DownPW

    @phenomlab said in [NODEBB] Help for my custom CSS:

    The question is where the img-fluid class is being added.

    I don’t know
    Not in the code…

    I don’t explain why this class is added in these pages

  • wrote on last edited by

    I use this CSS code for control the button in the custom bar :

    .btn-donation {
        font-size: 12px; /* Taille du texte */
        padding: 2px 5px 2px 5px; /* Marges internes pour agrandir le bouton */
        border-radius: 8px; /* Coins arrondis */
        margin-top: -8.8px !important;
        color: #ffffff !important;
    }
        
    .btn-donation img {
        width: 18px; /* Taille de l’icône */
        height: 16px;
    }
    
  • wrote on last edited by DownPW

    @phenomlab

    Find him :

    76089049-894e-490f-bafa-10469193aca0-image.png

    But I use this code for control image on topics and Shoutbox 😞


    EDIT: I disabled this code and it seems to be OK

    Thanks @phenomlab

  • wrote on last edited by DownPW

    Hello @phenomlab

    Love your new Glass effect on tittle site.

    Possible to adapt it to my site/share the code ?

    fantazsyshgfhfhgfhghfhfghfg.gif

  • Hello @phenomlab

    Love your new Glass effect on tittle site.

    Possible to adapt it to my site/share the code ?

    fantazsyshgfhfhgfhghfhfghfg.gif

    wrote on last edited by

    @DownPW Possible, yes, although this particular effect uses CSS only for both the text itself, and the shine rollover. It’s actually quite complex in setup and takes several adjustments to get it to look right.

    It’s also important to understand if you are using this on a logo, or just text?

  • @DownPW Possible, yes, although this particular effect uses CSS only for both the text itself, and the shine rollover. It’s actually quite complex in setup and takes several adjustments to get it to look right.

    It’s also important to understand if you are using this on a logo, or just text?

    wrote on last edited by phenomlab

    @phenomlab said in [NODEBB] Help for my custom CSS:

    It’s also important to understand if you are using this on a logo, or just text?

    just text; logo on the left is separate

  • @phenomlab said in [NODEBB] Help for my custom CSS:

    It’s also important to understand if you are using this on a logo, or just text?

    just text; logo on the left is separate

    wrote on last edited by

    @DownPW And the hue animation? Or just the glass effect?

  • wrote on last edited by

    I’d like to try it without HUE to start.

    But I’m always keen to try lots of things 🙂

    You could always explain both to me, so I can apply them separately.

  • I’d like to try it without HUE to start.

    But I’m always keen to try lots of things 🙂

    You could always explain both to me, so I can apply them separately.

    wrote on last edited by

    @DownPW Ok. No problems. Let me get back to you. In real life calling presently.

  • wrote on last edited by

    OK 🙂

    Wait News

  • wrote on last edited by

    Yeah I also like the looks and effect of the Sudonix logo at the top. Looks very awesome!

  • wrote on last edited by

    😢 😢

  • wrote on last edited by

    @DownPW coming soon…

  • @DownPW coming soon…

    wrote on last edited by

    @phenomlab said in [NODEBB] Help for my custom CSS:

    @DownPW coming soon…

    No problem, I like to annoy you, you know that 🙂

    French expression: He who loves well, chastises well !

  • @phenomlab said in [NODEBB] Help for my custom CSS:

    @DownPW coming soon…

    No problem, I like to annoy you, you know that 🙂

    French expression: He who loves well, chastises well !

    wrote on last edited by

    @DownPW I made some final alterations to the master code for this effect, and will release very soon.

  • wrote on last edited by
  • wrote on last edited by

    Ohh super ^^
    Thank you Mark

  • wrote on last edited by

    Hi Mark
    My Homepage did not shown on top.

    image.png

  • Hi Mark
    My Homepage did not shown on top.

    image.png

    wrote on last edited by

    @cagatay That looks like you didn’t define a label for the icon. Have a look at /admin/settings/navigation, and you’ll see what I mean

    185e4cab-d66d-4b28-be84-fcf1293d7d23-{B68462A1-F628-4904-82B1-32CC90A060FD}.png

  • wrote on last edited by cagatay

    thank you Mark, fixed.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    3k Views
    DownPW
    I’m happy to see this
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    6k Views
    phenomlab
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • Please help me, I can't install nodebb

    Locked Solved Customisation nodebb
    7
    5 Votes
    7 Posts
    2k Views
    phenomlab
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    20k Views
    phenomlab
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • Email validation NodeBB

    Bugs nodebb
    21
    3 Votes
    21 Posts
    10k Views
    phenomlab
    @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 Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @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.
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.
  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    3k Views
    JAC
    @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