Missing icons / broken CSS

[paviro]

Hi there,
First of all thank you for NodeBB it's an amazing forum software!
I am the administrator of forum.magicmirror.builders, a small but growing community of smart mirror builders.

My problem is the icons to close the chat etc. are missing. The links are there just the symbols aren't.

The same thing happens on some notifications. I only saw the empty ones on phones yet, computers do not seem to be affected so it somehow is connected to screen resolution.

I tried pulling the code from GitHub again but it did not help. I am using a nginx-proxy but accessing it directly did not change a thing either. Any idea what could cause this and how to fix it?

Cheers,
Paul

[paviro]

No ideas? @julian maybe? Would already be glad if someone could give me some suggestions on how to debug the issue myself

[pichalite]

@paviro the problem is with the "skin" you applied to the theme. It's overriding some of the base css colors. You have two options: either revert to the default or adjust the css based on the new skin.

[julian]

As @pichalite says, it's likely the skin overriding the colours. Can you let us know which skin this is?

[paviro]

I am using the Lumen skin. Haven't even considered that since it is installed by default so I figured it should work. Will try switching to see if it makes a difference.

[paviro]

Just tried a few other skins. Some worked, some did not. How is it that only some of the default skins actually work?

[tqwhite]

Your problem is probably some screwy CSS in the skin.

If the skin you want to use doesn't show something, step one is to inspect it with Firebug or the Webkit inspector. You will probably find the item that way and it will be styled in a way that makes it invisible.

If you still want to use the defective skin (and that seems to be a thing), use the debugger to add CSS that makes it look nice. Then use the debugger to figure out a CSS selector for it...

And then (I'm getting tired just describing the process) go to

Admin->Appearance->Custom HTML and CSS

And create an appropriate CSS definition.

If it doesn't work. Repeat and revise until it does.

I revised the style I am using substantially using this technique (here).

Good luck.

[phit]

I use this for Lumen with persona

/* CHAT CLOSE FIX*/
.close, .close:hover, .close:focus, .close:active, .close:active:hover, .close:active:focus {
    color: #000;
}

[pichalite]

@paviro said in Missing icons / broken CSS:

How is it that only some of the default skins actually work?

Obviously not all skins are tested with persona.