How to change revolution slider navigation arrow

[Gandam]

Hi,

How do I change slider navigation arrow style? I noticed that there is only “solo style” under nav arrow option. I prefer a square arrow with no preview function, something similar to the attachment I’ve enclosed. Is there option to customise it or how do I fix this then? Thanks

Attachments:

You must be logged in to view attached files.

[Gandam]

This reply has been set as private.

[Laura]

Hello, its an image you can replace at
wp-content/plugins/revslider/rs-plugin/assets/large_left.png
wp-content/plugins/revslider/rs-plugin/assets/large_right.png

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

This reply has been set as private.

[Laura]

Have you replaced them with the same name as the old ones? Try clearing cache

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

This reply has been set as private.

[Laura]

Hello, please share admin credentials so i can check it out 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

This reply has been set as private.

[Laura]

Could you enable right click? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

@Laura – I’ve just enable it! 🙂

[Laura]

Hello, please use this CSS

COPY CODE

.tp-rightarrow.default {
  z-index: 100;
  cursor: pointer;
  background: url(../assets/large_right.png) no-repeat;
  width: 45px;
  height: 150px;
  color: #fff;
  text-align: center;
  margin-top: -50px !important;
  opacity: 1.2;
}
.tp-leftarrow.default {
  z-index: 100;
  cursor: pointer;
  background: url(../assets/large_left.png) no-repeat 0 0;
  width: 45px;
  height: 150px;
  color: #fff;
  text-align: center;
  margin-top: -50px !important;
  opacity: 1.2;
}
.tparrows:hover {
  background-position: initial !important;
  opacity: 0.5 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

@Laura – thanks, so Where do I paste it, in theme quick css? and this arrow style will be the same as my attached png file?

[Laura]

Hello, yes, those are your images.
Add it to quick css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

This reply has been set as private.

[Laura]

Hello, please replace the code from above for this one

COPY CODE

.tp-rightarrow.default {
  z-index: 100;
  cursor: pointer;
  width: 45px;
  height: 150px;
  color: #fff;
  text-align: center;
  margin-top: -50px !important;
  opacity: 1.2;
}
.tp-leftarrow.default {
  z-index: 100;
  cursor: pointer;
  width: 45px;
  height: 150px;
  color: #fff;
  text-align: center;
  margin-top: -50px !important;
  opacity: 1.2;
}
.tparrows:hover {
  background-position: initial !important;
  opacity: 0.5 !important;
}

If you find another image that fits better we can use it, so let me know if you like it like that 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

This reply has been set as private.

[Gandam]

@Laura – Any chance for you to attend my query yet, thanks!! 🙂

[Laura]

Hello, please change with the following codes

COPY CODE

.tp-rightarrow.default {
  z-index: 100;
  cursor: pointer;
  width: 45px;
  height: 150px;
  color: #fff;
  text-align: center;
  margin-top: -50px !important;
  opacity: 0;
}
.tp-leftarrow.default {
  z-index: 100;
  cursor: pointer;
  width: 45px;
  height: 150px;
  color: #fff;
  text-align: center;
  margin-top: -50px !important;
  opacity: 0;
}

Do not replace the :hover ones
That it what i can do, when you hover the arrow will appear, not much more i can do

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Gandam]

@Laura – I picked up another with your code, it is not responsive, so it will show i full size on smart devices, how do I fix that? Thanks

[Laura]

Hello, you need a small arrow for mobile so i can change it, just let me know the url and i will add it

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts