drupal themes: how do I include several css files / js files on my theme's .info file?


Tags: javascript,css,drupal,themes

Problem :

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?



Solution :

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

    CSS Howto..

    How can I send a Jquery var to be used in a CSS property

    How do I specify another width for newly added divs in javascript

    How to wrap text around image?

    How to select an UNTAG element in CSS

    How to dynamically apply nested base languages in textarea?

    How to detect CSS inheritance source?

    How to make sure the users see the new logo?

    How to set font “ Balzano” to the text in enclosed in

    on my website?

    Ask Toolbar preventing Bootstrap Modal to show

    How to fix image loading time with my image slider?

    How bad is to store all background images in CSS?

    DotNetNuke Skinning: How do I use\add skin.css?

    How to setting a Class in a conditional statement of Javascript?

    How can I make clickable list with sublinks ?

    How is struts finding css files?

    How to include Glyphicons without using Bootstrap CSS

    Large gap between text, how to fix?

    How can I change a table td width using CSS in Spiceworks?

    How to have a bold header text?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How do I install SASS with Mean.io?

    How to create Text Overlays in CSS?

    How to I change this css psuedo button in Javascript/Jquery

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    How to remove the extra space between two span elements?

    How to modify multiple elements of a block with BEM CSS

    How to check for text created by CSS?

    How to create a box having border top width more than content at different browser display size?

    How to overwrite an !important CSS property in jQuery

    How to modify CSS via JQuery