Skip to content

[NODEBB] CSS Style Sheets SelectBox

Locked Solved Customisation
112 2 64.9k 1
  • wrote on last edited by
    #69

    Nope. 😞

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


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
  • 2 Votes
    1 Posts
    648 Views
    No one has replied
  • 3 Votes
    2 Posts
    2k Views
    DownPW
    Very great
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • hover link effect

    Solved Customisation css link hover
    18
    1
    6 Votes
    18 Posts
    7k Views
    phenomlab
    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); }) The CSS for start is below .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; } And this is the corresponding keyframe @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } } It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    Sampo2910
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.