Customization of Wonderplugin Carousel Style

My customer used the Wonderplugin Carousel to display his team. We then adjusted the style to resemble other elements used on the page.

carousel_beforecarousel_after

 

 

 

 

 

 

 

Changes:

  • delete @import of font in order to use webpage default font
  • image padding deleted to remove white box around image
  • image titel: font deleted, color changed to white, margin deleted and padding added (box around title using background color), font-size changed, background color changed to gradient from tiles (U Hover Effect)
  • container: background color changed, box deleted

Those changes were directly done in the custom CSS option of the respective carousel, so other carousels (e.g. image gallery on the same webpage) were not affected.

Original CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

#amazingcarousel-CAROUSELID .amazingcarousel-image {
position: relative;
padding: 4px;
}

#amazingcarousel-CAROUSELID .amazingcarousel-image img {
display: block;
width: 100%;
max-width: 100%;
border: 0;
margin: 0;
padding: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

#amazingcarousel-CAROUSELID .amazingcarousel-title {
position:relative;
font:14px „Open Sans“, sans-serif;
color:#333333;
margin:6px;
text-align:center;
text-shadow:0px 1px 1px #fff;
}

#amazingcarousel-CAROUSELID .amazingcarousel-list-container {
padding: 16px 0;
}

#amazingcarousel-CAROUSELID .amazingcarousel-item-container {
text-align: center;
padding: 4px;
background-color: #fff;
border: 1px solid #ddd;
-moz-box-shadow: 0px 0px 5px 1px rgba(96, 96, 96, 0.1);
-webkit-box-shadow: 0px 0px 5px 1px rgba(96, 96, 96, 0.1);
box-shadow: 0px 0px 5px 1px rgba(96, 96, 96, 0.1);
}

 

Modified CSS:

#amazingcarousel-CAROUSELID .amazingcarousel-image {
position: relative;
}

#amazingcarousel-CAROUSELID .amazingcarousel-image img {
display: block;
width: 100%;
max-width: 100%;
border: 0;
margin: 0;
padding: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

#amazingcarousel-CAROUSELID .amazingcarousel-title {
position:relative;
color:#fff;
font-size: 22px;
padding: 4px;
text-align:center;

background: rgba(0, 0, 0, 0) linear-gradient(-45deg, #D0CAC6 0%, #847870 100%) repeat scroll 0 0;
}

#amazingcarousel-CAROUSELID .amazingcarousel-list-container {
padding: 16px 0;
}

#amazingcarousel-CAROUSELID .amazingcarousel-item-container {
text-align: center;
padding: 4px;
background-color: #fff;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.