Widget for Trying Out Different Colors on Your Site

This widget is a tool for site design where you can try out different color combinations for various sections of the home page. Not only for color choices, but it also can be used for analyzing margins and padding for improving the general layout of the page. It can also be for fun, just to see what different colors look like where.

If it seems too frivolous for the general public visitors to your site, you can set it to be admin only by using the special CSS class for that purpose.

Here it is:

<div class="colors">
<button onclick="changeClassColor('Header');">Header</button> 
<button onclick="changeClassColor('post-outer');">Post Block</button>
<button onclick="changeClassColor('post-title');">Post Title</button>
<button onclick="changeClassColor('post-header');">Post Date</button>
<button onclick="changeClassColor('post');">Post</button>
<button onclick="changeClassColor('post-body');">Post Text</button>
<button onclick="changeNested('jump-link', 'a');">More Link</button>
<button onclick="changeClassColor('post-footer');">Post Footer</button>
<button onclick="changeClassColor('sidebar-container');">Sidebar</button>
<button onclick="changeNested('sidebar-container', 'widget');">Sidebar Block</button>
<button onclick="changeClassColor('title');">Sidebar Title</button>
<button onclick="changeNested('sidebar-container', 'widget-content');">Sidebar Content</button>
<button onclick="changeClassColor('page');">Background</button>
</div>
<script>
//<![CDATA[
let colorIndex2 = 0;
function changeClassColor(classToChange) {
  const colors = ["Salmon", "Coral", "Khaki", "Olive", "CadetBlue", "Plum", "Orchid", "White", "DimGray", "MistyRose", "AntiqueWhite", "LightGoldenrodYellow", "HoneyDew", "LightSteelBlue", "Lavender", "Thistle", "Gainsboro"];
  if (colorIndex2 >= colors.length) {
    colorIndex2 = 0;
  }
  const collection = document.getElementsByClassName(classToChange);
  for (let i = 0; i < collection.length; i++) {
    collection[i].style.backgroundColor = colors[colorIndex2];
  }
  colorIndex2++
}  
let colorIndex3 = 0;
function changeNested(parent, child) {
  const colors = ["Salmon", "Coral", "Khaki", "Olive", "CadetBlue", "Plum", "Orchid", "White", "DimGray", "MistyRose", "AntiqueWhite", "LightGoldenrodYellow", "HoneyDew", "LightSteelBlue", "Lavender", "Thistle", "Gainsboro"];
  if (colorIndex3 >= colors.length) {
    colorIndex3 = 0;
  }
  let selector;
  if (child == 'a') {
    selector = `.${parent} ${child}`;
  } else {
    selector = `.${parent} .${child}`;
  }
  const collection = document.querySelectorAll(selector);
  for (let i = 0; i < collection.length; i++) {
    collection[i].style.backgroundColor = colors[colorIndex3];
  }
  colorIndex3++
}
//]]>
</script>

This can be pasted into an HTML/JavaScript block added in to the sidebar in the Layout area. Titling the block "Colors" or some such can be helpful to make it unique in the sidebar.

Here is some CSS you can add via the Theme Editor / Advanced / "Add CSS" area:

.colors {
background: AliceBlue;
background-image: linear-gradient(to right, MistyRose, Moccasin, LightYellow, HoneyDew, AliceBlue, Lavender, LavenderBlush);
padding: 5px;
}
.colors button {
display: inline-block;
padding: 3px;
margin: 5px;
}

That will make a gradient background behind the buttons and the buttons to lay out a little better.

It is easy to change the color selections.

:)