Switching CSS at startup

Saola Animate Support Questions
1

I wonder whether it’s possible to switch CSS when a published project loads?

I have a project that is used by several clients and have created a style style sheet that tweaks the colours in the project for each.

At the moment, I have some JS on the first scene that switches the style sheet by reading a queryString parameter in the URL. This works well except the body background colour doesn’t change until the CSS is loaded.

I tried moving the JS to the HTML but it keeps loading the loading the default CSS even if I hard code a different style.

Also. is it possible to set the preloader colours with CSS?

Regards,

2

Hi mackavi,

Can you please share a sample project package so that we can better understand what you want to do?

Regards

3

Hi Toan,

I solved the first part. It needed two steps not one. I had to add a style sheet to handle the BODY colour and then replace Saola’s style sheet to switch colours within the rest of the project.

Here is a simplified example:

https://saola.interaktiv.co.uk/themes/?theme=dark

https://saola.interaktiv.co.uk/themes/?theme=light

The source is here:

theme.saolapack (3.8 KB)

And then I add two CSS files in the output directory called light.css and dark.css with the colour for each:

body {
background-color: #045944;
}

The second part of my question is whether I can now format the preloader?

I found a class called loader-backgound but nothing for the spinner and percentage loaded text.

Regards,

4

Hi mackavi,

It’s not possible to set the preloader color with CSS.
However, you can handle Start event of the custom preloader to change the color with JS:

var hexColor =  '#FF0000'; // you can use JS to get color from the theme
if (doc.loadingIndicator)
  doc.loadingIndicator.setColor(hexColor); // this function only accepts hex color string

Regards

5

Thanks, that works perfectly.