Scroll bar color with Text set to Scroll?

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
Beth
 
 
Posts: 149
Joined: Mon Jan 15, 2018 10:55 pm

Scroll bar color with Text set to Scroll?

Post by Beth »

Is there any code that can control the scroll bar color while using Text set to Scroll? Night be quite useful and snazzy!

Thanks.
User avatar
Pablo
 
Posts: 24945
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Scroll bar color with Text set to Scroll?

Post by Pablo »

There is no standard option to control the scrollbar of scroll-able text.
Beth
 
 
Posts: 149
Joined: Mon Jan 15, 2018 10:55 pm

Re: Scroll bar color with Text set to Scroll?

Post by Beth »

Thank you Pablo. I just thought it might be cool.
User avatar
crispy68
 
 
Posts: 3225
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Scroll bar color with Text set to Scroll?

Post by crispy68 »

@Beth,

You can try this. Either insert an html box or use the page html, set between the <head> tags the following:

Code: Select all

<style>
#wb_Text1{scrollbar-color: #ff69b4 #0000ff;}
#wb_Text1::-webkit-scrollbar{width:40px;}
#wb_Text1::-webkit-scrollbar-track{background: #0000ff;}
#wb_Text1::-webkit-scrollbar-thumb{background-color: #ff69b4;border-radius:5px;}
</style>
You will need to change "wb_Text1" to the ID of your text box.

Here is the commented section to help explain the code better:

Code: Select all


<style>
/* Step 2: Modern Standard Property (Firefox, Chrome 121+, Edge 121+) */
/* Syntax: scrollbar-color: [Thumb Color] [Track Color]; */
#wb_Text1{scrollbar-color: #ff69b4 #0000ff;}

/* WebKit Pseudo-elements (Legacy Chrome, Safari, Older Edge) */
/* Target the scrollbar width */
#wb_Text1::-webkit-scrollbar{width:40px;}

/* Target the track (background) color */
#wb_Text1::-webkit-scrollbar-track{background: #0000ff;}

/* Target the thumb (movable bar) color */
#wb_Text1::-webkit-scrollbar-thumb{background-color: #ff69b4;border-radius:5px;  /* Optional: rounds the corners of the bar */}
</style>
Post Reply