Hi there!

I have a custom splash screen that is working just fine except before the splash itself its displaying a whole yellow screen (the yellow is the main color of the app) and I ahve no idea how to get rid of it (or change its color). So i could use some help on that.

Check the video for better understanding of the issue http://www.mediafire.com/file/741wybxzwulwnwl/SplashYellow.mp4/file

Thanks!

Hi J T,


Try replacing the background-color for splash-screen css class.

.splash-screen{
    background-color: white;
    }


Regards

Hi J T


You need to change the color of your bootstrap of your app. 


At the color picker choose #FFFFFF.


Best regards,

PVN

Hi Pedro,

Thank you for reply. Unfortunately that is not the problem, that class is set to a light grey on the theme and there are no overrides. 

Hi again J T,

Can you share your OML?

Hi,

 please change the primary color on the CSS of the screens.  

SyntaxEditor Code Snippet

:root {
    --color-primary: #19B5FE; /*primary-color*/

this is the css where you need to change the primary color.

I hope it will help you,

Thank you,

Sudip

Hi Pedro Vila Nova. Thank you for your answer.

What that does is filling class themes with the selected color. That is not what I am looking for here, and also, not a good idea to change in the middle of a project. The correct way is find the class and change its color. It should be the splash-screen class but it´s not, there must me something else, I dont know. 

J T 


I already had that problem, and the only way, i have found to solved that was change that property, and worked for me...


But probably exist other way.

Hi Sudip Dey, I like your idea. I do know that yellow must be the main color of the app, since i cannot find whatevers class is forcing that yellow background i could change the main color on the root for the splash screen only. 

Im gonna give it a test and let you know how it works.

Pedro Vila Nova I wish i could fix this one that easily but its not an option at this time, the theme is already a big mess i dont want to make it any worse! But thanks for the input, I will take that in consideration as well if everything else fails.

Something that is also important to refer: My splash screen is all customized, there isnt ven a .splash-screen class in it, so changing that would never jad no effect. It also means that whatever is responsible that background is something very sketchy...

Update: Nothing work so far, except maybe Pedro Vila Nova's idea, but like i expected, that changes theme classes and i cannot work with that right now.

This is really frustrating, not having control over your own app.  

J T wrote:

Update: Nothing work so far, except maybe Pedro Vila Nova's idea, but like i expected, that changes theme classes and i cannot work with that right now.

This is really frustrating, not having control over your own app.  

Hi,

For what I can tell that yellow wall is basically the Operating System starting the app. But because your main color is yellow that "glitch" becomes yellow too.

Here you have information that explains how to make a customized splash screen without that "glitch".
https://www.outsystems.com/blog/posts/make_outsystems_apps_stand_out_splash_screen_customization/

Try to follow these steps to see if this solved your problem.

Hope this helps you.


Hello Hugo Jorge, thank you very much for your input. Follow up question, its the theme already loaded at that moment? Because I was able to stop it and debug it, but all classes were empty on the inspect.


Also, i had already seen that link, but again, from what I understood, there is no way to totally remove the so called "glitch", am I correct? Still, woould it be possible to change just the color of a class in theme instead of all the theme threw the color picker?

Hi JT,

Sorry for insist but, i think you will only solve your problem with my tip.


Best regards

PVN

Pedro Vila Nova wrote:

Hi JT,

Sorry for insist but, i think you will only solve your problem with my tip.


Best regards

PVN

Hi Pedro, yes I am starting to incline towards that way, but like i said, that is not an option at the moment, as I fear some big issues will arise if i go that way.


J T wrote:

Hello Hugo Jorge, thank you very much for your input. Follow up question, its the theme already loaded at that moment? Because I was able to stop it and debug it, but all classes were empty on the inspect.


Also, i had already seen that link, but again, from what I understood, there is no way to totally remove the so called "glitch", am I correct? Still, woould it be possible to change just the color of a class in theme instead of all the theme threw the color picker?

Probably you need to put your splash inside a container with a CSS class (for example .mySplashScreen) and make a junction of selectors to change that color, like .mySplashScreen .splashScreen { background-color: #FFF}.

I think that the CSS class is on base Theme.Patterns_SilkUi.css, but it can be hard to find it because of the way that Oustystems use the CSS classes.

You can run the app and with google inspect  (F12) go-to base CSS class and change all yellow colors 1 by 1 with different colors like 1 red, 2 pink, 3 green, 4 purple... It will be annoying, then run your app to see if that color change.

Sorry, I can't help better but I'm don't know what makes that behavior I'm guessing a little. 

Hi Hugo, 

You already helped a lot. Im gonna give it another go and let yall know how that went. Thank you all for the input.