By BlueDragon-1 on

I'm a pretty noob in Drupal as well as in jquery. My knowledge in html is average and in css rather little. In php I can copy / paste a code snippet but not much more until now.

So I've been trying everything out for a couple of days to simply get some jquery script working as desired in Drupal 7. I started with a simple accordion snippet and I finally managed to have it work. (Maybe it's something to obvious for having some guys writing a understandable 'how to' about it for dummy newbies...)

Now my problem is that the original style is absolutely horrible and it does not fit at all in my website theme so I wanted to tweak it somehow. With Drupal this is something apparently very komplex to do. With Firebug I could localise the css files and I could modify parts of it to change the accordion style but I think it would be much more comfortable to use the ThemeRoller and it's personalized css file(s).

I have been trying to paste the code of the jquery example page (within the personalized custom zip made with ThemeRoller) in my drupal node (using the php module and text format since this was my first big mistake) as well as to put the needed files (jquery-ui-1.8.11.custom.css, jquery-ui-1.8.11.custom.min.js and jquery-1.5.1.min.js) in the proper directories on the webserver. I think the files are loaded correctly but the css modifies all the style of the node (not only the accordion) and the accordion is only partially styled as it should. It seems like a nice mix with the drupal (Bartik) css and maybe the cascade does not go in the needed direction.

I searched quite a lot about it but could only find posts from other people like me trying to have it work as desired and not answers. I cannot imagine that I am the only one having this problem?!

Could someone please help me out to find the needed solution.

Thanks a lot!!

⋅ Categories: Drupal 7.x

Comments

BlueDragon-1’s picture

BlueDragon-1 commented

Here is a solution for those interested:
http://forum.jquery.com/topic/how-to-simply-integrate-a-customized-jquer...

Anly Dcouth’s picture

Anly Dcouth commented

can someone help me in understanding how to integrate jquery for draggable sitemap in drupal7.8????? i ve just copied the code(jquery plugin) n saved it in misc/ui as a *.js file. But I am unable to drag or drop the sitemap elements...
I am new to jquery, drupal and php...
pls let me know if anybody has worked on t!!!
if ur free to chat , contact me thro gtalk : dancingtatsgrt@gmail.com

jghyde’s picture

jghyde commented

In your template.php:

Assume your theme's name is THEMENAME (change it to your theme's name).

You place the jquery-ui-1.8.17.custom.css file you downloaded from the jQuery Themeroller app thus:
[THEMENAME folder]/css/jquery.ui/jquery-ui-1.8.17.custom.css

And the corresponding images folder is placed such:
[THEMENAME folder]/css/jquery.ui/images

Here's the code:

<?php
/**
 * implements hook_css_alter()
 */
function THEMENAME_css_alter(&$css) {
  // Installs the jquery.ui themeroller theme to the theme.
  if (isset($css['misc/ui/jquery.ui.theme.css'])) {
    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'THEMENAME') . '/css/jquery.ui/jquery-ui-1.8.17.custom.css';
  }
}

?>

Now, when you use jQuery UI, the new css will appear.

Joe Hyde
Freelancing from Texas

Local News Platform Built on Drupal
http://sanangelolive.com/

alltooeasy’s picture

alltooeasy commented

http://drupal.org/node/1551640#comment-6002206

Joe Hyde - can you have a look at our solution and see if it also works.
Why do you need the template.php?

Also can't this be done with the Theme.info file in Omega. Since essentially your just calling another CSS file and images as the relevant Jquery-ui.js is already inside Drupal 7.

Soz to bother, just want to make sure A) we're not being naughty, B) not leading people down the garden path.

Seems to work for us but was wondering the pros/cons of doing it via a tpl.

jghyde’s picture

jghyde commented

I can't really comment on the simplicity of your method because I can't simply figure out what your method is (-;

The Drupal Gods created a template.php, and in my opinion, we should use it.

Local News Platform Built on Drupal
http://sanangelolive.com/

DRIVE’s picture

DRIVE commented

Thanks for the function. In my case, I wanted to segment and specify it a little bit more:

/**
 * implements hook_css_alter()
 */
function THEMENAME_css_alter(&$css) {
  // Installs the jquery.ui themeroller theme to the theme.
  if (isset($css['misc/ui/jquery.ui.theme.css'])) {
    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'THEMENAME') . '/css/jquery.ui/jquery-ui-1.12.1.orange/jquery-ui.min.css';
  }
}