Using Javascript to Modify your Slayte Site

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:

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.

Integrations