Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Dan Silver on
Hello,
Does anyone know if there is a way to replace the text that says "next" and "previous" with images (arrows)? I think this would look much better on a website. I have the images already.
Thanks!
Dan Silver
Comments
CSS image replacement
I (just yesterday!) used CSS to replace the text with images to control the slideshow. It's easy and works without a hitch. There are a few different techniques by which you can do this; which one you use depends on your preference.
Can you show me the css you
Can you show me the css you used to replace the Next / Previous Text with Images?
Thanks
I could really use that css
I could really use that css too!
Here's what I ended up using
Here's my code; "yourimage-xx" refers to your player control button graphics, of course.
I've left out the CSS code for the container, as I positioned it above the slideshow and it's a little sloppy. If I had it my way I'd leave the controls where they were by default.
Here's a screenshot of what they look like, since I don't yet have a live site to point you to, yet.
thanks! I will try it out
thanks! I will try it out soon
Next, previous, and pause text still appears
Thanks for this reply, it has helped since I had the same question. I added the image urls to the css similar to what you have above but the "Next, previous, and pause" text still appears over the arrow images. Do you know what file that text is kept in so that I can delete that?
Thanks!
You don't need to delete the text
I'm using one of the many CSS image-replacement techniques, so if you use the same code you shouldn't be seeing any text. The line "text-size: 1px" shrinks down the text so that it's nearly invisible. The color declaration sets the text color the same as that of the background so it's effectively hidden. You don't want to delete the text since you want the control text visible for accessibility reasons.
Make the classes a little more specific and you're set
If you use these style names, then the existing text will obey your color override:
a.views_slideshow_singleframe_previous
a.views_slideshow_singleframe_next
a.views_slideshow_singleframe_pause
a.views_slideshow_singleframe_play
I hope that helps.
-Geoff
Hey thanks it worked great!
I took out the #home-page-main because for some reason I couldn't get it to work the right way, but that did it! Thanks for sharing! Big help.
Oops
Ack, sorry. The #home-page-main is an ID from my custom home page. I really should pay attention before I cut-n-paste. I'm glad it worked for you. FWIW the site in question is now live, in case anyone wants to see it in action: http://www.deyoungmuseum.org/.
No problem no wonder it didn't work!
Lol. Hey it was easily fixed and looks good. Your site looks much better than mine, but you can check mine out at www.paidvideoreviews.com if you want to see another version. I can't seem to get the links to disappear though, they're still displayed at the top of the images. Tried changing the color, text decoration, etc. I don't know. It works now so no complaints.
Thanks again!
I don't see the links
I just see the graphics, so you must be doing something right. Oddly, I find that I can see the links on my site, but only in my browser (FF 3.6.3, Mac) at home, and not in any of the browsers I tested the site in. Weird.
got rid of the link text
i used a combination of what andrewtf and netnoise said.
here is what my .views_slideshow_singleframe_previous class looks like in the views_slideshow.css file
just repeat this with the next, pause and play classes and substitute your image url's and custom widths and heights
Worked for me!
Finally got rid of the text that I could still see in Chrome. Thanks!
Andrew Fisher
lickitornot.com
paidvideoreviews.com
It works! :) ____ Step By
It works! :)
____
Does anybody have nice images
Does anybody have nice images of > and < for prev and next, and the css to get them working with views slideshow?
Thanks a lot in advance.
greetings, Martijn
Are you serious?
Use Google and search for "next icon" This entire thread is about what you asking, just read it and follow it.
Or look at all the right and left arrows...
Available in any full UTF-8 font. ;-) (or look into a symbols font for more)
(If you want to make it into images, of course, you could play with an image editor and use colors, add drop-shadows, and do other stuff to give it a cool look, unique to your site).
Following are just some of the characters that you might like (looking at a standard font like Arial or FreeSerif)
➩ ➪ ➫ ➬ ➭➮ ➯ ➱ ➢ ➣ ➤ ☛ ☞ ➦ ➧ ➨
See you at the Drupalcon!
Navigation arrows, previous and next
After reading all these posts, I was able to accomplish this by installing the "Code Per Views" module, and enabling "Views Configurable Display". In Views, advanced settings, check the "code per display" option. Then in the slideshow settings, I selected "white icons" for controls skin, and "configurable controls" for controls type. Then, I used this CSS to make it work:
.vscc_controls_previous {
position: absolute;
top: 200px;
margin-left: 20px;
z-index: 999999;
}
.vscc_controls_next {
position: absolute;
top: 200px;
left: 600px;
z-index: 999999;
}
.vscc_controls_pause, .vscc_controls_resume {
display: none;
}
Without the z-index, the arrows would render, then disappear when the slides would render "over" them. Note that the images are stored in /sites/all/modules/vscc/images as white_arrow_left.png and white_arrow_right.png, so you can put your own images in as long as the filenames match these norms.
I noticed that above given
I noticed that above given codes works well when you logged in under admin, but when you logout or visit slideshow as annonymous user, previous & next images shows up to far left and right and height changes too. Any help on this one?
I would check the blocks that
I would check the blocks that render when you are authenticated. It may be the user login block that gets replaced when you are logged in, the omega tools tabs that also appear only when authenticated or any other other million things. But every time this occured to me, it had something to do with the blocks not displayed when anonymous. I think you should look that way...
Update: In Drupal 7, when this occurs, it has to do with the "Contextual Links" module from Drupal core. It sets a "position: relative;" on the block wrappers for contextual links to appear well. Anonymous users don't have access to these links, so this css directive is missing and you have to add it by yourself in your stylesheet.
views_slideshow_controls_text.css
A added the following to views_slideshow_controls_text.css in views_slideshow module's folder.
Another modification
Here is other css coding .
Put this css code under global.css when using the responsive Omega sub-theme like ST Conch etc. Pls read this blog http://blog.kevinchisholm.com/css/absolute-positioning-basics/.