Give User ability to change CSS

[asap rich]

Is there a way to change CSS classes, or the entire CSS for the UX with Action Javascript? So you can use a dropdown box to select between Blue Scheme, Red, Wood Pane, Gold Grill, etc, and it would apply to change the UX to something totally different.

[Michael1954]

Re: Give User ability to change CSS

I have asked rifqon to explain this please remind me if he forgets.

He does it in a different way here http://www.datadrivensystems.co.uk/a...cond_index.a5w

You may want to play with this until he replies

{dialog.Object}.loadCSSFile(CSSFilename [, flagForceLoad]);

[Steve Wood]

Re: Give User ability to change CSS

Just store different style.css files in different folders, and include the reference in the HEAD area of your website, but use a session variable to denote the folder name. Let the user select their desired CSS from a drop-down in your application. Their selection should then set the session variable name. I have done this in my Framework for nearly ten years.

Example; Dropdown for "Green", "Red", "Blue" sets session.mycss to a value of green, red or blue. Then the css reference would be

<%a5 ?"<link rel="stylesheet" type="text/css" href="css/theme/" + session.mycss + "/style.css">" %>

That would set the css just for their session. So if you wanted to have their css used each subsequent visit, you just store their selection in a database, tied to their login, and modify the above css reference to pull their selection from the database.

[Michael1954]

Re: Give User ability to change CSS

Rifqon replied

<div id="color-1" onclick="changeClass('color-1');" class="color-scheme-content"></div>
<div id="color-2" onclick="changeClass('color-2');" class="color-scheme-content"></div>
<div id="color-3" onclick="changeClass('color-3');" class="color-scheme-content"></div>
<div id="color-4" onclick="changeClass('color-4');" class="color-scheme-content"></div>
<div id="color-5" onclick="changeClass('color-5');" class="color-scheme-content"></div>

JS
function changeClass(a) {
var htmlElement = document.getElementsByTagName("html")[0];
$(htmlElement).className = a;
}
http://smg.datadrivensystems.co.uk/r...tyle/index.a5w

[Davidk]

Re: Give User ability to change CSS

Rifqon replied

<div id="color-1" onclick="changeClass('color-1');" class="color-scheme-content"></div>
<div id="color-2" onclick="changeClass('color-2');" class="color-scheme-content"></div>
<div id="color-3" onclick="changeClass('color-3');" class="color-scheme-content"></div>
<div id="color-4" onclick="changeClass('color-4');" class="color-scheme-content"></div>
<div id="color-5" onclick="changeClass('color-5');" class="color-scheme-content"></div>

JS
function changeClass(a) {
var htmlElement = document.getElementsByTagName("html")[0];
$(htmlElement).className = a;
}
http://smg.datadrivensystems.co.uk/r...tyle/index.a5w

Am I missing something... or is this code the end result of a gigantic investment in custom css? What needs to be in place in order for this code to work?

[Michael1954]

Re: Give User ability to change CSS

Yes there is a massive amount of Custom CSS

12 months ago we moved a young boy from coding to CSS. This was his training homework.

Obviously now we don't use this approach because of Alpha's support for sass and tweaks.

You can also choose to use sass with a third party compiler that can be called from the UX.

I personally would rather have a standard project-wide style.

[Davidk]

Re: Give User ability to change CSS

So... then... I don't understand.

[Michael1954]

Re: Give User ability to change CSS

Obviously now we don't use this approach because of Alpha's support for sass and tweaks.

So now we take the Alpha stylesheet and add our own extra classes. These classes are driven by variables. Often we add extra variables like Main-theme-colour now we have a sass driven stylesheet.
This we can manually be changed via Alpha in properties. Alpha recommend this approach so that as they create a new class the CSS continues to work. This is our working method but it does not answer the question as asked.

Should you want to change the class in the UX you will need to make local CSS. Say 4 copies created by changing the sass variables. Save each with a name and call them as Steve said or as Rifqon did before.

A second approach.
There are different sass compiler that you can change on the fly but you need local sass for this.

Is there a way to change CSS classes, or the entire CSS for the UX with Action Javascript? So you can use a dropdown box to select between Blue Scheme, Red, Wood Pane, Gold Grill, etc, and it would apply to change the UX to something totally different.