Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.4k 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
  • 2 Votes
    1 Posts
    648 Views
    No one has replied
  • NodeBB v4.0.0

    General nodebb sudonix version 4
    28
    4 Votes
    28 Posts
    8k Views
    phenomlab
    @Panda said in NodeBB v4.0.0: the workings of World aren’t intuitive Its not easy to get World populating when a forum is new to it This is a good point and one I’ve considered also. It’s a little confusing to be honest.
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    phenomlab
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • 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 loading emojis

    Solved Configure nodebb emojis
    16
    1
    1 Votes
    16 Posts
    6k Views
    phenomlab
    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version. You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.
  • 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.
  • 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.