Anyone know how to center the images on views slideshow

By Joe Huggans on 19 Feb 2011 at 17:24 UTC

I am displaying portrait and landscape photos in a slideshow, the landscape photos are fine, but the portrait ones align over to the left. I have tried using css but I'm pretty sure this is javascript?

I am a noob to javascript so need some assistance if anyone can help, or point me in the right direction I will try figure this out myself. Maybe if someone could confirm that this is infact a javascript doing this

An example of what I mean is here

http://www.zoemutter.com/photography/portraits

Gracias

Comments

Try adding this to the bottom

mcfilms commented 19 February 2011 at 17:41

Try adding this to the bottom of your style.css file. You can also override the picture border-style:none if you want here.


.views-field-field-image-fid img {
border-style:solid;
border-width:1px;
display:block;
margin-left: auto;
margin-right: auto;
position:relative;
text-align:center;
}

_{A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com}

Nope its still the same.. :(

Joe Huggans

English

Kiel, Germany

commented 19 February 2011 at 18:50

Nope its still the same.. :(

Firebug

mcfilms commented 19 February 2011 at 22:11

Well it is not getting picked up so it's not showing on the page. Are you familiar with Firebug? It allows you to "peak" at the CSS used by every element on the page. Worth watching a video or two if CSS is giving you pains.

I don't usually recommend hacking the module's CSS because when you update the module you'll over-write the CSS changes. However, just to get it to work you could replace what's around line 121 of the file at: sites/all/modules/views/css/views.css with the above.

_{A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com}

Yeah that's not working

Joe Huggans

English

Kiel, Germany

commented 19 February 2011 at 22:59

Yeah that's not working either, I have replaced the code you mentioned but still it aligns left.

Hmmm. :|

hmm I'm not helping then

mcfilms commented 20 February 2011 at 00:36

I see it in there now. Weird that it is not working. I'm sure some uber-Themer could take a look at that and tell you exactly what's wrong. Me? I just work my way up the CSS tree and try and put that code in different divs. Maybe I'd try .views_slideshow_singleframe_teaser_section next. Then maybe #views_slideshow_singleframe_div_portrait_page-block_1_0

_{A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com}

Have you managed to align

Joe Huggans

English

Kiel, Germany

commented 19 February 2011 at 23:10

Have you managed to align center using firebug?

found a way to do this

Joe Huggans

English

Kiel, Germany

commented 20 February 2011 at 22:58

found a way to do this !

.views_slideshow_singleframe_slide {
left:50% !important;
margin-left:-465px;/**Half of the total desired width of the div**/
text-align:center;
width:930px !important;/**The total desired width of the div**/
}

Thanks joeuk - I got this

MickC commented 18 March 2011 at 10:55

Thanks joeuk - I got this going but didn't setting left margin that way pushed the image left. I changed the left margin to 0 and it worked. My slideshow view is inserted in a panel page, and the CSS is just added in the general settings for that page. Cheers.

Could I ask someone to take a

sah62 commented 12 June 2011 at 21:09

Could I ask someone to take a look at what I've done and help me understand what I've done incorrectly?

I'm trying to center my images horizontally. I've created a custom theme in sites/all/themes, including a css file that looks like this:

.views_slideshow_singleframe_slide {
left:50%;
margin-left: 0px;/**Half of the total desired width of the div**/
text-align:center;
width:100%; /**The total desired width of the div**/
}

Images are still left-justified. Here's the slideshow:

http://www.musclecarresearch.com/product-slideshow

I'm trying to see what's what with Firebug, but I'm still a noob with it and I don't see my stylesheet listed when viewing the page source.

I got this to work, but I'd

sah62 commented 12 June 2011 at 23:50

I got this to work, but I'd like to understand if there's another way to do it without modifying any of the core theme files. Here's what I did:

Created a new css file (call it my.css) in the Garland theme directory that contains the above style.
Modified garland.info to include my new css file (I added stylesheets[all][] = my.css after stylesheets[all][] = style.css)
Cleared cached data and my browser cache.
Reload the page - and the images are centered.

I had previously tried to add the style to the end of the Garland style.css file. For some reason that didn't work.

So - its there a way to do this without modifying garland.info or Garland's style.css files?

you edit the wrong css file,

mazke commented 9 October 2011 at 13:15

you edit the wrong css file, it should be in views_slideshows.css not in your themes css

it works..

mazke commented 9 October 2011 at 13:18

sah62 post, give the solution, but it must be place in views_slideshows.css not in your themes css

ie:
i use singleframe then i put sah62 edited line in:
sites\all\modules\views_slideshow\contrib\views_slideshow_singleframe\views_slideshows.css

yes it half works for me...

Drunoober commented 9 March 2012 at 01:00

Meaning all the images align center correctly except the first one in the list.

Hi, How about in

Summit commented 19 March 2012 at 23:15

Hi, How about in views_slideshow 3.dev?
greetings, Martijn

Ok I found a Solution....

Drunoober commented 20 March 2012 at 23:25

I forced the content to be displayed in a table by formatting the output of one of the fields and centered everything in the table. It all works... still don't understand why the center tag do not work for the first content.

HOW TO CENTER IMAGES

HudsonKotel commented 6 September 2012 at 08:40

Hello,

it's uses basically a how center images , and it can take a server timestamp to start with. The css can also be easily modified to one's own likings.

http://www.phphunt.com/111/how-to-center-images

This solution work's well!

sainf commented 19 March 2013 at 12:41

joeuk solution work's well, but if we have only 1 image, the parent div has no css from the views slideshow module.

I found the solution by creating a template of "views-view-fields--(our view name).tpl.php" in the theme, and warping the $field->content; with a div.

my example:
.....

<div style="text-align: center;position: relative; width: 700px;">
    	<?php print $field->content; ?>
</div>

....

This worked for me.

kriskendall99 commented 13 April 2015 at 02:46

This worked for me.

div#views_slideshow_cycle_main_slider-block.views_slideshow_cycle_main.views_slideshow_main.viewsSlideshowCycle-processed{
    position:absolute;
    right:0; left:0;
    margin: 0 auto;
    width:/*Insert Div Width Here */;
}

Center and use whole block

cyberfrog commented 10 August 2015 at 01:14

hI have recently installed a slideshow and like others its justified tot the left. As a newbiw to drupal and css does this code views_slideshow_cycle_main_slider-block.views_slideshow_cycle_main.views_slideshow_main.viewsSlideshowCycle-processed a standard name i.e. Its dot nothing to do what you called your slideshow? What file do you add this code to? Is there no other way to do this without coding?

Also, I notice a dotted line when you hover over the slidehsow, how can use change the images to fill up the entire dotted block?

Thanks