Forum Discussion

DavidMichaelMcD's avatar
DavidMichaelMcD
Community Member
8 years ago

Is there any way to change the color of the Lightbox Close (X) button in the new modern dark player?

I would prefer to use the dark modern player, but I just tried out the Lightbox feature and the Close (X) button is incredibly hard to view. It's ok to see in iPad view (course is 4:3 size) but in l...
storyline 360
AlexandraAngelo's avatar
AlexandraAngelo
Community Member
7 years ago

It's not a bug, it's a feature still in the pipeline. But I still hoped there could be a way to hack this. 

RussellKillips-'s avatar
RussellKillips-
Community Member
7 years ago

In this code, I change the track color to blue (#0000ff) and the thumb color to red (#ff0000)

<style>
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background-color: #0000ff;}
::-webkit-scrollbar-thumb {background-color: #ff0000;}

.panel-content {
  scrollbar-highlight-color: #0000ff;
  scrollbar-face-color: #ff0000;
  scollbar-color: #ff0000 #0000ff;
}
</style>

  • AlexandraAngelo's avatar
    AlexandraAngelo
    Community Member
    6 years ago

    Hello Russell! 

    I was wondering whether you have had experience with the following issue: 

    After publishing the project file for LMS, I unzip the folder and add the above code to the index_lms_html5 file to change the color of the scrollbar. Then I zip the folder again to upload it to the LMS, at which point it won't accept the file. 

    Any insight would be more than highly appreciated! 

  • AlexandraAngelo's avatar
    AlexandraAngelo
    Community Member
    6 years ago

    Hi Russell! 

    After the June update of Storyline 3 this hack seems to be no longer working. Have you tried it recently?

    Any advice would be appreciated! 

    • RussellKillips-'s avatar
      RussellKillips-
      Community Member
      6 years ago

      Hi Alexandra,

      I've been using the following CSS to change the color of the lightbox close button for the modern player.

      <style>
      .lightbox-close-btn-floating::after{background-color: #ff0000 !important;}
      </style>