By the way: this code here is to replace the parent ALB with the Child-Theme ALB:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

the other code is to dynamically replace some tags – and has nothing to do with the caption title tags

function replace_tags_with_tags(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
        });
      }
    
      replaceElementTag('h3.widgettitle', '<h4></h4>'); // hier kann man nun weitere anfügen immer durch semicolon getrennt
    
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'replace_tags_with_tags');

if you are familiar with child-themes and managing some snippets for functions.php of your child-theme:
i edited the headings alb element to have that option: https://webers-testseite.de/edited-enfold-alb-elements/#headings

for example i did that on Disclaimer to show : https://webers-testseite.de/impressum/#disclaimer

complete the rule above by:
(not to much else the width had to be adjusted.

.responsive #header .social_bookmarks li {
    margin-right: 5px;
}

font-size: maybe you only make it normal and let 16px stay:

#header_meta #avia2-menu a {
    font-size: 16px !important;
    font-weight: normal !important;
}

the next questions will cost ;) :lol

in you case i would do it this way and for the whole screen-width

.responsive #header .social_bookmarks li {
    border: none !important;
}

* on that case you can goto 27px width / height above (instead of 25px)

delete this is obsolete:

@media only screen and (max-width: 767px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul {
    float: left !important;
}
}

this is only by text-align done:

but if there will be no more social links and sub-menu points we can manage that on one line :

@media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks {
	text-align: left;
	width: 25%}
	.responsive #top #header .social_bookmarks {
	display: inline-block !important;
}
.responsive #header .sub_menu {
	float: right !important;
	width: 75%;  
}
.responsive #header .sub_menu ul {
    text-align: right;
}
}

give an !important to contain:

#top #wrap_all .av-social-link-theorytest a::before, #top #wrap_all .av-social-link-labs a::before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain !important;
}

and btw:

you can have the hover like social-bookmarks as well:

#top #wrap_all .av-social-link-theorytest:hover a {
    background-color: #d11a4e !important;
}

#top #wrap_all .av-social-link-labs:hover a {
    background-color: #46d4fe !important;
}

and to get a bit distance between Logo and header_meta in responsive case :

@media only screen and (max-width: 767px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul {
    float: left !important;
}
}

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

some seconds faster Mike

i think the one span is obsolete .
And maybe the effect is better if the big i is better visible as Letter and function: try this:
<p style="text-transform: uppercase; color: #ffffff;">Werden Sie Partner auf der Plattform für Mediziner<span style="color: #dcb505; font-weight: bold; font-size: 1.4rem; vertical-align: top">I</span>nnen</p>

see here : https://webers-testseite.de/inline-css/

Nun habe ich über FTP die neue Version installiert

hast du über die bestehende Version “drüber” gebügelt. Heißt – drag&drop Enfold Ordner über Enfold Ordner geschoben und Dateien ersetzten lassen?

Hier liegt beim ftp update meist der Hase im Pfeffer. Enfold hat einiges an Strukturen und Dateien geändert. Vor allem die shortcodes liegen nun in Unterordnern vor. Wenn du also dieses Verfahren oben genutzt hast liegen manche Dateien dann doppelt vor ( iconbox, iconlist etc. pp). daher meine Empfehlung: den alten Enfold Ordner vorher umbennen und dann den gesamten neuen Enfold Ordner hochladen.

• Use a child-theme always.
• Update via ftp.
• Rename your enfold folder to f.e. enfold-old
• Upload the new enfold folder via ftp
• Check if all your existing settings work to your full satisfaction.
• If not delete this new enfold folder via ftp
• rename the old one back to enfold.

So you allway can go back to the former status quo

Das mit dem Umbennen macht nun insofern nur Sinn, um schnell den neuen Ordner hochzuladen. Ein Rollback ist jetzt nicht mehr gegeben.
Dann kannst du nachher den alten Ordner löschen.
Das Child-Theme wird beim Updaten nicht gebraucht und auch nicht erneuert. Das ist ja mitunter genau der Sinn. Alle Einträge in die child-Theme functions.php gingen ja dann verloren.

well i would do it to make out of those two ( links ) images a social bookmark !

for that place this to your functions.php of your child-theme

function avia_add_custom_social_icon($icons) {
	$icons['Theory-Test'] = 'theorytest';
	$icons['Labs'] = 'labs';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

And this to your quick css:

#top #wrap_all .av-social-link-theorytest a:before,
#top #wrap_all .av-social-link-labs a:before
{
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
}

.responsive #top #header .social_bookmarks { display: block !important}

#top #wrap_all .av-social-link-theorytest a:before {
background: url(https://haqsfashions.website/helixcloudservices/wp-content/uploads/2018/05/Theory_Test_App_icon.png) no-repeat center center
}

#top #wrap_all .av-social-link-labs a:before {
background: url(https://haqsfashions.website/helixcloudservices/wp-content/uploads/2018/05/Screen_Shot_20180430_at_105941.png) no-repeat center center
}

you will than have on Enfold-Child – Options ( click to enlarge )

these icons will be there where a social bookmark can be – and you can directly determine a link target.

See here how they would behave on small screens: https://webers-testseite.de

and by the way – do not take background – instead take background-image for you would like to take an image:

#grid1 {
    background-image: url(https://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

ok – we never stop learning:

but : Safari does not do that on my end here

Info from can i use this (Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes )

and the color blend mode is the interesting one for you .

there is a workaround since there was a mix-blend-mode
give the surrounding container a custom class and:

.with-overlay .avia-iframe-wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #004ae1;
    pointer-events: none;
    mix-blend-mode: color;
}

you can see here a list of that: https://css-tricks.com/almanac/properties/m/mix-blend-mode/

the options are very similar to photoshop layer styles

here is another method – i did not know that pointer-event has an influence of the links down under.
( i gave a custom class to one of the surrounding containers: with-overlay)

.with-overlay .avia-iframe-wrap::after { 
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  background-color: rgba(0, 0, 255, 0.5);
  pointer-events: none;
}

see my test page above – this effect is not nice – It’s like a veil over