CSS Style “Individual” Players used on the same page

Nicole L. 6 years, 4 months ago

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)

Lucia 6 years ago

Hi Nicole!

Our CSS designer will have a look at this one.

Thanks,
Lucia
Martin 6 years ago
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
Nicole L. 6 years ago

Not what I was asking. Not looking for a pre-designed player.
I want to be able to use CSS to alter the colors used per player on a page. Example, If there are 3 players.. I want 3 different color time line bars.. the question is how can I in CSS declare the players individually?

Nicole L. 6 years ago

Can I please get an answer
viktor 6 years ago
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
- This reply was modified 6 years, 1 month ago by viktor.

Viewing 5 replies - 1 through 5 (of 5 total)