jPlayer Stylesheet clash

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
9/1/2011 5:36:04 PM
Gravatar
Total Posts 81
Website Hobbyist and Software Engineer
Proud member of the mojoPortal team
www.doan.me

jPlayer Stylesheet clash

So I have been working on creating a custom feature that utilizes jPlayer. They just released their 2.1.0 version today, so I thought I would go ahead and upgrade my feature so that I could take advantage of the latest and greatest. Well, in doing that, I ran into some issues with the CSS. It seems that all skins that come with mojoPortal include the /Data/style/common/style.css stylesheet via their style.config. In that style sheet is CSS for the Blue Monday skin for jPlayer 2.0.0. With both the CSS for 2.0.0 and the new CSS that I have been including for 2.1.0 I have been having clashes and causing lots of formatting issues. I fixed it by commenting out the /Data/style/common/style.css in the style.config for the skin I was currently using and it fixed everything. But, upon investigation I realized that /Data/style/common/style.css contains CSS for not only jPlayer, but other things too.

I assume if I were to exclude the /Data/style/common/style.css from skins it will mess up the formatting for something, maybe even a module or some functionality that uses the 2.0.0 version of jPlayer. I have been thinking about this issue for a while but have not come up with a great answer.. How can I continue to develop my feature with jPlayer 2.1.0 and easily avoid conflicts with /Data/style/common/style.css?

Thanks!

9/1/2011 6:48:45 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: jPlayer Stylesheet clash

If I were you, I'd clone the common/style.css to a new file, make changes to the Jplayer CSS in the new version, and point to it instead of the original in your skin's style.config. This way your changes wouldn't get overridden by upgrades. You'll just need to avoid changing any of the CSS in there that doesn't relate to Jplayer, and during upgrades you'd want to compare your customized version to the delivered one so you could take advantage of any non-Jplayer CSS changes in the file.

Since it sounds like there are different themes for Jplayer, maybe the ultimate solution would be to have mojoPortal deliver the Jplayer CSS within its own standalone CSS file (like we did for Colorbox), rather than lumped in with other common styling? It sounds like that would make customization of this CSS simpler and safer, if Joe is amenable to making that change.

Jamie

9/1/2011 8:36:31 PM
Gravatar
Total Posts 81
Website Hobbyist and Software Engineer
Proud member of the mojoPortal team
www.doan.me

Re: jPlayer Stylesheet clash

That kind of solution did cross my mind, but I did not like the idea of having another file to maintain on upgrades, not to mention, if I have multiple sites all using different skins they would all have to be updated too. Also, as you stated jPlayer has different skins\themes that can be set up. I think the problem compounds even more when you think about how the skins (CSS files) do not work across different versions of jPlayer. Having to have a jPlayer skin as a "universal" CSS included in every page of mojoPortal could cause issues for other instances that were build around other jPlayer CSS files.

I am kind of new to jQuery, but is this a possible short coming of using common jQuery functionality in a CMS kind of environment like mojoPortal?

It seems to me that some of this might be able to be avoided if mojoPortal were to go away from the "universal" CSS type implementation it currently utilizes. Having a standard "style.css" makes sense for the general overall appearance of the website, but why not guide developers of custom features to add the needed additional CSS files to the Page Header via code as needed. It could avoid some of this crossing of CSS as well as cut down on the amount of CSS that is included with each page. Just a thought.

I think I may have a solution for jPlayer, but need to test it out first. I will let you know how it goes.

Thanks again.

9/2/2011 1:05:05 PM
Gravatar
Total Posts 81
Website Hobbyist and Software Engineer
Proud member of the mojoPortal team
www.doan.me

Re: jPlayer Stylesheet clash

I figured out a pretty easy solution. To see the details, check out my blog post here.

9/3/2011 7:41:13 AM
Gravatar
Total Posts 18439

Re: jPlayer Stylesheet clash

Good solution!

I'll see about updating the version of jplayer included in mojoPortal in the near future.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.