How To Create Custom Skin For jCarousel In Drupal 7

17 Jan · by Tim Kamanin · 3 min read

When you need a fashionable 'carousel'-like module for your Drupal website I bet you will choose jCarousel module (http://drupal.org/project/jcarousel) to fulfill the need. But what if you want to change the default look provided by the module (in 99% of cases, everyone wants this) what will you do? "Tweak a theme css!" - young Drupal geek will say. "No! Make a custom skin for it!" - old Drupal expert will answer. So as you've already guessed, today I will show you how to create custom reusable jCarousel skins for Drupal 7 (well, it may work in Drupal 6 too, I just haven't checked).

Follow my steps:

1. Create a custom module or use your already existing custom module (If this is new for you, read here about how to create custom module for Drupal 7: http://drupal.org/node/1074362).

2. We will use _hook_jcarousel_skin_info()_ to register our new skins with jCariusel! This is as simple as adding this code to your custom_module.module file:

/**
 * Implements hook_jcarousel_skin_info().
 */
function custom_module_jcarousel_skin_info() {
  $skins = array();

  $skins['skin1'] = array(
'title' => t('Skin 1 Title'),
'file' => 'skins/skin1/jcarousel-skin1.css',
  );
  $skins['skin2'] = array(
'title' => t('Skin 2 Title'),
'file' => 'skins/skin2/jcarousel-skin2.css',
  );

  return $skins;
}
  1. Make sure you changed custom_module to your own module name!

  2. Ok, I registered two skins in this hook. I needed two, you can register 1, 2 or 100, it's up to you how many skins you want to add.

5. Variables are self explanatory here but I will explain in case you can't get something:

a) ' skin1' - is a skin id, you can call it whatever you want, but remember it and use it all the time with a skin to omit future confusion.

b) ' title' - Skin's title, that's simple.

c) ' file' - is a path to your skin's css file. The path starts from the root of your module folder. You can use any path structure you want but I recommend you to stick with above mentioned scheme.

  1. Now go to folder where you have jCarousel installed (in my case it is sites/all/modules/contrib/jcarousel ), enter ' skins' folder and copy ' default' folder to your ' custom_module/skins' folder. We will use ' default' skin as a base for our future custom jCarousel skin.

  2. Being in your ' custom_module/skins' directory rename ' default' folder to ' skin1' and do the same with ' jcarousel-default.css' renaming it to ' jcarousel-skin1.css'.

  3. Open ' jcarousel-skin1.css' and replace all occurences of '.jcarousel-skin-default ' to '.jcarousel-skin-skin1 '.

  4. Now you have custom jCarousel skin ready and you can select it in Views and apply to your jCarousel View.

  5. In the end, just change css code in jcarousel-skin1.css file to create a wild or ugly or clean jCarousel skin of your own style.

Want to get more 🔥 tips like this one?

Subscribe to get notified about new dev tutorials

Comments