[NODEBB] CSS Style Sheets SelectBox

[DownPW]

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 :

And change the color of these icons :

If you have an idea @phenomlab

[DownPW]

@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 :

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

[DownPW]

@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

[phenomlab]

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

[DownPW]

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;
}
}

[DownPW]

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

[DownPW]

EDIT:

Others things I have :

If I Click on fa-faw icon, The icon is black (its’ good) on dropdown :

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

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

[DownPW]

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]

@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;
}

[DownPW]

@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

[DownPW]

Ola @phenomlab

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

[phenomlab]

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

[DownPW]

@phenomlab

Ola @phenomlab

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

If I don’t use your code, here the icon = KO (Not White like other) :

Icon on Mouse Over and on Click = OK: aqua background, black icon

After click, when dropdown the menu = OK: aqua background, black icon

---

I I use your code with White color :

[data-original-title="Theme Switcher"] i {
    color: #fff;
}

the icon is white like others = OK

Icon on Mouse Over and on Click = OK: aqua background, black icon

After click, when dropdown the menu = KO : the icon is white and not black

[DownPW]

In fact , I would loike:

• The dominant color of each theme in the background of the icon when the mouse is hovered, when the mouse is clicked and when dropdown in the menu.

• White color of the icon in normal.

• Black color of the icon when the mouse is hovered, when the mouse is clicked and when dropdown in the menu. (Even choose the color for each theme if possible)

[phenomlab]

@downpw Having looked at this, it will indeed require jQuery. I’m going to look further into this today hopefully.

[DownPW]

@phenomlab

Great man

On the default theme. All it’s perfect !!!
That’s why I thought of a CSS problem. Like a variable that I would have forgotten for example

[phenomlab]

@downpw Yes, I saw that. Let me know when the server is available and I’ll have a look.

[DownPW]

On 1 hour

[phenomlab]

@downpw I’ve been able to get somewhere near this with the below custom function I’ve written

	    $(window).on('action:ajaxify.end', function(data) {
	        // Detect if the theme dropdown has been clicked. If it has, change the color to #000000
	        $("#switcher").on("click", function() {
	            $("#switcher i").css("color", "#000000");
	        });
	        // Detect if the theme dropdown has lost focus (clicked something else). If it has, change the color to #FFFFFF
	        $("#switcher").on("focusout", function() {
	            $("#switcher i").css("color", "#ffffff");
	        });
	    });

Test it and let me know ? I’ve already added it, so you don’t need to do anything.

[DownPW]

@phenomlab

It seems to be better when dropdown
But when I lost focus, sometimes the icon don’t back again:

Example here :

EDIT : see, I have recorded a gif

The problem came on default theme too but it’s normal because it’s a javascript for all the site

https://imgur.com/a/2oSdcC3