Patrons  Staff 

  • Search Catalog
BCCLS

76 Public Libraries in NJ's Bergen, Essex, Hudson, and Passaic Counties

 

Mouse over any of the options above to learn more.

Mouse over any of the options above to learn more.

Join the Conversation

Cobalt
News from the BCCLS office

BCCLS Adults
Everything relevant to adult services

BCCLS Events
Learn about events in BCCLS libraries

BCCLS Shelf
Discuss collection development

BCCLS Youth
Everything relevant to youth services

cHQ Chat
Discuss collectionHQ tips, tricks, etc.

Circ Desks
Everything relevant to circulation

Giveaways
Find a home for giveaway items.

Job Share
Job opportunities to share with the public.

Polaris Share
Discuss Polaris tips, tricks, etc.

Surveys
Share your questions with BCCLS

Technical Services
Discuss SkyRiver submissions, linking, processing, etc.

Content Carousel

To place a content carousel on your library's web site, you first need to obtain the relevant code using the Polaris client. When you obtain the code, you have 2 options:

  1. Iframe code
  2. Source code

WARNING: Be careful how many content carousels you place on a single webpage. If you include too many, it will slow down your page's loading time.

Iframe Code

If you use the iframe code option, you cannot modify the appearance of the carousel. Click here for an example of the default carousel. (Unfortunately, at this time the default iframe code option does not support HTTPS for secure connections, and since the BCCLS staff site uses HTTPS, the embedded iframe cannot be shown here.)

Source Code

To use this method, you will need to include several scripts and CSS links within the <head> of your page. By default, the source code provided automatically includes a <link> to the following CSS file:

http://test.bccls.org/ContentXChange/content/shared/styles.css

You may wish to not include this <link> on your page, or include it before you link your own stylesheet, as it could override your web site's styles. The main styles for the content carousels are included within the following CSS file, which also appears as a <link> within the source code automatically provided:

http://test.bccls.org/ContentXChange/content/shared/river.css

If you use the source code option, you can modify the appearance of the carousel in various ways:

  1. Header
  2. Arrows
  3. Links
  4. Author text
  5. Carousel scroll
  6. Carousel width

Here's an example of a finished carousel that has modified all of these options:


To modify the header of your carousel, you will need to modify the CSS for:

.statichead

By default, the style for the header is:


.statichead {

 

    background-color: #DCE2F4;

    color: #444444;

    border-top: solid 1px #B1BCDB;

 

}


If you change the CSS for the header, you can significantly change the overall look of the carousel. For example, if you use the following code:


.statichead {

 

    background-color: #364776;

    color: #ffffff;

    border-top: solid 3px #002060;

    border-bottom: solid 3px #002060;

    font-weight: bold;

 

}


...your carousel will look like this:

Arrows

You can substitute custom arrow images in place of the default arrow images. To do so, you will need to create a set of 4 arrow images:

  1. Inactive left arrow
  2. Inactive right arrow
  3. Active left arrow
  4. Active right arrow

Each of these arrows should use the following dimensions:

  • Width: 35 pixels
  • Height: 96 pixels

Then, you will need to modify the CSS that defines the arrow images.

The basic CSS code that defines the arrow images is:


.river-skin-default .river-prev-horizontal {

    background: transparent url(river-prev.jpg) no-repeat 0 0;

}

 

.river-skin-default .river-next-horizontal {

    background: transparent url(river-next.jpg) no-repeat 0 0;

}

 

.river-skin-default .river-prev-disabled-horizontal, .river-skin-default .river-prev-disabled-horizontal:hover, .river-skin-default .river-prev-disabled-horizontal:active {

    background: transparent url(river-prev-disabled.jpg) no-repeat 0 0;

}

 

.river-skin-default .river-next-disabled-horizontal, .river-skin-default .river-next-disabled-horizontal:hover, .river-skin-default .river-next-disabled-horizontal:active {

    background: transparent url(river-next-disabled.jpg) no-repeat 0 0;

}


In order to replace the default arrow images with your own, you would need to replace each of the jpg images above with the path to your own custom images. For example, if you use the following code (with the images located properly on the BCCLS staff website):


.river-skin-default .river-prev-horizontal {

    background: transparent url(carousel_arrow_previous.jpg) no-repeat 0 0;

}

 

.river-skin-default .river-next-horizontal {

    background: transparent url(carousel_arrow_next.jpg) no-repeat 0 0;

}

 

.river-skin-default .river-prev-disabled-horizontal, .river-skin-default .river-prev-disabled-horizontal:hover, .river-skin-default .river-prev-disabled-horizontal:active {

    background: transparent url(carousel_arrow_previous_disabled.jpg) no-repeat 0 0;

}

 

.river-skin-default .river-next-disabled-horizontal, .river-skin-default .river-next-disabled-horizontal:hover, .river-skin-default .river-next-disabled-horizontal:active {

    background: transparent url(carousel_arrow_next_disabled.jpg) no-repeat 0 0;

}


...the carousel will look like this:

You can modify the style of the links (for the titles) by updating the CSS code.

The default code is:


.river-item a {

    color: navy;

    text-decoration: none;

}

 

.river-item a:visited {

    color: navy;

    text-decoration: none;

}

 

.river-item a:hover, .river-item a:active, .river-item a:focus {

    color: red;

    text-decoration: underline;

}


If you change the CSS for the links, you can significantly change the overall look of the carousel. For example, if you use the following code:


.river-item a {

    color: #ffff00;

    text-decoration: underline;

    font-weight: bold;

}

 

.river-item a:visited {

    color: #ffff00;

    text-decoration: underline;

    font-weight: bold;

}

 

.river-item a:hover, .river-item a:active, .river-item a:focus {

    color: #002060;

    text-decoration: none;

}


...the carousel will look like this:

Author Text

You can modify the style of the author text by updating the CSS code for:

.river-item

The default code is:


.river-item {

    color: black;

}


If you change the CSS for the author text, you can change the overall look of the carousel. For example, if you use the following code:


.river-item {

    color: #666666;

}


...the carousel will look like this:

However, keep in mind that depending on what styles you apply, this may also impact the styling of the title link text. For example, if you were to change the font-style of .river-item to italic, it would also impact the title link text. To prevent the title link text from being italic, you would need to specifically style the title link text to NOT be italic.

For example, in order to make the author text italic, but keep the title link text not italic, you could use the following code:


.river-item {

    color: #666666;

    font-style: italic;

}

 

.river-item a {

    font-style: normal;

}

 

.river-item a:visited {

    font-style: normal;

}

 

.river-item a:hover, .river-item a:active, .river-item a:focus {

    font-style: normal;

}


...and the carousel will look like this:

By default, when you click on the next arrow, the carousel will scroll through 5 titles - basically, it will replace the books currently shown with a new set. However, you can change how many books the carousel scrolls through when you click on the next arrow. To change this, you will need to modify the code that appears within the <body>.

By default, the following line of code is included:


jQuery(DivName).river({ scroll: 5, wrap: 'circular', size: nItems });


To modify how many titles scroll per click, change the "5" to the right of the word "scroll" to the desired number. For example, if you use the following line of code:


jQuery(DivName).river({ scroll: 3, wrap: 'circular', size: nItems });


...the carousel will scroll through 3 titles per click:

This change is particularly important if you decide to change the width of the carousel, as described next. If you change the width of the carousel so that only 3 titles are displayed, for example, you will need to change the number of scroll to 3 or less or some titles will not be displayed within the carousel at all.

By default, 5 titles are displayed within the content carousel. You can change how many titles are displayed by modifying the CSS for the carousel and modifying the carousel scroll as described above.

To retrieve the needed code, please select how many titles you would like displayed:

 

If you have any questions about adding content carousels to your library's web site, please email internetservices @ bccls.org for assistance.