632
Views
7
Comments
Dynamically change CSS in Mobile/Reactive
Question

Hi,


I want to change the CSS at runtime in Mobile/Reactive. I already implement something with javascript like this post. But I'm at a stage where I need to change more than just the color of the theme.

My goal is to implement something similar to this


Thank you,

Cátia

2017-12-13 08-27-28
Joey Moree

Hmmm if you are going to generate the css on runtime you might as well use variables so you can use the same css but just change around the variables using user input.

https://www.w3schools.com/css/css3_variables.asp

You could set some session variables on login perhaps?

UserImage.jpg
Cátia Frederico

Joey Moree wrote:

Hmmm if you are going to generate the css on runtime you might as well use variables so you can use the same css but just change around the variables using user input.

https://www.w3schools.com/css/css3_variables.asp

You could set some session variables on login perhaps?

but I want a way to add a style sheet just like the action AddStyleSheetTag but for Mobile/Reactive. 

It's something to keep in the session. 


2017-04-11 14-28-44
Odasaki

Joey Moree escreveu:

Hmmm, se você deseja gerar o css no tempo de execução, você também pode usar variáveis para poder usar o mesmo css, mas apenas mudar as variáveis usando a entrada do usuário.

https://www.w3schools.com/css/css3_variables.asp

Você pode definir algumas variáveis de sessão no login, talvez?



Joey Moree, ele deseja alterar / criar uma folha de estilos em tempo de execução e não criar variáveis css.

2017-04-11 14-28-44
Odasaki

Joey Moree wrote:

Hmmm if you are going to generate the css on runtime you might as well use variables so you can use the same css but just change around the variables using user input.

https://www.w3schools.com/css/css3_variables.asp

You could set some session variables on login perhaps?

 
Joey Moree,

 he wants to change / create a style sheet at runtime and not create css variables.


2026-03-20 01-28-51
Saugat Biswas

Hi Catia,


Stylesheets can be replaced at runtime using javascript

var findlink = document.getElementsById("myLinkId");
findlink.href = "stylesheetxhtml.css";


Hope this helps.


Regards,

Saugat

2017-04-11 14-28-44
Odasaki

Saugat Biswas wrote:

Hi Catia,


Stylesheets can be replaced at runtime using javascript

var findlink = document.getElementsById("myLinkId");
findlink.href = "stylesheetxhtml.css";


Hope this helps.


Regards,

Saugat

Saugat Biswas, 

he wants to change / create a style sheet at run time and not change the style sheet to an existing one.

Try to imagine users saving theme customizations to the database as primary color and etc. And then a style sheet is created by customizing the theme color according to the company / user profile

UserImage.jpg
Iuri Rodrigues

If i understood correcly you can always insert a new stylesheet on runtime using javascript with any variables that you want.
Something like:

    var head = document.getElementsByTagName("HEAD")[0];  
    var style = document.createElement("style");

    style.innerHTML += ' .YellowText{color: yellow;} .RedText{color: red;}  ';



Then just prepend or append the style depending on the priority you want:

    head.prepend(style);

or

    head.append(style);

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.