do you have some quick css entries ? – find some errors there ( for example a missing closing bracket ) or some missing semicolon.
( Missing closing curly brackets are very common in media-query rules. )
These settings you describe ( general layout -> Dimensions. ) comes after the quick css entries – so if there is an error on your quick css the following rules do not have any effect.
You can also post your quick css here – but please use the code tag in the bar above.

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.

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 )

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'>&lang;</div><div class='av-tabsection-navs av-tabsection-nav-next'>&rang;</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');

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;
}

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);

But 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 );

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?

i did it this way – an for simplicity reasons i only take html entities to form the arrows:
this to child-theme functions.php

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'>&lang;</div><div class='av-tabsection-navs av-tabsection-nav-next'>&rang;</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, 10 months ago by Guenni007.

this is called curtain effect and you can try this:
https://kriesi.at/support/topic/fixed-curtain-footer/#post-691135

see 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;
}

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-images

Insert 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, 10 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”

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%)",

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, 10 months ago by Guenni007.