Can't get Views Slideshow to centre on page (margin:0 auto has no effect)

Is your Drupal installation online and accessible in order to see your css?

Thanks
/George

For those like me who want to get rid of the hard-coded content of the slideshow in favor of a view, here are the steps I followed :

• Create a view with slider-item as the inline class for each element of the unformatted list.
• Copy the views-view.tpl.php file from /sites/modules/views/theme into the corporateclean folder.

At line 55, change :

<?php print $rows; ?>

into :

<?php if ($view->name == 'your_view_name') : ?>
<div id="slideshow">
<?php endif; ?>
<?php print $rows; ?>
<?php if ($view->name == 'your_view_name') : ?>
</div>
<?php endif; ?>

If you would like to reproduce the slider navigation, there are two more steps :

• Enable pagination in your view settings.
• Create a module containing the following lines (without the closing php tag) :

<?php
function my_module_views_pre_render(&$view) {
	if ($view->name != 'your_view_name') {
		return;
	}
	$output = '
	<!--slider-controls-wrapper-->
	<div id="slider-controls-wrapper">
		<div id="slider-controls">
			<ul id="slider-navigation">';
	
	for($i=0 ; $i < $view->total_rows ; $i++) {
		$output .= '<li><a href="#"></a></li>';
	}
	
	$output .= '
			</ul>
        </div>
    </div>
    <!--EOF:slider-controls-wrapper-->';
 
	$view->attachment_after = $output; // or attachment_before if you want the navigation to be located in the view header.
}
?>

There might be a better way to solve this issue, but this one works !

I had a similar challenge with the 6.x-2.3 version of Views Slideshow, but I'm guessing it's the same feature that's tripping you up: Views Slideshow styles each individual slide using an element.style, including width and height sizing based on the content of the slide.

Since element.styles, by default, override all the stuff you put in your CSS file, you need to use the !important declaration to tell the browser to privilege your CSS file's declaration over the element styling in the HTML. For example, here's how I fixed my problem (use Firebug in Firefox to find the exact classes you need to target on your page):

.views_slideshow_singleframe_main {
	width: 520px; // use the width you want, obviously
	}

.views_slideshow_singleframe_slide {
	width: 100% !important;
	text-align: center;
	}

Now that each individual slide is forced to the width you want, your text-align: center should look how you want it. Make sure you don't mess with the absolute positioning stuff (position, top, left) - it's integral to how the slideshow works.

@K1T5UN3 in #2

A simpler way to achieve this (without the need for a separate module to create the page navigation is to simply copy views-view-unformatted.tpl.php to your theme directory and rename it to your view name, in my case views-view-unformatted--front-slider.tpl.php and then add the following code...

<?php
/**
 * @file views-view-unformatted.tpl.php
 * Default simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>
<div id="slideshow">
<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
    <div class="slider-item">
      <div class="content">
        <?php print $row; ?>
      </div>
    </div>
<?php endforeach; ?>
</div>
<!--slider-controls-wrapper-->
<div id="slider-controls-wrapper">
  <div id="slider-controls">
    <ul id="slider-navigation">
      <?php foreach ($rows as $id => $row): ?>
      <li><a href="#"></a></li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>
<!--EOF:slider-controls-wrapper-->

Editing your view and clicking on the "Theme: Information" link in the advanced section will tell you if the views is using your new template (it's using the ones in "bold" font. If not, scroll down and ask it to rescan and see if it picks it up.

Also, you need to replace all the hardcoded stuff in page.tpl.php with

   <?php if ($is_front): ?>
      <?php print views_embed_view('front_slider', 'attachment_1');?>
    <?php endif; ?>

Naturally, you would have to replace "front_slider" and "attachment_1" with the name of the view and display you created for the slider data.

Ron.

Hi, I have the same problem - inserted a Views Slideshow into the banner area but cannot figure out how to center /centre it on the page - at the moment is on the left edge of my browser window.
Any tips, leads, fixes?
Thanks!
A~

Hi - just bumping this because it's posing a major hurdle for me to finish a website. I love the hard coded slideshow, but it can't be translated and I have built a multilingual site - therefore the need for an alternative.
I inserted a Views Slideshow into the banner area but cannot figure out how to centre it on the page - at the moment is on the left edge of my browser window.
thanks,
as always, great theme, thank you,
A~

Would most appreciate guidance on how to make the block title centered ..

Currently css is as follows:

#views_slideshow_cycle_teaser_section_slideshow-block {
margin: auto;
}
#views_slideshow_cycle_main_slideshow-block {
margin: auto;
background: #000000;
width: 100%;
}
.views_slideshow_singleframe_slide {
width: 100% !important;
text-align: center;
}

and still the images and title aligns left in the block title div. Would you be so kind to point me in the right direction?

Screenshot attached.

@rjerome In order to make sure that slideshow is centered in the banner region I added an extra div (grid-12) to rjerome's code at #4. This is how views-view-unformatted--customname.tpl.php looks like after the changes:

<?php
/**
* @file views-view-unformatted.tpl.php
* Default simple view template to display a list of rows.
*
* @ingroup views_templates
*/
?>
<div id="slideshow">
<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
    <div class="slider-item">
      <div class="content container_12">
        <div class="grid_12">
          <?php print $row; ?>
        </div>
      </div>
    </div>
<?php endforeach; ?>
</div>
<!--slider-controls-wrapper-->
<div id="slider-controls-wrapper">
  <div id="slider-controls">
    <ul id="slider-navigation">
      <?php foreach ($rows as $id => $row): ?>
      <li><a href="#"></a></li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>
<!--EOF:slider-controls-wrapper-->

I was having the same problems.

Fixed it with css alone. I'm no css expert mind, hopefully it's not too much of a hack - if so, feedback would be much appreciated.
I'm using :
Drupal 7.20
Zen 7.x-5.1 (responsive)
Views 7.x-3.5
Views Slideshow 7.x-3.0
---------------------
#slide_panel { /* slide wrapper */
margin: auto;
width: 100%;
}
.slide_holder { /* slide */
width: 100% !important;
text-align: center;
}
.views-slideshow-cycle-main-frame-row { /* makes responsive */
left: 0px !important;
right: 0px !important;
}

The above centers it , but when the screen viewing area goes below the set max-width (in my case 1200px), the slideshow doesn't remain centered. I'm not sure if I even need to put left positioning in...

To centre it on smaller screen sizes I found this bit of css on Drupal.org: ( i may have slightly altered it for my own means)

.views_slideshow_cycle_main {
width: 100%;

}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
width: 99% !important;
height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
width: 100% !important;
height: auto;
}
.views_slideshow_cycle_main .field-content {
max-width: 100%;
width: 100%;
}
.views_slideshow_cycle_main .field-content img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

I haven't tested it on all browsers - I use a mac, and it seems fine on the latest versions on Firefox, Safari & Chrome.

Hopefully someone else could try it - improve on it - whatever.

Cheers

Jon

This is what solved it for me:

https://drupal.org/comment/5585274#comment-5585274