Coloraise is a simple downloadable menu plugin that allows users to change colors on your web pages.
Go to the Coloraise API Documentation to see this dowloadable menu in action (top right corner of page).
Install files on your server and link them like so:
<link rel="stylesheet" href="/path/to/coloraise.css">
<script src="/path/to/coloraise.js"></script>
- make sure you also have jQuery linked. It is a dependency.
Include following div on page where you want the menu. Make sure that its parent container and positioning will allow it to actually show up.
<div class="coloraise"></div>
There are several classes included in the Coloraise plugin API which allows you to control what will and will not change colors on your page.
For instance adding the class 'color-change' to a container element will allow the user to change the color all text inside that container and the background color of that container as well.
There several classes that affect groups of elements, and individual elements. If you want to just allow users to change the background color of your page, or just the text, you can control that with the classes you include on your page.
All classes are explained in the Coloraise Documentation Class Reference.
This step is completely optional, you can style the Coloraise plugin to match the color-scheme of your site by following this Customization Guide. You can also move where the menu appears within it's parent container.
Coloraise has been released under a Creative Commons ShareAlike 4.0 International license which means that you can remix and adapt this code and re-release it, as long as you 1) give credit to the creator and 2) keep the code free and open by releasing it under the same license:
Coloraise licensed under Creative Commons ShareAlike 4.0 International. -Amy Dubois, 2019.