Beyond the basic configurations, you can modify the look and feel of your Slayte site by adding custom JavaScript or CSS under Admin > Custom Code.
Use browser inspection tools (e.g., Google Chrome Inspector or Firefox CSS Inspector) to identify the elements you want to style.
Here is a sample code snippet to apply custom styles:
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 example, to change the navigation panel color:
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);
You can also insert widgets—for instance, a Zendesk support widget—into your Slayte website
for immediate assistance during events or programs. For more details on implementing custom
code or widgets, contact support@slayte.com.