Skip to content

Widget Styling

Resources

Scrolling module widgets can be styled several different ways since they lack inline styling. To target specific different configurations of scrolling modules it is recommended to either wrap the container element or apply styling directly. The snippet below is an example that generically styles all scrolling module types for widgets wrapped by a scroller class.

.scroller .mn-scroll-container {
  height: 205px;
  font: 16px/130% Arial, Helvetica, sans-serif;
  margin: 8px;
  overflow: hidden;
  position: relative;
}
.scroller .mn-scroll-slider {
  position: absolute;
  width: 100%;
}
.scroller .mn-scroll-item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-clip: padding-box;
  background-color: #2d548b;
  border-radius: 5px;
  color: #FFFFFF;
  margin: 0 0 4px;
  position: relative;
}
.scroller .mn-scroll-item {
  background-image: -webkit-gradient(linear, lefttop, leftbottom, from(#5685c8), to(#2d548b));
  background-image: -webkit-linear-gradient(top, #5685c8, #2d548b);
  background-image: -moz-linear-gradient(top, #5685c8, #2d548b);
  background-image: -ms-linear-gradient(top, #5685c8, #2d548b);
  background-image: -o-linear-gradient(top, #5685c8, #2d548b);
  background-image: linear-gradient(top, #5685c8, #2d548b);
}
.scroller .mn-scroll-link {
  color: #FFF!important;
  display: inline-block;
  margin-left: 55px;
  text-decoration: none;
  padding: 5px 3px;
}
.scroller .mn-scroll-link: hover {
  text-decoration: underline;
}
.scroller .mn-scroll-date {
  font-size: 12px;
  font-weight: 700;
  left: 3px;
  position: absolute;
  text-align: center;
  top: 5px;
  width: 50px;
}
Scroll To Top