Code customizer
by Ryan Perez
HTML
<p>Ryan</p>
CSS
@charset "utf-8";
/* CSS Document */
.brand-color-primary-background {
background-color: #D93038 !important;
}
.brand-color-primary-text {
color: #D93038 !important;
}
.brand-color-secondary-background {
background-color: #075082 !important;
}
.brand-color-secondary-text {
color: #075082 !important;
}
.brand-color-primary-comp-background {
background-color: #F43833 !important;
}
.brand-color-primary-comp-text {
color: #F43833 !important;
}
.brand-color-secondary-comp-background {
background-color: #0480CE !important;
}
.brand-color-secondary-comp-text {
color: #0480CE !important;
}
.brand-color-add-comp-background {
background-color: #03B8F4 !important;
}
.brand-color-add-comp-text {
color: #03B8F4 !important;
}
.brand-color-shade-background {
background-color: #1B1F1D !important;
}
.brand-color-shade-text {
color: #1B1F1D !important;
}
.brand-color-highlight-background {
background-color: #ffffff !important;
}
.brand-color-highlight-text {
color: #ffffff !important;
}
JavaScript
//These will be your classes
// Available options are "ALL", "SOME", "1
var primaryClass = [
"brand-color-primary-background",
"brand-color-primary-text",
"brand-color-secondary-background",
"brand-color-secondary-text",
"brand-color-primary-comp-background",
"brand-color-primary-comp-text",
"brand-color-secondary-comp-background",
"brand-color-secondary-comp-text",
"brand-color-add-comp-background",
"brand-color-add-comp-text",
"brand-color-shade-background",
"brand-color-shade-text",
"brand-color-highlight-background",
"brand-color-highlight-text"
]
var indices = [0,2];
function changeColor(e, numClasses, indices){
<!-- primaryClass is an array of classnames-->
var classNames = "";
switch(numClasses) {
case "ALL":
classNames += primaryClass.join(" ");
break;
case "SOME":
var selectedClassNames = [];
for (var i = 0; i< indices.length; i++) {
selectedClassNames.push(primaryClass[indices[i]]);
}
classNames += selectedClassNames.join(" ");
break;
case "1":
var specifiedIndex = indices[0];
classNames += primaryClass[specifiedIndex];
break;
default:
break;
}
$(e).addClass(classNames);
}
// To add all the classes
//changeColor("p", "ALL" );
// To add some of the classes, say the first and second class in the list
changeColor("p", "SOME", [0,1]);
// To add only one class, as well as the position of the class to add
//changeColor("p", "1", [0]);