Skip to main content
Best Answer

Playlist Display


ebarrett
Influencer I
Forum|alt.badge.img

Does anyone know of a way to have the playlist “bar” on full display by default, rather than at the bottom of the screen? It’s so hidden when you click a playlist and you’re brought to the first item.

Alternately, does anyone know any CSS code which could change the color of that bar to something that stands out more?

Thanks!

 

Best answer by thaldane

ebarrett wrote:

Alternately, does anyone know any CSS code which could change the color of that bar to something that stands out more?

 

Short answer, this should probably do the trick:

div.bg-main.slideup-panel__header { background: #ababab !important; } 

 

Just replace the #ababab with the hex code color of your choice


Long answer:

You’ll probably also need to adjust the text color and maybe do some additional custom tinkering if the above doesn’t quite work. The hardest part about writing your own CSS I think is learning the grammar, and identifying the right element to apply it to. For the former, there are a couple websites that I recommend. For the latter, there’s a handy trick for identifying interface elements in order to write CSS for them if you’re using Chrome:

First, go to your playlist with the bar at the bottom at the screen, then press F12 to open the DevTools window. Click again in your playlist window somewhere, press Ctrl-Shift-C, hover over the playlist bar, and click. This will highlight the HTML for the playlist in your DevTools window. Right-click the playlist HTML and select Copy > Copy Selector. While you’re there, you can also look under the Styles panel in your DevTools to see how the background color gets applied.


The thing about selectors is that CSS rules for more specific selectors override rules for less specific selectors (ie, “apply to elements with this id and these classes when underneath these parent elements” overrides “apply to all elements of this type”), but super long and specific selectors that include a lot of parent elements (“div > div > div > span > div > form > div...”) are more likely to break whenever the platform gets updated.

Anyway, hope this helps.

View original
Did this post help you find an answer to your question?

2 replies

thaldane
Helper I
  • Helper I
  • 25 replies
  • Answer
  • July 25, 2022
ebarrett wrote:

Alternately, does anyone know any CSS code which could change the color of that bar to something that stands out more?

 

Short answer, this should probably do the trick:

div.bg-main.slideup-panel__header { background: #ababab !important; } 

 

Just replace the #ababab with the hex code color of your choice


Long answer:

You’ll probably also need to adjust the text color and maybe do some additional custom tinkering if the above doesn’t quite work. The hardest part about writing your own CSS I think is learning the grammar, and identifying the right element to apply it to. For the former, there are a couple websites that I recommend. For the latter, there’s a handy trick for identifying interface elements in order to write CSS for them if you’re using Chrome:

First, go to your playlist with the bar at the bottom at the screen, then press F12 to open the DevTools window. Click again in your playlist window somewhere, press Ctrl-Shift-C, hover over the playlist bar, and click. This will highlight the HTML for the playlist in your DevTools window. Right-click the playlist HTML and select Copy > Copy Selector. While you’re there, you can also look under the Styles panel in your DevTools to see how the background color gets applied.


The thing about selectors is that CSS rules for more specific selectors override rules for less specific selectors (ie, “apply to elements with this id and these classes when underneath these parent elements” overrides “apply to all elements of this type”), but super long and specific selectors that include a lot of parent elements (“div > div > div > span > div > form > div...”) are more likely to break whenever the platform gets updated.

Anyway, hope this helps.


ebarrett
Influencer I
Forum|alt.badge.img
  • Author
  • Influencer I
  • 24 replies
  • July 26, 2022

Thanks so much, @thaldane ! So incredibly helpful. That ended up working great. I really appreciate the resources, too!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings