A customizable menu plugin that allows users to change colors on your page; the menu builds itself according to what you need, meaning that unnecessary menu options will be hidden.

Installation Steps

Install Files: Installation Guide
Include Classes: Class Reference
Customize! (optional) Customization Guide

How Coloraise Works

Similar to how the Bootstrap framework uses classes to style a page responsively, Coloraise uses a mini-framework of classes to allow features on a page to be changed. This gives the web designer complete control over what can and cannot be changed; Coloraise can be used to allow the user to change the colors of one small <div>, the main text of the page, or the entire page.

The menu is smart, a menu feature will only show up if elements are changeable. If no text element on a page can change color, then the Text feature will not display; if no heading can change color, then the Titles feature will not display; the same is true for the Background and Size features. If no elements on the web page can be changed, all features will be hidden from the menu except the Original button.

Details

Coloraise doesn't conflict with Bootstrap.
It doesn't conflict with any popular JavaScript libraries.
It is easy to use: just include appropriate links and classes in the HTML of the page. To use all features in the menu (shown on this page), it is only necessary to include two classes in a page: the 'color-change' and 'size-change' classes.
Designed for text-heavy sites, but can be used anywhere. It affects text elements, and ignores graphic elements (i.e. <img>).
This plugin does not affect any bold, italic, strikethrough, or underline styling.
It can be customized to fit into any website: the color of the plugin can be changed, the menu can be placed anywhere, and the menu options can either have left or right orientation (see Customization section).

Dependencies:

jQuery

Browser support:

IE: 11+
Microsoft Edge
FF: 15+
Chrome: 25+
Opera: 12+
Safari: 6+

In addition to being completely tailored to the page, this plugin also has the benefit of giving the user more color options (482) than the high contrast setting on Windows, and inverted color setting on Mac OS X, which can be helpful with user populations that have low vision.

Consideration for Users with Low Vision

The majority of people who have low vision can still see to some degree, just not very well. According to the American Foundation for the Blind, only 15% of people with eye diseases are actually completely blind, meaning that instead of using screen readers, many people with low vision are still using their eyes to range around the web. And the low vision status of these individuals can be caused by a wide variety of eye diseases, with a bunch of color blindnesses thrown into the mix, all of which affect vision differently, so low vision is not the same in every individual. Even if two people have a visual acuity of 20/200, what they actually see with their eyes can be completely different.

I know someone personally with a rare eye disease, and the biggest complaint he has about the high contrast setting is that it will sometimes render parts of a webpage illegible to him (which defeats the purpose of using the high contrast setting to begin with). This plugin has the advantage of allowing users to choose the specific color that allows them to see best. Therefore, if a significant portion of a website’s user population has low vision, Coloraise can be used to extend accessibility by giving those users more color options. It also allows users to increase the 'font-size' up to 500px. This can be combined with the commands like Ctrl + to make font-size even larger and easier to see, which is useful on devices without the pinch zoom feature.

Top and Bottom Level Classes

Coloraise uses top-level and bottom-level classes to makes features on a page changeable. Top-level classes affect several elements at the same time. These are added to container elements (i.e. <div>, <main>, <table>, <ol>, <ul>, or even the <body> element). When these classes are added to a container element, all nested elements are affected, all the way down to the last descendant. For example, adding the ‘text-change’ class to a <div> will cause all standard text elements inside (minus headings) to change color when a new Text option is selected. Adding the ‘no-text-change’ class to a nested <div> will keep all text elements inside from changing.

The top-level classes for this plugin are 'background-change', 'color-change', 'no-color-change', 'text-change', 'no-text-change', 'title-change', 'no-title-change', 'size-change', and 'no-size-change'. There are additionally several classes for individual elements, such as the 'e-no-text-change' class which will keep a single element from changing font 'color'. These are only for special situations where single elements should not match the rest of the elements in its container. The names of all these classes are almost self-explanatory and easy to learn.

Note: The primary elements used in examples in the following sections are <div>, <p>, and <h1> to <h6> elements. But, this plugin affects many other elements, with the exception of most inline elements, elements that have been deprecated in HTML 5, and graphic elements (i.e. <img> or <video>). To see which elements are affected by Coloraise go to the Element Reference section.

Negative Classes Are Given Priority

Negative classes (i.e. 'no-color-change') will take priority over positive classes (i.e. 'color-change'). A <div> with the 'no-color-change' class will not change color, even if it has the ‘color-change’ class as well.

Class Reference

These are all of classes that can be used with this plugin and how they affect the elements they are added to. All classes are explained in much more detail in the following sections.

The 'color-change' and 'no-color-change' Classes

color-change:: Affects all nested elements. Will cause all headings to change color when the user selects a new heading color, regular text elements to change color when the user selects a new Text option, and background color to change as well.
no-color-change:: Will prevent all text elements inside a nested container from changing color, as well as the 'background-color' of that element from changing.

Background Color Classes

background-change:: Changes background color of the element when the user selects a new Background option.
gradient-change:: Changes element’s gradient background to a solid color when the user selects a new Background option.

Top-level Text Color Classes

text-change:: Causes all text elements (except headings) to change color when a user selects a new Text option (To make heading, text, and background color change use the ‘color-change’ class).
no-text-change:: Keeps text elements in a nested container (except headings) from changing color.

Bottom-level Text Color Classes

e-no-text-change:: Keeps an individual element from changing color with other text elements in the same container.
e-text-change:: Added to individual text elements to make them change color.
text-background-match:: Will make 'background-color' of element match font 'color' of text on the page when the user selects a new Text option.
text-border-match:: Will make 'border-color' of element match font 'color' of text on the page when the user selects a new Text option.

Top-level Title Color Classes

title-change:: Makes all headings inside a container change when the user selects a new Titles option (To make heading, text, and background color change use the ‘color-change’ class).
no-title-change:: Keeps headings within a nested container from changing color.

Bottom-level Title Color Classes

e-no-title-change:: Keeps an individual heading from changing color inside a container with the classes 'title-change' or 'color-change'.
e-title-change:: Causes individual headings to change color when the user selects a new Titles option.
'h1-title-match' through 'h6-title-match':: Element’s ‘color’ will match elements <h1> to <h6> when the user changes heading color.
'h1-background-match' through 'h6-background-match':: Element's 'background-color' will match text color of elements <h1> to <h6> when the user selects a new Titles option.
'h1-border-match' through 'h6-border-match':: Element's 'border-color' will match text color of elements <h1> to <h6> when the user changes heading color.

Top-level Font Size Classes

size-change:: Added to container elements to change ‘font-size’ of all text elements inside.
no-size-change:: Added to a nested container to keep all text elements inside from changing 'font-size' when the user clicks on a Size button.

Bottom-level Font Size Classes

e-no-size-change:: Keeps individual elements from changing size inside a container with the class 'size-change'.
e-size-change:: Will cause an individual element to change ‘font-size’ when the user clicks on Size buttons.
'h1-size-match' to 'h6-size-match':: Elements will match 'font-size' of elements <h1> to <h6> when the user clicks on Size buttons.

Miscellaneous Classes

e-button-change: Allows button to change color when it is outside a container that changes color.
e-no-button-change: Will keep buttons from changing color.
e-no-border-change: Will keep element's 'border-color' from changing (only necessary for <textarea> elements).
main-text-area-231: Added to page to optimize auto adjustment of scroll when the user increases or decreases size.

Note: CSS styling of ID attributes will NOT override these classes.

The 'color-change' and 'no-color-change' Classes

These classes take care of three things at the same time, and are an efficient way to incorporate Coloraise into a web page. Adding the 'color-change' class to a container will cause all headings to change color, all other text elements to change color, and the 'background-color' of that element to change. There are top-level classes that only affect heading, other text, or background color ('title-change', 'text-change', and 'background-change' respectively), but the 'color-change' class takes care of all three at once. When added to a container this class affects all nested elements. For example, the inner <div> below has the 'color-change' class added to it, so that all elements inside change color. 'Title 1' is unaffected because it is outside of this <div>.

Title 1

Title 2

The text in this <div> will change color, along with the headings, and background color, because this <div> has the 'color-change' class. Click on the Coloraise icon and change colors to see the effect.

Title 3


<h1 class="p1">Title 1</h1>
<div class="divTi8 color-change">
<h2 class="p1">Title 2</h2>
<p class="p2">The text in this <div> will change color, along with the headings, and background color, because this <div> has the 'color-change' class. Click on the Coloraise icon and change colors to see the effect.</p>
<h4 class="p2">Title 3</h4>
</div>


.divTi8 {
position: absolute;
left: 95px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 270px;
width: 96%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'no-color-change' Class

This is the opposite of the 'color-change' class. It keeps all elements in a nested container from changing color. Below, the first <div> changes color, because it has the 'color-change' class, but the nested <div> inside it does not because it has the 'no-color-change' class.

Title 1

The text in this <div> will change color, along with the titles, and background color, because this <div> has the 'color-change' class.

The text in this <div> will NOT change color, along with the titles, and background color, because this <div> has the 'no-color-change' class.


<h1 class="p1">Title 1</h1>
<div class="divTi8 color-change">
<p class="p2">The text in this <div> will change color, along with the titles, and background color, because this <div> has the 'color-change' class.</p>
<div class="divTi8 color-change">
<p class="p2">The text in this <div> will NOT change color, along with the titles, and background color, because this <div> has the 'no-color-change' class.</p>
</div>
</div>


.divTi8 {
position: absolute;
left: 95px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 270px;
width: 96%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

Classes that Impact Background Color

The classes for changing background color are 'background-change' and 'gradient-change'. These are meant to be top-level classes added to container elements, but they can be added to any element in the page, even paragraphs or links. If the 'background-change', 'gradient-change', and 'color-change' classes do not appear in a page's HTML, this will cause the Background feature to be hidden from the menu. If the Background button does not show up in the menu, it will also prevent any presets (the Laser Vision, Grayscale, and Dusk options) from showing up in the menu. This will also prevent the text in buttons from changing, since button text matches the 'background-color' of the page by default. For more on buttons, go to the Element Reference section.

The 'background-change' Class

This class can be added to any element in a page. The easiest way to make the background of an entire page changeable is to add this class once to the <body> element.


<body class="background-change">

Or, this class can be added to individual container elements. For example, the four square <div>s below have the class ‘background-change’.

Click on the icon in the top right corner and select a new Background color to change the color of the 4 <div>s below.


  

<p class="p1">Click on the icon in the top right corner and select a new background color to change the color of the 4 <div>s below.</p>

<div class="div1 background-change"></div>
<div class="div2 background-change"></div>
<div class="div3 background-change"></div>
<div class="div4 background-change"></div>


.p1 {
margin: 75px 25px 25px 25px;}

.div1, .div2, .div3, .div4 {
position: absolute;
border: 1px solid #8c8c8c;
height: 100px;
width: 100px;}

.div1 {
left: 25px;
top: 140px;}

.div2 {
left: 150px;
top: 140px;}

.div3 {
left: 25px;
top: 265px;}

.div3 {
left: 150px;
top: 265px;}

How to Prevent Background Color from Changing

By default, elements that have a set 'background-color' in CSS will not change along with the rest of the page, unless the 'background-change' class has been added to that element. The blue <div>'s background below will not change because its 'background-color' property has been set in CSS.

The <div> below will not change color when a new Background color is selected, because the 'background-change' class has NOT been added to it.


  

<p class="p1"The <div> below will not change color when a new Background color is selected, because the 'background-change' class has NOT been added to it.</p>

<div class="divBlue"></div>


.p1 {
margin: 75px 25px 25px 25px;}

.divBlue {
position: absolute;
left: 25px;
top: 140px;
background-color: #33ffff;
border: 1px solid #8c8c8c;
height: 100px;
width: 100px;}

Adding the 'background-change' class to any element that has a set 'background-color' in CSS will change this. The following <div>'s background changes even though it's 'background-color' property is initially set to orange, because it has the 'background-change' class.

This <div> has the 'background-change' class.


  

<p class="p1">This <div> has the 'background-change' class.</p>

<div class="divGreen background-change"></div>


.p1 {
margin: 75px 25px 25px 25px;}

.divGreen  {
position: absolute;
left: 150px;
top: 140px;
background-color: #1aff1a;
border: 1px solid #8c8c8c;
height: 100px;
width: 100px;}

Gradients

Gradients use the 'background-image' property in CSS (often shortened to just 'background'), which will always override the 'background-color' property. Meaning containers with the 'background-change' class that have a gradient background will not change color when the user selects a new Background option.

There are two ways to get around this, neither of which is perfect. One way is to use opaque values for the gradient so that the background color of the page will show through behind it. Below the first <div> has a solid gradient, while the second has an opaque gradient which allows the color behind this <div> to show through. Another way to get around this is to use the 'gradient-change' class, which will override the original gradient and replace the background with a solid color, but this does not have support in older browsers.

The first <div> has a solid gradient, and the second has an opaque gradient which lets the color behind it show through. Change the Background color to see the effect.


<p class="p1">The first <div> has a solid gradient, and the second has an opaque gradient which lets the color behind it show through. Change the Background color to see the effect.</p>

<div class="divGrad1"></div>

<div class="divGrad2"></div>

<!-- neither <div> has the 'background-change' class, because this class has no affect on <div>s with gradient backgrounds -->


.p1 {
margin: 75px 25px 25px 25px;}

.divGrad1, .divGrad2  {
position: absolute;
left: 50px;
top: 160px;
background: rgb(230,255,250); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(230,255,250,1) 0%, rgba(208,179,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(230,255,250,1) 0%,rgba(208,179,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(230,255,250,1) 0%,rgba(208,179,255,1) 100%);
height: 120px;
width: 80%;}

.divGrad2  {
top: 300px;
background: rgb(102,255,224); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(102,255,224,0.25) 0%, rgba(173,51,255,0.33) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(102,255,224,0.25) 0%,rgba(173,51,255,0.33) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(102,255,224,0.25) 0%,rgba(173,51,255,0.33) 100%);}

The 'gradient-change' Class

The 'gradient-change' class will change a container element's gradient background to a solid color when the user selects a new Background color.

The <div> with the gradient below will change to a solid color when a new Background option is selected.



<p class="p1">The <div> with the gradient below will change to a solid color when a new Background option is selected.</p>

<div class="divGrad gradient-change"></div>



.p1 {
margin: 75px 25px 25px 25px;}

.divGrad {
position: absolute;
left: 50px;
top: 150px;
background: rgba(121,166,210,0.33); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(0,153,115,1) 0%, rgba(121,166,210,0.33) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(0,153,115,1) 0%,rgba(121,166,210,0.33) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(0,153,115,1) 0%,rgba(121,166,210,0.33) 100%);
height: 200px;
width: 80%;}

Browser support for the 'gradient-change' class:

IE: 10+
Microsoft Edge
FF: 16+
Chrome: 26+
Opera: 12+
Safari: 7+

Classes that Impact Text Color

The top-level classes for changing text color are 'text-change' which changes the color of text elements (except headings), and 'no-text-change' which keeps elements in nested containers from changing. To see all of the elements affected by the ‘text-change’ class go to the Element Reference section. The bottom-level classes are 'e-text-change', 'e-no-text-change', 'text-background-match', and 'text-border-match'. The classes 'e-text-change' and 'e-no-text-change' control whether or not single elements change with the main text color of the page. 'text-background-match' will match the 'background-color' of an element to text color; 'text-border-match' will match the 'border-color' of an element to text color. These changes will occur when the user selects a new Text option in the menu. If no elements will be affected when a user selects a new Text option, then the Text feature will not display in the menu. This can still happen even if a container on the page includes the ‘text-change’ class, if no elements will be affected by the Text button. This button has to affect the page to show up. If this button is hidden, it will also cause the preset options (Laser Vison, Grayscale, and Dusk) to be hidden.

The 'text-change' Class

Add to container elements to make color of all text elements (except headings) changeable. The easiest way to use this class is to add it to the earliest ancestor so that all descendent elements are affected. The <div> below has the 'text-change' class. Use the menu on the top right to see text elements inside change color.

This first <p> in this <div> will change color with the text color of the page because this <div> has the 'text-change' class.

This second paragraph will also change color. . .

and so will the third, because all descendent text elements are affected by this class.


<div class="textDiv1 text-change">
<p class="p1">This first <p> in this <div> will change color with the text color of the page because this <div> has the 'text-change' class.</p>
<p class="p2">This second paragraph will also change color. . .</p>
<p class="p2">and so will the third, because all descendent text elements are affected by this class.</p>
</div>


.textDiv1 {
position: absolute;
left: 50px;
top: 50px;
border: 1px solid black;
height: 300px;
width: 80%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'no-text-change' Class

To prevent the text elements in a nested container from changing color use the 'no-text-change' class. This will keep all descendants inside (except headings) from changing color. Select a new Text option in the menu above to see the effect below in the nested <div> with the ‘no-text-change’ class.

This paragraph will change color because this <div> has the 'text-change' class.

This paragraph will change color, even though this <div> doesn't have the 'text-change' class, because it's nested in the first <div>.

This paragraph will not change color because this <div> has the 'no-text-change' class.


<div class="textDiv2 text-change">
<p class="p2">This paragraph will change color because this <div> has the 'text-change' class.</p>
<div class="nestedDiv1">
<p class="p2">This paragraph will change color, even though this <div> doesn't have the 'text-change-class', because it's nested in the first <div>.</p>
<div class="nestedDiv2 no-text-change">
<p class="p2">This paragraph will not change color because this <div> has the 'no-text-change' class.</p>
</div>
</div>
</div>


.textDiv2, .nestedDiv1, .nestedDiv2 {
position: absolute;
left: 7px;
top: 10px;
background-color: #e6fff7;
border: 1px solid black;
min-height: 375px;
width: 97%;}

.p2 {
margin: 15px 25px 25px 25px;}

.nestedDiv1, .nestedDiv2 {
left: 10px;
top: 95px;
background-color: white;
height: 270px;
width: 96%;}

.nestedDiv2 {
top: 120px;
background-color: #e6ffff;
height: 140px;}

The 'e-text-change' Class

This class is added to elements to make their 'color' property change along with other text on the page. It is only necessary for elements that exist outside a container with the class 'text-change'. This class can be added to any text element, including headings, to make it match other text on the page. This can also be used to make single elements change color when they are inside a container with the 'no-text-change' or 'no-color-change' classes; this class will override these top-level classes.

The paragraphs in this <div> will all change color because it has the 'text-change' class.

In addition to that the button on the left side will change text color even though it is outside this <div>, because it has the 'e-text-change' class added to it.


<div class="menuBar"></div>
<div class="textDiv3 text-change">
<p class="p1">The paragraphs in this <div> will all change color because it has the 'text-change' class.</p>
<p class="p2">In addition to that the button on the left side will change text color even though it is outside this <div>,</p>
<p class="p2">because it has the 'e-text-change' class added to it.</p>
</div>
<button class="textBut1 e-text-change">Changing Button</button>


.menuBar  {
position: absolute;
background-color: black;
height: 45px;
width: 120%;}

.textDiv3  {
position: absolute;
left: 200px;
top: 44px;
background-color: white;
border: 1px solid black;
border-right: none;
border-bottom: none;
min-height: 360px;
width: 70%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

.textBut1 {
position: absolute;
left: 25px;
top: 300px;
background-color: #f2f2f2;
border: 1px solid black;
border-radius: 15px;
height: 60px;
width: 150px;}

The 'e-no-text-change' Class

Added to single elements within a container with the class 'text-change' or 'color-change' to keep them from changing color.

The paragraphs in this <div> will change color because it has the 'text-change' class.

Except for this one, because this paragraph has the 'e-no-text-change' class.

The button on the left will change text color because it has the 'e-text-change' class added to it.


<div class="menuBar"></div>
<div class="textDiv3 text-change">
<p class="p1">The paragraphs in this <div> will change color because it has the 'text-change' class.</p>
<p class="p2 e-no-text-change">Except for this one, because this paragraph has the 'e-no-text-change' class.</p>
<p class="p2">The button on the left will change text color because it has the 'e-text-change' class added to it.</p>
</div>
<button class="textBut1 e-text-change">Changing Button</button>


.menuBar  {
position: absolute;
background-color: black;
height: 45px;
width: 120%;}

.textDiv3  {
position: absolute;
left: 200px;
top: 44px;
background-color: white;
border: 1px solid black;
border-right: none;
border-bottom: none;
min-height: 360px;
width: 70%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

.textBut1 {
position: absolute;
left: 25px;
top: 300px;
background-color: #f2f2f2;
border: 1px solid black;
border-radius: 15px;
height: 60px;
width: 150px;}

The 'text-background-match' Class

Add to elements to make the 'background-color' of that element match text color. This can be added to any element.

When text color is changed, the <div> above will now change its 'background-color' to match, because it has the 'text-background-match' class.

The paragraphs in this <div> will change color because it has the 'text-change' class.

Except for this one, because this paragraph has the 'e-no-text-change' class.

The button on the left will change text color because it has the 'e-text-change' class added to it.


<div class="menuBar text-change-match"></div>
<div class="textDiv3 text-change">
<p class="p1">When text color is changed, the <div> above will now change its 'background-color' to match, because it has the 'text-background-match' class.</p>
<p class="p2">The paragraphs in this <div> will change color because it has the 'text-change' class.</p>
<p class="p2 e-no-text-change">Except for this one, because this paragraph has the 'e-no-text-change' class.</p>
<p class="p2">The button on the left will change text color because it has the 'e-text-change' class added to it.</p>
</div>
<button class="textBut1 e-text-change">Changing Button</button>


.menuBar  {
position: absolute;
background-color: black;
height: 45px;
width: 120%;}

.textDiv3  {
position: absolute;
left: 200px;
top: 44px;
background-color: white;
border: 1px solid black;
border-right: none;
border-bottom: none;
min-height: 360px;
width: 70%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

.textBut1 {
position: absolute;
left: 25px;
top: 300px;
background-color: #f2f2f2;
border: 1px solid black;
border-radius: 15px;
height: 60px;
width: 150px;}

The 'text-border-match' Class

Add to elements to make the 'border-color' property match the text color of the page when the user selects a new Text option. This can be added to any element, but will only have an effect if the element already has a border.

Now the border of this <div> and the button border will change to match the text color, because both elements have the 'text-border-match' class.

When text color is changed, the <div> above will now change its 'background-color' to match, because it has the 'text-background-match' class.

The paragraphs in this <div> will change color because it has the 'text-change' class.

Except for this one, because this paragraph has the 'e-no-text-change' class.

The button on the left will change text color because it has the 'e-text-change' class added to it.


<div class="menuBar text-change-match"></div>
<div class="textDiv3 text-change text-border-match">
<p class="p1">Now the border of this <div> and the button border will change to match the text color, because both elements have the 'text-border-match' class.</p>
<p class="p2">When text color is changed, the <div> above will now change its 'background-color' to match, because it has the 'text-background-match' class.</p>
<p class="p2">The paragraphs in this <div> will change color because it has the 'text-change' class.</p>
<p class="p2 e-no-text-change">Except for this one, because this paragraph has the 'e-no-text-change' class.</p>
<p class="p2">The button on the left will change text color because it has the 'e-text-change' class added to it.</p>
</div>
<button class="textBut1 e-text-change text-border-match">Changing Button</button>


.menuBar  {
position: absolute;
background-color: black;
height: 45px;
width: 120%;}

.textDiv3  {
position: absolute;
left: 200px;
top: 44px;
background-color: white;
border: 1px solid black;
border-right: none;
border-bottom: none;
min-height: 360px;
width: 70%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

.textBut1 {
position: absolute;
left: 25px;
top: 300px;
background-color: #f2f2f2;
border: 1px solid black;
border-radius: 15px;
height: 60px;
width: 150px;}

Classes that Impact Heading Color

These classes affect headings <h1> to <h6> when the user selects a new Titles option. The class 'title-change' will make all headings in that container change color; while 'no-title-change' will keep headings in nested containers from changing. Just like 'e-no-text-change' and 'e-text-change', 'e-no-title-change' keeps a single element from changing color and 'e-title-change' causes a single element to change color; these classes just work on headings instead. To make a text element match the color of a specific heading use the 'title-match' classes, to make an element’s ‘background-color’ match a specific heading use the 'background-match' classes, and to make an element’s ‘border-color’ match a specific heading use the 'border-match' classes. If no elements are affected when the user selects a new Titles option, then the Titles feature will not display in the menu. Even if a page contains the ‘title-change’ class, the Titles button will not display if it has no effect. This will also cause the preset options (Laser Vison, Grayscale, and Dusk) to be hidden.

When the user selects a new heading color, affected <h1> elements will always change to the color selected. Elements <h2> to <h6> will be different colors, a few shades lighter or darker, moving in a stepwise fashion along the color scale. Whether elements <h2> to <h6> are lighter or darker depends on what color the user selects. If a user selects the darkest color available, all other titles will be slightly lighter in color, and vice versa if they select the lightest color. If the user selects a color in the middle of the color scale, some titles will be a few shades lighter, and some will be darker. This is to make sure that different headings are distinguishable from each other. The <div>s in the example below show what color different headings will be depending on the color selected. Select a new Titles option to see the effect.

The boxes below show the new color of each heading when a new Titles option is selected. Select a new Titles option to see the effect.


<p class="p2">The boxes below show the new color of each heading when a new Titles option is selected. Select a new Titles option to see the effect.</p>
<div class="divTi1 h1-background-match">
<p class="p2">h1</p>
</div>
<div class="divTi2 h2-background-match">
<p class="p2">h2</p>
</div>
<div class="divTi3 h3-background-match">
<p class="p2">h3</p>
</div>
<div class="divTi4 h4-background-match">
<p class="p2">h4</p>
</div>
<div class="divTi5 h5-background-match">
<p class="p2">h5</p>
</div>
<div class="divTi6 h6-background-match">
<p class="p2">h6</p>
</div>


.p2 {
margin: 15px 25px 25px 25px;}

.divTi1, .divTi2, .divTi3, .divTi4, .divTi5, .divTi6 {
position: absolute;
left: 25px;
top: 140px;
border: 1px solid black;
height: 100px;
width: 100px;}

.divTi2, .divTi3, .divTi5, .divTi6 {
left: 150px;
top: 140px;}

.divTi3, .divTi6 {
left: 275px;}

.divTi4, .divTi5, .divTi6 {
top: 265px;}

The 'title-change' and 'no-title-change' Classes

Add the 'title-change' class to make headings change color. The easiest way to use this class is to add it to the earliest ancestor element so that all descendent headings change color; adding it to the <body> element will cause all headings on the page to change. The <div> below has the 'title-change' class, so that headings inside will change color when a new Titles option is selected.

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6


<div class="divTi7 title-change background-change">
<h1 class="p1">Title 1</h1>
<h2 class="p1">Title 2</h2>
<h3 class="p1">Title 3</h3>
<h4 class="p2">Title 4</h4>
<h5 class="p2">Title 5</h5>
<h6 class="p2">Title 6</h6>
</div>


.divTi7 {
position: absolute;
left: 7px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'no-title-change' class will keep all headings in a nested container from changing color. Below ‘Title 1’ changes color when a new Titles option is selected, but the headings in the nested <div> do not because it has the ‘no-title-change’ class.

Title 1

Title 2

Title 3

Title 4


<h1 class="p1">Title 1</h1>
<div class="divTi8 no-title-change">
<h2 class="p1">Title 2</h2>
<h3 class="p1">Title 3</h3>
<h4 class="p2">Title 4</h4>
</div>


.divTi8 {
position: absolute;
left: 95px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 270px;
width: 96%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'e-title-change' Class

Use the ‘e-title-change’ class to make single headings change color when they are in a container with the 'no-title-change' class. Below, the <h3> element now has the 'e-title-change' class so that 'Title 3' will change color when the user selects a new Titles option, while other headings in that <div> do not.

Title 1

Title 2

Title 3

Title 4


<h1 class="p1">Title 1</h1>
<div class="divTi8 no-title-change">
<h2 class="p1">Title 2</h2>
<h3 class="p1 e-title-change">Title 3</h3>
<h4 class="p2">Title 4</h4>
</div>


.divTi8 {
position: absolute;
left: 95px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 270px;
width: 96%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'e-no-title-change' Class

This class prevents a specific heading in a container with the 'title-change' or 'color-change' classes from changing color. Below, the <h3>, <h4>, and <h5> elements will not change color because they have this class.

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6


<div class="divTi7 title-change">
<h1 class="p1">Title 1</h1>
<h2 class="p1">Title 2</h2>
<h3 class="p1 e-no-title-change">Title 3</h3>
<h4 class="p2 e-no-title-change">Title 4</h4>
<h5 class="p2 e-no-title-change">Title 5</h5>
<h6 class="p2">Title 6</h6>
</div>


.divTi7 {
position: absolute;
left: 7px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'title-match' Classes

While ‘e-text-change’ can be used to match any element’s CSS ‘color’ value to the text color of the page, this is not the case with the ‘e-title-change’ class, which is used only to make single headings change color. To make any text element match the CSS ‘color’ value of a specific heading use the classes ‘h1-title-match’ to ‘h6-title-match’. Below text in the second <div> will match the heading above it when the user changes heading color.

H3 Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<h3 class="p1">H3 Element</h3>
<div class="divTi8">
<p class="p1 h3-title-match">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


.divTi8 {
position: absolute;
left: 95px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 270px;
width: 96%;}

.p1 {
margin: 25px;}

The 'h1-background-match' through 'h6-background-match' Classes

These classes work exactly the same way as the 'text-background-match' class, except they match an element’s 'background-color' to a specific heading. These are useful when the 'background-color' of an element needs to always match the color of a certain heading when a user makes changes on the page. The first example in this section uses these classes to make the <div>s inside change color.

The 'h1-border-match' through 'h6-border-match' Classes

Similar to the classes above, these classes will cause the 'border-color' of elements to match headings when the user selects a new Titles option in the menu. Below, the border of the <div> now matches the CSS 'color' value of the <h3> element above it when the user makes changes.

H3 Element


<h3 class="p1">H3 Element</h3>
<div class="divTi8 h3-border-match">
<p class="p1 h3-title-match">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


.divTi8 {
position: absolute;
left: 95px;
top: 10px;
border: 1px solid black;
background-color: #fff;
min-height: 270px;
width: 96%;}

.p1 {
margin: 25px;}

Classes that Impact Size

Adding the 'size-change' class allows the user to change the 'font-size' value of all descendent text elements; adding this class to the <body> element will allow the user to change the ‘font-size’ of all text elements on the page. If a page includes the 'font-size' class, the 'main-text-area-231' class also needs to be included in the page (for more information go to the Installation section). Adding the ‘no-size-change’ class to a nested container will keep all text elements inside from changing size. The ‘e-size-change’ class will cause a single element to change ‘font-size’, while the ‘e-no-size-change’ class will keep a single element from changing ‘font-size’. The ‘h1-size-match’ to ‘h6-size-match’ classes will match the ‘font-size’ of elements to different headings (‘h4-size-match’ will make an element’s ‘font-size’ the same as standard text). Just like every other feature in the Coloraise menu, if no elements are affected when a user clicks on one of the Size buttons in the menu, then the Size feature will not be displayed.

Note: The Size feature of the menu has been optimized to work with Waypoint jQuery plugin.

The initial ‘font-size’ of the page is calculated based on the most common 'font-size' of standard text elements (i.e. <p>). If there are no standard text elements on a page, or if there is not a most common text size, the default starting ‘font-size’ value for regular text set to ‘16px’, which is the default size browsers will render <p> and <h4> elements. The Plus button allows the user to increase ‘font-size’ of all elements by increments of 4px, up to 500px, based on the initial calculation of standard 'font-size'. The Minus button allows the user to decrease the ‘font-size’ of text elements by increments of 4px, to no lower than 6px.

The Size buttons in the menu change the ‘font-size’ property of elements as opposed to zooming a page, which can cause layout problems in certain situations. To prevent layout problems the ‘size-change’ class should only be added to containers that either have their CSS ‘overflow’ value set to ‘scroll’ or that do not have a set ‘height’ value. The <div> below has the 'size-change' class, and the overflow property set to 'scroll' so that even if the 'font-size' is increased the layout of the page will not be affected.

Title

Small Title


<div class="divSi1 size-change">
<h2 class="p1">Title</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


.divSi1 {
position: absolute;
left: 7px;
top: 10px;
overflow: scroll;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'no-size-change' Class

Add the ‘no-size-change’ class to nested containers to keep all descendent text elements from changing ‘font-size’ when a user clicks on the Size buttons in the menu. Below, the same example from above now contains a nested gray <div> with the 'no-size-change' class, so that the size of elements inside cannot be changed.

Title

Small Title


<div class="divSi1 size-change">
<h2 class="p1">Title</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="divSi2 no-size-change">
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


.divSi1 {
position: absolute;
left: 7px;
top: 10px;
overflow: scroll;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.divSi2 {
margin: 15px 15px 15px 25px;
padding: 15px;
background-color: #f2f2f2;
width: 92%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'e-size-change' Class

This will make a single element change 'font-size' inside a 'no-size-change' container, or it can be used to make a single element existing outside a ‘size-change’ container change ‘font-size’. Below the same example is shown again with the <div> that has the class 'no-size-change'. However, this time, the 'Small Title' and following paragraph have the 'e-size-change' class, so that they still change size, even while the rest of the text in this <div> doesn't.

Title

Small Title


<div class="divSi1 size-change">
<h2 class="p1">Title</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="divSi2 no-size-change">
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="p2 e-size-change">Small Title</h4>
<p class="p2 e-size-change">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


.divSi1 {
position: absolute;
left: 7px;
top: 10px;
overflow: scroll;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.divSi2 {
margin: 15px 15px 15px 25px;
padding: 15px;
background-color: #f2f2f2;
width: 92%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

The 'e-no-size-change' Class

This will keep a single element that's in a container with the 'size-change' class from changing size. This can be used on any text element. The first title and paragraph below will not change size because they have the 'e-no-size-change' class.

Title

Small Title


<div class="divSi1 size-change">
<h2 class="p1 e-no-size-change">Title</h2>
<p class="p2 e-no-size-change">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4 class="p2">Small Title</h4>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


.divSi1 {
position: absolute;
left: 7px;
top: 10px;
overflow: scroll;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

Classes 'h1-size-match' to 'h6-size-match'

These classes will match other elements to the size of respective heading elements when a user changes the text size. 'h4-size-match' matches the elements size to standard text elements (i.e. <p>), since <h4> elements are by default rendered the same size as <p> elements in most browsers. In the <div> below the definition has the class 'h5-size-match', so that text appears one size smaller than regular text.

Web Framework (WF) or Web Application Framework (WAF)

"a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse.[1] Although they often target development of dynamic web sites, they are also applicable to static websites."

-from Wikipedia


<div class="divSi1 size-change">
<h4 class="p1">Web Framework (WF) or Web Application Framework (WAF)</h4>
<div class="divSi2">
<p class="p3 h5-size-match">"a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse.[1] Although they often target development of dynamic web sites, they are also applicable to static websites."</p>
<p class="p2">-from <a href="https://en.wikipedia.org/wiki/Web_framework">Wikipedia</a></p>
</div>
</div>


.divSi1 {
position: absolute;
left: 7px;
top: 10px;
overflow: scroll;
border: 1px solid black;
background-color: #fff;
min-height: 375px;
width: 97%;}

.divSi2 {
margin: 15px 15px 15px 25px;
padding: 15px;
background-color: #f2f2f2;
width: 92%;}

.p1 {
margin: 25px;}

.p2 {
margin: 15px 25px 25px 25px;}

/* starting 'font-size' is defined as smaller than regular 'font-size' */

.p3 {
font-size: 12px;
margin: 15px 25px 25px 25px;}

Element Reference

There are several elements that are not affected by Coloraise at all, such as elements that have been deprecated in HTML 5, several media/graphic elements, and all form elements except <textarea>. Comprehensive lists of all elements that are and are not impacted by Coloraise are included at the end of this section. If an element is not impacted by default, the following classes can be added to most elements to make them match the rest of the page’s color scheme when a user makes changes.

Classes that Can Impact Any Element

'background-change'
'gradient-change'
'e-text-change'
'text-background-match'
'text-border-match'
'h1-title-match' to 'h6-title-match'
'h1-background-match' to 'h6-background-match'
'h1-border-match' to 'h6-border-match'
'h1-size-match' to 'h6-size-match'

Form Elements

Form elements are not affected by default (except for <textarea>, which is explained below) because forms are so widely variable across the web. The form elements not impacted by Coloraise are <form>, <input>, <label>, <legend>, <optgroup>, <option>, <output>, and <select>.

List Elements

Definition, ordered, and unordered lists will be the same size and color as regular text (<p>s) when a user makes changes. For a list to change size it needs to be included in a container with the class 'size-change'; to change color it must be included in a container that has the 'text-change' or 'color-change' classes. To keep a list from changing color, add the ‘no-color-change’ or ‘no-text-change’ class to the parent <dl>, <ol>, or <ul> elements; to keep a list from changing size, add the ‘no-size-change’ class to these elements.

Table Elements

All table elements will appear as the same color and size as regular <p> elements when a user makes changes. As with any other element, a table appearing in a container with the 'color-change', 'text-change', and 'size-change' classes will automatically be affected by Coloraise. <th> elements will still appear as bold, since this plugin does not affect bold or italic styling. The table tags <col>, <colgroup>, <tbody>, <tfoot>, <thead>, and <tr> are not affected since they are container elements, but because they are containers, any of the top-level classes can be added to them to affect elements inside. The classes ‘no-size-change’ and ‘no-color-change’/’no-text-change’ can be added to the parent <table> element to keep tables from changing size and color.

Table Borders:

The 'border-color' of tables do not automatically match text, since not every table has a border. This can be modified using the 'text-border-match' or 'h1-border-match' through 'h6-border-match' classes.

Table Elements that Match the Size and Color or Standard Text:

<caption>
<td>
<th> -still appears bold

Special Case Elements

The <a> and <button> elements do not match the color of regular text, but do match the size of regular text. <textarea> elements match the size and color of regular text, and their borders will change along with the color of text.

<a> Elements:

When a user changes text size <a> elements will by default match the size of regular text, as long as they are within a 'size-change' container. They will match the color of <h2> elements, when a user selects a new Titles option, as long as they are in a container with the 'title-change' or 'color-change' classes. To prevent links from changing size use the 'e-no-size-change' class, and to prevent links from matching <h2> elements use the 'e-no-title-change' class, or include them in a container with the 'no-size-change' and 'no-title-change'/'no-color-change' classes. Below the last link contains the 'e-no-size-change' and 'e-no-title-change' classes, but the first and second links do not, so they still change size and color.

General Info
Setup Info
Warnings

Buttons:

Button text will match the size of standard text elements when a user changes Size. When a user changes heading color the ‘background-color’ of buttons will match the color of <h1> elements; when a user changes Background color, button text will match the background color of the page. For buttons to change 'background-color' they must appear in a container that has the 'color-change' or 'title-change' classes; for buttons to change text color, they must appear in a container that has the 'background-change' or 'color-change' classes. To make buttons outside of a 'title-change' or 'color-change' <div> change color use the ‘e-button-change’ class. Any of the ‘background-match’ classes can be used to make the background color of buttons match the text color of specific elements. To make button text match other text elements on the page use either the 'e-text-change' class, or any of the 'title-match' classes. Button borders are not changed by default, but of course any of the 'border-match' classes can be used to make button borders changeable. To prevent buttons from changing color at all add the 'e-no-button-change' class to that element. The buttons below have been placed in a <div> with the class 'color-change', but the third button has the class 'e-no-button-change' so it will not change color.

Button Size:

Buttons with a set 'height' and 'width' should not appear in a 'size-change' container, because if a user increases Size, the text inside buttons can eventually overlap their containers. Instead ‘height’ and ‘width’ CSS properties of these buttons should either be 'auto', or 'min-heigth' and 'min-width' properties should be used instead of ‘height’ and ‘width’. Using this in conjunction with the 'padding' property will ensure buttons have good spacing, even after a user changes text size.

Buttons Advanced:

Coloraise will automatically keep the browser’s default styling from taking effect when changes are made to buttons (i.e. if only the 'border-color' of buttons are changed, some browsers will change the ‘background-color’ of buttons to gray automatically). To make the browser’s default styling take effect when changes are made to buttons, this feature can be turned off by including the following statement in a <script> tag somewhere in the <body> of the HTML document.


<script>elementSettings7777777.buttonSettings = 0;
</script>

The <textarea> Tag:

If this element appears in a container with the classes 'text-change' or 'color-change', the text of this element will match the text on the page, and so will the border. If a <textarea> element appears in a container with the class 'size-change', the text inside will always be the size of regular text. To make text a different size use the 'h1-size-match' to 'h6-size-match' classes. To keep <textarea> elements from changing 'font-size' use the 'e-no-size-change' class; to keep them from changing text color use the the 'e-no-text-change' class. To keep only the 'border-color' from changing, assign this element the 'e-no-border-change' class. Increase or decrease Size, or select a new Text option in the menu above to see the changes in the <textarea> below.

Comprehensive Element Lists

All the following elements will follow the same pattern as standard text, when a user changes size or color, as long as they exist in a container with 'size-change', and 'text-change' or 'color-change' classes respectively. The <svg> and <audio> elements are affected just in case the user's browser doesn't support those items. In that situation any explanation text like 'your browser doesn't support audio' would appear as the same size and color as regular text.

<address>
<audio>
<blockquote>
<caption>
<dd>
<dt>
<figcaption>
<li>
<summary>
<svg>
<textarea>
<th> -still appears bold
<td>

Elements that Do Not Match the Color of Regular Text, But do Match Size

<a>
<button>

Inline Elements

The following tags will match the size and color of regular text, with a few exceptions, as long as they appear inside <p> elements. Text wrapped in a <mark> tag will not change color, but will go up and down in size in appropriate containers. Text wrapped in <sub> and <sup> elements still appear as subscript and superscript text, but they will go up and down in size with regular text. This plugin does not affect any bold, italic, strikethrough, or underline styling. (The <rb>, <rp>, <rt>, and <ruby> elements are typically used together in Japanese publications to annotate pronunciation.)

<abbr>
<b>
<bdi>
<bdo>
<cite>
<code>
<del>
<dfn>
<dialog>
<em>
<i>
<ins>
<kbd>
<mark>
<q>
<rb>
<rp>
<rt>
<ruby>
<s>
<samp>
<small>
<strong>
<sub>
<sup>
<u>
<var>
<wbr>

Tags Not Affected by Coloraise

All of these tags are not affected by this plugin, but nested elements still will be, so that a <p> or <h1> element nested inside an <article> tag will still match the size and color of other text on the page.

<area>
<base>
<br>
<canvas>
<col>
<colgroup>
<data>
<dl>
<datalist>
<embed>
<figure>
<form>
<head>
<hr>
<input>
<iframe>
<img>
<label>
<legend>
<map>
<meter>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<param>
<picture>
<progress>
<pre>
<script>
<select>
<source>
<tbody>
<tfoot>
<thead>
<time>
<tr>
<track>
<ul>

Installation and Getting Started

To install Coloraise on a webpage complete the following steps.

STEP 1: Download Coloraise Files

The first step of installation is to download the Coloraise files (click the button) and include links to them in the <head> section of the HTML document. (This is the latest release on GitHub).

Download ▼

After downloading these, include links like the following in the HTML document.


<link rel="stylesheet" href="/path/to/coloraise.css">
<script src="/path/to/coloraise.js"></script>

STEP 2: Install jQuery

jQuery also needs to be included for Coloraise to work correctly. Include either a link to Google’s CDN jQuery (below), or another jQuery file. This <script> tag needs to appear before the <script> tag above in the HTML document for Coloraise to work. (Make sure to include the jQuery script before the Coloraise script)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

There are several other ways to acquire jQuery, which is explained in more detail at w3schools.com.

Note: Coloraise is designed not to conflict with other JavaScript libraries that employ the $ symbol.

STEP 3: Include Coloraise <div>

The next step is to include a <div> with the class ‘coloraise’ wherever the menu needs to be placed on the page.


<div class="coloraise"></div>

Note: This <div> uses absolute positioning. Instead of trying to change the CSS values of the ‘coloraise’ <div> it is recommended to nest this <div> inside another to use for positioning on the page.

STEP 4: Include Coloraise Classes

Only one of the following top-level classes are required for Coloraise to work, so only include classes optimal for the specific page. The Coloraise menu will build itself based on the classes included in the page. Adding the ‘size-change’ class will cause the Size feature to show up in the menu, adding the ‘title-change’ class will cause the Titles feature to show up in the menu, etc. But these features will only show up if elements are affected by the menu buttons. For example, if the ‘size-change’ class is added to an empty <div>, then the Size button will not show up in the menu, because there are no elements inside affected by this button. To use all features in the menu (as shown on this page), it is only necessary to include two classes in a page: the 'color-change' and 'size-change' classes.

The 'color-change' Class:

Add the ‘color-change’ class to the HTML document to use all three of the Background, Text, and Titles features in the Coloraise menu; add this to any container element where colors need to change. The ‘color-change’ class is explained in more detail in The 'color-change' and 'no-color-change' Classes section.


<div class="color-change"></div>

The 'background-change' Class:

To make the background color of the page, or part of the page, change (but not heading or text color) add the ‘background-change’ class to a container element. This class and additional classes that affect background color are explained in the Classes that Impact Background Color section.


<div class="background-change"></div>

The 'text-change' Class:

To make regular text elements in a container change color add the ‘text-change’ class. There are also additional text-change classes to prevent single elements from changing color, or make single elements change color, which is explained in the Classes that Impact Text Color section.


<div class="text-change"></div>

The 'title-change' Class:

To make heading elements in a container change color, use the ‘title-change’ class. All of the classes that affect heading color, and related classes, are explained in the Classes that Impact Heading Color section.


<div class="title-change"></div>

The 'size-change' Class:

To make the size of all text elements in a container changeable add the ‘size-change’ class. All classes that affect text size are explained in the Classes that Impact Size section. The Size feature of Coloraise has been optimized to work with Waypoint jQuery plugin. If the ‘size-change’ class is included in a page, it is also necessary to include the following ‘main-text-area-231’ class for the Size feature to be optimized.


<div class="size-change"></div>

The 'main-text-area-231' Class:

This class will optimize the auto adjustment of the scroll of the page when a user increases or decreases size. This class is not strictly necessary, but not adding it will cause the auto adjustment of the scroll of the page to be less efficient. Add this class once to the earliest ancestor <div> where text can be increased or decreased, a parent <div>, or add it to every container that has the ‘size-change’ class.


<div class="size-change main-text-area-231"></div>

Customization

There are several ways that the Coloraise icon can be customized to fit into the style and color scheme on any page, just include the following statements enclosed in a <script> tag somewhere in the <body> of the HTML document. If the menu is not customized the background color and styling of the Coloraise icon will appear as it does on this page.

Changing the Colors of the Coloraise Icon

Both the background color and the color of ASCII characters can be changed to any solid color. To change the background color include the following statement inside a <script> tag somewhere within the <body> section of the HTML.


<script>
menuSettings7777777.fPColor = "color_value";
</script>

The ‘color_value’ of the <script> above can be replaced with any valid CSS color value. To change the color of the ASCII characters, include the second line below within the same <script> tag. The color used for these characters has to be a solid color, no gradient values can be used.


<script>
menuSettings7777777.fPColor = "color_value";
menuSettings7777777.fPFontColor = "color_value";
</script>

Change Coloraise Icon Shape

By default the Coloraise icon appears as a 50px wide circle on the page. To make the Coloraise icon a 50px by 50px square shape, include the following statement within the <script> tag.


menuSettings7777777.shape = "square";

Change Menu Alignment

The Coloraise menu can either have right or left alignment. By default the Coloraise menu is meant to be placed in the top right corner of a container or page, and the menu will open to the left of the right margin, so that the entire menu is visible on the page. If the Coloraise menu will be placed on the left side of a page or a container, it is necessary to include the following statement inside a <script> tag somewhere in the <body> of the HTML document, to give the menu proper alignment.


menuSettings7777777.pluginSide = "left";

Hiding Presets

The preset options include the Laser Vision, Grayscale, and Dusk buttons in the menu above. The preset options will only show up if all three of the Background, Text, and Titles features are used on a page. If the preset menu is undesirable for the page, it can be turned off by including the following statement in a <script> tag in the <body> of the page's HTML.


menuSettings7777777.presets = 0;

Note: Number codes like 7 sevens (above) are included in Coloraise class, id, and object names to prevent conflicts with the code of other web designers.

Version Information and Specifications

This is the 1.0 version of Coloraise. Construction of the next version has already started! Here are some of the features that Coloraise has now, and how that will change with upcoming versions.

Use of jQuery

This version of Coloraise makes use of the jQuery library to select elements. However, the $ sign has been changed to ‘jQuery’ throughout the script to prevent any conflicts with other JavaScript libraries. The next version of Coloraise will be written in native JavaScript to prevent any future conflicts, and to reduce the amount of overhead required to use Coloraise.

Z-index

The Coloraise menu, and all its elements, are assigned a z-index value of '100000 !important' or higher. Keep in mind that this menu can still take on the stack order of whatever ancestor elements it is placed in. Depending on other CSS rules of the page, it may still be necessary to make sure ancestor containers have the CSS overflow value set to ‘visible’ so that the menu will always show up above the content behind it.

Maximum Size of Menu

The maximum height and width of the Coloraise menu, with all features included, when fully opened is 562px and 400px respectively. If the preset options are hidden, then the maximum width of the menu is 360px. If all features of the menu are in use, but preset options are hidden, the menu will be slightly taller because the Original button will be moved below the Titles button. Then, the menu will have a maximum height of 612px when fully opened.