Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
  • Sorry the player is small compared to here. I would like to enlarge them ^^ 😉

    – Mine :

    image.png

    – Here on sudonix :

    72b1af86-cb23-4bb3-8d08-0ceb4bb27435-image.png

    @DownPW Try this

    .embed-container iframe {
        width: 600px;
        height: 300px;
    }
    

    Obviously, adjust width and height as required

  • Hmm I have this problem with hover background color on close button on modal chat on my dev instance.
    The background color is black :

    f1c61a50-3b64-4470-89fc-182c8027a530-image.png

    And it seems my code doesn’t work :

    7cff1a19-8d5b-4889-a798-1e13898f1963-image.png

    8d427049-7987-4a2c-a0d9-4c26b475cafb-image.png

    I confess that I do not fully understand why I have black and that my code is not interpreted correctly.

    Thanks in advance for your help my friends 😉

  • Hmm I have this problem with hover background color on close button on modal chat on my dev instance.
    The background color is black :

    f1c61a50-3b64-4470-89fc-182c8027a530-image.png

    And it seems my code doesn’t work :

    7cff1a19-8d5b-4889-a798-1e13898f1963-image.png

    8d427049-7987-4a2c-a0d9-4c26b475cafb-image.png

    I confess that I do not fully understand why I have black and that my code is not interpreted correctly.

    Thanks in advance for your help my friends 😉

    @DownPW It’s caused by this css

    .btn-close {
        filter: var(--bs-node-btn-close-color) !important;
    }
    

    If you remove that filter, the issue will be resolved.

  • Thanks. It’s an error.
    Why I have used filter lol

  • Thanks. It’s an error.
    Why I have used filter lol

    @DownPW I figured 😁

  • @phenomlab

    So actually after research I was using as this was used in old core code.

    By removing the “Filter” directive it works for the black background on the hover of the close button: cool !!

    But for the color of the cross icon itself (In fact it is not an icon but an image) it is black for light themes, no problem but it remains black for dark themes so it becomes invisible !!!

    So here is my solution :

    .btn-close {
      background: var(--bs-node-btn-close-bg) !important;
    }
    
    • for light theme:
    --bs-node-btn-close-bg: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    
    • for dark themes :
    --bs-node-btn-close-bg: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    

    I see you have the same problem here on sudonix, test that 😉

  • @phenomlab

    So actually after research I was using as this was used in old core code.

    By removing the “Filter” directive it works for the black background on the hover of the close button: cool !!

    But for the color of the cross icon itself (In fact it is not an icon but an image) it is black for light themes, no problem but it remains black for dark themes so it becomes invisible !!!

    So here is my solution :

    .btn-close {
      background: var(--bs-node-btn-close-bg) !important;
    }
    
    • for light theme:
    --bs-node-btn-close-bg: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    
    • for dark themes :
    --bs-node-btn-close-bg: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    

    I see you have the same problem here on sudonix, test that 😉

    @DownPW thanks. I’ll check this.

  • no problem. Always @phenomlab

    I want to test your author badge (fa) :

    image.png

    Can you provide CSS for this please ?

    Thank you

    edit:

    tetsing this but i don’t think i’m on the good road

    .topic-owner-post [itemprop=author]:before{
        font-family: "Font Awesome 6 pro";
        font-style: normal;
        content: "\e1e4";
        left: 100px !important;
        text-align: left !important;
        position: absolute;
    }
    
  • no problem. Always @phenomlab

    I want to test your author badge (fa) :

    image.png

    Can you provide CSS for this please ?

    Thank you

    edit:

    tetsing this but i don’t think i’m on the good road

    .topic-owner-post [itemprop=author]:before{
        font-family: "Font Awesome 6 pro";
        font-style: normal;
        content: "\e1e4";
        left: 100px !important;
        text-align: left !important;
        position: absolute;
    }
    

    @DownPW heh, that also needs some js to make that work.

    Edit - add this js block

    function addAuthorBadge() {
      $(".topic-owner-post").each(function() {
        var $authorElement = $(this).find(".text-nowrap:first");
        
        // Check if the author badge already exists
        if (!$authorElement.find(".author").length) {
          // Prepend the author element
          $authorElement.append("<span class='author' data-toggle='tooltip' data-placement='left' title='Topic Author'><span class='author-icon'><i class='fa-regular fa-message-quote'></i></span>");
          // Add tooltip on hover
          $authorElement.find(".author").tooltip({
            content: "Topic Author",
            track: true // This enables the tooltip to track the mouse movement
          });
        }
      });
    }
    
    
    $(document).ready(function() {
      $(window).on('action:posts.loaded', function(data) {
          addAuthorBadge();
        });
    });
    
    
    $(document).ready(function() {
      $(window).on('action:ajaxify.end', function(data) {
          addAuthorBadge();
        });
    });
    
  • OMG make sense

    Thanks dude 🙂

  • Hello,

    I just changed my smartphone (OnePlus 12R) and I see this which I cannot resolve.

    the central body is offset and is not centered on the smartphone. (production server)

    Any idea to solve this??

  • Hello,

    I just changed my smartphone (OnePlus 12R) and I see this which I cannot resolve.

    the central body is offset and is not centered on the smartphone. (production server)

    Any idea to solve this??

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

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

    @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

    8a917031-91c0-4852-bd92-35cb2aa3fbd7-image.png

    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

    1a9413d9-4403-4da5-b12c-df6919f96157-image.png

    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

    240a4f8b-f193-4508-973a-62e64dae573e-image.png

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

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

    @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;
    }
    
    
  • I will test ASAP

    Many thanks my friend

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

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

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

    @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

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

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • navigation menu panel on mobile

    Solved Customisation
    8
    1
    7 Votes
    8 Posts
    520 Views
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • 15 Votes
    51 Posts
    3k Views
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • nodebb-plugin-custom-pages

    Solved Customisation
    5
    2
    3 Votes
    5 Posts
    652 Views
    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired. Can you provide a link in DM for me to review?
  • NodeBB v3 Chat Very Slow

    Moved Performance
    47
    11 Votes
    47 Posts
    4k Views
    @DownPW Seems fine.
  • hover link effect

    Solved Customisation
    18
    1
    6 Votes
    18 Posts
    1k Views
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • 9 Votes
    32 Posts
    4k Views
    @DownPW said in Bottom footer navbar button extend: Oh my god, it’s beautiful mark I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept
  • [NodeBB] Custom fields plugin

    Unsolved Customisation
    5
    0 Votes
    5 Posts
    961 Views
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation
    112
    24 Votes
    112 Posts
    15k Views
    @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