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;
}3. Make sure you changed custom_module to your own module name!
4. 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.
6. 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.
7. 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’.
8. Open ‘jcarousel-skin1.css’ and replace all occurences of ‘.jcarousel-skin-default’ to ‘.jcarousel-skin-skin1’.
9. Now you have custom jCarousel skin ready and you can select it in Views and apply to your jCarousel View.
10. 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
Submitted by Johan van grieken on Wed, 01/18/2012 - 16:16
thanks for this great post !
Submitted by Elliot on Tue, 03/27/2012 - 11:55
This post was very helpful, thank you!
Submitted by Rich on Wed, 04/11/2012 - 11:20
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.
Submitted by Tim on Tue, 04/17/2012 - 15:32
No, you should create your own custom module. I don't support hacking of any contributed modules.
Submitted by Amnon on Sun, 04/15/2012 - 10:06
Important noteL the cache must be cleared after adding the tiny module function for the style to be available.
Submitted by Ali on Mon, 04/16/2012 - 10:18
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
Submitted by Tim on Tue, 04/17/2012 - 15:32
Try to clear caches
Submitted by Tunox on Tue, 06/26/2012 - 23:57
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!
Submitted by Tim on Fri, 06/29/2012 - 14:53
Glad my tutorial was helpful :)
Submitted by Dan Moriarty on Thu, 08/09/2012 - 01:07
Thanks for the help, worked great.
Submitted by cueto on Fri, 08/31/2012 - 14:43
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
Submitted by gary on Fri, 10/12/2012 - 01:24
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
Submitted by walter on Sat, 03/16/2013 - 11:01
Just wondering if someone knows a similar way to create skins(styles) for the superfish module (http://drupal.org/project/superfish)
thanks.
Submitted by Alba on Mon, 04/15/2013 - 12:13
Thank you very much. I'm so happy after created my first drupal module (and to have my own skin for jcarousel, of course!).
Submitted by sankar on Mon, 04/22/2013 - 08:53
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 ....
Add new comment