Forum Replies Created
-
AuthorPosts
-
and because i’m a lazy guy i have this in my functions.php of my child-theme:
// beim Contact Form Element eine Erklärung des Asterisk "*" setzen. function add_declaration() { ?> <script> (function($){ $('form:not(#searchform) input[type="submit"]').before('<p style="text-align:right; text-decoration: overline; font-size:13px">Die mit <span style="font-size: 15px" class="required">*</span> gekenntzeichneten Felder sind Pflichtfelder.</p>') })(jQuery); </script> <?php } add_action('wp_footer', 'add_declaration');
looks this way : https://webers-testseite.de/kontakt/
and Asterisk has alway the right color – same as the other asteriskshover effect ist jetzt ein wenig too much – oder .
ist halt doppelt gemoppelt.Aber es klappt. Bis dann
PS : ich bin kein Geheimniskrämer – unter meinem Avatar verbirgt sich meine Internetseite – respektive meine Kontaktdaten.Darfst auch gerne vorbeikommen :lol. vom Bonner zum Bonner ?
Übrigens: du solltes deinem top-header search feld einen höheren z-index geben, auf der ebene wo die obere navigation liegt man das Eingabefeld nicht treffen kann- man muss schon ziemlich zirkeln um ins Eingabefeld zu kommen – daher:
.av_phone_active_left .phone-info { z-index: 5; }
if you want to give more than one custom class to an ALB Element just insert the two classnames behind each other with a space between:
f.e.: plp-iconbox clickable
That is for inserting the search form by adding shortcode
[avia_search]
for example to copyright notice or header_meta etc.The code should work! – if you gave to your icon-box the custom-class : clickable
( in the custom-class input-field insert without dot ! – so not .clickable )if you got the merging on Enfold / Performace on ! – you maybe have to refresh the css and scripts.
btw: on former Enfold Times this was nice for columns too! – but now Column ALB Element has an input field for link to have the whole column clickable
there has to be the link in your iconbox set to have this done.
give to the icon-box a custom-class: clickablethen put this into your functions.php of your child-theme:
function transfer_link_from_child(){ ?> <script> (function($){ $(".clickable").each(function(){ var theLink = $(this).find("a:first").attr("href"); if (typeof theLink !== "undefined"){ $(this).addClass("clickme"); $(this).on("click", function(){ window.location.href = theLink; }); }; }); })(jQuery); </script> <?php } add_action('wp_footer', 'transfer_link_from_child');
what does the code do: it looks for the first link in that container with class: clickable – if there is a link it will transfer this link to the container itself.
if you like to style the newly added class: clickme (see code addClass)
do this f.e. in quick css:.clickme:hover { cursor: pointer; -webkit-filter: drop-shadow(2px 3px 5px #999); filter: drop-shadow(2px 3px 5px #999); }
see here the first iconbox left top: https://webers-testseite.de/iconlists-and-iconboxes-with-h-tag/
on that page you see the reason for that newly added clickme class. This is only added if there is a link in it.
if we style directly the clickable class – then behavior will be on hovering the same but no link.September 19, 2018 at 9:54 am in reply to: enfold change background color in video slideshow #1011700if you like to have the controls you can delete this parameter from the code-block element code
&controls=0
maybe instead add the
&playsinline=1
parameter – this is for the ipad / iphone background option.September 19, 2018 at 8:21 am in reply to: enfold change background color in video slideshow #1011654There is on your Enfold Settings / Layout Builder : Show element options for developers
Then you will have the new input field on most of the ALB Elements .By the way : the code is tested and works on my functions.php ( child-theme )
September 18, 2018 at 11:45 pm in reply to: enfold change background color in video slideshow #1011565@Mike : seems to be all 16/9 videos – must be something different .
________
and by the way – why did you do it this way? ( via slider)
you can combine all your videos in one youtube playlist – without generating a playlist on youtube. ( this will be the best way – because i think the transitions between those videos are gone).this could be for your videos an iframe code:
<iframe src="https://www.youtube-nocookie.com/embed/sATEt-81AT8?enablejsapi=1&ecver=2&controls=0&cc_load_policy=1&rel=0&showinfo=0&autoplay=1&color=white&iv_load_policy=3&loop=1&playlist=QU0MCwH9cIU,f7Oy2fySTHM,DWRUW1oSLxI,JGt8g7Ms0zA,PGrBLAci8tQ,SlEXdbUgMuQ,kjA-GLzPMfQ,X-qPTwLUBAM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
you see the first video is single – and at the end there are comma separated the other VideoIDs.
now to your setup to get a responsive youtube setup:
click to enlarge:
put this into your page on top in a code-block element and give to the code-block element a custom-class: fullvideo
<div class="avia-video avia-video-16-9" itemprop="video" itemtype="https://schema.org/VideoObject"> <div class="avia-iframe-wrap"> <iframe src="https://www.youtube-nocookie.com/embed/sATEt-81AT8?enablejsapi=1&ecver=2&controls=0&cc_load_policy=1&rel=0&showinfo=0&autoplay=1&color=white&iv_load_policy=3&loop=1&playlist=QU0MCwH9cIU,f7Oy2fySTHM,DWRUW1oSLxI,JGt8g7Ms0zA,PGrBLAci8tQ,SlEXdbUgMuQ,kjA-GLzPMfQ,X-qPTwLUBAM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div>
go to your functions.php of your child-theme and insert:
function youtube_full_width_with_shortcode(){ ?> <script> (function($){ $('.fullvideo').closest('.content').css( 'padding' , '0px' ); $('.fullvideo').closest('.container').css({"max-width": "100%", "padding": "0" }); $('.fullvideo .avia-video').css('margin-bottom', '0px' ); $('.fullvideo .avia-iframe-wrap').css('margin-bottom', '0px' ); })(jQuery); </script> <?php } add_action('wp_footer', 'youtube_full_width_with_shortcode');
see Result: https://webers-testseite.de/youtube-playlist-embed/
September 18, 2018 at 10:08 pm in reply to: problem with the mobile presentation of a video in a full-image slider #1011533Can you make a screenshot of your video-background setting on the layer ?
Beim ersten laden ist so ein Versatz den ich mir mit meinem Setup nicht erklären kann. Was hast du für die Seite angesetzt? Transparent Header?
-
This reply was modified 6 years, 9 months ago by
Guenni007.
now i’m testing if i can insert that checkbox on top in a message box – so maybe the testpage is not working temporarily
For those who are looking for a solution like this here is the final code:
function youtube_lightbox_script() { ?> <script> (function($){ $('<label><input class="youtube-privacy" type="checkbox" /> ja - ich habe die <a href="/weber/datenschutz/#youtube">Datenschutzhinweise</a> bezüglich Youtube gelesen</label>').insertBefore('.youtube-link:first'); $('.youtube-privacy').css({ "width": "25px", "height": "25px", "position": "relative", "top": "5px", }); $(window).load(function(){ $('.youtube-privacy:checkbox').prop('checked', false); $('#top .youtube-link a.lightbox-added ').css({ "pointer-events": "none", "cursor": "default" }) $('.youtube-privacy:checkbox').change(function() { if (this.checked) { $('#top .youtube-link a.lightbox-added').css({ "pointer-events" : "auto", "cursor" : "auto" }); } else { $('#top .youtube-link a.lightbox-added').css({ "pointer-events" : "none", "cursor" : "default" }); } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'youtube_lightbox_script');
and here are the results which resources are loaded at page opening:
That is what i said with :
I guess I’m a little out of line today.i forgot to set the startpoint when page is loading for the pointer-event! ( like for the check-box that it is unchecked )
And i have to surround it with window load function – otherwise the pointer-event was not set because lightbox-added seems to be inserted later.Thanks – can be closed and see Results here: https://webers-testseite.de/weber/youtube-links/
This is now realy GDPR ( DSGVO ) – conform!
September 18, 2018 at 7:24 am in reply to: how to change header tag for Icon List and Icon Box #1011118leave it a bit open, maybe he still needs help with the edited ALB elements
September 18, 2018 at 1:17 am in reply to: how to change header tag for Icon List and Icon Box #1011047No Plugin for creating a child theme please !!!
First: Enfold got a wonderful Documentation: https://kriesi.at/documentation/enfold/
Second : View here : https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/ – there is a predefined Child-Theme !
Here are some infos on why a child-theme is a nice thing: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#why-child-theme
September 17, 2018 at 10:27 pm in reply to: how to change header tag for Icon List and Icon Box #1011001or : https://webers-testseite.de/edited-enfold-alb-elements/
read carefully – scroll down to https://webers-testseite.de/edited-enfold-alb-elements/#iconsIf you got allready a lot of icon-boxes and icon-lists it maybe neccessary to edit them again just by opening and save them.
you will have then your input fields:
________
Dear Mods – please ask Günter if this could be integrated into Enfold.
It is indeed a missing feature. You are also welcome to adopt my code. And you can delete my comments in the code.To have on both sides a box-shadow you can add two rules to one:
this works this way because there is no place on top – bottom – if so you had to have 4 defintions for each side with background-color shadow to those sides which you don’t want to have shadow ( on white background it is than a white shadow.body#top { box-shadow: 5px 0 10px #666, -5px 0 10px #666; }
first is x value, second y-value, third distance (it makes the blur) fourth is color
___________
or in your case because body and wrap-all are congruently
body { box-shadow: 5px 0 10px #666; } #wrap_all { box-shadow: -5px 0 10px #666; }
you can find the child-theme download on the documentation: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/
Just upload the unzipped folder as a neighbouring folder to your enfold folderSeptember 14, 2018 at 10:44 am in reply to: problem with the mobile presentation of a video in a full-image slider #1009854https://webkit.org/blog/6784/new-video-policies-for-ios/
that html5 way seems to be at the moment the only way to do it. Advanced Layerslider can use this for selfhosted videos – so this will work on your iphone / ipad ( with IOS newer than 10)
advantage of that – it will be responsive too – like in the fullwidth slider of Enfold.September 14, 2018 at 8:52 am in reply to: Can I have two 1/2 screen areas in a full-widith section? #1009825can you make a sketch of what it’s supposed to look like?
Why don’t you try that with the grid-row element 1/1
https://kriesi.at/themes/enfold-2017/elements/grid-row/-
This reply was modified 6 years, 9 months ago by
Guenni007.
if you got your youtube link take the embed variant
https://www.youtube.com/embed/6jE1jxFB2Ic
you can add different parameters to the link https://developers.google.com/youtube/player_parameters?hl=de/#Parameters
the first parameter after the videoID had to be introduced by a question mark – all following parameters added by an ampersand
so autoplay should make of the link on top:
https://www.youtube.com/embed/6jE1jxFB2Ic?autoplay=1
for having the link in lightbox add the link manually to your target( image , text etc.) and add iframe=true
so first with question mark second parameter added by ampersand :
https://www.youtube.com/embed/6jE1jxFB2Ic?autoplay=1&iframe=true
September 14, 2018 at 7:25 am in reply to: Color Section Background Image Placement and Positioning #1009811and if you are a bit familiar with css – a container can have multiple images with different sizes and repeat options etc. pp:
https://webers-testseite.de/multiple-background-images/
The only thing you have to do is to have a custom-class to your f.e color-section.see tutorial on w3schools: https://www.w3schools.com/css/css3_backgrounds.asp
or do you mean the background scroll when a lightbox is opend and you scroll ?
Try this instead in your functions.php of your child theme:
add_action('wp_footer', 'custom_lightbox_script'); function custom_lightbox_script(){ ?> <script type="text/javascript"> (function($) { function a() { $('body').on('click', '.lightbox-added', function() { if($('.mfp-bg').length >= 1) { $('html').css("overflow-y", "hidden"); } }); $('body').on('click', function() { setTimeout( function() { if($('.mfp-bg').length == 0) { $('html').css("overflow-y", "scroll"); } },500); }); } a(); })(jQuery); </script> <?php }
you can see here normal Enfold Behavior: https://kriesi.at/themes/enfold-2017/elements/image/ – klick on the darkend image in the center and then scroll
you can see here behavior with that code: https://webers-testseite.de/lightbox-scroll-behavior/
there is on each page / post the possibility to choose a header-behavior on the right side of your editor:
Header visibility and transparency
Several options to change the header transparency and visibility on this page.there is one option: header is invisible and appears ones user scroll down etc.
Try that and have a look if this is near to your wishSeptember 13, 2018 at 11:05 am in reply to: problem with the mobile presentation of a video in a full-image slider #1009319this is a nice – very small self hosted video.
Use instead the advanced layerslider :
click to enlarge:
the code at the bottom ( do not on top a background-image) is the video which you can declare as background-video.
put in the code:<video playsinline autoplay loop muted preload="metadata" style="min-width:100vw; min-height:56vw;" > <source src="https://finanzengel.de/wp-content/uploads/2018/09/Finanzengel-Sachsen.mp4" type="video/mp4"> <img src="https://finanzengel.de/wp-content/uploads/2018/09/himmel.jpg" title="Your browser does not support the video tag"> </video>
see here ( i will go back to my video as soon as you have seen and prooved it on your iphone) : https://webers-testseite.de/weber/
That is a youtube video – you can see it in the source code !
___
To the Mods : i do not see how this littel plugin do it – maybe you can have a look on it and implement that solution approach
Perhaps it is the use of the watch instead of the embed Youtube Version!maybe this is a selfhosted video – there are workaround for that. But a 120MB mp4 is to big for that. – Not only because of traffic but definitly because of performance reasons.
But consider if it is really necessary to show a video on mobile devices, or if a fallback image would not be enough anyway.
Most of the CMS and nearly all WordPress Themes got a lot of troubles with youtube background video playing on Mobile – especially on Iphone/Ipads.Nevertheless there is one thing i found vor Divi – which we can transfer to Enfold too. Divi has the same troubles to play those youtube videos as background.
If this corresponds to your ideas, then I can tell you how we can solve this with a small plugin. Check if the test page runs on your mobile phone or Ipad. : https://webers-testseite.de/carinda/
_________
Offtopic ?:
And by the way, you’re not the only one asking for help here. Also other participants here have the same desires as you. But difficult topics like yours are not as easy to answer as many other simpler questions.
For example, I have now searched 8 hours for the solution to your question. May i charge you for that. ;) :lol
Have you ever been to other support forums? Obviously not, because here you got help often with very complex php and javascript code is quite unusual on the other boards. Many topic creators don’t even have their own support forums, but only use those of the themes resellers.And if I didn’t need the solution for my customers as well, I wouldn’t be able to make such an effort for you either.
How much time do you think a mod can spend on one topic to make such a board fit for all? 5 minutes? !September 12, 2018 at 8:06 am in reply to: Removing arrow and white background on SVG hover does not work #1008782try this in quick css:
The thing is that you have to select the direct neigbour of an element with that ( + ).start-image + .image-overlay { display: none !important; }
maybe you give to the image a hover effect that not only the pointer hand indicates a link
.start-image:hover { -webkit-filter: drop-shadow(2px 2px 3px #666); filter: drop-shadow(2px 2px 3px #666) }
by the way Erin – your individual Links to f.e. about should have the absolute path – because if you are not on the landing page (f.e. on a portfolio page) the #about link has no function (maybe the /#about will work)
-
This reply was modified 6 years, 9 months ago by
-
AuthorPosts