-
How do we style “individual” players on the same wordpress page? I want different color schemes per player
Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
Foliovision › Forums › FV Player › How to … › CSS Style “Individual” Players used on the same page
Hello Nicole,
when using FV Player 7 Beta you can use the skin attribute of the shortcode, like this:
[fvplayer src="https://video-cdn-public.foliovision.com/Swan-Lake-Reloaded-sd.mp4" skin="slim"] [fvplayer src="https://video-cdn-public.foliovision.com/Swan-Lake-Reloaded-sd.mp4" skin="youtuby"] [fvplayer src="https://video-cdn-public.foliovision.com/Swan-Lake-Reloaded-sd.mp4" skin="custom"]
We will add it to the shortcode editor.
Thanks,
Martin
Hello Nicole,
if you need the players to have different colors, you have to wrap each in a DIV and give it a class or a unique ID. After that you can target each player it’s own styling as follows:
div.YOUR_CUSTOM_CLASS .flowplayer.skin-custom .fp-color, .flowplayer.skin-custom .fp-selected { background-color: #COLOR !important; } div.YOUR_CUSTOM_CLASS .flowplayer.skin-custom .fp-color-fill .svg-color, div.YOUR_CUSTOM_CLASS .flowplayer.skin-custom .fp-color-fill svg.fvp-icon, div.YOUR_CUSTOM_CLASS .flowplayer.skin-custom .fp-color-fill { fill: #COLOR !important; color: #COLOR !important; }
You have to place it in your theme stylesheet.
thanks
Viktor