Basics 1T (Dark)

< Carousel 1 >

Basics 1T - Theming (Dark)

To customize the look-and-feel of a carousel, you can change the colors of the title bar and the content body from the default black and gray to whatever you like.

Here's an example of a dark style with a custom style for ordered lists.

Usage:

To change the title bar, override the .panther-Carousel-panelTitleBar style.


.panther-Carousel-panelTitleBar {
    background: #111;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3C3C3C), to(#111));
    background-image: -webkit-linear-gradient(#3C3C3C, #111);
    background-image: -moz-linear-gradient(#3C3C3C, #111);
    background-image: -ms-linear-gradient(#3C3C3C, #111);
    background-image: -o-linear-gradient(#3C3C3C, #111);
    background-image: linear-gradient(#3C3C3C, #111);
    border: 1px solid #333;
    color: #FFF;
}

To make our ordered lists stand out on a dark background, we can use the CSS counter properties to inject our own style for the numbers.


ol {
    counter-reset: li;
    margin-left: 0;
    padding-left: 0;
}

ol > li {
    list-style: none;
}

ol > li:before {
    content: counter(li);
    counter-increment: li;

    border-top: 2px solid #e71e1e;
    margin-top: -2px;
    margin-right: 5px;
    padding: 10px;

    background-color: #e71e1e;
    background-image: -webkit-linear-gradient(top, #e71e1e 0, #c71a1a 100%);
    background-image: linear-gradient(to bottom, #e71e1e 0, #c71a1a 100%);
    border-radius: 0 0 5px 5px;
    color: #fff;
}

To change the carousel body color, add a backgroundColor attribute.


Panther.Carousel.init({
    id: 'carousel1',
    backgroundColor: 'rgba(34, 34, 34, 1)'
});

< 2 >

The quick brown fox jumps over the lazy dog.

< 3 >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui orci, convallis sed nisi et, elementum aliquet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla volutpat mi vel lorem tempus, ut placerat dui dignissim. In tellus neque, auctor vitae tincidunt ut, feugiat quis turpis. Sed vel sodales orci, eu laoreet nunc. Quisque in ipsum in ligula porta lacinia. Donec vitae augue eu mi ultrices volutpat eu quis neque. Ut id rutrum orci, at tincidunt quam. Aenean suscipit ullamcorper convallis. Ut dapibus mauris vulputate ultricies eleifend. Sed vitae tincidunt nunc. Nullam volutpat, eros tempus rutrum blandit, turpis nisl vulputate lectus, sit amet elementum enim purus non risus. Vivamus sagittis quis metus ac vulputate. Vivamus in ante in mauris rhoncus bibendum at in metus.

< 4 >

Proin accumsan felis vehicula tempus tempor. Morbi ultricies commodo ligula, sed imperdiet orci euismod tempus. Curabitur fermentum magna diam, eget convallis ipsum molestie id. Suspendisse pulvinar vitae quam non feugiat. Sed eu euismod velit. Mauris porta, risus quis ultricies tincidunt, est sem lobortis felis, vel laoreet neque lorem tristique mi. Maecenas quis purus in sem tempor auctor et vel tortor. Suspendisse sit amet ligula lorem. Suspendisse nunc turpis, iaculis nec iaculis quis, commodo ut orci. Sed ac lorem est. Nam eget iaculis lorem. Nunc dapibus vitae nunc tempus accumsan. Ut tempor venenatis mi, eu blandit est facilisis id. Sed nec felis fermentum, congue lectus eget, gravida nunc.

Vestibulum vel aliquam dui, vel convallis eros. Aenean aliquet ligula non interdum egestas. Sed porta consequat molestie. Pellentesque mollis velit lectus, in pellentesque metus luctus sed. Aenean in odio sed est placerat vehicula ac non urna. Vestibulum in magna sit amet felis rutrum rutrum. Vestibulum metus orci, suscipit feugiat odio ut, tincidunt pharetra turpis. Cras pellentesque mi dolor, eget viverra mi pretium vitae. Duis consequat tortor ac metus cursus, quis porttitor sem rutrum. Vivamus nunc enim, volutpat id consequat in, aliquam et diam. Praesent congue orci eget elementum scelerisque. Suspendisse sagittis, erat a sagittis luctus, libero ipsum scelerisque sapien, sed sodales diam risus at metus.

Suspendisse hendrerit, enim eget mattis malesuada, lorem velit aliquet risus, eu mattis dolor arcu ut ligula. Mauris rutrum nibh in nisl tincidunt, quis pulvinar arcu mattis. Suspendisse pharetra et lectus et tincidunt. Aenean a massa ut odio facilisis malesuada in non orci. Aliquam vulputate erat aliquet, ultricies dui ac, ultrices sem. Cras suscipit leo eu urna convallis aliquet. Ut eget eros ac sapien luctus dapibus varius nec nunc. Vestibulum quis felis tortor.

Etiam sem nisi, semper vel erat id, venenatis facilisis orci. Fusce varius augue vitae nisl aliquam, vel fringilla orci egestas. Curabitur eros magna, pulvinar vitae vestibulum molestie, consequat vel turpis. Suspendisse pulvinar dignissim fringilla. Donec in dolor lacinia arcu congue viverra. Etiam tempus felis ut gravida euismod. Sed tristique laoreet ultrices. Suspendisse luctus nisi nec odio elementum consequat. Maecenas pulvinar dignissim turpis, ac posuere massa eleifend non.