Using Custom Skins for jCarousel in Drupal

jCarousel is a very nice slide show plug-in for jQuery. There is also a Drupal module for jCarousel.

Using jCarousel in Drupal is quite easy. After enabling jCarousel module, you just assign an ID to a list and call a PHP function jcarousel_add('#your-list-id') in your theme file or somewhere like a view's header (don't for get to choose PHP input).

But what if you want to create your own skin for jCarousel? It can be quite confusing for those who don't code much (or enough - like me) so I will explain here step by step.

  1. You have to know that the function jcarousel_add() can take up to 4 parameters (I couldn't find this in the jCarousel module's help page so I looked in the jcarousel.module file itself), $selector, $options, $skin, and $skin_path.
  2. $selector is your jQuery selector for the list you want to enable jCarousel. $options is an associative array for jCarousel configuration. The details are here. $skin is the skin name. $skin_path is your custom skin's css file path (it has to be an internal path such as "sites/all/modules/jcarousel/jcarousel/skins/tango/skin.css" for Tango skin).
  3. You need to create a wrapper element, such as div, with class="jcarousel-skin-skin_name" for your jCarousel-enabled list.
  4. You may copy and modify skin.css from the existing skins (tango or ie7). Don't forget to change the class selector .jcarousel-skin-tango or .jcarousel-skin-ie7 to your own one. This is where I got stuck -_-".
  5. Make sure that your $skin_path is correct and enjoy theming. :D

Overriding Drupal Views with .tpl.php Files

After being away from customising Drupal for a while, I have forgotten in some details about how to override (or customise) Views using my own .tpl.php files.

In my opinion, overriding Views this way is very comfortable because you just put a template file with a specific name in the theme's directory and let Drupal scan for this new template and that's it!

Beforehand, you need to know that specific name of your .tpl.php file. You have to take a look at "Theme: Information" in "Basic Settings" in the View edit page. Decide which kind of overriding you need here. The file names are ordered by level of specification.

You will find a button labeled "Rescan template files" here. You will need to activate your newly-created template file(s) here again in the future.

Then you can create your own .tpl.php file(s) now. You may wonder how your template file will look like. This is also where I got stuck - and got motivation to write this entry :)

The clue is that you can find all the default Views in the Views module's directory itself. In my case it's /sites/all/modules/views/theme. Copy what you need and enjoy theming :D

One solution for "Javascript is required to view this map." in Drupal 6 GMap module

I've been using GMap module for Drupal 6 for a while. Once I changed the theme from Garland to my own. The map page said only "Javascript is required to view this map".

I googled and found that I should include a javascript tag via drupal_add_js() function, but the scripts are already there when I did view source. Comparing with the working source, the missing piece is

<script src="http://maps.google.com/maps?SOME_VALUE" type="text/javascript"></script>

which is not included in a Drupal variable $script.

After comparing the page.tpl.php of the two themes line-by-line, the problem is that there was no $head in my new theme. I just inserted

<?php print $head ?>

before the line

<?php print $styles ?>

and the map appears.

Creating Tabbed Views in Drupal 6

As a Drupal newbie, I am always confused with its simple mechanisms, such as routing and menus. I just spent about an hour figuring out how to create a view with tabs that lead to more specific lists of data, for example, in 'document' page there are three tabs, one is 'all' which is the default display listing all contents, one is 'homework' leading to a path 'document/homework', and the last one is 'report' leading to 'document/report'.

'document' page - tab 'all' -> 'document/all' - tab 'homework' -> 'document/homework' - tab 'report' -> 'document/report'

After 30 minutes of googling, I found this (and yelled 'Eureka'), Tutorial #3: Create two tabs to sort taxonomy view alphabetically and by created time. The method is quite simple but Drupal gave me no clues or I made a poor search (or I was so n00b that I didn't know these things before).

Well, the way is:

  1. Create a view.
  2. Name the path (url) to be what you want the default tab to be, for example, 'document/all'.
  3. Configure your view with sorting, filtering, etc.
  4. Choose 'Default menu tab' in Menu option and name it.
  5. Choose 'Normal menu item' to be the parent, since this tab is linked directly from a menu, i.e. 'document'
  6. Finish this first tab.
  7. Create another display.
  8. Name the path of this one as a tab option, like 'document/homework'.
  9. Configure it.
  10. Choose 'Menu tab' for this one.
  11. Finish this tab.
  12. Repeat (8) - (11) for more tabs.

That's it. Simple, huh? Please leave a comment if there's any mistake above.

Subscribe to drupal