Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
258 5 173.3k 3
  • wrote on last edited by DownPW
    #31

    I forgot this.

    – On position text and icon of theme switcher, I have added padding-top to ventilate the surrounding area and align all icon :

    /*Smartphone*/
    @media all and (max-width: 1024px)
    {
    /*VIOLENCE: BUGFIX: Placement du "Theme Switcher" */
        #switcher {
        list-style: none;
        margin-left: -80px;
        padding-top: 15px;
    }
    }
    

    – And I also improved the space between the icon and the text :

    @media all and (max-width: 1024px)
    {
    #switcher .fa-fw {
        text-align: center;
        width: 1.25em;
        padding-right: 25px;
    }
    }
    

    – Result:

    206c64d6-778c-4d8c-91cb-d432a7227c9e-image.png

  • I forgot this.

    – On position text and icon of theme switcher, I have added padding-top to ventilate the surrounding area and align all icon :

    /*Smartphone*/
    @media all and (max-width: 1024px)
    {
    /*VIOLENCE: BUGFIX: Placement du "Theme Switcher" */
        #switcher {
        list-style: none;
        margin-left: -80px;
        padding-top: 15px;
    }
    }
    

    – And I also improved the space between the icon and the text :

    @media all and (max-width: 1024px)
    {
    #switcher .fa-fw {
        text-align: center;
        width: 1.25em;
        padding-right: 25px;
    }
    }
    

    – Result:

    206c64d6-778c-4d8c-91cb-d432a7227c9e-image.png

    wrote on last edited by phenomlab
    #32

    @downpw another great addition 👏

  • @downpw another great addition 👏

    wrote on last edited by DownPW
    #33

    @phenomlab

    An idea for CSS code for that button (Abandon) after click ?

    a604f223-d10a-4579-9b85-354bd0052873-image.png

  • @phenomlab

    An idea for CSS code for that button (Abandon) after click ?

    a604f223-d10a-4579-9b85-354bd0052873-image.png

    wrote on last edited by
    #34

    @downpw Can you expand on that ?

  • wrote on last edited by DownPW
    #35

    color, background color and after a click on the abandon button

  • color, background color and after a click on the abandon button

    wrote on last edited by
    #36

    @downpw Ok. Do you have a mock-up in terms of what you’d be looking for ? I think I understand, but it will require jQuery

  • @downpw Ok. Do you have a mock-up in terms of what you’d be looking for ? I think I understand, but it will require jQuery

    wrote on last edited by DownPW
    #37

    @phenomlab

    I don’t think so JQuery are necessary becausei hav not that on other themes. Maybe a focus button ?

    I want to fix this color background after a click on “Discard” Button when I reply to a topic.

    For example you don’t have this on sudonix.com

    Just to find the correct CSS code i guess

    55cc3266-1705-48b4-8b1f-9df5de43cbb7-image.png

    I have the same problem on login button

  • @phenomlab

    I don’t think so JQuery are necessary becausei hav not that on other themes. Maybe a focus button ?

    I want to fix this color background after a click on “Discard” Button when I reply to a topic.

    For example you don’t have this on sudonix.com

    Just to find the correct CSS code i guess

    55cc3266-1705-48b4-8b1f-9df5de43cbb7-image.png

    I have the same problem on login button

    wrote on last edited by
    #38

    @downpw Something like this ?

    e8463996-0719-4361-9ea9-cc4df9ac4da0-image.png

    button.btn.btn-default.composer-discard:focus {
        background: red;
    }
    
  • wrote on last edited by DownPW
    #39

    Very odd @phenomlab

    alt text

  • Very odd @phenomlab

    alt text

    wrote on last edited by
    #40

    @downpw Expected, because the CSS class is :focus so on mouseout event, the focus is lost and the CSS will no longer apply. This is why you (probably) need jQuery

  • wrote on last edited by DownPW
    #41

    Nope, I don’t think so because I haven’t got the problem on an another themes and here too

  • Nope, I don’t think so because I haven’t got the problem on an another themes and here too

    wrote on last edited by
    #42

    @downpw Can you provide the same example with another theme ?

  • @downpw Can you provide the same example with another theme ?

    wrote on last edited by
    #43
  • wrote on last edited by
    #44

    @downpw So (for example) do you want the Discard button to turn red if you you click Confirm, or am I off track here ? Not entirely sure what you’re after 🙂

  • @downpw So (for example) do you want the Discard button to turn red if you you click Confirm, or am I off track here ? Not entirely sure what you’re after 🙂

    wrote on last edited by
    #45

    @phenomlab Never mind already found the right CSS property would be nice 🙂

  • @phenomlab Never mind already found the right CSS property would be nice 🙂

    wrote on last edited by
    #46

    @downpw Do you mean this one

    button.btn.btn-default.composer-discard:focus {
        background: red;
    }
    

    Or another ?

  • @downpw Do you mean this one

    button.btn.btn-default.composer-discard:focus {
        background: red;
    }
    

    Or another ?

    wrote on last edited by
    #47

    @phenomlab Another I think

  • wrote on last edited by
    #48

    It seem to be a btn-default problem

  • It seem to be a btn-default problem

    wrote on last edited by DownPW
    #49

    @downpw

    yes it’s that

    alt text

    But if you have the same for Login button, I take 🙂

  • @downpw

    yes it’s that

    alt text

    But if you have the same for Login button, I take 🙂

    wrote on last edited by phenomlab
    #50

    @downpw Think I might have it

    181be1c9-1707-4e71-bb33-5e5172c605a0-image.png

    .composer-discard:disabled {
        background: red !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 vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    crazycells
    @phenomlab yes, it is thanks a lot…
  • CSS border gradients

    Blog gradient border css
    10
    3
    2 Votes
    10 Posts
    3k Views
    cagatay
    ah f5 need
  • 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
    62k Views
    DownPW
    Perfect
  • 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.
  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    3k Views
    JAC
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed