[DOCS] Loading UI theme change

[mrwizerd]

So I am working on my own themes for UI Customizer and I noticed that the loading screen spinner can be changed from the default blue to red by using the red theme. I have modified the red theme and am close to getting it themed the way I like, but when it loads up it still gives me the red spinner

just to make sure this is an image of what I am calling the spinner and here it is blue. I tried to change it to green or yellow in my css code assuming this was the loading spinner and blow is my code, but it does not seem to effect the spinner. I am having trouble verifying what it is actually called because the screen does not stay up long enough for me to inspect it.

`
.fa-spinner, .icon-spinner {
color: var(--accent);
}

.fa-spinner:before, .icon-spinner:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\F1CE";
}

#page-container-loading {
background: var(--background);
}

#page-container-loading #page-container-loading-header:after {
color: var(--grey);
}

#page-container-loading #page-container-loading-spinner {
color: var(--accent) !important;
}
`

I am not sure if this is the correct location, if it is not could you please point me in the correct direction? This is my first time editing a CSS sheet and I am almost positive I am going about it in a very bad way in some cases where I have had to add my own sections. I was planing on posting the completed code once I finished it and got it to where I liked it, I am also working on a pink theme also based on the red theme that I can likewise post. I don't know if they should all go into the release but I will put them up there for pull when they are complete and hopefully someone more adept at CSS could at that point check to make sure I didn't make any glaring mistakes. If this is not the correct portion of the code that needs to be altered or if you need the whole code posted let me know and I will post it, I just did not want to post the whole thing and make a wall of text if I could avoid it. Thanks in advance.'

The code tag does not seem to be working with the css sheet for some reason, not sure why... so I don't know the best way to put it in so it has its own scroll box.

[LazeMSS]

I'm quite busy this evening and weekend. Will try and give you an answer ASAP.

[mrwizerd]

No rush this isn't mission critical or anything, please take your time. And thanks for the quick response.

[LazeMSS]

Look into:
#page-container-loading #page-container-loading-spinner {
color: var(--accent) !important;
}

In general the #page-container-loading section

If you are using the Chrome browser it has a really cool develop tool that allows you inspect the entire html and css - for instance you can then just show the loading layer and edit until you have it 100% tuned as you like...

[mrwizerd]

That is what I am using, I still don't know how to use it all correctly. Is the loading page not using my css that is in the advanced tab then because it has to wait to load it after it loads the rest of the pages? If so is there a way other than a pull request to check if it is working correctly? The theme selected is Red Night, so my assumption here is its using red night until it loads and sees the custom css and then reloads that so the loading page is not effected. Now that I am sure it should be using my accent color, and was able to catch the css sheet it loaded and saw it said red at the loading page.

You stated that I can actually have chrome load the loading page to verify its functionality, but the only way I know how to get to that is by reloading, looks like I will need to do some reading up on the inspect function to see how to do that. Thanks. I am close to finishing it for now, I have yet to connect it to my printers due to them both being down atm and my back not allowing me to work on them, so I lay in bed working on the style sheet while I wait for it to stop misbehaving.

Thanks for the hints that should get me moving the right direction to finish what I can actually view, then I will maybe get my son to put power to the mk3 so I can test it connected but not printing, still need to reassemble the print head.

By the way, are the scroll bars and check boxes able to be modified, I couldn't find an entry for them when I looked around and got varying answers when I googled it. At best the answer I could work out was "maybe, its complicated"

[LazeMSS]

@mrwizerd sorry for the slow response time.
Did you get any further?

And no normally checkbox and scrollbars are not styled - scrollbars can be styled with some hacks.

[mrwizerd]

I have it mostly setup, I am having some trouble with the buttons on the accordion, I will post some images but on just can't seem to get the correct set for them. It is really in the morning and I saw the sunset so im gonna dodge the sunrise