Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.3k 3
  • wrote on last edited by DownPW
    #6

    see my 2 last screenshots and connect to the website

  • see my 2 last screenshots and connect to the website

    wrote on last edited by phenomlab
    #7

    @downpw This will fix the reply button on hover

    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        margin-right: 2px;
    }
    

    This will fix the search alignment, as the CSS is inherited

    a#save-preferences {
        margin-left: -3px;
        margin-right: 2px;
    }
    

    This should fix the message buttons

    .message-body, .btn-xs.btn-link {
        margin-left: -2px !important;
        margin-right: 1px !important;
    }
    

    And this will fix the composer submit button

    .composer-submit {
        margin-left: -3px !important;
    }
    
  • wrote on last edited by
    #8

    these code just for CustomCSS file isn’t it @phenomlab ?
    On ACP, I leave the code you gave me

  • these code just for CustomCSS file isn’t it @phenomlab ?
    On ACP, I leave the code you gave me

    wrote on last edited by
    #9

    @downpw Correct. Only apply these fixes to your custom CSS.

  • @downpw This will fix the reply button on hover

    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        margin-right: 2px;
    }
    

    This will fix the search alignment, as the CSS is inherited

    a#save-preferences {
        margin-left: -3px;
        margin-right: 2px;
    }
    

    This should fix the message buttons

    .message-body, .btn-xs.btn-link {
        margin-left: -2px !important;
        margin-right: 1px !important;
    }
    

    And this will fix the composer submit button

    .composer-submit {
        margin-left: -3px !important;
    }
    
    wrote on last edited by DownPW
    #10

    @phenomlab

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

    @downpw This will fix the reply button on hover

    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        margin-right: 2px;
    }
    

    No need, margin-right: 0px; is good for me

    This will fix the search alignment, as the CSS is inherited

    a#save-preferences {
        margin-left: -3px;
        margin-right: 2px;
    }
    

    No working, just add border-radius to 0

    a#save-preferences {
    
    border-radius: 0px;
    }
    

    This should fix the message buttons

    .message-body, .btn-xs.btn-link {
        margin-left: -2px !important;
        margin-right: 1px !important;
    }
    

    Not working, i was try button .btn .btn-xs .btn-link too. Border is always here. maybe more specific about this button but I don’t see the class.

    alt text

    And this will fix the composer submit button

    .composer-submit {
        margin-left: -3px !important;
    }
    

    No need it seems to me

  • @phenomlab

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

    @downpw This will fix the reply button on hover

    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        margin-right: 2px;
    }
    

    No need, margin-right: 0px; is good for me

    This will fix the search alignment, as the CSS is inherited

    a#save-preferences {
        margin-left: -3px;
        margin-right: 2px;
    }
    

    No working, just add border-radius to 0

    a#save-preferences {
    
    border-radius: 0px;
    }
    

    This should fix the message buttons

    .message-body, .btn-xs.btn-link {
        margin-left: -2px !important;
        margin-right: 1px !important;
    }
    

    Not working, i was try button .btn .btn-xs .btn-link too. Border is always here. maybe more specific about this button but I don’t see the class.

    alt text

    And this will fix the composer submit button

    .composer-submit {
        margin-left: -3px !important;
    }
    

    No need it seems to me

    wrote on last edited by
    #11

    @downpw Very odd. I actually used this CSS on your site and it works perfectly.

  • wrote on last edited by DownPW
    #12

    I don’t know.

    I delete the cache all the time after modif CSS file.

  • I don’t know.

    I delete the cache all the time after modif CSS file.

    wrote on last edited by
    #13

    @downpw I just tried this again from an incognito session, and the CSS I suggested also works perfectly. Very strange indeed… 😕

  • wrote on last edited by DownPW
    #14

    Can you see my CSS/ACP ?

    maybe I did things wrong?

    I try on private navigation too.

  • Can you see my CSS/ACP ?

    maybe I did things wrong?

    I try on private navigation too.

    wrote on last edited by
    #15

    @downpw Yes, I see the ACP - none of the CSS I provided should be in there - it should only reside in the custom themes.

  • wrote on last edited by
    #16

    hmm if you can see custom CSS, I would appreciate it

  • hmm if you can see custom CSS, I would appreciate it

    wrote on last edited by
    #17

    @downpw Let me have a look

  • hmm if you can see custom CSS, I would appreciate it

    wrote on last edited by phenomlab
    #18

    @downpw Can you please insert the code I provided into the Dark Aqua CSS theme file?

  • @downpw Can you please insert the code I provided into the Dark Aqua CSS theme file?

    wrote on last edited by
    #19

    @phenomlab

    so sorry. first code ?

  • @phenomlab

    so sorry. first code ?

    wrote on last edited by
    #20

    @downpw this one
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/7?_=1642791291710

    I’ll have a look at this tomorrow but ideally need the code applied beforehand.

  • phenomlab phenomlab referenced this topic on
  • @downpw this one
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/7?_=1642791291710

    I’ll have a look at this tomorrow but ideally need the code applied beforehand.

    wrote on last edited by
    #21

    @phenomlab

    Ok done at the end of the file

    b261fe4b-bd64-4346-8c97-1e98d5b14a5c-image.png

  • @phenomlab

    Ok done at the end of the file

    b261fe4b-bd64-4346-8c97-1e98d5b14a5c-image.png

    wrote on last edited by
    #22

    @downpw thanks

  • @phenomlab

    Ok done at the end of the file

    b261fe4b-bd64-4346-8c97-1e98d5b14a5c-image.png

    wrote on last edited by
    #23

    @downpw Are these lines still there ? I don’t see them at the bottom of the file ?

  • wrote on last edited by
    #24
  • wrote on last edited by phenomlab
    #25

    @downpw Thanks for the confirmation. This is indeed quite odd, as the classes, despite being at the bottom of the file, do not appear in the DOM. If I apply them manually

    eb14cd23-d5d0-4b6a-bbc8-31fd0e92cabf-image.png

    Everything works as I expected

    c036f021-3d2f-4939-bd41-8c60a9ca1d11-image.png

    Looking at your CSS, I can see why

    caccdf32-f858-4958-87d2-944deddbc616-image.png

    Note that you are missing a closing curly brace on what should be line 2716 🙂 so this explains why the remaining CSS is not being loaded !

    This block also has a stray asterisk

    .message-body, .btn-xs.btn-link {
        margin-left: -2px !important;
        margin-right: 1px !important;
    }*
    

    Should be

    .message-body, .btn-xs.btn-link {
        margin-left: -2px !important;
        margin-right: 1px !important;
    }
    

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
  • nodebb-plugin-custom-pages

    Solved Customisation plugin custom-pages
    5
    2
    3 Votes
    5 Posts
    5k Views
    phenomlab
    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired. Can you provide a link in DM for me to review?
  • NodeBB: Privileges for the Announcement channel

    Solved Configure nodebb
    6
    1
    1 Votes
    6 Posts
    2k Views
    phenomlab
    Up to you really
  • 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.
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • IRC Server/Client - Chat App with NodeBB

    Linux nodebb irc server client
    6
    1 Votes
    6 Posts
    3k Views
    phenomlab
    @Hari not sure from the consumer perspective, but Skype has been all but completely consumed by Microsoft Teams when it comes to business usage.
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    2k Views
    crazycells
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • [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] 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