Menu
I'm creating a new Drupal theme.
Until now, I only needed to include a single css file and a single js file. So my theme.info file had something like this:
stylesheets[all][] = css/style.css
scripts[] = js/script.js
Now I must include jquery and jquery-ui in order to use a calendar date. These come with 2 new javascript files, and 1 additonal css file that I must add to the site.
The calendar input form is going to be used in all pages (on a side block) so it is ok for me to load the extra css/javascript on all pages. I think the easiest thing would be to reference them on the .info file itself.
At first I tried to just put them there with separate spaces:
stylesheets[all][] = css/style.css css/ui-lightness/jquery-ui-1.8.1.custom.css
scripts[] = js/script.js js/jquery-1.4.2.min.js js/jquery-ui-1.8.1.custom.min.js
I emptied drupal's cache and... none of them loaded.
I then tried separating each file with a comma, and flushing the cache again. Same result.
I've browsed some drupal pages, but could not find how to add several javascript/css files on one theme (they always seem to add just 1 of each).
So, how do I include several css/javascript files on the .info file?
244
js file is included automatically so you don't need to worry about adding it. To add JS (or CSS) file from form builder function the recommended way is to use Form API #attached property as below, $form['#attached']['js'] = array( drupal_get_path('module', 'ajax_example') .
The general steps for loading assets (CSS/JS) are:Save the CSS or JS to a file. Define a "library", which can contain both CSS and JS files. "Attach" the library to a render array in a hook.
Each file needs it own line like so:
stylesheets[all][] = css/style.css
stylesheets[all][] = css/ui-lightness/jquery-ui-1.8.1.custom.css
scripts[] = js/jquery-1.4.2.min.js
scripts[] = js/reservations.js
scripts[] = js/jquery-ui-1.8.1.custom.min.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
