Tips on Theming A Drupal 7 Views Slideshow For Beginners

A quick video giving an overview and a few tips for theming a Views_slideshow in Drupal 7.

This is a simple explanation of moving Title, Read More and Body Fields, laying out Image Pagers (horizontal and vertical) and also changing pagers to Images.

This is not intended to show you a super slideshow but the general process so that you can manipulate and change your own to suit any style and layout you wish for.

An important note...

When using the css method shown here to change the previous and next pager to images its important to set a

height:0px;
padding-top:HIGHTOFYOURIMAGEpx;
Overflow:hidden;

This will hide the text from the pager and only display the image.

Category:

Howto & Style

Tags:

• slideshow
• views
• views slideshow
• how to
• drupal
• theming
• css
• tips
• tricks
• beginer
• layout
• help
• pics
• tutorial
• Tutorial
• How-to
• software tutorial

[dawerpower08]

What CSS file do you put the code in? I tried the views_slideshow.css and it didn't work.

[Digitalrecline]

@dawerpower08 Just the styles.css as\t the end.

[metardd]

So where did the text 'previous', and 'next' go? and what was the purpose of the overflow: none; that you put in for the styling of the previous span?

[Digitalrecline]

@metardd Basically the next previous are hidden outside the Div. The overflow none allows you to position the Text without it rapping down and into view.

[dawerpower08]

@Digitalrecline Thanks!

[penyatd]

Whoooa!! Thank you for this video! I've spent 1 month (in my free time) trying to theme the slideshow, and you've done it in 15 minutes!

I don't know how many videos I've watched before find this!

I put this video on my bookmarks.

Thanks again.

[metardd]

@Digitalrecline So the overflow: none was responsible for hiding those texts? By the way thanks for sharing these drupal videos. You have some of the best drupal video tutorials that I've seen.

[helker89]

@Digitalrecline I still can't figure this out. If I inspect the title and Firebug highlights the html code I can move it up or down, but it will be always upon or under the image, I really can't get how to make it appear over the image. Can you please give me further instructions or contact me in private?

[Digitalrecline]

@Digitalrecline use firefox and get an addon called firebug. Once installed turn it on and use inspect. mouse over your title and it will highlight the html code that spits it out something like a class of .views-field-title. Then use firebug to find out the div the whole slideshow is in in the same way. Combine the sildeshow div id with the title class #slideshowdiv id .titleclass so that you are only going to affect the slideshow title.

[helker89]

@Digitalrecline how can I know which is the div containing the title?