Forum Discussion
Change scroll panel scroller color
Hello Heroes,
Is there a way to change the scroll bar color? Not the background color of the box that you put objects in, but the actual scroll bar itself?
Jesse
57 Replies
I see. Well, I'm not sure whether it's a) possible and b) a good idea to poke at the player code. Anyhow, I'm not competent enough to tell either, so if you can help with that, it would be great. Which file do you need exactly? Do you mean the story.html5?
I actually have foud a workaround for this, and its very simple. Just use the slider, ad a couple of boxes as layers, ad a main text and give it 3 stances. In each one, just move the text up and made the slider go to each of them. I attach the example in SL3.
The slider lets you, in the format options of the main manu in SL, adjust it color, shape, etc. Both for the thumb and the scroll section.
I find that putting some fill color behind the text and widening the line around the scrolling panel makes the slider stand out and be easier to see and use.
As mentioned above, you need to add a custom style rule the the DOM-header.
That is done through this code:
$("<style type='text/css'> INSIDE STYLE RULES HERE </style>").appendTo("head");If you want to change the color of the scrollbar thumb:
.scrollarea-btn:after {background: #000 !important; /* or a color of your choice */}If you want to change the color of the scrollbar itself:
.scrollarea-scrollbar:before { background-color:#fff!important; /* or a color of your choice */ }This code doubles the width of the scrollbar:
.scrollarea-scrollbar:before { left: 10px !important; width: 20px !important; border-radius: 0px !important;} .scrollarea-btn:after { left: 10px !important; width: 20px !important; border-radius: 10px !important;}hi
thank you so much for helping to educate me on javascript.... i would love
to explore this tool. i think it could be like magic.
when i attempted to follow information below, i did not see any
difference. it is clear to me i have a code error
attached is the story file -1- sliide and notes table contain free script.
naturally the triggers also contains the script.
all your help is appreciated
maxHi Max
I can't see the attachment?
As for learning som javascript, I'd suggest trying out Codecademy's free courses in Javascript and jQuery.
dear snorre
thanks for you help
i am not sure how to get this to you, so hoping this works
from prev email, now with file attached
hi
thank you so much for helping to educate me on javascript.... i would love to explore this tool. i think it could be like magic.
when i attempted to follow information below, i did not see any difference. it is clear to me i have a code error
attached is the story file -1- sliide and notes table contain free script. naturally the triggers also contains the script.
all your help is appreciated
maxAlright, I see the mistake. You wouldn't notice if you don't know javascript. Your first script looks like this:
$("<style type='text/css'> INSIDE STYLE RULES HERE </style>").appendTo("head");
.scrollarea-scrollbar:before { background-color:#FF0000!important; }Should look like this:
$("<style type='text/css'>.scrollarea-scrollbar:before { background-color:#FF0000!important; } </style>").appendTo("head");Same goes for the second. And you might as well have them both at once:
$("<style type='text/css'>.scrollarea-scrollbar:before { background-color:#FF0000!important; } .scrollarea-scrollbar:before { left: 10px !important; width: 20px !important; border-radius: 0px !important;} .scrollarea-btn:after { left: 10px !important; width: 20px !important; border-radius: 10px !important;} </style>").appendTo("head");A final piece of advice: make sure that you have jquery available in the browser. Many LMS' run jQuery as a standard, but it is not a given. If you test the course locally, you will not have jQuery in the browser, and should add it. The following code can check if jQuery is present.
if (typeof window.jQuery == "undefined") {
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://code.jquery.com/jquery-3.6.0.js';
head.appendChild(script);
};You can add this as a separate javascript trigger, to run before the other script. To make completely sure that it has time to run, set this first one to run on timeline start, and the other script to run when timeline reaches 0.25 s.
hi Snorre
you are a magician
the code worked when a .25 sec delay was provided in the slide...
looks greatif you are interested i have figured out a work flow (not java or any of
those other scripts, but would love to know if possible) for nesting -1-
storyline inside another. doing this as a web object requires opening up a
new browser window, which if the e-learning your are providing contains
many such contents.
happy to share if you would like
thanks again..... it seems this question had been lingering in the
community for a few years....thanks for providing assistance to solve
max
