Customizable CSS and JS

Do this do themes that are in sites/all/themes? As this is the standard place to put Drupal Themes?

Would it be possible to apply these patches to the git, please?

There's another solution. No patch needed (except for THEMING.txt).

Override jplayer.css

In your theme, add MYTHEME_preprocess_jplayer function to template.php and and the CSS you want for jplayer.

Here's what it looks like :

function MYTHEME_preprocess_jplayer(&$variables, $hook) {
  drupal_add_css(path_to_theme() . '/css/jplayer.css',  array('type' => 'file', 'group' => CSS_THEME));
}

The two important things are that :

• the name of the CSS file have to be jplayer.css if you want to replace the CSS of the jplayer module.
• the 'group' have to be CSS_THEME otherwise it is not sure that the CSS will be replaced.

In my opinion this is more complicated than just add a CSS to your theme but the advantages are that :

• you can add your css where you want in your theme,
• you can replace the CSS or just add another CSS to the default. In this last case, use a different name that jplayer.css
• this is more drupal

Override jplayer.js

For JS this is a little bit more complicated. If you just want to add some JS to the defaults, you just have to add this to your template.php :

function MYTHEME_preprocess_jplayer(&$variables, $hook) {
  drupal_add_js(path_to_theme() . '/jplayer.js',  array('type' => 'file', 'scope' => 'footer', 'group' => JS_THEME));
}

But if you want to replace the default JS module file, you'll have to alter the js in your template.php too :

function MYTHEME_preprocess_jplayer(&$variables, $hook) {
  drupal_add_js(path_to_theme() . '/jplayer.js',  array('type' => 'file', 'scope' => 'footer', 'group' => JS_THEME));
}

function MYTHEME_js_alter(&$javascript) {
  unset($javascript[drupal_get_path('module', 'jplayer') . '/theme/jplayer.js']);
}

Unlike drupal_add_css, drupal_add_js won't replace jplayer.js even if this is the same name than the module default JS.

Another simplest solution ;)

Case 1: I want to replace the jplayer CSS and/or JS by my own

I replace $variables['dynamic']['#attached']['css'] and/or $variables['dynamic']['#attached']['js'] by mine in template.php.

function MYTHEME_preprocess_jplayer(&$variables, $hook) {
  // Replace jplayer default CSS
  $variables['dynamic']['#attached']['css'] = array(path_to_theme() . '/css/jplayer.css' =>  array('type' => 'file', 'group' => CSS_THEME), );
  // Replace jplayer default JS
  $variables['dynamic']['#attached']['js'] = array(path_to_theme() . '/js/jplayer.js' => array('type' => 'file', 'scope' => 'footer', 'group' => JS_THEME), );
}

Case 2: I want to add my own CSS or JS to jplayer's one

I add my JS and/or CSS with drupal_add_js and drupal_add_css drupal functions in template.php. Attention: CSS file name MUST be different than "jplayer.css" used by the module otherwise it will replace the module CSS file.

function MYTHEME_preprocess_jplayer(&$variables, $hook) {
  // Add my CSS to the jplayer default (CSS file name MUST be different than "jplayer.css" used by the module)
  drupal_add_css(path_to_theme() . '/css/MYTHEME_jplayer.css',  array('type' => 'file', 'group' => CSS_THEME));
  // Add my JS to the jplayer default (JS file name can be the same than the module)
  drupal_add_js(path_to_theme() . '/js/jplayer.js',  array('type' => 'file', 'scope' => 'footer', 'group' => JS_THEME));
}

I've noticed that the D7 version ins't skinnable as per instructions. This patch appears to resolve my problem.

This needs to get committed, or the documentation needs to get changed to say "You can't skin this currently with out hacking the module" :D

I don't think the patch in #1 is required, though the documentation should be updated. To add CSS and JS, you need to modify your theme's info file:

https://drupal.org/node/263967
https://drupal.org/node/171213

To replace JavaScript code, you add your JS file in the info file, and reassign Drupal.behaviors.* as required.

How does this look for a docs update?

In 'overriding css theme' i don't understand where i put the css of custom theme. Can i create more theme folder for each css file?
For exemple:

css/theme_1/jplayer.css
css/theme_2/jplayer.css
css/theme_3/jplayer.css

In this mode is it possible switch the module theme for each view? I would like to decide the theme for teaser and full content.

Thanks for your ideas!

I personally think, having the option into the display formatter would suit us all better and leave more options to the user depending on the view.

I would suggest placing all the themes into sites/all/libraries/jplayer/themes/yourthemes

And the display formatter would be looking for the themes at that location, and would allow you to use the jplayer themes in different themes of your sites rather than having to code everything for each themes you have.

+1 !

I wasn't able to get these suggestions to work for my Omega 7.x-3.x subtheme. What did work for me:

1. Copy jplayer custom css and images into a folder in my theme, i.e MYTHEME/jplayer/myskin
2. Copy region--content.tpl into your custom theme
3. In MYTHEME/preprocess/preprocess-page.inc, add:

function MYTHEME_alpha_preprocess_page(&$vars) {
  drupal_add_css(drupal_get_path('theme', 'MYTHEME') . '/jplayer/skin-dark/jplayer.dark.css',  array('type' => 'file', 'group' => CSS_THEME));
}

While nikosnikos solution #5 works, if I simply want to add additional CSS or JS to override things in jplayer, this is fairly standard practice.

But to outright override the js file, for example, by replacement shouldn't require a bunch of programming instructions in the README, and in my opinion simply pointing them to http://drupal.org/node/171213 per deviantintegral is a cop-out. We want Drupal to be less obtuse--not more--to foster adoption.

The original thinking behind the README for how an override should work I think is sound and the best overall solution, and ywarnier has already offered that solution. I agree with j0rd. ywarnier's patch works as described and intended and should be committed.

If there were to be a change to ywarnier's patch, I would agree with webadpro in comment #10.

Otherwise, please commit.

The issue I have with the patch in #1 is that it provides a different method for doing the formatter theming than most other field modules, and what core itself does. It might seem simpler for this module itself, but then all of that process has to be thrown out when theming some other field provided by some other module.

I think there are two cases:

1. Your jPlayer theming is site (or theme) specific, in which case the directions shown in #5 will work fine.
2. The display isn't theme specific, and should be a custom display formatter. In which case, the code should be a module (so it can be reused) following something similar to this guide or perhaps using the Custom Formatters module.

If there are other modules in widespread use that I'm not aware of, and are doing something similar to what's proposed in #1 and #10, and placing display formatter CSS in a common theme or library directory, I'd be OK with committing a solution along those lines. Let's just make sure we're not implementing a one-off solution.

Patch to Documentation, that adds some detail and points to support documentation for how to override the css and js files.

!code raid

~webthingee

I reworked the patch to wrap at 80 lines as well as fix some minor style issues. It's committed as 665eb1a.

I don't think this was ever committed and it looks like the patch is too late for 2.0-beta1 as the function has changed. Also, solution #5 did not work for me.
If I can find the time maybe I'll write a patch.

The documentation patch #15did help. Please add this.

@deviantintegral i saw the documentation patch applied but when I declare my custom jplayer.js in my theme.info, the page then load 2 jplayer.js (my custom one is loaded first, and then the jplayer.js from the module which loads in the footer).

As the original jplayer.js is loaded last it isn't overrided.
What would be the solution to avoid this situation ? Thank you.

Closing as this has been committed. Thanks