0_Craft_Multisite_Color_Coding.md

Color code sites in Craft 3 Multisite

Dependencies

1. Control Panel Body Classes plugin
2. Control Panel JavaScript plugin
3. Control Panel CSS plugin

Notes

This is a setup for an instance with two sites: SAFS and EFFS. Adjust the values to match your own sites!

control-panel-body-classes.md

Check the following boxes in the Control Panel Body Classes settings:

1. Include a class to denote the current page?
2. Include a class to denote the entries site?

control-panel-css.css

/* color the safs site background and make the text white */
body[class*="safs"] #header, 
body[class*="safs"] #crumbs, 
body[class*="safs"] #crumbs a,
body[class*="safs"] #crumbs li::after {
  background-color: #008183 !important;
  color: #fff !important;
}    

/* color the effs site background and make the text white */
body[class*="effs"] #header,
body[class*="effs"] #crumbs 
body[class*="effs"] #crumbs a,
body[class*="effs"] crumbs li:after {
  background-color: #cb5a28 !important;
  color: #fff !important;
}

/* change the effs submit button color */
body[class*="effs"] #header .submit {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c89a58), to(#927040));
  background-image: linear-gradient(#c89a58, #927040);
}

control-panel-js.js

var header = document.getElementById('header')

// assign variables for each site
var site1Handle = 'Sustainable Agriculture and Food Systems Minor'
var site2Handle = 'Graduate Specialization'
var site1Class = 'entriessite-safs'
var site2Class = 'entriessite-effs'

// based on the current site selected in the dropdown menu, toggle classes
if ( header.innerHTML.toString().indexOf(site1Handle + '</div>') > -1 ) {
  document.body.classList.add(site1Class)
  document.body.classList.remove(site2Class)
}

if ( header.innerHTML.toString().indexOf(site2Handle + '</div>') > -1 ) {
  document.body.classList.add(site2Class)
  document.body.classList.remove(site1Class)
}