Forum Replies Created

Viewing 30 posts - 4,171 through 4,200 (of 11,531 total)
  • Author
    Posts
  • in reply to: Media library doesn't find uploaded mp4 file #1295890

    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.

    in reply to: How put two functional arrows in the Tab Section ? #1295868

    Gerne !

    in reply to: lightbox and srcset #1295867

    aber auch ohne eigenes markup

    in reply to: lightbox and srcset #1295865

    so leider noch nicht

    in reply to: Icon boxes #1295836

    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 )

    in reply to: lightbox and srcset #1295808

    to complex for me now.

    in reply to: How put two functional arrows in the Tab Section ? #1295725

    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');
    in reply to: How put two functional arrows in the Tab Section ? #1295715

    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'>&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(){  
              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');
    in reply to: Icon Boxes & Read More on Blog #1295682

    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;
    }
    in reply to: Icon Boxes & Read More on Blog #1295601

    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;
    }
    in reply to: Icon Boxes & Read More on Blog #1295591

    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);
    in reply to: Icon Boxes & Read More on Blog #1295536

    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 : lang

    then 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.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);
    in reply to: change default caption from h2 to h1 on Easy Slider #1295478

    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 );
    in reply to: How put two functional arrows in the Tab Section ? #1295357

    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.
    Sorry

    f.e.:

    .avia_mobile .av-tabsection-navs {
        opacity: 1;
    }
    in reply to: Disable Background images only for tablets #1295353

    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?

    in reply to: Disable Background images only for tablets #1295324

    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.

    in reply to: How put two functional arrows in the Tab Section ? #1295297

    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, 3 months ago by Guenni007.
    in reply to: Footer that appears on scrolling #1295144

    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.

    in reply to: Footer that appears on scrolling #1295141

    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;
    }
    in reply to: How put two functional arrows in the Tab Section ? #1295004

    And that function does not include the case if there are more than one tab-section on that page!

    in reply to: Content (images, text) zeitgesteuert austauschen #1294907

    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, 3 months ago by Guenni007.
    in reply to: Content (images, text) zeitgesteuert austauschen #1294904
    in reply to: Widget inside hamburger menu #1294899

    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”

    in reply to: Flexible column layouts #1294849

    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/

    in reply to: How to add animated background #1294848

    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%)",
    in reply to: Disable Background images only for tablets #1294814

    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 use

    f.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.
    in reply to: How to add animated background #1294640

    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.
    in reply to: How to add animated background #1294613

    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 : gradient

    thats it.

    PS : it is possible without child – but more complex.

    it 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.zip

    Upload 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.

    Remove this:

    #top #wrap_all .av-social-link-animated a {
      pointer-events: none !important
    }

    and put in the options dialog of social profiles the “Social Icon Url”

Viewing 30 posts - 4,171 through 4,200 (of 11,531 total)