The Advanced Theme Editor in Streamline enables customization using SCSS and JavaScript. It’s ideal for users familiar with coding, but understanding the basics can help you collaborate with a developer.
September 2024
Follow Along
Streamline’s Advanced Theme Editor lets you customize your website using SCSS and JavaScript. Whether you’re coding or working with a developer, you can adjust your site’s design and add dynamic elements for a more engaging experience.
In this guide, we’ll show you how to access the editor and explore the basics of SCSS and JavaScript customization in the Theme tab. Let’s get started!
- Ensure you are logged in to your site by viewing the toolbar on the left-hand side.
- Navigate to “Preferences” and click on the “Theme” tab
- In the Advanced Theme Editor, you can define variables that allow even greater customization of your Streamline site’s appearance.
.png?width=624&height=363&name=unnamed%20(1).png)
- SCSS Variables allow you to store values such as colors, fonts, or sizes in one place, making it easier to manage and update your design. Instead of repeating the same value throughout your code, you can define a variable once and reuse it wherever needed. For example, you can declare a primary color in one line and use that variable across multiple elements in your “Styles” tab.
- Next is the Styles tab where all the additional SCSS code lives. SCSS in the Advanced Theme Editor empowers you to create a consistent, responsive, and visually engaging website with reusable design elements and dynamic visual effects, all while simplifying global updates.
- In this site, there are a couple of changes with CSS with the font family, as well as the carousel caption.
.png?width=622&height=346&name=unnamed%20(2).png)
- This is just the tip of the iceberg of what you can change and customize with this tab, the possibilities are endless!
- In this site, there are a couple of changes with CSS with the font family, as well as the carousel caption.
- The last tab is for scripts using JavaScript. JavaScript (JS) allows you to add dynamic and interactive elements to your website. With JS, you can create features like pop-up alerts, or other animations that respond to user actions.
- For example: Event Listeners in JavaScript can trigger actions when a user interacts with an element on the page, such as clicking a button or hovering over a link. This makes your site more interactive and engaging for visitors.
- By leveraging these advanced features, you can create a website that truly stands out and meets your unique needs.
Follow Along