Site-wide Font color or size selector

[mmediaman]

Hello group,

Can anyone suggest a method to allow site visitors to choose an option which will apply a CSS to control page font color and maybe size?

So for example, if I have a site on which all text font color is grey by default and I want visitors to be able to select all fonts colors to be … blue, how could I put a selector at the top of the page to do that? And could I also allow the visitor to select another size for the fonts?

Thanks for any ideas.

[samliew (webflowexpert.com)]

You can have JavaScript change the class name of the body when user clicks on a link.

For example for three links with class blue, orange, green:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('a.blue').click(function() {
    $('body').removeClass('orange green').addClass('blue');
  });
  $('a.orange').click(function() {
    $('body').removeClass('blue green').addClass('orange');
  });
  $('a.green').click(function() {
    $('body').removeClass('orange blue').addClass('green');
  });
});
</script>

Then your selectors will be similar to:

body { color: black; }
body section { border-bottom: 1px solid black; }

body.blue { color: blue; }
body.blue section { border-bottom-color: blue; }

body.orange { color: orange; }
body.orange section { border-bottom-color: orange; }

body.green { color: green; }
body.green section { border-bottom-color: green; }

etc..

Edit the above as necessary. They are just an example.

[mmediaman]

Thanks for the reply @samliew !

I may need a little more direction on where/how to situate selectors.
Also, are the addClass and removeClass actions manipulating actual webflow classes?

[samliew (webflowexpert.com)]

You can add the classes “green” to the body, set the base text color on the body element to green, then remove the class “green” before doing the same for the next class.