Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 167.9k 3
  • @phenomlab said in [NODEBB] Help for my custom CSS:

    @downpw A quick and easy fix is to remove this 🙂 (but not from default theme)

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
        /* margin-left: -3px; */
    }
    

    – It’s Ok just for this below but I must use :

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
       	margin-left: -1px;
    }
    

    alt text

    – For the other problems, If I use this code (must add-1px to margin-left), submit button it’s Ok…

    …but not for edit chat button and preference button (mouse over is OK) :

    .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px;
    	margin-left: -1px;
    }
    

    7d000458-c3f1-4cc3-9221-20539039b9d3-image.png

    68f773bf-bf0f-43a7-9abf-e8b2e9efdabe-image.png

    wrote on last edited by
    #5

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

    – It’s Ok just for this below but I must use :

    I don’t understand why you need this ?

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

    …but not for edit chat button and preference button

    I can’t replicate this

    88c80be0-153b-41c1-84fb-b30c67cdb690-image.png

    All I did was to remove

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
       	margin-left: -3px;
    }
    

    I don’t think you need this line at all

  • 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

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
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation user level css
    4
    1
    5 Votes
    4 Posts
    3k Views
    phenomlab
    @DownPW thanks. I forgot about that.
  • Threaded post support for NodeBB

    Let's Build It threading nodebb
    146
    3
    50 Votes
    146 Posts
    116k Views
    phenomlab
    Updated git for above change https://github.com/phenomlab/nodebb-harmony-threading/commit/14a4e277521d83d219065ffb14154fd5f5cfac69
  • 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.
  • Custom badges

    Solved Customisation nodebb
    103
    2
    49 Votes
    103 Posts
    60k Views
    DownPW
    Perfect
  • creating topic specific widgets

    Solved Customisation nodebb
    16
    10 Votes
    16 Posts
    7k Views
    phenomlab
    @crazycells said in creating topic specific widgets: Additionally if hide class exists, why are we re-defining it? We’re not 🤭 I misspelled it - it should be hidden
  • [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.