Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 3
  • wrote on last edited by
    #3

    I have a reunion. I will test after 😉

  • wrote on last edited by DownPW
    #4

    @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

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


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