Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 8, 2019 at 3:37 pm #1125956
    agreatescape

    I have a page where I’m wanting to use the logo over a video slider (header) that I have in a Full Width Easy slider. The video is uploaded to WordPress so not hosted in another area. Is this possible? I couldn’t find it in the settings for the Full Width ES. Am I using the wrong module for this? I basically just want it to live centered above the video.

    Thanks!

    https://mercyhillchurch.com/mh-students-2/

    August 8, 2019 at 5:17 pm #1125989
    Jordan Shannon

    Hey Nate,

    I would say add a widget to header:

    Header

    Then add your image to the text widget. Next, use css to position the icon exactly what you want it. Be sure to use z-index to layer the png over the video.

    Best regards,
    Jordan Shannon

    August 8, 2019 at 5:48 pm #1125994
    agreatescape

    Anyone know exactly how to do what Jordan is saying? I’m not saavy in CSS.

    August 8, 2019 at 6:35 pm #1125999
    Jordan Shannon

    Hi,

    If you can perform the first part following the doc we can handle the rest.

    Best regards,
    Jordan Shannon

    August 10, 2019 at 4:14 pm #1126436
    agreatescape

    Thanks, I’m having trouble with the video even loading now. It does fine on some loads and on others doesn’t at all. Is the top video loading for you?

    August 11, 2019 at 4:08 am #1126571
    Rikard

    Hi,

    I can’t see any videos loading on the page you linked to, please post admin login details in private so that we can have a closer look.

    Best regards,
    Rikard

    August 11, 2019 at 6:58 am #1126596
    Guenni007

    why don’t you use the option on Enfold ( right side where you are editing the page) that you have transparent header. the content ( your slider) will then goes to top position – the rest is styling the header.

    August 11, 2019 at 7:33 am #1126598
    Guenni007

    or is it this you like to achive: https://webers-testseite.de/cynthia/video-under-header/
    : a kind of watermark

    insert to your slide an overlay : no color but an image – set transparency on it you like.
    After that you can style it to be not as a pattern but as one image centered:
    f.e:

     div .av-section-color-overlay {
    background-repeat: no-repeat !important;
    background-position: center center;
}

    play with that background-position if you like –
    first value is : background-position-x
    second value is: background-position-y

    August 11, 2019 at 7:58 am #1126599
    Guenni007

    second method ( and because it is a one you can have responsive – in combination with caption on slide!)
    insert the image via child-theme functions.php just before the h2 container.

    function add_images_to_slider() { 
?>
<script>
(function($){
	$('.avia-slideshow-2 .slide-1 h2.avia-caption-title').before('<img class="slide-1-image" src="https://webers-testseite.de/cynthia/wp-content/uploads/2019/08/High.jpg" alt="Slider-Image" />');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_images_to_slider');

    then style it via quick css:
    f.e.:

    .avia-slideshow.avia-slideshow-2 li img.slide-1-image {
    width: calc(35vw + 150px);
    height: auto;
    padding-bottom: 2vw;
    opacity: 0.8;
}
    • This reply was modified 5 years, 1 month ago by Guenni007.
    August 12, 2019 at 7:54 pm #1126951
    agreatescape

    Thanks!

    August 14, 2019 at 4:20 pm #1127647
    agreatescape

    Just checking in to see if you’ve had a chance to take a look, Rickard. Thanks again! Also thank you Guenni007. I will try these as soon as we can figure out what’s keeping the video from loading every time.

    August 17, 2019 at 9:59 pm #1128512
    Mike

    Hi,
    Sorry for the late reply, when I view your site the video is working for me every time. I followed @Guenni007’s suggestions and tried this css which placed a centered image in the video overlay, please try adding it to your Quick CSS:

    #top.page-id-40931 #full_slider_1 .av-click-overlay {
    background-color: transparent;
    opacity: 0.6;
    background-image: url(https://qsk52xngql-flywheel.netdna-ssl.com/wp-content/uploads/2019/08/High.jpg);
    background-repeat: no-repeat;
    background-position: 50% 30%;
}

    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    August 20, 2019 at 3:48 pm #1129240
    agreatescape

    Tried that Quick CSS but couldn’t see any image. I may just put the logo in the video and see how it looks. Was hoping this would be an easier fix. Thanks for all the help thus far!

    August 21, 2019 at 7:19 am #1129478
    Mike

    Hi,
    Thanks for the feedback, is the red logo in my screenshot the correct one? I couldn’t login to see why this css was not working for you like it is in my test, please renew the temp login token above so I can investigate further.

    One reason it may not work for you is if you copied the css from an email instead of the support page and the quotes in the code turned into curly quotes, or if some of your other css has a missing bracket causing this css to be void. I’ll know better once I can test.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.