[NODEBB] Help for my custom CSS

[phenomlab]

@DownPW yes, I too see this on your production site. Typically, this is because of one element that is oversized and causing the entire body to shift.

Unfortunately, it’s a slow process in terms of finding the culprit, but I’ll have a more detailed look later.

[DownPW]

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

@DownPW yes, I too see this on your production site. Typically, this is because of one element that is oversized and causing the entire body to shift.

Unfortunately, it’s a slow process in terms of finding the culprit, but I’ll have a more detailed look later.

OK Thank you. Logo I guess

---

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?

[phenomlab]

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

OK Thank you. Logo I guess

Sort of.

You can stop most of the overflow with the below CSS

body {
    overflow-x: hidden;
    max-width: 100%;
}

Add the above to the existing body class you have.

For the remainder, it’s much easier to see where elements burst outside of their boundaries by using the global CSS below, which will draw a border around every single element - effectively, making it much easier to see

* {
outline: 1px solid red;
}

This then yields the below

As you can clearly see, the additional navigation buttons you have are flowing outside of their allowed space, which causes the body to expand to accommodate the new size. This produces the undesired effect of scrolling on the entire body.

Then, look at the class of

[data-widget-area=brand-header] {
    justify-content: end;
    display: flex;
}

If you remove display: flex; from this class, the icons are then stacked vertically, and the problem resolves itself. However, this looks ugly. A better way of getting closer to the result you want is to resize the logo

[component="brand/logo"] {
    max-height: 100px;
    width: auto;
    height: 75px;
    margin-top: -1px;
    height: 45px; 
}

Here, we’ve dropped the image size from 75px to 45px, which in turn pulls the expanded DIV back into line

The problem we then have is the site title, but can easily fix that with the below CSS

@media (max-width: 768px) {
    a.text-truncate.align-self-stretch.align-items-center.d-flex h1 {
        height: 55px;
    }
}

This then yields

Everything now aligns correctly, and more importantly, the scrolling body is no more.

[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