Forum Replies Created
-
AuthorPosts
-
i can only strongly advise not to self-host videos of this size. Your server will go down if even one or two visitors to your site watch the video.
This is one of the reasons for the existence of Vimeo, Youtube, etc.
Gerne !
aber auch ohne eigenes markup
so leider noch nicht
if you have your icon boxes in a column (e.g. one icon box in each 1/3 column), imitate the complete icon box by moving the icon box over the edge of the column.
See here ( on the bottom animated) how you can achive this. :https://webers-testseite.de/equal-height/
you only have to colorize the background of the columns and make the whole iconbox transparent ( except the icons itself )
to complex for me now.
or with ternary operators a little shorter:
function ava_tab_section_arrows(){ ?> <script> (function($) { $('.av-tab-section-container').each(function() { $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>⟨</div><div class='av-tabsection-navs av-tabsection-nav-next'>⟩</div>"); var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color'); $(this).find('.av-tabsection-navs').css('color', arrowColor); var that = this; $('.av-tabsection-nav-prev', this).on('click', function(){ var activeElement = $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title'); activeElement.prev().length ? activeElement.prev().trigger('click') : activeElement.siblings(":last").trigger('click'); }); $('.av-tabsection-nav-next', this).on('click' , function(){ var activeElement = $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title'); activeElement.next().length ? activeElement.next().trigger('click') : activeElement.siblings(":first").trigger('click'); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_tab_section_arrows');
by the way – loop these arrows
if the first tab is shown and you click to the left side the last sibling tab is shown – rotation like in post navigation:function ava_tab_section_arrows(){ ?> <script> (function($) { $('.av-tab-section-container').each(function() { $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>⟨</div><div class='av-tabsection-navs av-tabsection-nav-next'>⟩</div>"); var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color'); $(this).find('.av-tabsection-navs').css('color', arrowColor); var that = this; $('.av-tabsection-nav-prev', this).on('click', function(){ if($(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().length){ $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().trigger('click'); } else{ $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').siblings(":last").trigger('click'); } }); $('.av-tabsection-nav-next', this).on('click' , function(){ if($(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().length){ $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().trigger('click'); } else{ $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').siblings(":first").trigger('click'); } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_tab_section_arrows');
yes and if you change content of hover it will do that too:
.more-link:hover:after { content: "click"; background-color: green; transition: all 0.5s ease; }
try this only in quick css:
.more-link { border: none !important; } .more-link::after { content: "Leia mais"; display: block; width: 250px; height: auto; position: absolute !important; top: auto; bottom: 42px; background-color: #a22137; color: #fff; padding: 10px 0; margin: 30px auto 20px auto; border: 2px solid #fff; transition: all 0.5s ease } .more-link:hover:after { background-color: green; transition: all 0.5s ease; }
and you did not check that only on your child-theme functions.php:
function my_text_strings( $translated_text, $text, $domain ){ switch ( $translated_text ){ case 'Read more': $translated_text = __( 'Leia mais', $domain ); break ; //for more translations duplicate this line to the next one } return $translated_text; } add_filter('gettext', 'my_text_strings', 20, 3);
the po – mo file ( both had to be edited)
if you have changed the po file with poedit for example – the mo file is generated by that program by default – both files had to be uploaded.
best would be to upload them into a subfolder of your child-theme – name it : langthen to use a child-theme lang file you had to put this in child-theme functions.php:
function overwrite_language_file_child_theme() { $lang = get_stylesheet_directory().'/lang'; return $lang; } add_filter('ava_theme_textdomain_path', 'overwrite_language_file_child_theme');
but quick and dirty can be that solution – without the above said: ( give it a try )
again this is placed in child-theme functions.phpfunction my_text_strings( $translated_text, $text, $domain ){ switch ( $translated_text ){ case 'Read more': $translated_text = __( 'Leia mais', $domain ); break ; //for more translations duplicate this line to the next one } return $translated_text; } add_filter('gettext', 'my_text_strings', 20, 3);
April 20, 2021 at 10:25 am in reply to: change default caption from h2 to h1 on Easy Slider #1295478But you know that you can switch to h1 on the advanced tab of the slide itself – where you input the caption? :
you can change the default heading to h1 on all sliders – because the filter is only in the av-helper-slideshow.php.
So influence of that is for easy slider , full-width slider and full-screen slider aswell.this to child-theme functions.php:
function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ){ if( $context == 'avia_slideshow' ){ $args['heading'] = 'h1'; } return $args; } add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );
One thing to mention – of course, you shouldn’t set up the hover styles, because the mobile devices don’t support that.
So either you hide these arrows then – or you have to set up the settings for avia_desctop class only and leave the opacity at 1 for the avia_mobile.
Sorryf.e.:
.avia_mobile .av-tabsection-navs { opacity: 1; }
Aber du hast es doch ganz gut gemacht. Der Wechsel mit den Color-Sections und dem Einsatz von einmal einem Image und zum Anderen einem Hintergrund Bild.
Wo genau willst du jetzt was ausblenden?So, with your nick – it’s not that hard to guess your domain – it would also be possible to publish the page it’s about – so it’s much easier to give accurate advice.
i did it this way – an for simplicity reasons i only take html entities to form the arrows:
this to child-theme functions.phpfunction ava_tab_section_arrows(){ ?> <script> (function($) { $('.av-tab-section-container').each(function() { $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>⟨</div><div class='av-tabsection-navs av-tabsection-nav-next'>⟩</div>"); var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color'); $(this).find('.av-tabsection-navs').css('color', arrowColor); var that = this; $('.av-tabsection-nav-prev', this).on('click', function(){ $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().trigger('click'); }); $('.av-tabsection-nav-next', this).on('click' , function(){ $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().trigger('click'); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_tab_section_arrows');
this to quick css:
.av-layout-tab .container { padding-left: 100px; padding-right: 100px; } .av-tabsection-navs { opacity: 0.1; position: absolute; top: 55%; cursor: pointer; z-index: 5; font-family: arial; font-size: 40px; font-weight: bold; color: #333; height: 40px; width: 40px; transition: all 1s ease } .av-tab-section-outer-container:hover .av-tabsection-navs { opacity: 1; transition: all 1s ease; text-shadow: 8px 1px 5px #aaa; } .av-tab-section-outer-container:hover .av-tabsection-navs { transition: all 1s ease; transform: scale(1.5); } .av-tabsection-navs.av-tabsection-nav-prev { left: 0; text-align: right; } .av-tabsection-navs.av-tabsection-nav-next { right: 0; float: left; } @media only screen and (max-width:767px) { .responsive #top #wrap_all .av-layout-tab .container { padding: 0 30px; } .av-tabsection-navs { width: 25px; } }
Result page: https://webers-testseite.de/tab-section/
If your tab-title background is white – overwrite the calculated color of the arrows by css with important.-
This reply was modified 4 years, 3 months ago by
Guenni007.
see complete post here: https://kriesi.at/support/topic/fixed-curtain-footer/
With a little distance now – i think i can try a combination of ismaels code and mine to optimize the script.
…this is called curtain effect and you can try this:
https://kriesi.at/support/topic/fixed-curtain-footer/#post-691135see result here ( only starting page ) : https://webers-testseite.de/pureinstall/
on my testpage i use this in child-theme functions.php:
// curtain effect of footer - function add_curtain_footer_effect(){ if(is_home()){ ?> <script type="text/javascript"> (function($) { $(window).bind("load resize", function() { setTimeout( function() { var socketh = $('#socket').outerHeight(); var footerh = $('#footer').outerHeight(); var spacerh = socketh + footerh - 5 ; $('#distance').css('height', spacerh ); $('#footer').css('bottom' , socketh); }, 150) }); })(jQuery); </script> <?php } } add_action('wp_footer', 'add_curtain_footer_effect');
and on quick css ( pay attention as the script above this is all only for home – so adjust to your needs):
.home #main > div { z-index: 3 !important; position: relative !important; } .home #footer { left: 0; width: 100%; z-index: 2; position: fixed } .home #socket { bottom: 0; left: 0; width: 100%; z-index: 2; position: fixed } .home #main #distance { clear: both; z-index: 0 !important; }
And that function does not include the case if there are more than one tab-section on that page!
or for example per season:
please read the code carefully. The selector where this should happen is an ID !
And the images should then also be named as in the code and the location would be in the case then /uploads/season-imagesInsert on the Element to have that scheduling an image – maybe the one that is set on default and style it as you like (cover – contain – left – top etc. pp – scroll – fixed etc)
function scheduling_per_season(){ ?> <script> var currentTime = new Date(); var month = currentTime.getMonth() + 1; var imglocation = "/wp-content/uploads/season-images/"; // put the images in this folder switch(true) { case (month >= 6 && month <= 8): var seasonImg = "summer.jpg"; var season = "summer"; break; case (month >= 9 && month <= 11): var seasonImg = "fall.jpg"; var season = "fall"; break; case (month == 12 || month == 1 || month == 2): var seasonImg = "winter.jpg"; var season = "winter"; break; default: var seasonImg = "spring.jpg"; var season = "spring"; } document.getElementById('changed_on_season').style.backgroundImage = 'url(' + imglocation + seasonImg + ')'; document.body.classList.add(season); </script> <?php } add_action('wp_footer', 'scheduling_per_season');
it will attach in addition to body a class according to the season. this seems to be more simple – because you can have on quick css rules related to the season.
Result-Page: https://webers-testseite.de/season-scheduling/
-
This reply was modified 4 years, 3 months ago by
Guenni007.
you can take a different hook – you don’t need the header as widget area:
f.e: there is :ava_after_body_opening_tag
so place this to your child-theme functions.php:
add_action( 'ava_after_body_opening_tag', 'burger_widget_area' ); function burger_widget_area() { dynamic_sidebar( 'burgerwidget' ); }
and then :
function body_widget_to_burger(){ ?> <script> (function($){ $('body > .widget').css('display' , 'none'); $('#header').one('click', '.av-main-nav-wrap', function() { var isMobile = $('.av-burger-menu-main').css('display'); $('#top #av-burger-menu-ul').css({ 'display' : 'block', 'height' : 'auto', 'vertical-align' : 'top', 'padding' : '140px 0 0', }); var burger_widget = $('body > .widget').detach(); burger_widget.each(function() { $(this).appendTo('.av-burger-overlay-inner').css({ 'display' : 'block', 'position': 'relative', 'width': '84%', 'text-align': 'left', 'margin-left': '8%', 'border-top': '1px dashed #333', }); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'body_widget_to_burger');
create a widget area : burgerwidget
place in this area all your “hamburger widgets”The grid-row element is a drag and drop element for other elements.
so insert a grid-row and click on add cell to have three cells. – Now click on “Set cell size” and choose : 1/2 1/4 1/4:
( click to the images to enlarge)
Now you can pull 1/1 containers to those cells f.e.:
you see you can nest those columns then.One disadvantage is that the grid-row is a full-width container.
If it has to have the sam width as the other containers there is a script solution for that.this to child-theme functions.php:
/******** Gridlayout not fullsize - give a custom-class to the grid-row element: "grid-notfull" *********/ /**** adjust the 1310px in the code here to your setting on enfold - general Layout - dimensions ****/ function grid_layout_notfull(){ ?> <script> (function($){ $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>'); $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" }); $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"}); })(jQuery); </script> <?php } add_action('wp_footer', 'grid_layout_notfull');
see here an example page – on top full-width on the bottom with custom-class: grid-notfull
https://webers-testseite.de/grid-row-alb/sorry – you can see how gradient are made f.e. here: https://www.cssportal.com/css-gradient-generator/
the code you got there is meant for css like quick css. If you like to define a color via script you can do that via:element.css( "color", "#333");
or if you have more than one attribute:element.css({ "color" : "#333", "background-color" : "#900", "display": "block" , });
so for script you have to replace in the markup you got there https://www.cssportal.com/css-gradient-generator/
f.e:background: #121FCF; background: -webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%); background: -moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%); background: linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
to:
"background": "#121FCF", "background": "-webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)", "background": "-moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)", "background": "linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
now you only have to replace the static colors with the script calculated
and because it is a script variable you had to interrupt the html markup (close doubel qoute – insert script calculated values ( “+color1+” and “+color2+” ) – and open again the html markup. ( :lol: it is javascript crispr ;) )now there is :
"background": "#121FCF", "background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)", "background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)", "background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
maybe you are able to set up some media querries –
you know the rules with min-width and max-width
but there are also: device width – and that you can usef.e.:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /**** your rules here ****/ }
but the devices are numerous, so you probably won’t get 100% coverage of all devices.
See here a link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/As far as i know Enfold has this on avia-compat.js at the beginning:
var avia_is_mobile = false; if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement) { avia_is_mobile = true; document.documentElement.className += ' avia_mobile '; } else { document.documentElement.className += ' avia_desktop '; } document.documentElement.className += ' js_active ';
so all mobile devices get the class on html : avia_mobile
mybe a combination of this and the media-query is a good way to do this@media only screen and (min-device-width : 768px) { .responsive.avia_mobile #top * { background-image : none !important; } }
* but won’t that lead to very unsightly big gaps in your layout?
Sliders got often imgs – so they are untouched but color sections that contain only one heading, etc. pp.
think of that a lot of gradients are set by background-image.so to only get rid of background-images with url you can do that – but – see *
@media only screen and (min-device-width : 768px) { .responsive.avia_mobile #top *[style*="url("]{ background-image : none !important; } }
-
This reply was modified 4 years, 3 months ago by
Guenni007.
but btw: i see there is a syntax error in the css setting :
$('#gradient').css({ background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)" });
it works because the -moz-linear-gradient is working – but the first background couldn’t work.
this is better:
$('#gradient').css({ "background" : "-webkit-linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)", "background" : "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)", "background" : "linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)", });
you can change it to diagonal :
$('#gradient').css({ "background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)", "background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)", "background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)", });
the background without double quotes is ok – and will work too – but this is more proper with quotes.
the comma on the last background is not needed – but looks better – not necessary
but the second .css in the rules is nonesense-
This reply was modified 4 years, 3 months ago by
Guenni007.
this is a snippet for the child-theme functions.php.
Take this code: https://kriesi.at/support/topic/animated-js-color-background-in-color-sections/#post-530485
as you can see inside the code: the selector where this background is applied is: #gradient
so if you have a color-section and goto advance tab you see the “Custom ID Attribute” input field – insert : gradientthats it.
PS : it is possible without child – but more complex.
April 15, 2021 at 3:26 pm in reply to: Make Fullwidth-Submenu Element stick to top on Mobile/Tablets #1294584it is enough to delete or comment out these lines :
if( burger_menu.is(":visible") ) { this.css({top: 'auto', position: 'absolute'}); fixed = false; return; }
This :
.responsive #top .av-switch-990.av-submenu-container
on media querries setting had to be changed because:
these are unfortunately set to “!important” in the corresponding menu.css these are very difficult to write over afterwards. Therefore we must also generate a child-theme menu.css. So it is probably best if we upload all changed menu files into the shortcodes child-theme folder.
Download all from here: https://webers-testseite.de/menu-files.zipUpload them to your child-theme shortcodes folder – so that these are loaded then, you should have this in child-theme functions.php.
function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; } add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
and this comes to quick css
@media only screen and (max-width: 989px) { #top .sticky_placeholder { position: absolute; } }
Result see here: https://webers-testseite.de/transparent-header/
PS: i did not test it for fixed-frame – maybe there had to be some adjustments on that calculation.
-
This reply was modified 4 years, 3 months ago by
Guenni007.
April 14, 2021 at 10:57 am in reply to: Adding animated gif next to the social media icons header #1294336 -
This reply was modified 4 years, 3 months ago by
-
AuthorPosts