Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #817690

    Am trying to place a logo across the full screen slider pages for a new website and the image does not show at normal resolution but tries to completely fill the screen.

    The image I am using is http://vtechsystems.co.uk/wp-content/uploads/2015/10/full-logo.png

    but when the code Vtech - Vehicle safety systems is entered into the caption title it is stretched as per the screen shot below.

    slides 1 and 3 have logos uploaded for viewing online

    http://vtechsystems.co.uk/wp-content/uploads/2017/07/showing-large-logo.png

    Login details shown in box below

    #817725

    Hey madmanbean,

    Why are you putting an image in captions? Captions are supposed to be text!
    If you need you logo on the slider, use Layer Slider, it has functionality for layers on the slide.

    Best regards,
    Victoria

    #817741

    Layer slider is a way too complicated option that my client would never be able to edit or change. Also there are features such as the scroll down arrow and also the left right navigation arrows plus the ability to add and edit subtitles that do not seem to be possible with the slider.

    have managed to add the logo centrally as this example below which has a nice effect

    http://vtechsystems.co.uk/home-test/

    client has seen this page and wants the same effect but using his logo..

    #818351

    Hi madmanbean,

    Well, you could use some almost transparent background to make the logo stand out a bit, but the images are very high contrast.

    
    .ls-wrapper.ls-in-out {
      background: rgba(255, 255, 255, 0.4) !important;
    }
    

    Those guys have a lighter logo and use white text. Your logo will be lost on dark images.

    Best regards,
    Victoria

    #984805

    Victoria,

    Where do you stack the code?

    #984836

    well you can use your full-screen slider aswell and add your logo via jQuery function.

    Here on my testpage i have given the slider the custom-class: place-logo

    then i put into functions.php of my child-theme:

    Test-page: https://webers-testseite.de/cynthia/logo-goes-to-slider/

    function add_logo_to_slider() { 
    ?>
    <script>
    (function($){
    	$('.place-logo .slideshow_caption').before('<img class="sliderlogo" src="https://webers-testseite.de/cynthia/wp-content/uploads/2018/07/full-logo.png" alt="Logo on Slider" />');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_logo_to_slider');

    and make a setup for your added image for each slide number like:

    
    /* rule for all slides in the slider */
    .sliderlogo {
    position: relative !important;
    width: 40% !important;
    top: 35%;
    transform: translateY(-50%);
    -webkit-filter: drop-shadow(2px 2px 3px #ffffff);
    filter: drop-shadow(2px 2px 3px #ffffff);
    }
    
    /* if you like to have semitransparent background with padding for slide 1 */
    .slide-1 .sliderlogo {
        background-color: rgba(255,255,255,0.2);
        padding: 40px;
    }
    
    /* if you like to shift in x direction for slide 2 */
    .slide-2 .sliderlogo {
    	margin-left: 10% !important;
    }
    #984850

    :lol by the way – first i thought this might be a nice gimmick – but it is to complicated to make it real look beautiful:

    https://webers-testseite.de/cynthia/logo-move/

    #984970

    if you are interested in this solution – it might be possible in a similar way: https://webers-testseite.de/cynthia/logo2-on-slider/

    #985288

    Hi,

    @guenni007 Thank you very much! :)

    Best regards,
    Basilis

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.