Theme park: a ride in the carousel

Intro

It's easy to change the look of Jcarousel block using CSS.

The Jcarousel plug-in comes with two built-in skins:

• IE7
• Tango

In this how-to we will take the "tango" skin and make some small improvements to it. A common request is to resize the carousel, making it larger.

Let's start

Open this folder "drupal\sites\all\modules\jcarousel_block\jcarousel\skins".

Make a copy of the tango folder and give it a new name. In this example, we will call it "doomed'' .
Run your favorite HTML/CSS editor and load the file "skin.css" from that new folder.

It is important to substitute every "tango" instance with the name you picked for the new skin folder.

In this example, you will be replacing everything in that file with the code shown below.

The CSS file

/* Based on tango skin - small modifications only - IAR march 2009 */

.jcarousel-skin-doomed .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

/* Size of the carousel, as a whole: */
.jcarousel-skin-doomed .jcarousel-container-horizontal {
    width: 400px; /* original value 245 - modified by IAR */
    padding: 20px 40px;
}

.jcarousel-skin-doomed .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

/* Area where the thumbnails go into: */
.jcarousel-skin-doomed .jcarousel-clip-horizontal {
    width:  400px; /* original value 245 - modified by IAR */
    height: 90px; /* original value 75 - modified by IAR */
}

.jcarousel-skin-doomed .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

/* Actual space reserved for each thumbnail: */
.jcarousel-skin-doomed .jcarousel-item {
    width: 100px; /* original value 75 - modified by IAR */
    height: 90px; /* original value 75 - modified by IAR */
}

/* Space between thumbnails: */
.jcarousel-skin-doomed .jcarousel-item-horizontal {
    margin-right: 20px; /* original value 10 - modified by IAR */
}

.jcarousel-skin-doomed .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-doomed .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-doomed .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-doomed .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-doomed .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-doomed .jcarousel-next-disabled-horizontal,
.jcarousel-skin-doomed .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-doomed .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-doomed .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-doomed .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-doomed .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-doomed .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-doomed .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-doomed .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-doomed .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-doomed .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-doomed .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-doomed .jcarousel-next-disabled-vertical,
.jcarousel-skin-doomed .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-doomed .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-doomed .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-doomed .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-doomed .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-doomed .jcarousel-prev-disabled-vertical,
.jcarousel-skin-doomed .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-doomed .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

The modifications are commented so you can understand what was changed. And help you, in case newer versions of the module have slightly different css files.


Don't forget: Go to your Drupal Administration / Site Configuration / Jcarousel block ( http://example.com/admin/settings/jcarousel_block ) and at the bottom of the page, change "skin to use:" to "doomed" (that's the name we picked on the example).

Before and After:

Here's a screenshot with both the original and the modified carousel - http://img9.imageshack.us/my.php?image=jcarouselblockbeforeand.png

The theme in the screenshot is Efficient from www.themesnap.com but this also works well with Bluemarine and Garland.

Additional notes

You will notice every thumbnail inside the carousel is 100px wide and no matter what you put in your skin.css file, that won't change.

Unfortunately there's no pretty way to fix this.

Read more: http://drupal.org/node/326572#comment-1522900