Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.3k 3
  • 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 I just checked this, and it looks as though you are using using a transparent colour to work around the hover issue?

  • wrote on last edited by

    @phenomlab

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

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


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/
  • Unable to change icon in NodeBB navigation

    Tips navigation nodebb
    1
    7
    1 Votes
    1 Posts
    904 Views
    No one has replied
  • Email validation NodeBB

    Bugs nodebb
    21
    3 Votes
    21 Posts
    10k Views
    phenomlab
    @Panda said in Email validation NodeBB: Did you configure that as a custom change to the usual quote icon. How do you do that? I notice on NodeBB site its a solid blue quotes Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.
  • Error install plugin

    Solved Customisation plugin nodebb
    8
    1
    1 Votes
    8 Posts
    6k Views
    DownPW
    @pobojmoks Not WP plugin but nodeBB but it a known bug
  • 4 Votes
    8 Posts
    5k Views
    phenomlab
    @DownPW done
  • Nodebb Hashtag plugin

    Solved General
    15
    1 Votes
    15 Posts
    6k Views
    phenomlab
    @jac Great ! I’ll close this off.
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @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.
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.