LinearMore Unique css classes for projekktor themes? (Projekktor Core)
Hello, I'm not sure how easy this would be to accomplish at this point, but it seems that projekktor uses some really common css classes in it's controlbar theme (like left, right, fade, active, etc) that causes problems if these css styles are already being used in the site.
For example, I was having issues with the controlbar being missing and I realized that it was because I am using twitter bootstrap and it defines a 'fade' class that has a default opacity of 0.
More Unique css classes for projekktor themes?
by Dazzel 
, Sunday, April 22, 2012, 19:31 (423 days ago) @ aaronchi
Use:
ppcontrols.fade {
/* Your styles for the projekktor controlbar */
}
This code will only apply to your projekktor controlbar. If you have wrapped your player in an container, named with the ID "#player" then you could also use:
#player fade {
/* Your styles for the projekktor controlbar */
}
Maybe you should learn more about the CSS selectors ;)
More Unique css classes for projekktor themes?
That's not my point. If you just use the standard theme without any modification, then fade will be replaced with opacity:0 if you are using bootstrap.
More Unique css classes for projekktor themes?
by Dazzel , Sunday, April 22, 2012, 21:58 (423 days ago) @ aaronchi
Alright, then the main theme should be modified. The class names are good as they are, I would say. They are "speaking names" and such names are easier to handle then something more unique. We could call them "projekktor-fade" or "ppfade" but I would say this is unnecessary because of the flexibility of CSS.
More Unique css classes for projekktor themes?
by sascha 
, Monday, April 23, 2012, 09:23 (422 days ago) @ Dazzel
We could call them "projekktor-fade" or "ppfade" but I would say this is unnecessary because of the flexibility of CSS.
Today even the "pp"-prefix (which is configurable, btw.) in fact seems a bit redundant to me. On the other hand it makes the CSS a little more compact. Having this said it might be inconsequently to leave it away when it comes to "behavior" classes like "fade" or "toggle".
What do you think?
Right now the easiest workaround for "CSS-clashes" is to add a reset for e.g. .projekktor.toggle to the theme CSS.
- sascha
More Unique css classes for projekktor themes?
I'm posting mainly to alert you to this issue. I can imagine that other people who are using bootstrap might try using projekktor and wonder why the controls aren't visible. It's not a problem to 'fix' the css, but I think projekktor should take measures to avoid this by default.
It seems like the two solutions are a reset inside of the projekktor container or namespaceing the css classes. Personally, I like the namespacing idea, but I'll leave it up to you to decide how to address this.
