[Paul SParticipant]

Hey guys,

In Revolution Slider version 5.0.9 we have a new ‘Navigation Editor’.

So I want to change my navigation arrows to f104 and f105 fontawesome style arrows, but I can’t figure out how to do it using the Navigation Editor…?

I’ve also tried adding the following code to Customiser –

.tp-leftarrow:before {
content: “\\f104”;
}
.tp-rightarrow:before {
content: “\\f105”;
}

.tparrows:before {
font-family: fontawesome;
}

but that’s not working either.

I’ve also tried referring to the Revolution Slider docs here – http://www.themepunch.com/revslider-doc/slider-revolution-documentation/ but there’s nothing on how to use the Navigation Editor.

I’m thinking that I should be able to use the markup and CSS sections of the Navigation Editor to achieve what I want without using ‘Customiser’ – what’s your advice?

Thanks!

Paul

[FriechModerator]

Hi Paul,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[Paul SParticipant]

Thanks! – http://www.paulsewter.com/better-waters/

[RadModerator]

Hi there,

It should be like this,

.tp-leftarrow:before {
content: "\f104"  !important;
}
.tp-rightarrow:before {
content: "\f105"  !important;
}

.tparrows:before {
font-family: fontawesome !important;
}

And should be added at child theme’s style.css and not at customizer custom css. Customizer will just going to remove one backslash at a time per save. The reason why it uses two backlash is because it will become one backslash after save, and after re-save, it will be gone.

Thanks.

[Paul SParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s not added at child theme’s style.css as recommended, you can check it here http://www.paulsewter.com/wp-content/themes/x-child-icon/style.css?ver=4.1.1

You can set the duration of your slider equal to the play duration of the video, then add 100 millisecond. If your video has 10seconds (10,000 milliseconds), then your slider duration should be 10,100.

Then add another image layer that will start at 10,001 and end at 10,100. The image should be equal to the last frame of your video creating an illusion that video already stopped but not gone. And that layer should be under your first transparent image.

Hope this helps.

[Paul SParticipant]

Hi,

Sorry, but I’m not sure what you mean – the link you included shows the code at the bottom of the page. I have moved it to just under @import url( ‘../x/framework/css/site/stacks/icon.css’ ); but still the same…

I have followed your instruction on the slider and its sort of working. On mobile the poster image shows which is great but after 13 seconds (video length) the other png appears which doesn’t appear synchronised even though the layers line up on the slide…?

Thanks,

Paul

[FriechModerator]

Hi Paul,

We can see that the code is working fine on our end. It display the f104 fontAwesome icon.

Regarding the slider, If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[Paul SParticipant]

Hey guys,

OK, thanks but what I really wanted was the slider arrows to be grey and larger with no square button around it.

As for the slider:

Problem 1: on desktop I want the hand-drawn flowchart (http://www.paulsewter.com/wp-content/uploads/2015/10/Diary-7.png) to remain on screen when the slider finishes.

Problem 2: on mobile the hand-drawn flowchart appears right away, but after 13 seconds the same drawing fades in misaligned. How do I stop this from happening?

Thanks so much for your help with this!

Paul

[Paul RModerator]

Hi Paul,

You can add this under Custom > CSS in the Customizer.

body .tparrows {
    background: transparent !important;
}

body .tparrows:before {
    font-size: 35px !important;
    color: #808080 !important;
}

body .tparrows:hover {
    color:#A9A9A9 !important;
}

#1 You can set it as the last slide then make your slider stop after loop under General Settings.

Note: Set amount of loops to 1

http://www.themepunch.com/revslider-doc/slider-settings/

#2 Please remove html5 video background as you have already set bg video under slider settings

http://screencast.com/t/z6OziIsyL6l

Hope that helps.

[Paul SParticipant]

Hey guys,

The navigation arrows problem is now sorted – thanks so much! 🙂

But, I’m struggling with problem #2 & 3 – the background video is now looping out of sync with the Slider slide which only appears once. And on mobile, the existing problem is still there – perhaps its because there is a Poster image set in ‘Slider-settings: Above masthead’, which is conflicting with the slider layer which kicks in after about 10 seconds?

Thanks

Paul

[ZeshanMember]

Hi Paul

Thanks for writing in!

#2: This is the slider layer that appears after 8 seconds when the slider is fully loaded and disappears after 13 seconds. If you want it to be hidden on mobile devices, add following CSS under Custom > CSS in the Customizer:

.touchevents div#slide-168-layer-11 {
    display: none !important;
}

#3: I’ve checked your site and background video on desktops is looping just fine. Would you mind confirming the issue again? Perhaps, you can provide us with some screenshots so we can take a closer look.

Thank you!

[Paul SParticipant]

Hey guys,

OK #2 problem is solved thanks! Although, how do I get that poster image to fit the screen on mobile?

#3 problem – I don’t want the video to loop. I want it to finish after the pencil-drawn image layer fades in, and for that image to stay on screen permanently.

Thanks again 😉

Paul

[RadModerator]

Hi there,

There is no stop feature for background video, it will always loop. As suggested from #635007, you can create another layer to cover it when it reach the 10,001 milliseconds.

But, maybe this is the easiest. Add this code at Admin > Appearance > Customizer > Custom > Javascript.

jQuery ( function($) {

$('.x-slider-container.bg-video video.x-mejs').prop('loop', false);

} );

Again please make your slider duration equal to the video play duration. Else you’ll gonna see a blank player when it stop plays since loop is set to false.

About poster image, you mean to stretch image so there is no clipping? That’s not recommended, it’s like forcing a landscape image to portrait container. It can be stretched, but it will look like this.

But if you still insist, then add this too

div.x-video.player.bg.hide-controls.autoplay.loop.muted.poster {
background-size: 100% 100% !important;
}

Hope this helps.

[Paul SParticipant]

Hi guys

OK, problem #3 is sorted… I added your code to customiser CSS but removed the second 100%, because I just wanted it to fit horizontally in either landscape or portrait, then I added background-color: #ffffff; to get the background white – all working perfectly now 😉

But, still having problems with #2 – I’ve tried lots of things but nothing’s working. Currently, the video is exactly 13 seconds long. The Default Slide Duration setting is set to 13100ms as per #635007. I have a png image kicking in at 8 seconds through to 13000ms. Then a second jpeg image (duplicate of the png) kicking in at 13001 to 13100… And as you’ll see on desktop the video runs, the image appears and then fade to white and then black screen. How do we get it to stay on the jpeg image?

Thanks again guys, I’m sorry to be a pain.

Paul

[Author]

Posts