Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 3
  • @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

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

    wrote on last edited by
    #54

    @phenomlab No idea ?

  • @phenomlab No idea ?

    wrote on last edited by
    #55

    @downpw yes, I’ve done the same on sudonix but not in front of a pc presently. If you switch to dark mode on this platform, you’ll see the changes i made to the alert message.

  • wrote on last edited by DownPW
    #56

    @phenomlab

    I see how to change background color, text color, border color but not the progress bar with transition value.

    It’s too fast to see the code on console

    I see this in “element style” :

    transition: width 5450ms linear 0s, background-color 5450ms ease-in 0s;
    

    But I don’t no what to do with this


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.
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    15k Views
    phenomlab
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • Can you adjust Admin settings on your NodeBB?

    Bugs nodebb
    5
    0 Votes
    5 Posts
    2k Views
    phenomlab
    @Panda as, yes, now I understand and that makes 100% sense. It means those who get down voted can still have an opinion and use common services. And yes, you’re right. Rather than down vote, just ignore if you don’t agree.
  • Smart Widgets

    Solved Configure nodebb
    9
    3 Votes
    9 Posts
    3k Views
    phenomlab
    @Panda said in Smart Widgets: So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object? It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train
  • Custom badges

    Solved Customisation nodebb
    103
    2
    49 Votes
    103 Posts
    60k Views
    DownPW
    Perfect
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    5k Views
    phenomlab
    @cagatay That matches what I see [image: 4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • 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