How to Create a Drupal 7 Slideshow with Views: Tutorial 2 of 2

In this drupal video tutorial, we continue developing our slideshow by styling the pager and node titles with a little css. This involves copying the core Bartik theme to our sites/all/themes folder and creating a custom css file. Using the Google Developer Tools, we're able to walk through our css changes, confirm they work and copy them to our css file.

Thanks to Valiant Falstaff for posting the CSS so people can just copy it. Here it is:

.view-front-page-slideshow .views-field-title { position: absolute; bottom: 35px; right: 0px; font-size: 20px; text-align: center; background-color: white; opacity: 0.5; width: 235px;
}
}

[rafaeldelrosal]

you're the best teacher online Drupal CMS

[yaworsk]

Hey Tyrone, thanks for the comment - that is great to hear, i'm glad the tutorials have helped.

[borisassogba]

I created a region for my slideshow, and I also created a view bloc for my slideshow.... Its works well right now!!! really thanks for your tutorials

[georgpurvis]

awesome, awesome, awesome! i was pulling my hair out trying to get a sidebar slideshow on my site, and this tutorial was extraordinarily helpful. thank you so much!

[jancotalyssa]

Thank you soooo much for the tutorial. You were moving too fast for me at times...I had to pause the video couple of times to make sure I got everything just right. I have a great looking slideshow on my site now courtesy of YOU. THANKS!!

[azlemck]

Great video. Outside of adding a slide show it helped me to get my bearings with Drupal and understanding some of the CSS concepts within.
I was on the fence about buying your 10 part Views Series. This swayed me to do so.  Thank you very much for the help.

[BilalElassal]

Everything worked fantastically. Great tutorial. Very comprehensive and the details are awsome. Please keep making tutorials. Thanks for your time.

[bjmooij]

Great tutorial, thanks!
The extra remarks/warnings are much appreciated, as I (of course) created something slightly different. It all worked out perfectly.

[yaworsk]

That's great to hear Bradley, thanks for letting me know!!

[tylercrone]

Thanks for the great tutorial man! Your tutorials are always very thorough yet easy to follow. I've learned so much from your videos.

[GeoffreyBaker]

Found the problem, small typo ...
Thanks again, brilliant tutorial. Suggestion... go just a TAD slower, I had to keep rewinding and missing one button click can mess the whole thing up! But I was totally successful and greatly appreciate your work. I'll be using your other tutorials to help learn drupal.

[pikadroo]

Brilliant work! This video is also good for helping understand the basics of themes in Drupal. Well done! Keep up the good work, Drupal need more people like you! SUBSCRIBED!

[yaworsk]

Thanks for the feedback! To answer your, nope, just a dumb move on my part, I uploaded this one in the morning and just forgot to include it on my site. Done now thought!

[chnblc]

Awesome video series. Thx Yaworsk. Need more theming series block, page, views, etc...

[amarcanth]

Fantastic!! Very helpful! Thank you! One more thing I think could be different, although I undesrtand that it would not be the scope of the tutorial, but at the end, when you add left margin to about 300px, this could be a problem for responsiveness and if you look at this from a mobile, or another small screen. So, maybe a margin: 0 auto declaration or something similar to center the div could be a better approach maybe?

[yaworsk]

Excellent question! I'm not sure off the top of my head and would have to look into it... unless you already did?

[GeoffreyBaker]

Pete I found a little shortcut you might like. Instead of having to inspect the stylesheets to find the css class name the theme is using for the title when you're customizing the css later, you can instead when creating the view just select the title, click on "style settings", click on "customize html", select "css class" and give it whatever name you want (hopefully a unique one!). You can then just put that name into the customized stylesheet and give it whatever attributes you want.

[madbeardman]

I have to say that aside from the speed/keyboard short cuts in the first part these are very good.

One thing to note, the jQuery javascript files have changed. There's no longer a .min version, so you need to use the full version as the .lite is missing a few of the important functions.

Now I need to setup Ubercart I'll be watching the others, cheers

[VegasVoltyaa]

Just an headsup, use a different color method for the opacity stuff, instead the direct opacity operator. Using "opacity: 1" will also make things in this container obtain the same value, e.g. text will become visible/invisible as well. Use the "background-color: rgba(255, 255, 255, 0.7);" instead. 255 stands for the color mix, in this case pure white, and the 0.7 is for the alpha/key, which is the opacity inbuilt for the color panel. This won't affect anything else, just the background color!

[toddlewandowski]

I fixed it. In the view, I changed the image field setting to "link to content". Then I added a redirect from the dummy page to the page I wanted it to go to. Not super graceful, but it works.