Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
  • @DownPW The topic CSS for this should be as below (note, I added the background and color)

    ul.categories-list li.deleted, ul.topics-list li.deleted {
        opacity: .6;
        background: red;
        color: yellow;
    }
    

    aba26d71-17be-41bf-88ab-e5bd7b63071d-image.png

    Threads for deleted posts in topics are covered by the .deleted class (note, I added the background and color)

    .deleted {
        background: black;
        color: orange;
    }
    

    914852d6-1a94-4e63-8bc2-f86e3e5a6ee4-image.png

  • Thanks you Mark !

    I know why I have don’t find this directive lol : I got my brushes tangled up in the dev console 🙂

    So for deleted post , I prefer use li.pt-4.deleted instead of .deleted because .deleted is in conflict with ul.categories-list li.deleted, ul.topics-list li.deleted 🙂

  • @DownPW yes, fair point. The .deleted class is implicit so you need to make it unique using other classes before it to create a chain which you’ve done.

  • Hello,

    because I use nsembed plugin now, I see the frame are a bit little compared to this forum which uses the same plugin.
    How did you handle that Mark?

    image.png

  • @DownPW sorry, I’m not entirely sure what you mean?

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

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

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

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


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
  • Forum customisation

    Customisation
    11
    6 Votes
    11 Posts
    198 Views

    Thank you Mark, the changes look fantastic!!

  • Opening links in nodebb widget

    Solved Configure
    6
    4 Votes
    6 Posts
    273 Views

    A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below

    <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe>

    This works first time every time on your site as intended.

  • Material View Support for Stock NodeBB

    Unsolved Let's Build It
    51
    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 icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    722 Views

    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.

  • hover link effect

    Solved Customisation
    18
    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.

  • [NODEBB] CSS Style Sheets SelectBox

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

  • [NodeBB] username cards

    Solved Customisation
    8
    5 Votes
    8 Posts
    941 Views

    @phenomlab

    Aha…nice to know. As always thank you for the reply and information.

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    959 Views

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