How to Recolor Text, SVGs & Divider Lines in Wix Studio Using Custom CSS (Step-by-Step Tutorial)

*Learn how to recolor all elements inside a Wix Studio section—text, SVG icons, vertical/horizontal divider lines, and rich text—using one clean custom CSS class. * I’ll walk you through how to prep SVGs correctly in Illustrator, how Wix Studio’s auto-generated classes affect styling, and how to use theme color variables like rgba(var(--color_25), 1) for consistent site-wide color control. This tutorial pairs with my full blog post here: 🔗 https://designertofullstack.com/how-to-recolor-text-svgs-and-divider-lines-in-a-wix-studio-section-using-custom-css/ If you work in Wix Studio, check out my other tutorials: 🔗 https://designertofullstack.com/?s=Wix ____________________ ⏱️ Timestamps 00:00 — Intro: What we’re styling in Wix Studio 00:00:03 — Preview of the animated SVG infographic 00:00:20 — How SVG icons were imported into Wix Studio 00:00:40 — Why everything is showing as black in the editor 00:01:01 — Using CSS to override the default colors 00:01:26 — Designer workflow: prepping SVGs in Adobe Illustrator 00:01:31 — Why strokes vs fills matter for recoloring 00:01:57 — Expanding + uniting shapes for proper SVG export 00:02:45 — Why you should import SVGs in black when using CSS overrides 00:02:53 — Using theme color variables in Wix Studio CSS 00:03:15 — Why element IDs break after publishing 00:03:40 — Creating your own stable CSS class in Wix Studio 00:03:59 — Applying your custom class to multiple rows/sections 00:04:12 — CSS for text and headings inside your colored section 00:04:49 — Handling rich text elements separately 00:04:49 — Styling divider lines (multiple selector types) 00:05:07 — Using additional theme colors (e.g., color_26 as gold) 00:05:12 — Recoloring SVGs purely through CSS 00:05:30 — Swapping between theme palette colors 00:05:49 — Final recap + where to find more tutorials _____________________________________________________________ *JOIN MY EMAIL LIST* Love quick, helpful tutorials? You’ll love the emails too. 💌 https://designertofullstack.com/join-the-list/ *ABOUT ME* Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise. With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is creating meaningful solutions and helping clients and students do the same. *What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code. *What brought you JOY today? * 👇 Share in the comments below *SOCIALS* https://twitter.com/@designer2fstack https://www.facebook.com/designertofullstack https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog