top of page

This is how to create a custom scrollbar in Wix Studio

/ Article - 

Velo & Code

October 6, 2024

Want to give your or your client’s website a unique touch? This simple scrollbar tweak can instantly elevate your design and create a more personalized feel.

Want to give your or your client’s website a unique touch? This simple scrollbar tweak can instantly elevate your design and create a more personalized feel.

Detailed guide


  • Access your Wix Dashboard:

    Log into your Wix account and navigate to your site dashboard.

  • Open Settings: Click on Settings in the left menu.

  • Locate Advanced Settings: Scroll down to Advanced and select Custom Code.

  • Add Custom Code: Click the Add Custom Code button.

  • Paste the Code: Insert the provided code into the first textbox.

  • Apply to All Pages: Ensure the code is set to apply to all pages and is placed in the head section.


Adding custom code to Wix studio


 


<style>


/* To customize the scrollbar */


::-webkit-scrollbar {

    width: 12px; /* Standard width for the scrollbar */

}


::-webkit-scrollbar-track {

    background: #1B1C1D; /* Dark gray background for the scrollbar track */

}


::-webkit-scrollbar-thumb {

    background-color: #C2C2C2; /* Gray color for the scrollbar */

    border-radius: 6px; /* Rounded corners for the scrollbar */

}


::-webkit-scrollbar-thumb:hover {

    background-color: #FF4D02; /* Orange color on hover to provide visual feedback */

}


/* Reset scrollbar to default appearance when less than 750px */


@media (max-width: 750px) {

    ::-webkit-scrollbar {

        width: auto; /* Standard width for the scrollbar */

    }


    ::-webkit-scrollbar-track {

        background: none; /* No background for the scrollbar track */

    }


    ::-webkit-scrollbar-thumb {

        background-color: transparent; /* No color for the scrollbar */

    }

}


</style>


The code used is the one used on this website. If you want to change it, paste it into Chat GPT and describe what you want.


If you have any further question, you can alway write me a message.

You might also like

If you’ve been using Arc and love its clean design, smart tab management, and overall modern take on web browsing, you might have heard rumors that it’s shutting down. But is Arc browser actually dead? Not quite, but it’s in an uncertain place. Here’s what’s happening with Arc, why The Browser Company (the team behind Arc) is shifting focus, and what it means for users like you.

Is Arc browser dead? Here’s what’s really happening

If you’ve been using Arc and love its clean design, smart tab management, and overall modern take on web browsing, you might have heard rumors that it’s shutting down. But is Arc browser actually dead? Not quite, but it’s in an uncertain place. Here’s what’s happening with Arc, why The Browser Company (the team behind Arc) is shifting focus, and what it means for users like you.
Is Arc browser dead? Here’s what’s really happening
If you've ever felt like SEO is a never-ending maze of changing rules, secret techniques, and conflicting advice, you're not alone. But the truth is, SEO isn’t as complex as people make it seem. The real challenge? Cutting through the noise and understanding what actually works. Let’s break down why SEO seems complicated, the myths that hold people back, and the simple truths that drive real rankings.

Why SEO seems complicated (and why it’s not)

If you've ever felt like SEO is a never-ending maze of changing rules, secret techniques, and conflicting advice, you're not alone. But the truth is, SEO isn’t as complex as people make it seem. The real challenge? Cutting through the noise and understanding what actually works. Let’s break down why SEO seems complicated, the myths that hold people back, and the simple truths that drive real rankings.
Why SEO seems complicated (and why it’s not)
The rise of AI has sparked a lot of fear in the design industry and other creative fields, and UX design is no exception. Will AI replace designers? The short answer: no. But the long answer? Designers who don’t embrace AI might find themselves replaced by those who do.

UX Design is dead - long live UX Design

The rise of AI has sparked a lot of fear in the design industry and other creative fields, and UX design is no exception. Will AI replace designers? The short answer: no. But the long answer? Designers who don’t embrace AI might find themselves replaced by those who do.
UX Design is dead - long live UX Design
Keeping up with the ever-evolving tech landscape can feel like chasing a moving target. Every week, there’s a new tool, trend, or breakthrough that promises to revolutionize the industry. For me, staying updated on tech trends isn’t just about keeping pace—it’s about staying inspired and informed as a designer, communicator, and tech enthusiast. Here’s how I do it:

How I stay updated on the fast-changing tech world

Keeping up with the ever-evolving tech landscape can feel like chasing a moving target. Every week, there’s a new tool, trend, or breakthrough that promises to revolutionize the industry. For me, staying updated on tech trends isn’t just about keeping pace—it’s about staying inspired and informed as a designer, communicator, and tech enthusiast. Here’s how I do it:
How I stay updated on the fast-changing tech world
Have you ever looked at a font and thought, "Wow, this feels just right"? That’s the power of typography. Fonts do more than convey words; they set the mood, tell a story, and even nudge emotions. Choosing the right font can make or break your design. Let’s dive into the world of font styles, what they evoke, and when to use them, plus a few pairing tips to make your designs shine.

Typography tips: Choosing the perfect font

Have you ever looked at a font and thought, "Wow, this feels just right"? That’s the power of typography. Fonts do more than convey words; they set the mood, tell a story, and even nudge emotions. Choosing the right font can make or break your design. Let’s dive into the world of font styles, what they evoke, and when to use them, plus a few pairing tips to make your designs shine.
Typography tips: Choosing the perfect font
A strong brand isn’t just a logo or a catchy slogan; it’s how people perceive and connect with your business. Brands with a clear identity attract loyal customers, command higher prices, and stand out in crowded markets. Think about big names like Nike or Apple. These companies aren’t just selling products; they’re selling experiences, values, and trust.

How to create a unique and memorable brand

A strong brand isn’t just a logo or a catchy slogan; it’s how people perceive and connect with your business. Brands with a clear identity attract loyal customers, command higher prices, and stand out in crowded markets. Think about big names like Nike or Apple. These companies aren’t just selling products; they’re selling experiences, values, and trust.
How to create a unique and memorable brand

Explore my work

Web Design

Tek-ture is a cutting-edge architectural firm with a focus on modern and sustainable design. For this project, I recreated their website from scratch, ensuring it maintained the original futuristic feel and functionality.

Tek-ture

Tek-ture is a cutting-edge architectural firm with a focus on modern and sustainable design. For this project, I recreated their website from scratch, ensuring it maintained the original futuristic feel and functionality.

Tools used

Wix Studio

Tek-ture

UX & User testing

Asekio is a Skåne-based tech startup with a vision to create a no-code AI website builder that can generate fully customizable websites in just 29 seconds. Users  input prompts, and Asekio handles the layout, text, and images. 

Asekio

Asekio is a Skåne-based tech startup with a vision to create a no-code AI website builder that can generate fully customizable websites in just 29 seconds. Users  input prompts, and Asekio handles the layout, text, and images.

Tools used

Figma, Figjam & Asekio

Asekio

Copy & Web Design

Campus Webbyrå, a digital agency for small and medium-sized businesses, needed a website redesign to better showcase their services and enhance user engagement. The goal was to create a user-friendly, visually appealing website that effectively communicates their unique position as an agency created by students.

Campus Webbyrå

Campus Webbyrå, a digital agency for small and medium-sized businesses, needed a website redesign to better showcase their services and enhance user engagement. The goal was to create a user-friendly, visually appealing website that effectively communicates their unique position as an agency created by students.

Tools used

Wix Studio

Campus Webbyrå

Web Design

Campus Vänner, a non-profit organization based in Helsingborg, connects university students with local companies in the Skåne region. They needed a modernized brand identity and an enhanced online presence to appeal to their target audiences - students and businesses.

Campus Vänner

Campus Vänner, a non-profit organization based in Helsingborg, connects university students with local companies in the Skåne region. They needed a modernized brand identity and an enhanced online presence to appeal to their target audiences - students and businesses.

Tools used

Wix Studio & Photoshop

Campus Vänner
bottom of page