Forum Discussion

BarMazuz's avatar
BarMazuz
Community Member
7 months ago

Change color of the Navigation Bar / Sidebar in the modern player

Hello everyone
Dealing with the modern player in the Storyline 360.

Does anyone manage to change the color of the navigation bar only without the whole player background? (in the css file, I found they call it the "sidebar").

Plus, does anyone have a way to minimize the right side of the player's margins to a minimum? The padding is crazy, especially compared to the navigation bar, which has no margins.

This does not help me design according to our brand book requirements, and I would like to avoid building a navigation bar from scratch due to the long work hours and the error numbers it might acquire.

I would love to hear any solution, including a javascript or even css - which I tried and failed.

Attached here is an image to explain more clearly
Thanks

storyline 360
  • Nedim's avatar
    Nedim
    Community Member
    7 months ago

    Technically, you can change it with the code below:
    const sidebar = document.getElementById('sidebar');
    sidebar.style.backgroundColor = "#f2f2f2";

    But in this case you would have change the appearance of all list menu items with its states (such as hover, viewed, selected) including the font color to match your new  background color. Anyway, this code will indeed change the background color of the sidebar only. 

    • BarMazuz's avatar
      BarMazuz
      Community Member
      7 months ago

      Do you maybe have any idea about changing the navigation text color?

  • BarMazuz's avatar
    BarMazuz
    Community Member
    7 months ago

    Nedim, thank you so much!! This is simple and great! You saved me hours of frustration. 

  • Nedim's avatar
    Nedim
    Community Member
    7 months ago

    This should change the list items text color in the navigation.

    const listItems = document.querySelectorAll('.listitem');

    listItems.forEach(function(item) {
        item.style.color = '#f5f5f5';
    });

Related Content