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

[Gandam]

Hi,

I’ve found a live sample for your reference at http://artbloom.co

[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

[Gandam]

@Laura – Thank you. Are you saying that I just need to replace those two png files to see the changes?! I’ve tried it, but nothing has happened! I’ve attached two arrow png files for you to verify whether I am doing it right. 🙁

[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

[Gandam]

@Laura – Yes, I replaced the files with same name and I’ve clear the cache as well, no go! I’ve visited REV Slider support page at http://www.themepunch.com/faq/change-the-navigation-arrow-in-the-slider/ for solution, but I am a newbie still, no clue how to do it exactly and they wouldn’t offer me support directly unless I buy their license. 🙁

[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

[Gandam]

@Laura – Pls find site access credential at below;

site: taiwan098.com/sys-admin
user: sharmstr
pass: Tk9hSvnR6n3P

[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

[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

[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

[Gandam]

@Laura – I pasted the code to quick css, but the arrow became invisible, any ideas? By the way, I actually want the slider arrow style like this page (http://artbloom.co), can you help me with, thanks.

[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

[Gandam]

@Laura – really appreciated your support. However, I still have problem with it, the arrow stays on permanently after I pasted the new code. Also, the arrow should be invisible and show up only when user hovers on the slider image. In addition, the arrow color should be lighter or 50% transparent if no mouse pointer hovering on arrow and becomes darker when hover on it, it is not doing that with this code. I also like to reduce the arrow image to 24*90, the current size if a bit too big, is that possible? You can check our page again at taiwan098.com to understand the issue. 🙂

[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

[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

[Author]

Posts