Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.3k 3
  • @phenomlab

    Not at all 🙂
    The problem occurs on the left sidebar but not in the Brand menu.

    wrote on last edited by

    @DownPW This is what I see in the left side bar. I am using the Metallic theme?

    7c18de0d-dda1-45a4-9380-a84cdc080818-image.png

  • wrote on last edited by

    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

  • 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

    wrote on last edited by

    @DownPW Cache cleared, but…

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

  • wrote on last edited by

    re test and click on a link ?

  • wrote on last edited by

    image.png

  • wrote on last edited by phenomlab

    @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

    wrote on last edited by

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

    Just this bug.

    How can I change the icon color of the active page

  • wrote on last edited by DownPW

    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

    wrote on last edited by

    @DownPW Try this

    a.active i {
        color: #ffffff!important;
    }
    
  • wrote on last edited by DownPW

    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 !

    wrote on last edited by

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

  • wrote on last edited by DownPW

    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 🙂

    wrote on last edited by

    @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

  • wrote on last edited by DownPW

    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 🙂

    wrote on last edited by

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

  • wrote on last edited by DownPW

    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

    wrote on last edited by

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

  • wrote on last edited by DownPW

    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

    wrote on last edited by

    @DownPW Try this

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

    Obviously, adjust width and height as required

  • wrote on last edited by

    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 😉


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
    phenomlab
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • Test of youtube embeds

    Solved Configure nodebb
    14
    11 Votes
    14 Posts
    5k Views
    Sampo2910
    @phenomlab Perfect!!! Many thanks.
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    Hari
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • NodeBB v3 Android Problem

    Solved Configure nodebb android
    4
    4 Votes
    4 Posts
    2k Views
    cagatay
    thank you fixed.
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    6k Views
    phenomlab
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    65k Views
    phenomlab
    @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-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    17k Views
    RiekMedia
    @phenomlab it work, thanks
  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    3k Views
    JAC
    @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