Currently liquidslider automatically generates tabs with the classes which can be selected and styled using css.

<ul id="foobar" style="float: left;">
  <li class="tab1"></li>
  <li class="tab2"></li>
  <li class="tab3"></li>
</ul>

I have several liquid sliders on my page whose tabs I would like to style differently to each other. Is there a way to do this in css that I do not know about or is this feature request legitimate?

Comments

steveoriol’s picture

steveoriol
Location Grenoble 🇫🇷
commented

To differentiate your "liquidSlider" you can add "class" to your views by clicking on "Advanced" (right column in the administration views) and "None" next to "CSS class:", type the name of 'class' in every views.
For example: 'liquidslider-deco1' for view 1, and 'liquidslider-deco2' for view 2.
After you have just created your css, example:

/* DECO 1 */
.liquidslider-deco1 .liquid-slider-wrapper .liquid-nav a { 
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

/* DECO 2 */
.liquidslider-deco2 .liquid-slider-wrapper .liquid-nav a {
  background: rgb(219, 176, 176);
}
.liquidslider-deco2 .liquid-slider-wrapper .liquid-nav a:hover {
  background: rgb(255, 245, 16);
}
.liquidslider-deco2 .liquid-slider-wrapper .liquid-nav .current {
  background: rgb(94, 223, 62);
}
steveoriol’s picture

steveoriol
Location Grenoble 🇫🇷
commented
Status: Active » Needs review