Customize Carousel Dimensions and Placements via CSS

From IThemes Codex
Revision as of 13:59, July 16, 2013 by Elise (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Sometimes, Carousel shows everything properly BUT your image dimensions may result in more or fewer images being shown. This can be fixed by selecting the proper size or number of images.

You can also customize the entire Carousel Display via CSS. The following CSS code template can be used to customized to your own needs. You need to add this css to your theme's css file at the very end.

  • Remember: the following will change the styling for ALL Carousels on your site EXCEPT the first #pb_carousel-1 part, which (only that part) will work only on the 1st Carousel (Carousel whose shortcode is 1).
#pb_carousel-1 { /* Controls the actual Carousel in question. In this example, it is Carousel 1. You can find the Carousel number in the shortcode in your Carousel admin panel */
     left: 90px ! important;
     width: 960px ! important;

.pb_carousel_default { /* Controls the width of the actual Carousel - this is usually always changed, if you want, with the actual Carousel */
     width: 960px ! important;

.caroufredsel_wrapper #pb_carousel-1 { /* controls the entire Carousel wrapper */
     width: 960px ! important;

#pb_carousel_prev-1 { /* controls the Carousel's previous left button */
     left: 30px;
     top: 65px;

#pb_carousel_next-1 { /* controls the Carousel's next right button */
     right: 30px;
     top: 65px;
#pb_carousel_pag-1 { /* controls the Carousel's bottom navigational buttons */
margin-top: 10px !important;

← Back to Carousel Codex Home

Personal tools
iThemes Codex
Codex Navigation