Change color of the Navigation Bar / Sidebar in the modern player
Mar 09, 2024
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
4 Replies
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.
Nedim, thank you so much!! This is simple and great! You saved me hours of frustration.
Do you maybe have any idea about changing the navigation text color?
This should change the list items text color in the navigation.
const listItems = document.querySelectorAll('.listitem');listItems.forEach(function(item) {item.style.color = '#f5f5f5';});