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

andrewtf’s picture

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.

cischico’s picture

Can you show me the css you used to replace the Next / Previous Text with Images?

Thanks

Dan Silver’s picture

I could really use that css too!

andrewtf’s picture

Here's my code; "yourimage-xx" refers to your player control button graphics, of course.

  #home-page-main .views_slideshow_singleframe_previous {
  display: inline-block;
  width: 24px;
  height: 16px;
  background: url(yourimage-back) no-repeat;
  font-size: 1px;
  color: #444;
  }
  
  #home-page-main .views_slideshow_singleframe_next {
  display: inline-block;
  width: 24px;
  height: 16px;
  background: url(yourimage-next) no-repeat;
  font-size: 1px;
  color: #444;
  }
  
  #home-page-main .views_slideshow_singleframe_pause {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(yourimage-pause) no-repeat;
  font-size: 1px;
  color: #444;
  }
  
  #home-page-main .views_slideshow_singleframe_play {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(yourimage-play) no-repeat;
  font-size: 1px;
  color: #444;
  }

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.

Dan Silver’s picture

thanks! I will try it out soon

mikiciuk’s picture

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!

andrewtf’s picture

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.

netnoise’s picture

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

queryblitz’s picture

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.

andrewtf’s picture

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/.

queryblitz’s picture

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!

andrewtf’s picture

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.

mikiciuk’s picture

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

a.views_slideshow_singleframe_next{
background: url('your_image_url/arrow_right.gif') no-repeat;
display: inline-block;
width: 59px;        /*width of your img*/
height: 59px;      /*height of your img*/
font-size: 0px;    /*this is better than 1px*/
  }

just repeat this with the next, pause and play classes and substitute your image url's and custom widths and heights

queryblitz’s picture

Finally got rid of the text that I could still see in Chrome. Thanks!

Andrew Fisher
lickitornot.com
paidvideoreviews.com

windowsspot’s picture

It works! :)

____

Summit’s picture

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

queryblitz’s picture

Use Google and search for "next icon" This entire thread is about what you asking, just read it and follow it.

LoMo’s picture

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!

kcegalis’s picture

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.

shahgm’s picture

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?

vensires’s picture

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.

yog_kulkarni’s picture

A added the following to views_slideshow_controls_text.css in views_slideshow module's folder.

.views-slideshow-controls-text-next {
  width:54px;
  height:54px;
  padding-top:54px;
  position:absolute;
  top:250px;
  overflow:hidden;
  
}
.views-slideshow-controls-text-previous {
	width:54px;
  height:54px;
  padding-top:54px;
  position:absolute;
  top:250px;
  overflow:hidden;
  
}
.views-slideshow-controls-text-previous {
  background:url(previous.png);
  left:50px;
  z-index: 99;
}
.views-slideshow-controls-text-next {
  background:url(next.png);
  right:30px;
  z-index: 99;
}
.views-slideshow-controls-text-pause {
  display:none;
}
mohrizmus’s picture

Here is other css coding .

/*Controls Text Bottom*/ 
/*Sets the grand parent container div's position to relative*/
#views_slideshow_controls_text_slideshows-block{
    float:left;
	width:950px; /*width of your image slideshows*/
	height:18px; /*adjust this*/
	position:relative;
	background-color:green;
	bottom:10px;
}

/*Sets the parent container <<previous control div's position to relative*/
#views_slideshow_controls_text_previous_slideshows-block{
    float:left;
	width:950px; /*width of your image slideshows*/
	height:18px; /*adjust this*/
	position:relative;
}
/*arrow left/previous control*/
 #views_slideshow_controls_text_previous_slideshows-block.views-slideshow-controls-text-previous.views_slideshow_controls_text_previous.views-slideshow-controls-text-previous-processed {
background: url(../images/arrow_left.png) no-repeat;
display: inline-block;  /*set display*/
position:absolute;     /*set position*/
left: 450px;           /*left position*/
width: 17px;           /*width of your img to change*/
height: 25px;          /*height of your img*/
font-size: 0px;        /*this is better than 1px*/
color:#444;            /*blue color*/
  }

/*Sets the parent container ||pause|| control div's position to relative*/
 #views_slideshow_controls_text_pause_slideshows-block.views-slideshow-controls-text-pause.views_slideshow_controls_text_pause.views-slideshow-controls-text-pause-processed{
    float:left;
	width:950px; 		/*width of your image slideshows*/
	height:18px; 		/*adjust this*/
	position:relative;
  } 
/*pause control*/
 #views_slideshow_controls_text_pause_slideshows-block.views-slideshow-controls-text-pause.views_slideshow_controls_text_pause.views-slideshow-controls-text-pause-processed{
background: url(../images/arrow_pause.png) no-repeat;
display: inline-block;  /*set display*/
position:absolute;		/*set position*/
left:475px;				/*adjust this*/
width: 17px;        	/*width of your img to change this*/
height: 25px;       	/*height of your img*/
font-size: 0px;     	/*this is better than 1px*/
color:#444; 
}

/*Sets the parent container |next>> control div's position to relative*/
#views_slideshow_controls_text_next_slideshows-block.views-slideshow-controls-text-next.views_slideshow_controls_text_next.views-slideshow-controls-text-next-processed {
    float:left;
	width:950px; 		/*width of your image slideshows*/
	height:18px; 		/*adjust this*/
	position:relative;
}
/*arrow right/next control*/ 
#views_slideshow_controls_text_next_slideshows-block.views-slideshow-controls-text-next.views_slideshow_controls_text_next.views-slideshow-controls-text-next-processed {
background: url(../images/arrow_right.png) no-repeat;
display: inline-block;	/*set display*/
position:absolute;		/*set position*/
left:500px;				/*adjust this*/	
width: 17px;        	/*width of your img*/
height: 25px;        	/*height of your img*/
font-size: 0px;    		/*this is better than 1px*/
color:#444;
 }

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/.