custom control slideshow

• 

  alberto2486 · Member · Dec 16, 2014 at 9:00 pm

  • Copy link
  • Add topic to favorites

  Hi, I’d like to change the shape of the controls-slideshow buttons from circle to square.
  I have already written this code:
  body div div.slideshow-controls a, body div div.slideshow-controls a:hover {
  -khtml-border-radius: 0em !important;
  -webkit-border-radius: 0em !important;
  -moz-border-radius: 0em !important;
  border-radius: 0em !important;
  }
  This code should be right but it doesn’t work!
  Can anyone help me ???

  I would also change the background color of the buttons from gray to black. I wrote this but it doesn’t work:
  .slideshow-controls {
  opacity: 1;
  }
  How can I do? Can you help me, please?

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

• 

  siobhyb · Member · Dec 17, 2014 at 11:27 am

  • Copy link

  Alberto and I figured out the solution to this through email, and I’ll post here too for others who may be looking for the same solution. :)

  The CSS for the slideshow is being loaded after the custom CSS. This means that the CSS for the slideshow takes precedence and, in order to override it, we have to be more specific when selecting CSS selectors for our custom CSS. This support article is a good introduction to CSS specificity:
  http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  We were able to override the CSS for the slideshow to turn the controls from circles to square using the following snippet:

  body div#gallery-68-6-slideshow div.slideshow-controls a, body div#gallery-68-6-slideshow div.slideshow-controls a:hover {
  -khtml-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
  }

  From here, we changed the background colour of the controls through this CSS:

  #gallery-68-6-slideshow .slideshow-controls {
  opacity: 1;
  }

  The following CSS rule for the individual slideshow controls will also need to be added in order to make the background colour for them black:

  background-color: rgba(0,0,0,1) !important;

  So, the full snippet to make the controls black and square will read as follows:

  body div#gallery-68-6-slideshow div.slideshow-controls a, body div#gallery-68-6-slideshow div.slideshow-controls a:hover {
  background-color: rgba(0,0,0,1) !important;
  -khtml-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
  }

  Hope this helps! :)