Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Change Style of Navigation Arrows

10.10.2013Moritz
This article is now outdated!

Click here to see where these settings can be found in version 5.0+.

Additional resources for the slider’s navigation:

https://www.youtube.com/watch?v=OGYMz0duPJg
https://www.themepunch.com/faq/css-tricks-numbered-bullets/

Slider Revolution includes multiple built-in styles for navigation arrows.

These styles can be changed with some custom CSS.

 

 

To use one of the Predefined Arrows

  1. Open up the Slider Settings
  2. Expand the Navigation Section
  3. Change the Navigation Type, Arrows and Style as you need

 

updated-nav-image

 

To Style your own Navigation Arrow

  1. Open up the Slider Settings
  2. Expand the Navigation Section
  3. Change Navigation Arrows to “solo”
  4. Change Style to “round”
  5. Open up any of your Stylesheets (i.e.  Appearance / Editor)
  6. Change the Style of the following Classes:
    • .tparrows
    • .tparrows.default
    • .tp-rightarrow
    • .tp-leftarrow

 

Example CSS that can be added here

 

As you can see we used the Font Type “Fontello” here, which can be generated and loaded (if it is not done yet via your Theme already)  from here:https://fontello.com/

Related FAQs