Skip to content

[NODEBB] CSS Style Sheets SelectBox

Locked Solved Customisation
112 2 63.3k 1
  • Nope. 😞

    wrote on last edited by phenomlab
    #70

    @downpw Try this

    .bootbox .modal-dialog .modal-content {
        background: #fff;
    }
    

    d3e63ab5-5a08-4caa-a898-de93a5eefdfd-image.png

  • @downpw Try this

    .bootbox .modal-dialog .modal-content {
        background: #fff;
    }
    

    d3e63ab5-5a08-4caa-a898-de93a5eefdfd-image.png

    wrote on last edited by
    #71

    @phenomlab
    That works Sir 🙂

    Super hero you are^^

  • @phenomlab
    That works Sir 🙂

    Super hero you are^^

    wrote on last edited by
    #72

    @downpw Great ! Can we get the wallpapers fixed now also ? Would be good to see everything working.

  • wrote on last edited by
    #73

    @phenomlab

    I have fix all files.
    You can test it if you want

  • @phenomlab

    I have fix all files.
    You can test it if you want

    wrote on last edited by
    #74

    @downpw doesn’t seem to be working ?

  • @downpw doesn’t seem to be working ?

    wrote on last edited by DownPW
    #75

    @phenomlab said in [NODEBB] CSS Style Sheets SelectBox:

    @downpw doesn’t seem to be working ?

    @phenomlab

    It seems to work on my mobile. Maybe your cache ?

  • @phenomlab said in [NODEBB] CSS Style Sheets SelectBox:

    @downpw doesn’t seem to be working ?

    @phenomlab

    It seems to work on my mobile. Maybe your cache ?

    wrote on last edited by phenomlab
    #76

    @downpw probably. Let me try again

    EDIT - All good in incognito session

  • wrote on last edited by
    #77

    @DownPW I think we’re done now, yes ?

  • wrote on last edited by DownPW
    #78

    Oh yeah @phenomlab

    The post can be marked Resolved. No problem…
    And I thanks you again for your hard work

    A question:

    I have customised the Theme Chooser menu for mobile.
    Moreover, if anyone is interested here is the code:

    @media all and (max-width: 1024px)
    {
    .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #fff;
        white-space: nowrap;
        background: #3A3C41;
    }
    
    #theme.dropdown-menu {
        position: fixed;
        top: 140px;
        left: 15px;
        z-index: 1000;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        font-size: 14px;
        text-align: left;
        /* background-clip: padding-box; */
        background: #3A3C41;
        width: 30px;
        border: 1px solid white;
    }
    

    I want to change the color of these elements, when the button is selectionned (on mobile). Actually, there blue by default and I wanted to change for white or grey for :

    ceaee937-d1ea-4315-9a7e-fd2d346855d9-image.png

    And change the color of these icons :
    a2b8e252-921a-4424-a5ac-ddc6cf2b6cf2-image.png
    If you have an idea @phenomlab 🙂

  • Oh yeah @phenomlab

    The post can be marked Resolved. No problem…
    And I thanks you again for your hard work

    A question:

    I have customised the Theme Chooser menu for mobile.
    Moreover, if anyone is interested here is the code:

    @media all and (max-width: 1024px)
    {
    .dropdown-menu>li>a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #fff;
        white-space: nowrap;
        background: #3A3C41;
    }
    
    #theme.dropdown-menu {
        position: fixed;
        top: 140px;
        left: 15px;
        z-index: 1000;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        font-size: 14px;
        text-align: left;
        /* background-clip: padding-box; */
        background: #3A3C41;
        width: 30px;
        border: 1px solid white;
    }
    

    I want to change the color of these elements, when the button is selectionned (on mobile). Actually, there blue by default and I wanted to change for white or grey for :

    ceaee937-d1ea-4315-9a7e-fd2d346855d9-image.png

    And change the color of these icons :
    a2b8e252-921a-4424-a5ac-ddc6cf2b6cf2-image.png
    If you have an idea @phenomlab 🙂

    wrote on last edited by
    #79

    @downpw said in [NODEBB] CSS Style Sheets SelectBox:

    I want to change the color of these elements, when the button is selectionned (on mobile). Actually, there blue by default and I wanted to change for white or grey for :

    ceaee937-d1ea-4315-9a7e-fd2d346855d9-image.png

    Find 🙂

    @media all and (max-width: 1024px)
    {
    .btn-link:focus, .btn-link:hover {
        /*color: #23527c;*/
        color: lightgrey; /*Any color you want*/
        text-decoration: underline;
        background-color: transparent;
    }
    }
    

    I haven’t yet found for point shaped marker. I will search

  • wrote on last edited by DownPW
    #80

    @downpw said in [NODEBB] CSS Style Sheets SelectBox:

    I haven’t yet found for point shaped marker. I will search

    Hi @phenomlab

    I still haven’t found a way to remove the dot to the left of the Theme Switcher button on mobile (See Screenshot).

    https://sudonix.com/assets/uploads/files/1641509822802-ceaee937-d1ea-4315-9a7e-fd2d346855d9-image.png

    If you have an idea, I’m interested 🙂

    Cya

  • @downpw said in [NODEBB] CSS Style Sheets SelectBox:

    I haven’t yet found for point shaped marker. I will search

    Hi @phenomlab

    I still haven’t found a way to remove the dot to the left of the Theme Switcher button on mobile (See Screenshot).

    https://sudonix.com/assets/uploads/files/1641509822802-ceaee937-d1ea-4315-9a7e-fd2d346855d9-image.png

    If you have an idea, I’m interested 🙂

    Cya

    wrote on last edited by
    #81

    @downpw add list-style: none; to the class

  • @downpw add list-style: none; to the class

    wrote on last edited by DownPW
    #82

    Thanks @phenomlab 🙂

    Moreover, if anyone is interested here is the code:

    
    @media all and (max-width: 1024px)
    {
    .navbar-form {
        left: 20px;
        box-shadow: none;
        list-style: none;
    }
    }
    
  • wrote on last edited by DownPW
    #83

    @phenomlab

    I have another CSS problem for me @phenomlab

    I have set the icon of theme switcher on white with this code:

    .navbar-default .btn-link {
        color: #fff;
    }
    

    I have set the icon of theme switcher on black when I dropdwown on the menu with this code :

    .navbar-default .btn-link:focus, .navbar-default .btn-link:hover {
        color: black;
    }
    

    The problem I have:

    Example on aqua theme, I dropdown the menu for change a theme and I have selected a wrong theme: I select the one already used (aqua)

    At this moment, the icon becomes white again and I would like it to remain black.

    It’s possible to do that ?

    edff94ef-23ff-4704-896c-e5b26cdb4923-image.png

  • wrote on last edited by DownPW
    #84

    EDIT:

    Others things I have :

    If I Click on fa-faw icon, The icon is black (its’ good) on dropdown :
    ff849338-bb74-499b-8e2d-ad8d4e1d03b0-image.png

    But if I click on background (here aqua), the icon is white on dropdown :

    d38b3686-81b7-47d5-84ac-f688d27e9937-image.png

    Thanks in advance @phenomlab for your help. See the older post for seeing my code

  • wrote on last edited by
    #85

    Hi @phenomlab 🙂
    How are you ?
    I know you are a busy man.

    Can you look at my last 2 posts?

    I have 2 small issues to solve and I think this is fairly straightforward for you.

    I’m a little lost with the fa-faw

    Thanks in advance

  • @phenomlab

    I have another CSS problem for me @phenomlab

    I have set the icon of theme switcher on white with this code:

    .navbar-default .btn-link {
        color: #fff;
    }
    

    I have set the icon of theme switcher on black when I dropdwown on the menu with this code :

    .navbar-default .btn-link:focus, .navbar-default .btn-link:hover {
        color: black;
    }
    

    The problem I have:

    Example on aqua theme, I dropdown the menu for change a theme and I have selected a wrong theme: I select the one already used (aqua)

    At this moment, the icon becomes white again and I would like it to remain black.

    It’s possible to do that ?

    edff94ef-23ff-4704-896c-e5b26cdb4923-image.png

    wrote on last edited by
    #86

    @downpw You should be able to use this in each stylesheet (obviously, set the colour you actually want)

    [data-original-title="Theme Switcher"] i {
        color: #000;
    }
    
  • wrote on last edited by DownPW
    #87

    @phenomlab

    The code just change The color icon but not the color when I dropdown to the menu

    I prefer 2 colors :

    • One on the navbar
    • On on hover icon and dropdown
  • wrote on last edited by DownPW
    #88

    Ola @phenomlab

    If you want we can use team viewer for see that.

  • Ola @phenomlab

    If you want we can use team viewer for see that.

    wrote on last edited by
    #89

    @downpw you may need to do this with jQuery. Can you provide a mock-up of what you’re looking for ?


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
  • 5 Votes
    2 Posts
    2k Views
    DownPW
    Nice. Very good tips Mark
  • 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.
  • Changing the look of recent cards

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    893 Views
    No one has replied
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    6k Views
    phenomlab
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • Bug Navbar CSS

    Solved Customisation navbar css
    3
    1 Votes
    3 Posts
    2k Views
    DownPW
    Not better way. 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.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    3k Views
    phenomlab
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation