Customize CSS of Frontend Website

Erhard-Rainer

Hi Community,

I've recently started using Worksuite for my business and am looking into customizing the CSS to better match my company's branding. I want to ensure that my modifications are done correctly and efficiently, without affecting the platform's future updates or overall functionality.

Could the development team or any experienced users advise on the following:

Specific CSS File for Customizations: Which CSS file(s) should I focus on for making customizations? Is there a designated stylesheet for user modifications, or should I create a separate CSS file for my changes?

Maintaining Customizations Through Updates: How can I ensure that my custom CSS will not be overwritten with future updates? Are there recommended practices for applying custom styles in a way that they persist after platform updates?

Developer Guidelines for CSS Customizations: Are there any guidelines, documentation, or support for users looking to customize the platform's appearance? If so, could you please point me in the direction of these resources?

I aim to make these customizations as seamlessly as possible, ensuring they are in harmony with the platform's design and future development. Any guidance, tips, or documentation you could provide would be immensely helpful.

Thank you for your support and for creating a platform that's so integral to my business operations.

Best regards,
Erhard Rainer

Erhard-Rainer

I've recently discovered that within the "Front Settings" section, specifically under the "Header & Footer Scripts" entry, it's possible to insert <style> and <script> elements. This capability significantly enhances the ability to customize the site to a great extent.

I recommend using JavaScript to assign an ID to the container, in my case, "main". This approach greatly simplifies the process of targeting elements within the container for further manipulation or styling. Here's how you can achieve this:

document.addEventListener('DOMContentLoaded', function() { // Look for the first element with the 'bg-white' class var bgWhiteElement = document.querySelector('.bg-white'); // Within this element, search for the first element with the 'container' class if (bgWhiteElement) { var containerElement = bgWhiteElement.querySelector('.container'); // If such an element is found, add the ID 'main' to it if (containerElement) { containerElement.id = 'main'; } } });

This script listens for the DOMContentLoaded event, which fires once the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Upon triggering, it searches for the first element with the class 'bg-white'. Within this element, it looks for the first element with the class 'container'. If such an element exists, the script assigns it the ID 'main'. This method is particularly useful for easily accessing and manipulating elements under the 'container' using CSS or further JavaScript, enhancing the site's interactivity and visual appeal without altering the underlying HTML structure directly.