Views Slideshow Theming

FAIL (the browser should render some flash content, not this).

This video shows how to add transparent text with the use of CSS to a slideshow made with the Views Slideshow module.

Your rating: None Average: 4.3 (15 votes)


Hello. i don't speak english

Hello. i don't speak english but i try. i speak french.
how can i do to put the buttons 1 2 3 4 ... in the slide to have a slideshow action when the mouse hover one of the numbers?
please, try to answer me.
thanks you very much.

This is great thanks! Is

This is great thanks! Is there somewhere else I can watch this video? Blip is giving me so much hassle, stops and starts reloading the whole time. Thank you so much for this step by step tutorial. Exactly what Ive been looking for for hours.

Thanks again!

This was fantastic, thank you

This was fantastic, thank you so much. I've been so frustrated with drupal for so long, and now that I'm finally understanding views, and the power of fields and content types etc. I can really understand how strong this CMS is.

Thanks so much! We need in

Thanks so much! We need in the Web of person like you, that teaches in simple and clean way. Congratulations!

This tutorial is great!

This tutorial is great! Thanks for that

My friend, excelent video,

My friend, excelent video, Has been usefull for me. thanks, you are "too hard".

awesome video.. helped me a

awesome video.. helped me a lot .. theming my view.. Thank You.

Sachin Gawas | Decos Software Development, India

Acquia Marina comes with

Acquia Marina comes with local.css support which allows you to customize the look and layout of the theme without changing the theme's style.css file. The file name is local_sample.css; put your custom css and css overrides in this file and rename it to local.css.

what make the images to appear vertically on the right is the following CSS:

To make it vertical:
#views_slideshow_singleframe_pager_slideshow-page_1 .pager-item {

To put it where you want:
#views_slideshow_singleframe_pager_slideshow-page_1 {
and playing with the image size is with:
#views_slideshow_singleframe_pager_1 div a img {
good luck yossi

Great info, but i would like

Great info, but i would like a little more help since i'm very new to editing css. i am using the same theme as this website (acquia_marina). I just installed firebug.
-I have built a view using "views Slide show: Single Frame" as you instructed in this video, but my thumbnails are overlapping each other. (

-i don't have the same "view slide show teaser div ID as yours, but i'm assuming it will be different anyway. here are the div IDs for teaser (

-I have no clue as to which css file to edit and where it resides on my server. could you please shed some light.

-also what css code do i need to put the thumbnail pager on the right side of the slide show image? just like you did here ---->

Thank You :)

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><img>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.