Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1125956

    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/

    #1125989

    Hey Nate,

    I would say add a widget to 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

    #1125994

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

    #1125999

    Hi,

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

    Best regards,
    Jordan Shannon

    #1126436

    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?

    #1126571

    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

    #1126596

    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.

    #1126598

    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

    #1126599

    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, 2 months ago by Guenni007.
    #1126951

    Thanks!

    #1127647

    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.

    #1128512

    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

    #1129240

    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!

    #1129478

    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

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