Currently, Flexslider allows the user to substitute a CSS tag "namespace" in the advanced section of the Flexslider optionset. This namespace currently replaces the "flex-" namespace tag used in the flexslider styling. This does allow the user to override CSS styling on the flexsliders for each namespace, but requires creating all new styling for each optionset. This can create a ton of extra CSS if one uses several flexslider styles on a website.

Feature: the flexslider module should retain and apply the "flex-" tag on all elements and optionsets, and make the namespace option a second tag IN ADDITION TO the "flex-" tag. Why? Consider the following scenario:

I have two flexslider optionsets. The styling is similar for both but the paging buttons differ in style. If I want to use the custom namespace, I have to create all new styling for each element of the slider in CSS, even though I only need to change the styling of the paging buttons. If I have a lot of optionsets, (which I do) then I have completely new styling for all flexslider elements, because currently, there is only one unique tag (the value in the namespace field) attached to each element. The stylesheet for my flexsliders is well over 1000 lines because of this.

If there were TWO classes, (for instance class="flex-flexslider custom-flexslider") then I would only have to apply styling to the "custom-flexslider" class when that element differs from the default provided by "flex-". This would GREATLY reduce the amount of CSS necessary to style multiple flexsliders. In addition, since you already provide styling in the module for "flex-" new users will only need to use the custom namespace class to make changes to the default style.

(I hope this makes sense)

Comments

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
CreditAttribution: dmsmidt commented

More theming control would be a huge help.

In addition: currently the default styling provided by the flexslider package is always loaded (libraries/flexslider/flexslider.css).
This causes a lot of extra styling to get rid of the default styling.

A solution would be an option to turn off default styling for a set.
And/or to change the way the namespace works. For example, instead of a prefix, we could just enter a couple of classes.
If we want the default styling we can use the class flexslider (this could be the default).

Kendall Totten’s picture

Kendall Totten CreditAttribution: Kendall Totten commented

I'd also like to chime in that an .active class on the active slideshow item also would be very helpful. I'm changing up the layout on desktop so that the captions sit off to the right side and are always visible, and I'd like to change the color of the active item. Thanks!

Also currently the list item is dynamically set to display; block or display: none, but there's no way to override that per active item since there is no class. This is a semi-major theming hindrance.

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet commented

I'm with @dmsmidt in #1 Turning off the css would be a nice option. Then a themer could copy that set of styles from the library into their theme and do what they would with it.

joelpittet’s picture

joelpittet
Primary language English
Location Vancouver
CreditAttribution: joelpittet commented

@dmsmidt one trick I just gave a try, because they are using libraries module:

function THEMENAME_libraries_info_alter(&$libraries) {
  $libraries['flexslider']['files']['css'] = array();
}

Deletes the css that flexslider library provides.
Then just copy the styles to your theme, that's a work around.

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
CreditAttribution: dmsmidt commented

Nice workaround, thanks!

amaria’s picture

amaria CreditAttribution: amaria commented
Status: Active » Closed (won't fix)

This makes sense but it would not be that trivial to implement. The elements and classes are added by the plugin itself and we have no control over that other than the namespace prefix. I suppose it's possible if we use JavaScript to traverse the flexslider element looking for all elements having a class prefixed with the namespace, then add a flex-custom- (for instance) prefixed class to that element. But it would have to be done again on every slide change because of the active slide class. If someone is willing to provide a patch that does this, I would be willing to review/add it, otherwise it's a won't fix.