Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 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?
  • Where are widgets stored?

    Solved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    Panda
    @phenomlab Thanks, have DMed you
  • 4 Votes
    8 Posts
    2k Views
    phenomlab
    @Panda said in Upgrade to NodeBB v3? 2BB or not 2BB, that is the question!: So although thats a plugin it has Widget like element and stopped working on the Theme change Which is normal based on the widgets being reset when you change themes.
  • NodeBB v3 Chat Very Slow

    Moved Performance nodebb v3 nodebb chat
    47
    11 Votes
    47 Posts
    21k Views
    phenomlab
    @DownPW Seems fine.
  • NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    4k Views
    mventures
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • 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.
  • chat list navbar

    Solved Customisation css navbar chat menu
    30
    2
    3 Votes
    30 Posts
    13k Views
    DownPW
    No no it’s ok @phenomlab I just comment the 2 lines mentionned aboves
  • 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.