It is possible to further modify the styling of your Slayte website beyond the basic configurations available. You can achieve this by entering JavaScript and CSS under Admin > Custom Code.

Custom CSS allows you to change the look and feel of various components within Slayte. To apply custom styles, you will need to identify the elements you want to customize through the web browser inspector. You can read how to utilize the inspector in the following Help Center Articles:

• Google Chrome Inspector
• Firefox CSS Inspector

Here is a base code snippet to adjust the styling:

const cssRules = `

Your CSS Code here



  `;

    const theStyle = document.createElement('style');
  if ('styleSheet' in theStyle) {
    (theStyle as any).styleSheet.cssText = cssRules;
  } else {
    // This is for modern browsers
    theStyle.appendChild(document.createTextNode(cssRules));
  }

  document.head.appendChild(theStyle);

For instance, to change the navigation panel color, you can use:

const cssRules = `
#react-root > div > div.App__container__1694870745.NavigationDrawer__container__2061365725 > div > div.theme__navDrawer__104533360.theme__smPermanent__104533360.NavigationDrawer__navDrawer1__2061365725.navDrawer1 > aside {
  background-color: #319331;
}



  `;

    const theStyle = document.createElement('style');
  if ('styleSheet' in theStyle) {
    (theStyle as any).styleSheet.cssText = cssRules;
  } else {
    // This is for modern browsers
    theStyle.appendChild(document.createTextNode(cssRules));
  }

  document.head.appendChild(theStyle);

Additionally, you can insert widgets into the website, such as Zendesk, to provide support during events or programs. For further details, feel free to reach out to support@slayte.com.