there is the code-snippet on the documentation: Link that may help you – to decide on the alb itself.

put the snippet to your child-theme functions.php:
( on my point of view it is enough by the function itself to overwrite a plugable function on parent-theme )

// this will insert on the given allowed elements some new Options for sorting 
function avia_custom_query_extension($query, $params)
{
    global $avia_config;
    if(!empty($avia_config['avia_custom_query_options']['order']))
    {
        $query['order'] = $avia_config['avia_custom_query_options']['order'];
    }

    if(!empty($avia_config['avia_custom_query_options']['orderby']))
    {
        $query['orderby'] = $avia_config['avia_custom_query_options']['orderby'];
    }

    unset($avia_config['avia_custom_query_options']);

    return $query;
}

add_filter('avia_masonry_entries_query', 'avia_custom_query_extension', 10, 2);
add_filter('avia_post_grid_query', 'avia_custom_query_extension', 10, 2);
add_filter('avia_post_slide_query', 'avia_custom_query_extension', 10, 2);
add_filter('avia_blog_post_query', 'avia_custom_query_extension', 10, 2);
add_filter('avf_magazine_entries_query', 'avia_custom_query_extension', 10, 2);

add_filter('avf_template_builder_shortcode_elements','avia_custom_query_options', 10, 1);
function avia_custom_query_options($elements)
{
    $allowed_elements = array('av_blog','av_masonry_entries','av_postslider','av_portfolio','av_magazine');

    if(isset($_POST['params']['allowed']) && in_array($_POST['params']['allowed'], $allowed_elements))
    {
        $elements[] = array(
            "name" => __("Custom Query Orderby",'avia_framework' ),
            "desc" => __("Set a custom query orderby value",'avia_framework' ),
            "id"   => "orderby",
            "type" 	=> "select",
            "std" 	=> "",
            "subtype" => array(
                __('Default Order',  'avia_framework' ) =>'',
                __('Title',  'avia_framework' ) =>'title',
                __('Random',  'avia_framework' ) =>'rand',
                __('Date',  'avia_framework' ) =>'date',
                __('Author',  'avia_framework' ) =>'author',
                __('Name (Post Slug)',  'avia_framework' ) =>'name',
                __('Modified',  'avia_framework' ) =>'modified',
                __('Comment Count',  'avia_framework' ) =>'comment_count',
                __('Page Order',  'avia_framework' ) =>'menu_order')
        );

        $elements[] = array(
            "name" => __("Custom Query Order",'avia_framework' ),
            "desc" => __("Set a custom query order",'avia_framework' ),
            "id"   => "order",
            "type" 	=> "select",
            "std" 	=> "",
            "subtype" => array(
                __('Default Order',  'avia_framework' ) =>'',
                __('Ascending Order',  'avia_framework' ) =>'ASC',
                __('Descending Order',  'avia_framework' ) =>'DESC'));
    }

    return $elements;
}

add_filter('avf_template_builder_shortcode_meta', 'avia_custom_query_add_query_params_to_config', 10, 4);
function avia_custom_query_add_query_params_to_config($meta, $atts, $content, $shortcodename)
{
    global $avia_config;
    if(empty($avia_config['avia_custom_query_options'])) $avia_config['avia_custom_query_options'] = array();

    if(!empty($atts['order']))
    {
        $avia_config['avia_custom_query_options']['order'] = $atts['order'];
    }

    if(!empty($atts['orderby']))
    {
        $avia_config['avia_custom_query_options']['orderby'] = $atts['orderby'];
    }

    return $meta;
}
// end of new options on sorting 

Under the filters – you will have then :

– yes – and the direct link to it is: https://kriesi.at/documentation/enfold/icon/#icons-are-showing-as-rectangular-boxes-

Hey Mike – when will the next update be issued?

Füge mal spasshalber diesen Code in dein Quick CSS und schau was mit der Seitenleiste dann passiert:

#top.page-id-6292 {
    overflow-x: visible;
}

.page-id-6292 #wrap_all {
    overflow: visible;
}

@media only screen and (min-width: 767px){
	.page-id-6292 #after_full_slider_1 .container {
	    display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    align-items: flex-start;
	}

	.page-id-6292 #after_full_slider_1 .container .sidebar {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 20px;
		align-self: flex-start;
	}
}

• This reply was modified 5 years, 6 months ago by Guenni007.

Can you link to that demo page please?

yes – that is as you said above the same tree structure of folder. So put in your edited alb file to the shortcodes folder. The code above reflects exactly that structure.
For a lot of other child-theme files this will be enough ( like you tried before ) most of the php files f.e. to have your own child-theme loop-index.php. Just put it in the child-theme includes folder. There is no need to have a code snippet like the one above.
For js files there had to be new loading snippets ( de-register the parent-script – enqueue the new child-theme script) – f.e. avia-snippet-sticky-header.js file to have your own header shrinking etc. pp

yes because it is not that ID:

.page-id-103 .avia-slideshow-arrows {
    display: none;
}

try first without !important. if it does not work set it to important.

ich werde dich per E-Mail nochmal kontakten.

A background-image is a backgroundimage is a background image.

All kidding aside. You could of course set the color section to follow the aspect ratio of the background image, but you run the risk of making the content too large for the container, which would then be cropped / overlapped.

Example: if you have an Iphone 6, the maximum width is about 375px – with a 16:9 picture you will have about 210px height.
With a font size of 16px and 1.5 times the line height per line, this would be 40px – making about 5 lines at 210px.
Everything above that would be too large.

Now you could of course set the property of the background image to “contain”, but then, like Ismael, you would have white areas without image.

See responsive color-section on .: https://webers-testseite.de/terve/
on wide screens this maybe ok – but on smaller screens ?

Does your background-image scroll or is it set to fixed?
(Edit : i ask – because there will be a solution if it is set to scroll.)

_____

But however it will be easier to blur it in a graphic programm and upload that blurred image.

Hallo Tobias : das wird mit dem Sliden ein Problem – denn das ist irgendwie auf Overflow: hidden angewiesen.
Eventuell kannst du mit faden ja zufrieden sein:
Das wäre hier so ein aufbau:

Color-Section : 1/1 container darin – dort dann einen easy slider platziert:
Der Color-Section gab ich eine benutzerdefinierte Klasse.

.slideshow-test .avia-caption {
    position: absolute;
    left: 60%;
    z-index: 50;
    top: 0;
    width: 40%;
    height: 100%;
    padding: 30px;
}

.slideshow-test .avia-slideshow li img {
    display: block;
    width: 60%;
    margin: 0;
    border-radius: 3px;
    position: relative;
}

.slideshow-test .avia-slideshow li  {
    z-index: 10 !important;
}

.slideshow-test .avia-slideshow-inner::before {
    content: "";
    background-color: #f9be46;
    width: 40%;
    height: 100%;
    z-index: 10;
    position: absolute;
    right: 0;
}

.slideshow-test .caption_framed .slideshow_caption .avia-caption-content p, 
.slideshow-test .caption_framed .slideshow_caption .avia-caption-title, 
.slideshow-test .avia-caption .avia-caption-content p, 
.slideshow-test .avia-caption .avia-caption-title {
    background: none;
    display: inline-block;
    margin: 0 0 1px 0;
    padding: 10px 15px;
}

https://webers-testseite.de/tobiasp/
aber: du siehst, dass der responsive Fall natürlich ein Problem darstellt. Bei Viel Text in der Caption.
Und das Laden nicht so gelingt ohne den Übergang zu vermeiden. Daher bleibe ich mal dran an dem Thema.
Ich muss mich da wohl oder Übel einlesen in “mutationobserver”

Ich habe hier mal eine Anfrage, dass wäre sicherlich eine Lösung: https://kriesi.at/support/topic/bind-event-to-slide-change/

• This reply was modified 5 years, 6 months ago by Guenni007.

zunächst einmal : Du schreist mich nicht wirklich an – oder ? Nichts Anderes ist es wenn man in Foren Alles in Großbuchstaben schreibt ;)

Also wenn Du bitte zunächst das mal umsetzt und auch kurz dann so lässt, dann kann man eventuell auch den Rest noch erledigen.

Dann wäre es hilfreich, du würdest für die Zeit des Layouts das Merging abstellen. Zumindest das vom CSS – dann sieht man auch schneller wo andere Einstellungen mit hineinspielen.

Das Logo muss die Möglichkeit haben bei sehr kleinen Screenweiten auf den verbleibenden Platz zu reagieren; oder du musst um für alle Screenweiten die gleiche Größe zu haben – Auch für breitere Screens ein Kleineres Logo in Kauf nehmen.
Das Logo hat am Anfang ungefähr eine Weite von 400px – wie willst du das ohne Veränderung in eine Screenbreite von 375px inclusive dem Hamburger-Menü und Padding sonst unterbringen?

Versuche jetzt bitte mal das hier:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  #header_main {
    border: none;
  }
  
  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: rgba(255,255,255,0.6) !important;
  }
 
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    max-height: 80px !important;
  }
  
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}

teste es geren mit dem rgba(255,255,255,0.3) aber du wirst sehen, dass etwas weniger Transparenz besser aussieht. Das ist aber Dir überlassen.

______________________
first of all : you are not really shouting at me – are you ? Nothing else is it if you write everything in capital letters in forums ;)

So if you please put this into practice and leave it like this for a short time, then you might be able to do the rest.

Then it would be helpful if you would turn off the merging for the time of the layout. At least that of the CSS – then you can see more quickly where other settings play a role.

The logo has to be able to react to the remaining space on very small screens; or you have to accept a smaller logo to have the same size for all screens – even for wider screens.
The logo has a width of about 400px at the beginning – how else do you want to fit this into a screen width of 375px including the hamburger menu and padding without changing it?

Remove all your settings on that and try :

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  

  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
 
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}