Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 168.0k 3
  • 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

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


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 design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    phenomlab
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • What is this bar called?

    Solved Customisation nodebb
    92
    1
    36 Votes
    92 Posts
    41k Views
    DownPW
    This is good
  • 1 Votes
    1 Posts
    2k Views
    No one has replied
  • 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
  • Adding fileWrite to nodebb code

    Solved Configure nodebb
    16
    1
    5 Votes
    16 Posts
    5k Views
    phenomlab
    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.
  • [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.