Can you provide a link to a live page displaying your playlist? It’s virtually impossible to make suggestions without a live page to examine.
Thread Starter
Anouk
(@anouk197)
https://www.thebeesclub.com/about/
Sorry for the late reply. Had some technical difficulties.
No problem, I know how that goes. If you add the following to the Additional CSS panel of the customizer, it should override what ever is in the CSS files.
/* Center player */
.wp-playlist { margin: 12px auto 18px; }
/* now playing background */
.wp-playlist-light .wp-playlist-playing { background: rgba(0, 0, 0 ,0); }
/* lines between songs */
.wp-playlist-item { border-bottom: 0 solid #ccc; }
You probably want to center the “Songs that represent…” line along with the player. To do so, add a unique class to its p element container, for example player-title, then add this rule to the rest:
.player-title { margin: 0 auto; text-align: center; }
I suggest in the future you learn to use your browser’s CSS inspector tool. It allows you to select various page elements and shows you all applicable CSS. You can try different rules and the change is immediately reflected on the page. These changes do not persist, reloading cancels your changes. If you are happy with your changes, copy them to the Additional CSS panel.
Thread Starter
Anouk
(@anouk197)
Thank you very much! It works perfectly.
Thread Starter
Anouk
(@anouk197)
Oh, just discovered it doesn’t. When I’m adding the css (so when I’m in the customizer) the playlist looks just as I want them, and as the css says. But when I close the customizer (after I of course saved the added css) the changes don’t show up. Then when I open the customizer again, the changes appear. The changes I made myself as I listed above do appear, just not these ones.
Sounds like you have a caching plugin that needs to be flushed?
Or flush your browser cache.
Thread Starter
Anouk
(@anouk197)
I don’t think that’s it. I just tried both but nothing changed.
When you go to Additional CSS, are the rules there still, indicating they were properly saved? Assuming yes, they are not making it onto the page. The Additional CSS rules on the page are stale, a former version. Caching is the only reason I’ve ever seen as the cause. Doesn’t mean there are not other causes.
Try installing and activating the health-check plugin and invoking the troubleshooting mode. It will deactivate all plugins and switch to twentyseventeen theme. This will completely change the appearance of your site, but you will be the only one seeing it this way. Re-copy my suggested rules to Additional CSS. Even if the player looks completely different, those rules should make the specific changes on a normal, non-customizer page.
Using the troubleshooting item in the admin bar, start restoring your theme, then each plugin, one by one, testing after each. When the rules no longer apply again, the last activated module is somehow causing stale additional CSS to be used.
