Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
257 5 131.0k 3
  • You must have a cache problem because the CSS is not even active on your image 😉

    The problem appears on the current page and not the hover

    For example, use the menu to go to the Rules page. Once on the rules page, reuse the menu to see the bug

    @DownPW Cache cleared, but…

    521b3bec-7fa2-4baf-b94d-53494d92c10e-image.png

  • re test and click on a link ?

  • image.png

  • @DownPW I see it in an incognito session - looks like I’ve got some browser related issues 😕

    00df3417-3292-40d9-b030-231d63982c24-image.png

    So it’s not hover, but :active

    I’d ne inclined to use transparency here as it’s much less effort

    .dropdown-item.active, .dropdown-item:active {
        --bs-dropdown-link-active-bg: #b9babe38;
    }
    

    That will give you (for this swatch at least)

    eb4040fc-7b5a-4cae-b77e-9cf37570b14b-image.png

  • image.png

    Just this bug.

    How can I change the icon color of the active page? as you can see, the icon is not visible when we are on the selected page
    I don’t want to change background active primary color but for example change icon to white like the text or other color

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

    Just this bug.

    How can I change the icon color of the active page

  • Yes thnaks it’s a solution but is there another way? Like targeting icons when the dropdown is active rather than changing the background because I already use --bs-dropdown-link-active-bg elsewhere

    Otherwise we can cheat by changing the color of the icons at any time but I find it less good.

    maybe change html for add specific class

    It’s just a question, I can eventually satisfy myself with this solution

  • Yes thnaks it’s a solution but is there another way? Like targeting icons when the dropdown is active rather than changing the background because I already use --bs-dropdown-link-active-bg elsewhere

    Otherwise we can cheat by changing the color of the icons at any time but I find it less good.

    maybe change html for add specific class

    It’s just a question, I can eventually satisfy myself with this solution

    @DownPW Try this

    a.active i {
        color: #ffffff!important;
    }
    
  • Seems to be definitevely better. Hope have no other effect 🙂
    Thank you Mark !

  • Seems to be definitevely better. Hope have no other effect 🙂
    Thank you Mark !

    @DownPW there shouldn’t be - it’s a fairly specific target, but if you do experience odd behaviour, let me know.

  • Hello mark,

    I would like to change the appearance of deleted messages in topics but I can’t find the target or the component.

    image.png

    For example, opacity or left timeline color of the deleted post

    And I would like the same things for deleted topics

    Hard to find these component or class !

    Thanks 🙂

  • Hello mark,

    I would like to change the appearance of deleted messages in topics but I can’t find the target or the component.

    image.png

    For example, opacity or left timeline color of the deleted post

    And I would like the same things for deleted topics

    Hard to find these component or class !

    Thanks 🙂

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

  • 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

  • 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

  • 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


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
  • Please help me, I can't install nodebb

    Locked Solved Customisation nodebb
    7
    5 Votes
    7 Posts
    2k Views
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • Interesting Widget code, but can't fetch API

    Solved Customisation nodebb
    26
    2 Votes
    26 Posts
    9k Views
    @Panda said in Interesting Widget code, but can’t fetch API: How did you drop that widget into the post there? I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already? Yes, here https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044 It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets. @Panda said in Interesting Widget code, but can’t fetch API: Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that? By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget. Hope this makes sense?
  • 1 Votes
    1 Posts
    1k Views
    No one has replied
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    4k Views
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    3k Views
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • [NodeBB] First post customization

    Solved Customisation nodebb
    5
    4 Votes
    5 Posts
    2k Views
    @phenomlab thanks
  • Iframely (Nodebb)

    Solved Configure
    40
    4 Votes
    40 Posts
    12k Views
    @DownPW This is now resolved. The issue was an incorrect URL specified in the Nodebb plugin. I’ve corrected this, and now it works as intended.
  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    2k Views
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed