Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • December 23, 2013 at 9:39 pm #203354
    michaelhiga

    Great theme!

    I’m not sure if this a LayerSlider or Enfold question…so I’ll start here.

    The “play button” overlay when one of the LayerSlides includes a video is very difficult to see/too small. How can I change that out?

    Thanks in advance,

    Michael

    December 24, 2013 at 6:56 am #203481
    Ismael

    Hi michaelhiga!

    How did you add the video? Can you please give us a link to the page with the slider video?

    Regards,
    Ismael

    December 24, 2013 at 7:01 am #203485
    michaelhiga
    This reply has been marked as private.
    December 24, 2013 at 7:32 am #203495
    Ismael

    Hey!

    Edit config-layerslider > LayerSlider > skins > fullwidth > skin.png, adjust the size of the play button:

    Adjust the width and height of the button using this on your Quick CSS:

    .ls-fullwidth .ls-playvideo {
width: 100px;
height: 100px;
margin-left: -25px;
margin-top: -25px;
}

    Best regards,
    Ismael

    December 30, 2013 at 8:04 pm #203844
    michaelhiga

    Hello-

    I’ve tried this and the larger “play” button is getting cropped – please see the 2nd and 3rd sliders on:
    http://stg.ciphercloud.com/

    December 30, 2013 at 8:17 pm #203855
    Josue

    Hey!

    Try with this code instead:

    .ls-fullwidth .ls-playvideo {
	width: 70px;
	height: 70px;
	margin-left: -25px;
	margin-top: -25px;
	background-position: -290px -140px !important;
}

    Cheers! 
    Josue

    December 30, 2013 at 10:04 pm #203888
    michaelhiga

    Hi-
    It’s different – but still not correct – please see:
    http://stg.ciphercloud.com/

    December 30, 2013 at 10:06 pm #203890
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .ls-fullwidth .ls-playvideo {
width: 70px;
height: 70px; }

    Best regards,
    Yigit

    December 30, 2013 at 10:09 pm #203893
    michaelhiga

    I think I already have that – this below is exactly what I have:
    .ls-fullwidth .ls-playvideo {
    width: 70px;
    height: 70px;
    margin-left: -25px;
    margin-top: -25px;
    background-position: -290px -140px !important;
    }

    December 30, 2013 at 10:17 pm #203897
    Yigit

    Hi!

    Yeah sorry my bad. Code is currently not being applied, you should add !important to force it and then it should work fine

    .ls-fullwidth .ls-playvideo {
width: 70px!important;
height: 70px!important;
}

    Best regards,
    Yigit

    December 30, 2013 at 10:24 pm #203901
    michaelhiga

    Yes! that makes the whole enlarged button visible, but now the “hover” effect doesn’t work (ie, the button doesn’t change highlight).

    December 30, 2013 at 10:33 pm #203905
    Yigit

    Hi!

    You can add following code to decrease the opacity on hover

    .ls-fullwidth .ls-playvideo:hover { opacity: 0.5; }

    Regards,
    Yigit

    December 30, 2013 at 10:37 pm #203909
    michaelhiga

    Thanks! just so I’m sure I have it right – below is exactly what I have – is this correct?

    .ls-fullwidth .ls-playvideo {
    width: 70px;
    height: 70px;
    margin-left: -25px;
    margin-top: -25px;
    background-position: -290px -140px !important;
    }
    .ls-fullwidth .ls-playvideo {
    width: 70px!important;
    height: 70px!important;
    }
    .ls-fullwidth .ls-playvideo:hover { opacity: 0.5; }

    December 30, 2013 at 10:40 pm #203913
    Yigit

    Hey!

    Yes, it looks fine. I just checked your website and it is working fine as well. If it is not on your end, you can try flushing browser cache and refresh your page.

    Regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Love the Enfold theme and the LayerSllider – video play button difficult to see’ is closed to new replies.