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.

Comments

Required for comment verification



DonQuijote

hi.... great work tim - thank you i followed your instructions and everthing works fine, if the views-format is jCarousel. but i am using slideshow as format and i want the new skins to be available in the pager-section. the skins do not show up there. any idea...? thank you for your helb Don

Reply · 5 years, 11 months ago
Joe

Hi, Not sure if this is your problem. But don't forget the opening php tag at the start of the module file.

Reply · 5 years, 11 months ago
b.one

Hi, This is the first time I try to make a custom module, and I've got an issue. u created a new module just as the tutorial you give (http://drupal.org/node/1074362) and I follow your instructions step by step, but when I want to activate the module, I got a blank page where nothing happens, with this url : admin/modules/list/confirm. I check many times to see if I didnt something wrong, but I'm quite sure not. Any idea ?

Reply · 5 years, 11 months ago
Alex

I found a better way to get more skins without having to create anything else, I just edit the file "jcarousel.module" in the plugin folder, and I just add to the existing array the new skin name and folder roots. And that's it

Reply · 5 years, 11 months ago
Tyler Frankenstein

Thanks Tim. From past experience I was dreading making a jCarousel with a custom skin. This tutorial smashed the dread, and plopped out a nice custom skin!

Reply · 5 years, 11 months ago
Adrien

Hi ! Just one thing, in case some people like me are spending time looking how to add the skin to their view: 1 - Go to your view > Format > jCarousel | Settings (click Settings) 2 - Select the skins. This part wasn't clear to me. Thanks. Adrien

Reply · 5 years, 11 months ago
sankar

simply superb. am trying to hack the code for one day. but nothing i get, when i seen the post. i diid in 5 minutes. thank u so much for the wonderful post ....

Reply · 5 years, 11 months ago
Alba

Thank you very much. I'm so happy after created my first drupal module (and to have my own skin for jcarousel, of course!).

Reply · 5 years, 11 months ago
walter

Just wondering if someone knows a similar way to create skins(styles) for the superfish module (http://drupal.org/project/superfish) thanks.

Reply · 5 years, 11 months ago
gary

For anyone experiencing the same problem I had getting this to work: I copied the Tango skin from the jacarousel/skins/ folder I placed and pathed my css file inside my new module in the following manner: skins/custom_name/jcarousel-custom_name.css AND I did a find and replace inside my jcarousel-custom_name.css file. FIND tango and REPLACE with custom_name

Reply · 5 years, 11 months ago
cueto

I've seen the tutorial, and I've done everything but the views of, and I do not use that module, try it in a tpl but I recognize the css

Reply · 5 years, 11 months ago
Dan Moriarty

Thanks for the help, worked great.

Reply · 5 years, 11 months ago
Tunox

Tim thanks a bunch for this tutorial. Very easy to follow and the results are just perfect. Head on at the first try :) Btw although very basic and no personal merit is involved beyond copy/paste, I'm pleased that today I finally built the first drupal module! Yesss!

Reply · 5 years, 11 months ago
Ali

Mine doesn't work and show up in Views. I'm assuming that custom_module.module file doesn't contain any other code besides the one mentioned above. I've checked everything else in .info but I don't seem to understand what's wrong. Please help! This is my .info file: name = Bottom Banner description = meh core = 7.x files[] = bbanner.module

Reply · 5 years, 11 months ago
Amnon

Important noteL the cache must be cleared after adding the tiny module function for the style to be available.

Reply · 5 years, 11 months ago
Rich

Great article! My only cringe is that I assume we HAVE to put our custom skins in the jcarousel module? That just seems so wrong, even if it isn't modifying an existing file. So many times I have wiped out an official module's directory (one from drupal.org/project) to upgrade it...and that means the skins module gets nuked. Is there absolutely no way to get the path to be in your own module's directory? Can you at least use the path "../custom/custom_module/skins/skin1/jcarousel-skin1.css" (where "../" takes you back to the "sites/all/modules" folder)? I never tried that, but makes more sense to have it IN the custom module you made the hook, no? Also, how do I get your custom module you show a screen shot of? I'm still not up for the task of figuring out all the colors and graphics, yet yours is kind of what I'm shooting for, haha...but don't mean to be a leach.

Reply · 5 years, 11 months ago
Elliot

This post was very helpful, thank you!

Reply · 5 years, 11 months ago
Johan van grieken

thanks for this great post !

Reply · 5 years, 11 months ago