[NODEBB] Help for my custom CSS

[phenomlab]

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

I also noticed that the "answer "button on my DEV platform following the new update is quite large but I can’t find the right CSS target to correct it.

Can you help me with that too?

Yes, of course. You can target the component directly for that

[component="topic/quickreply/button"] {
   height 45px;
}
 

[DownPW]

I will test ASAP

Many thanks my friend

[DownPW]

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:

<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 :

possible to see it on production server

Any idea to resolve this ?

[phenomlab]

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

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

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

[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

[DownPW]

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;
}

[DownPW]

@phenomlab

Find him :

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

[DownPW]

Hello @phenomlab

Love your new Glass effect on tittle site.

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

[phenomlab]

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

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

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

[DownPW]

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.

[phenomlab]

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

[DownPW]

OK

Wait News

[Madchatthew]

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

[DownPW]

[phenomlab]

@DownPW coming soon…

[DownPW]

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

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

[phenomlab]

@DownPW here you go

"Glass" (shine) effect on Sudonix logo

A few users have commented on the new shiny logo that appears at the top of the navbar here Want to know how I created that? Of course you do! The log...(more)

Sudonix | A one-stop-shop for all your technology questions