.chats-list>li {
  padding: 0.5em;
  height: 80px; 
}

I have this little avatar mismatch in the chat menu (just in Full mode) but only some of my themes (exemple: Daystalker) and I can’t find what’s wrong.

An idear mark?

I find it…

I just tested by deleting the entire CSS file except the button code and it is taken into account.

There is therefore a CSS variable which prevents the execution of the code, but from there to know which one

I got better and I think I understand a little more the problem

I declared the code in the ACP (it was not the case yesterday - just in the CSS file yesterday) and it applies. Normal

On the other hand, it only applies the code of the ACP and not that of the CSS file.

Edit @phenomlab

For example, in fortifem theme, the code is correctly interpreted but not on Nightprowler theme but the code is the same !

Fortifem its’ ok :
https://i.imgur.com/Y85sVBi.gif

Night prowler is not Ok withe the same code as Fortifem (variable) :

https://i.imgur.com/tWus88b.gif

All the rest of theme is OK

@DownPW this sounds more like a caching issue to me. Do you get the same thing in an incognito session ?

yes

It’s the same things with #XXXXXX

var(--first-color)

In CSS, var is a variable defined at root level and probably doesn’t exist in your CSS file. Essentially, it’s LESS. If you change the line so it looks (for example) like the below, it will probably then work

#ffffff;

The newer version of the theme switcher uses LESS variables as it’s more efficient but if these don’t exist then it looks like it’s being ignored when I’m fact it just returns a null value.

I have a problem on my themes.

Example I Have this on my css files :

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    color: var(--first-color) !important;
}

But this code is not taken into account

if i change in dev console (in live) it’s ok

Can you help me with that ?

.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    color: #ccc;
}

a.btn.btn-secondary:hover {
  color: #ccc;
  background: #212427;
}

.caret {
    color: #000;
}

a.btn.btn-secondary.mark-all-read {
	color: #ccc !important;
}

a.btn.btn-secondary.mark-all-read:hover {
  background: #212427;
	color: #ccc !important;
}

Try this

.btn-group.btn-group-justified:hover {
    /* Your css here */
}

hmm hard for just an effect.
It’s a problem for my dark themes

In sudonix I see this :

and Hover:

I think it’s a better way, how achieve this effect (with different color) ?

Yeah good for “Mark all as read” but not All chats button:

Yes, sadly, that element is in use in several other places. You could target it directly, but it will also mean changing it in multiple places which won’t be the desired effect. The most effective way would be to target a div ID, but you’d need something like jQuery to target that specific element and add an ID to it.

Yeah good for “Mark all as read” but not All chats button:

@DownPW said in chat list navbar:

yeah great…

Can you test All chats button hover ?
Because .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child):hover not work

Can you test All chats button hover ?
Because .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child):hover not work

Not work with that for example:

Seems to work for me on your site, but (sorry), it should be a.btn .btn-secondary .mark-all-read

in fact I would like the menu not to overflow on the navbar because it was not the case before

That’s being caused by deliberate negative padding. This will fix it

.chat-list {
    margin-top: 0px;
}