shadow underneath slider icons

Comments

• Air

  January 2017 Posts: 10,970

  Hello:-)
  
  Yes this was added in one of latest updates, see change log http://support.apollo13.eu/discussion/12/before-you-ask-read-this-#change_logs
  
  Icons disappear in 3 seconds, and shadow is added so your user could see this controls, mainly for such design as yours where you have white on white.
  
  Change of colors of these controls only by custom CSS, but you will have to dig out all these places :-)
  
  With kind regards.
• vncnt

  January 2017 Posts: 136

  Hi Air,
  Thanks for the quick reply!
  
  Two questions.
  
  1
  Is there css that can turn off the shadows always?
  
  2
  Is there css that can make all off the icons grey (for instance #999999)
  
  Thanks!
  
  
  
  
• Air

  January 2017 edited January 2017 Posts: 10,970

  I answered about color and "why shadow" in my post. Use this to remove shadow if you really must:

  
  .slider-arrow,
  #play-button,
  #thumb-tray-button,
  span.slides-count span{
  	text-shadow: none;
  }
  
  span.slides-count::after{
  	box-shadow: none;
  }
  

  With kind regards.

  Post edited by Air on January 2017
• vncnt

  January 2017 Posts: 136

  Great!
  
  Yeah sorry I just don't like drop shadows. ;-)
  
  Now the only things is that the divider stripe in between the numbers still has a drop shadow.
  
  see attach
  
  any css?
  
  So... if I understand correctly, I cannot simply give these icons a grey color globally, instead of white?
  
  Thanks again!
  
  
  
  

  

  

  Screen Shot 2017-01-10 at 14.46.14 .png

  1336 x 838 - 689K
• Air

  January 2017 Posts: 10,970

  I have updated CSS in previous post, now it should work:-)
  
  About color - it is possible. I juts told you to find yourself all places where it need to be changed, cause it is lot of work. But OK I have done it for you:-)

  
  .slider-arrow,
  span.slides-count,
  #play-button{
      color: #999;
  }
  #thumb-tray-button{
      color: #999;
      border-color: #999;
  }
  span.slides-count::after {
      background-color: #999;
  }
  #play-button .progress-circle-bg,
  #play-button .progress-bar{
      stroke: #999;
  }
  

  With kind regards.
• vncnt

  January 2017 Posts: 136

  That works!
  
  Thank you, I appreciate it!