Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.3k 3
  • @phenomlab

    An idea for CSS code for that button (Abandon) after click ?

    a604f223-d10a-4579-9b85-354bd0052873-image.png

    wrote on last edited by
    #34

    @downpw Can you expand on that ?

  • wrote on last edited by DownPW
    #35

    color, background color and after a click on the abandon button

  • color, background color and after a click on the abandon button

    wrote on last edited by
    #36

    @downpw Ok. Do you have a mock-up in terms of what you’d be looking for ? I think I understand, but it will require jQuery

  • @downpw Ok. Do you have a mock-up in terms of what you’d be looking for ? I think I understand, but it will require jQuery

    wrote on last edited by DownPW
    #37

    @phenomlab

    I don’t think so JQuery are necessary becausei hav not that on other themes. Maybe a focus button ?

    I want to fix this color background after a click on “Discard” Button when I reply to a topic.

    For example you don’t have this on sudonix.com

    Just to find the correct CSS code i guess

    55cc3266-1705-48b4-8b1f-9df5de43cbb7-image.png

    I have the same problem on login button

  • @phenomlab

    I don’t think so JQuery are necessary becausei hav not that on other themes. Maybe a focus button ?

    I want to fix this color background after a click on “Discard” Button when I reply to a topic.

    For example you don’t have this on sudonix.com

    Just to find the correct CSS code i guess

    55cc3266-1705-48b4-8b1f-9df5de43cbb7-image.png

    I have the same problem on login button

    wrote on last edited by
    #38

    @downpw Something like this ?

    e8463996-0719-4361-9ea9-cc4df9ac4da0-image.png

    button.btn.btn-default.composer-discard:focus {
        background: red;
    }
    
  • wrote on last edited by DownPW
    #39

    Very odd @phenomlab

    alt text

  • Very odd @phenomlab

    alt text

    wrote on last edited by
    #40

    @downpw Expected, because the CSS class is :focus so on mouseout event, the focus is lost and the CSS will no longer apply. This is why you (probably) need jQuery

  • wrote on last edited by DownPW
    #41

    Nope, I don’t think so because I haven’t got the problem on an another themes and here too

  • Nope, I don’t think so because I haven’t got the problem on an another themes and here too

    wrote on last edited by
    #42

    @downpw Can you provide the same example with another theme ?

  • @downpw Can you provide the same example with another theme ?

    wrote on last edited by
    #43
  • wrote on last edited by
    #44

    @downpw So (for example) do you want the Discard button to turn red if you you click Confirm, or am I off track here ? Not entirely sure what you’re after 🙂

  • @downpw So (for example) do you want the Discard button to turn red if you you click Confirm, or am I off track here ? Not entirely sure what you’re after 🙂

    wrote on last edited by
    #45

    @phenomlab Never mind already found the right CSS property would be nice 🙂

  • @phenomlab Never mind already found the right CSS property would be nice 🙂

    wrote on last edited by
    #46

    @downpw Do you mean this one

    button.btn.btn-default.composer-discard:focus {
        background: red;
    }
    

    Or another ?

  • @downpw Do you mean this one

    button.btn.btn-default.composer-discard:focus {
        background: red;
    }
    

    Or another ?

    wrote on last edited by
    #47

    @phenomlab Another I think

  • wrote on last edited by
    #48

    It seem to be a btn-default problem

  • It seem to be a btn-default problem

    wrote on last edited by DownPW
    #49

    @downpw

    yes it’s that

    alt text

    But if you have the same for Login button, I take 🙂

  • @downpw

    yes it’s that

    alt text

    But if you have the same for Login button, I take 🙂

    wrote on last edited by phenomlab
    #50

    @downpw Think I might have it

    181be1c9-1707-4e71-bb33-5e5172c605a0-image.png

    .composer-discard:disabled {
        background: red !important;
    }
    
  • @downpw

    yes it’s that

    alt text

    But if you have the same for Login button, I take 🙂

    wrote on last edited by
    #51

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

    But if you have the same for Login button, I take

    Use this

    button#login {
        background: green;
        border: 1px solid green;
    }
    
  • @downpw Think I might have it

    181be1c9-1707-4e71-bb33-5e5172c605a0-image.png

    .composer-discard:disabled {
        background: red !important;
    }
    
    wrote on last edited by
    #52

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

    @downpw Think I might have it

    181be1c9-1707-4e71-bb33-5e5172c605a0-image.png

    .composer-discard:disabled {
        background: red !important;
    }
    

    That’s works too

  • wrote on last edited by
    #53

    @phenomlab

    Other things, I would like to change progress bar color of Windows alert like welcome message, palcement user banner etc…:

    https://i.imgur.com/DgYHHZc.gif


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
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • Composer Zen icon?

    Solved Configure nodebb
    8
    1
    2 Votes
    8 Posts
    3k Views
    phenomlab
    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used. If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!
  • Collapsing blockquotes on Harmony

    General nodebb harmony collapsible quotes
    2
    1
    2 Votes
    2 Posts
    987 Views
    phenomlab
    @dave1904 that’s a really good point actually. I know it was there previously on Persona, but you’re right - no such function exists on harmony. However, putting something in place to mimick the behaviour of Persona won’t be hard from the js standpoint, although I wonder if perhaps we should ask the NodeBB developers is this feature was overlooked?
  • restarting nodebb on boot

    Unsolved Configure nodebb
    3
    1 Votes
    3 Posts
    2k Views
    phenomlab
    @eeeee said in restarting nodebb on boot: can I just run nodebb under nodemon for auto restarts? It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    3k Views
    phenomlab
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • New message CSS problem

    Unsolved Customisation css
    11
    1
    2 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • [NodeBB] First post customization

    Solved Customisation nodebb
    5
    4 Votes
    5 Posts
    3k Views
    crazycells
    @phenomlab thanks
  • 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.