Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 3
  • Hello @phenomlab

    I come back here with a little problem.

    I created a donation button in the custom footbar that works well.

    It looks like this with the following code:

    9285dbef-db03-4449-bbdb-ee2caf37d4ef-image.png

    <div id="floatright">
    
    <div class="d-flex justify-content-center mt-2 mb-2">
        <a href="https://ko-fi.com/K3K519RHI6" 
           class="btn btn-primary d-flex align-items-center btn-donation" 
           target="_blank">
            <img src="https://storage.ko-fi.com/cdn/logomarkLogo.png" 
                 alt="Icône café" class="me-2">
            Faire un don
        </a>
    </div>
    
    <a class="feedback-menu-far-right" target="_blank" href="/politique">Politique&nbsp;</a> 
    
    ...
    

    However, as soon as I go to a profile page, the users page, the group page, it is broken like this :

    1f63eaac-ad88-44c7-8d80-24a9096701da-image.png

    possible to see it on production server

    Any idea to resolve this ?

    wrote on last edited by

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

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


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
  • 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/
  • Nodebb and emails

    Solved Configure nodebb
    27
    5 Votes
    27 Posts
    10k Views
    phenomlab
    @Panda it will use SMTP. In all cases, I never use any plugin to send email. I’ll always send it raw.
  • Fixed background to nodebb forum

    Solved Configure nodebb
    25
    4 Votes
    25 Posts
    10k Views
    phenomlab
    @Panda said in Fixed background to nodebb forum: Chatgpt told me the ::before method. Go figure
  • Further Widgets question

    Solved Configure nodebb
    4
    1
    1 Votes
    4 Posts
    2k Views
    phenomlab
    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    3k Views
    phenomlab
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • Custom badges

    Solved Customisation nodebb
    103
    2
    49 Votes
    103 Posts
    60k Views
    DownPW
    Perfect
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    63k Views
    phenomlab
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    17k Views
    RiekMedia
    @phenomlab it work, thanks