Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 3
  • I forgot this.

    – On position text and icon of theme switcher, I have added padding-top to ventilate the surrounding area and align all icon :

    /*Smartphone*/
    @media all and (max-width: 1024px)
    {
    /*VIOLENCE: BUGFIX: Placement du "Theme Switcher" */
        #switcher {
        list-style: none;
        margin-left: -80px;
        padding-top: 15px;
    }
    }
    

    – And I also improved the space between the icon and the text :

    @media all and (max-width: 1024px)
    {
    #switcher .fa-fw {
        text-align: center;
        width: 1.25em;
        padding-right: 25px;
    }
    }
    

    – Result:

    206c64d6-778c-4d8c-91cb-d432a7227c9e-image.png

    wrote on last edited by phenomlab
    #32

    @downpw another great addition 👏

  • @downpw another great addition 👏

    wrote on last edited by DownPW
    #33

    @phenomlab

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

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

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

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
  • Collapsing blockquotes on Harmony

    General nodebb harmony collapsible quotes
    2
    1
    2 Votes
    2 Posts
    980 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?
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • [NodeBB] Custom fields plugin

    Unsolved Customisation nodebb plugins javascript custom
    5
    0 Votes
    5 Posts
    3k Views
    phenomlab
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • background color of the footer area

    Solved Customisation nodebb
    7
    1
    7 Votes
    7 Posts
    4k Views
    crazycells
    @phenomlab thank you very much
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @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] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    6k Views
    JAC
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • nodebb-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    17k Views
    RiekMedia
    @phenomlab it work, thanks
  • unable to upvote on forum

    Solved Performance
    10
    1
    3 Votes
    10 Posts
    4k Views
    Hari
    @phenomlab yes, i can understand. it is working now