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.
P.S. I came to something like this:
Comments
Submitted by Johan van grieken on Wed, 01/18/2012 - 16:16
thanks for this great post !
Add new comment