How can I make the direction nav buttons always visible and outside?

i.e. like http://www.woothemes.com/flexslider/

Thanks

Comments

greg.b’s picture

greg.b commented

I have spent half a day fiddling with this trying various methods mentioned on the net.

Seems what might have been getting in the way was in the module flexslider_img.css

/* Avoid scroll bar issues when the slider is next to the edge of the page */
.flexslider .flex-direction-nav a,
.flexslider .flex-direction-nav a {
display: none;
}

I commenting out the "display:none;" and at least I can now say ala Oliver Hardy "Now we are getting somewhere".

BUT is this the start of a kludge as it seems this is set up this way for a reason?

greg.b’s picture

greg.b commented

Ok, hopes this saves someone a day that I wasted.

I put this in my zen subtheme pages.css

.flexslider .flex-direction-nav a,
.flexslider .flex-direction-nav a {
display: block; /* I added this line */
}

.flex-direction-nav .flex-next { right: 0 !important; margin-right: -40px; opacity: 1 !important; }
.flex-direction-nav .flex-prev { left: 0 !important; opacity: 1 !important; margin-left: -40px; }
.flexslider { width: 90%; margin: 0 auto; }

So far seems to work.

greg.b’s picture

greg.b commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

web226’s picture

web226 commented

Thanks, this worked with Best Responsive theme with Drupal 7.24
I put a new custom.css in the theme folder and included the custom.css in the theme.info file. The css above is in the custom.css file.

tea2sugars’s picture

tea2sugars commented

Genius! Just spent 2 hours in pain sorting that until i decoded to ask Google!

Thanks of the input!

leoklein’s picture

leoklein commented

Very helpful!

osopolar’s picture

osopolar
Primary language German
Location 🇩🇪 GER 🌐
commented
Issue summary: View changes

If you need more customizations for flexslider.css you could copy the css to your theme and at this code to the template.php (replace MYTHEME with your theme name):

/**
 * Implements hook_libraries_info_alter().
 */
function MYTHEME_libraries_info_alter(&$libraries) {
  // Use our own flexslider.css
  if (isset($libraries['flexslider'])) {
    $libraries['flexslider']['files']['css'] = NULL;
    $libraries['flexslider']['integration files']['MYTHEME'] =  array(
      'css' => array('css/flexslider.css')
    );
  }
}

Found her: #1929696: drupal_add_library('flexslider', 'flexslider') no longer works. post #8.

greg.b’s picture

greg.b commented