-
AuthorPosts
-
July 7, 2017 at 9:34 am #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 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
July 7, 2017 at 10:29 am #817725Hey 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,
VictoriaJuly 7, 2017 at 10:54 am #817741Layer 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..
July 9, 2017 at 9:10 am #818351Hi 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,
VictoriaJuly 12, 2018 at 4:01 pm #984805Victoria,
Where do you stack the code?
July 12, 2018 at 5:50 pm #984836well 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; }
July 12, 2018 at 7:06 pm #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:
July 13, 2018 at 6:51 am #984970if you are interested in this solution – it might be possible in a similar way: https://webers-testseite.de/cynthia/logo2-on-slider/
July 13, 2018 at 7:42 pm #985288 -
AuthorPosts
- You must be logged in to reply to this topic.