0

I started using the datepicker from jquery. I noticed that by default it uses the provided theme in /core/assets/vendor/jquery.ui/themes/base/theme.css and /core/assets/vendor/jquery.ui/themes/base/datepicker.css.

There seems to be only the base theme available.

How can I create my own theme and tell drupal to use my jquery ui theme?

Ideally I would like to be able to select the jquery ui theme from a custom Drupal theme. This way I would be able to change automatically the jquery ui theme from the Appearance menu by changing the theme and use the existing overriding system if I have a sub theme inheriting from that theme.

1

Use libraries-override in mytheme.info.yml.

These are examples from test_theme.info.yml:

libraries-override:
  # Replace an entire library.
  core/drupal.collapse: test_theme/collapse
  # Remove an entire library.
  core/drupal.progress: false
  # Replace particular library assets.
  classy/base:
    css:
      component:
        css/components/button.css: css/my-button.css
        css/components/collapse-processed.css: css/my-collapse-processed.css
        css/components/container-inline.css: /themes/my_theme/css/my-container-inline.css
        css/components/details.css: /themes/my_theme/css/my-details.css
  # Remove particular library assets.
  classy/dialog:
    css:
      component:
        css/components/dialog.css: false
  # It works for JS as well.
  core/jquery:
    js:
      assets/vendor/jquery/jquery.min.js: js/collapse.js
  # Use Drupal-relative paths.
  core/drupal.dropbutton:
    css:
      component:
        /core/themes/stable/css/core/dropbutton/dropbutton.css: /themes/my_theme/css/dropbutton.css
  # Use stream wrappers.
  core/drupal.vertical-tabs:
    css:
      component:
        /core/themes/stable/css/core/vertical-tabs.css: public://my_css/vertical-tabs.css
  # Use a protocol-relative URI.
  core/jquery.ui:
    css:
      component:
        assets/vendor/jquery.ui/themes/base/core.css: //my-server/my_theme/css/jquery_ui.css
  # Use an absolute URI.
  core/jquery.farbtastic:
    css:
      component:
        assets/vendor/farbtastic/farbtastic.css: http://example.com/my_theme/css/farbtastic.css

Reference: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme See subsection Overriding and extending libraries

  • Yes that worked with libraries-override: core/jquery.ui.datepicker: css: component: assets/vendor/jquery.ui/themes/base/datepicker.css: css/jquery.ui/datepicker.css in my base theme .info.yml . Note that I had it at the end of my file, right after the region definitions and it didn't work. I moved the lines right under the libraries: definition and it worked! – Guillaume Bois Dec 7 '16 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.