CSS to change style of slideshow arrows in Elemin theme

• 

  wovenconcepts · Member · May 22, 2015 at 4:37 pm

  • Copy link
  • Add topic to favorites

  i have the the left and right arrow images uploaded in my media library, but would like to know the CSS to include them

  

  

  The blog I need help with is: (visible only to logged in users)

• 

  senff · Staff · May 22, 2015 at 5:25 pm

  • Copy link

  If you’re talking about the arrows at the bottom of the slider, you can start with adding this CSS:

  body div div.slideshow-controls a:first-child {
    border: none !important;
    background-image: url('https://wovenconcepts.files.wordpress.com/2013/11/left_arrow.png') !important;
    background-size: 22px 56px !important;
    background-color: transparent !important;
    background-position: 0 0 !important;
    height: 56px !important;
    border-radius: 0 !important;
  }
  
  body div div.slideshow-controls a:last-child {
    border: none !important;
    background-image: url('https://wovenconcepts.files.wordpress.com/2013/11/right_arrow.png') !important;
    background-size: 22px 56px !important;
    background-color: transparent !important;
    background-position: 0 0 !important;
    height: 56px !important;
    border-radius: 0 !important;
  }

  That should replace the arrows, though there may be a bit more tweaking to do.

• 

  kathrynwp · Staff · May 25, 2015 at 4:50 pm

  • Copy link

  wovenconcepts – did the CSS senff provided help you achieve the effect you’re after? (Thanks, senff!)