Community
Support » Theme development

Using javascript files to design a theme

Posted by alari24 on October 4, 2012 at 11:28am

Hello.

I am pretty new to Drupal and i have started using Drupal 7.
I received a bunch of JScript script files in two different folders for a totalt of 15 different files. ( 7 in one folder and 8 in the other ) I DID NOT CODE THEM. There are a couple of picture files in there as well for a total of 3 pictures.
I wished to use the files in Drupal 7 to create the look and functions created in these 15 files. So here is my question.
How can i do it? Can i just take an already created theme ( bartik for example ) and somehow throw some code lines into the template.php or some other file so it takes the design and functions from the javascript files. Help would be appreciated.
Thanks!

Login or register to post comments ⋅ Categories: ,

Comments

You need to look into

Posted by chadpeppers on October 5, 2012 at 1:22pm

You need to look into creating a new theme or adding those javascript files to the .info folder. So in the themes folder there should be a .info file, such as bartik.info and you would need to put those js in that theme folder then reference them. Its not a good idea to change the main themes but use a subtheme instead.

Here is an example .info file

name = Desc
description = Desc custom theme
package = Core
version = VERSION
core = 7.x

stylesheets[all][] = _assets/css/app.css
stylesheets[all][] = _assets/css/flexslider.css

scripts[] = _assets/js/modernizr.js
scripts[] = _assets/js/plugins.js
scripts[] = _assets/js/app.js
scripts[] = _assets/css/fonts.js

regions[header] = Header
regions[subnav] = SubNav
regions[precontent] = Precontent
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[prefooter] = Prefooter
regions[footer] = Footer

Add those files to the scripts[] =

http://drupal.org/documentation/theme

http://drupal.org/node/225125

Not only strike while the iron is hot, but make it hot by striking.

Try starting with the Stark theme

Posted by douggough@drupal.org on October 5, 2012 at 3:35pm

Drupal 7 ships with a theme called Stark, which is very minimal. I'd start there.

  1. Copy the stark folder to sites/default/themes/stark
  2. Change the folder name, name of the info file, and all references to 'stark' within the info file to something else ie myjstheme
  3. Add a folder named js inside the newly renamed theme folder ie sites/default/themes/myjstheme/js
  4. Put the two custom javascript folders inside the js folder ie sites/default/themes/myjstheme/js/folder1. Same for folder 2.
  5. Inside the myjstheme.info file, add a new scripts[] declaration for each of your custom javascript files like this:
    • scripts[] = js/folder1/nameofscript1.js
    • scripts[] = js/folder2/nameofscript2.js
    • etc etc until you've declared all custom javascript files
  6. Install the devel module, and set it up to reload the theme registry on every page load
  7. Make the theme active and clear your cache
  8. Load your home page and see what happens

That's how I'd get started. Once the site loads with your new Stark-based theme, you can use the Firebug plugin in Firefox to start debugging. I can almost guarantee that this won't just start working. You'll have a lot of work ahead of you to get things functioning properly.

Doug Gough - Drupal Specialist

nobody click here