I have a material design app where I’ve added a new .css file to my assets and a line at the top of dashboard.html to include that file. Most of the content now gets picked up and works fine.
However, some of the stying was intended to affect the pop-up login form and that’s not working. If I add the same changes into theme.css, I see the effect I wanted. What’s making theme.css have that effect and not my own?
Possibly the order it’s loaded. Try !important and see if that helps.
You absolutely sure the CSS asset is being loaded (ie other entries are definitely working) ?
Can you share the css?
it’s definitely being loaded - I can see lots of the changes it targets.
Unfortunately, I can’t share it. It’s written by an agency who handle styling for one of my clients’ websites and it’s owned by them.
Difficult - all I can really advise is inspecting the code in the browser (rightclick->inspect element in Firefox) for both scenarios and see what’s different.
It’s going to be something like the order it’s loaded (with one overwriting the other) or incorrect nesting, ie you’re targeting a sub-element incorrectly. Hard without seeing it.
Can you strip it right back, ie put only the form CSS in your css files? Maybe just a subset (ie change the background colour or something). Try that in both the theme.css and yours. If that works then you know something else is affecting it in your css file. If it doesn’t work in yours but does in theme.css then maybe you could post that non-client test code?
Using my browser’s inspector, I can see my css only gets loaded after login, so it will never affect the login screen itself. Makes sense given that it is only included in the html for the main form.
I don’t yet understand how theme.css is affecting the login though
Now I can see that, if I add entries to theme.css, those are somehow included in an inline style sheet even when the login screen is still showing.
Something appears to be picking up theme.css when the app is run and including it. In hindsight, that makes sense. theme.css isn’t even included in dashboard.html - the link tag is commented out.
Ah, yes. I have a separate login form as a wrapper around the popup. So if my other forms detect we are not logged in, it does an open_form("Login") which is a custom HTML form that in turn opens the login popup.
That might be worth a go, putting your login form CSS in there. (confession - I’ve not tried it)
I’ve suspected the theme.css is auto-loaded before. Maybe blank it?
Now I know what’s going on, I’m happy just adding stuff for the login into theme.css and using a separate file for everything else. Just wanted to understand what on earth was going on before deciding how to tackle it!!
Fair enough 
Glad you got to the bottom of it.