• Home
  • Categories
    • All Categories
    • Individual Categories
  • Recent
  • Popular
  • Tags
  • Users
  • Groups
  • Solved
Collapse
Sudonix

Sudonix DEV

[NODEBB] Help for my custom CSS

Scheduled Pinned Locked Moved Solved Customisation
nodebbcssbugfix
131 Posts 3 Posters 941 Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #1

    Hi @phenomlab

    As seen in pm, I open this topic to follow the 2 following ones:

    • https://sudonix.com/topic/200/nodebb-reply-button-arrow-answer/24
    • https://sudonix.com/topic/179/nodebb-css-style-sheets-selectbox/109

    – For the submit button, on new Topic and reply to a topic, ll work great with default theme (CSS code in ACP) but I end up with some bugs on my Custom themes 😞

    – I copied your code for the button in the ACP/custom CSS (for default theme)

    .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
      margin-left: -3px;
    }
    .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle):hover {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    button.btn.btn-primary.composer-submit:hover {
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }
    .btn .caret {
      margin-left: 2px;
    }
    .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
      border-radius: 0px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      margin-left: 0px;
    }
    

    – Ref to the topic I add this :

    .btn-primary {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    

    – After several hours of testing and research, I think I have variable conflicts in the custom CSS and I can’t get by anymore πŸ™‚

    I list the bugs below to fix here.

    I can give you access to modify the CSS file as you wish and do some tests.
    A backup of the file is made so it doesn’t matter.

    If you can help me with one CSS and explain what you do exactly (delete, add, modfy), I can reproduce on the other themes

    !! I give you access and information on PM !!


    Bug found. (Maybe other, if you can see that too).

    – Problem due to small hack, can be avoided by changing hover color (color a bit darker like in default theme) or other hack:

    Reply button topic

    – Same problem on chat edit button:
    chat edit button

    – Same problem on advanced search/Save preference button:
    Save preference button

    Thanks in advance

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • DownPWundefined DownPW referenced this topic on
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by phenomlab
    #2

    @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; */
    }
    
    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #3

    I have a reunion. I will test after πŸ˜‰

    This is my test signature

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW 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

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by DownPW
    #6

    see my 2 last screenshots and connect to the website

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW 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;
    }
    
    DownPWundefined 1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #9

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

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    replied to phenomlab 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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #11

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

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by DownPW
    #12

    I don’t know.

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

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW 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… πŸ˜•

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by DownPW
    #14

    Can you see my CSS/ACP ?

    maybe I did things wrong?

    I try on private navigation too.

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW 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.

    1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    wrote on last edited by
    #16

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

    This is my test signature

    phenomlabundefined 2 Replies Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by
    #17

    @downpw Let me have a look

    1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW on last edited by phenomlab
    #18

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

    DownPWundefined 1 Reply Last reply
    0
  • DownPWundefined Offline
    DownPWundefined Offline
    DownPW
    replied to phenomlab on last edited by
    #19

    @phenomlab

    so sorry. first code ?

    This is my test signature

    phenomlabundefined 1 Reply Last reply
    0
  • phenomlabundefined Offline
    phenomlabundefined Offline
    phenomlab
    replied to DownPW 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.

    DownPWundefined 1 Reply Last reply
    0
  • phenomlabundefined phenomlab referenced this topic on

  • Login

  • Login or register to search.
  • First post
    Last post
0
  • Home
  • Categories
    • All Categories
    • Individual Categories
  • Recent
  • Popular
  • Tags
  • Users
  • Groups
  • Solved