@steviger :
on the method above you had to think of that every page concerning to mee is subpage of mee. etc.

or if you have not too much pages and subpages etc.
you can give to them a tag

you can activate for all pages / posts the tag option by:

// add tag support to all posttypes
function tags_support_all() {
  register_taxonomy_for_object_type('post_tag', 'page');
}
add_action('init', 'tags_support_all');

function tags_support_query($wp_query) {
  if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
}
add_action('pre_get_posts', 'tags_support_query');

you now have the opportunity to give each post / page a tag (avoid using two of those tags )

function av_change_logo($logo){
  	  if(has_tag('mee')){ $logo = "/wp-content/uploads/2021/08/logo_MEE.png"; }
  elseif(has_tag('vtv')){ $logo = "/wp-content/uploads/2021/08/logo_VTV.png";}
  elseif(has_tag('jong')){ $logo = "/wp-content/uploads/2021/08/logo_JongLeren.png";}
  elseif(has_tag('xtra')){ $logo = "/wp-content/uploads/2021/08/logo_Xtra.png";}
  elseif(has_tag('mooi')){ $logo = "/wp-content/uploads/2021/08/logo_Mooi.png";}
  elseif(has_tag('jess')){ $logo = "/wp-content/uploads/2021/08/logo_JESS.png";}
  return $logo;
}
add_filter('avf_logo','av_change_logo');

I think that’s how it should work.
You just have to remember to set the tag for the pages you want to create.

but be carefull – this is casesensitive so noLightbox – not nolightbox.
But if it works – i guess you used the right writing.

Btw all social icons do have their own links per organisation (page)

if it is in your widget only ( not the top-heading ) i would install something like: restrict widget and put the different social media links into different widgets.
( or maybe better: https://wordpress.org/plugins/widget-logic/ )

first i would try to have this tree function to have all pages – that are subpages – the same logo

f.e:

function is_tree($pid){
global $post;
   $ancestors = get_post_ancestors($post->$pid);
   $root = count($ancestors) - 1;
   $parent = $ancestors[$root];
   if(is_page() && (is_page($pid) || $post->post_parent == $pid || in_array($pid, $ancestors))){
     return true;
    }
   else{
     return false;
    }
};

function av_change_logo($logo){
      if (is_tree(178)) { $logo = "/wp-content/uploads/2021/08/logo_MEE.png";}
  elseif (is_tree(aaa)) { $logo = "/wp-content/uploads/2021/08/logo_VTV.png";}
  elseif (is_tree(bbb)) { $logo = "/wp-content/uploads/2021/08/logo_JongLeren.png";}
  elseif (is_tree(ccc)) { $logo = "/wp-content/uploads/2021/08/logo_Xtra.png";}
  elseif (is_tree(ddd)) { $logo = "/wp-content/uploads/2021/08/logo_Mooi.png";}
  elseif (is_tree(eee)) { $logo = "/wp-content/uploads/2021/08/logo_JESS.png";}
   return $logo;
}
add_filter('avf_logo','av_change_logo');

you had to replace the aaa – eee with the page id’s.

all social icons do have consistent link – if they are present.
or could it be that on page1 there is a facebook link different than on page2 etc.

with logo you can do it this way :

add_filter('avf_logo','av_change_logo');
function av_change_logo($logo){
    if( is_page(21) ) {
    	$logo = "http://www.domain.com/wp-content/uploads/logoforpage21.jpg"; 
    }
  
    elseif ( is_page( array( 42, 54, 6 ) ) ) {
    	$logo = "http://www.domain.com/wp-content/uploads/logoforpage22.jpg"; 
    }

    elseif ( is_page() && !is_page(1307) )  {
    	$logo = "http://www.domain.com/wp-content/uploads/logoforpage23.jpg";  
    }
    return $logo;
}

border top color is just css with classes on #top ( .page-id-123 )

ruft mich doch bitte nochmal an – da kann ich euch sagen wie ich drauf kam.!

first of all : i think 5px is very small – you will hardly see any difference.

Did you choose for your svg divider that gray from the first ( adjacent ) color-section?
( Divider Color – Select the color for this divider here … )
Is there a page we can inspect?

@Donkies11 : maybe this could be helpful for you: https://kriesi.at/support/topic/smaller-version-of-header-for-one-page/#post-1316282

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

create your own shortcode f.e. ( sorry – it is mine – so its for german time )
binding words as friday the 28 had to be escaped
usage in content : [show-date]

function show_date_with_shortcode() { 
  date_default_timezone_set('Europe/Berlin');
  setlocale(LC_TIME, 'de_DE.UTF-8');
  $uhrzeit = date_i18n( 'l \d\e\n ' . get_option( 'date_format' ) . ' ' . get_option( 'time_format' ). ' \U\h\r'  );
  return $uhrzeit ;
}
add_shortcode( 'show-date', 'show_date_with_shortcode' );

or in this way:

function datum_shortcode() {
  $year = date_i18n('Y');
  $day = date_i18n('d');
  $month = date_i18n('F');
  $weekday = date_i18n('l');
  $datecolor = date_i18n('l') == 'Sonntag' ? 'red': 'gray' ;

  $datum = '<div id="kalenderblatt"><div class="monat-jahr"><span class="monat">'.$month.'</span><span class="jahr">' .$year.'</span></div><div class="tag ' .$datecolor.'">'.$day.'</div><div class="wochentag">'.$weekday.'</div></div>';
  return $datum;
}
add_shortcode('show-date', 'datum_shortcode');

to have with a little css:
https://basis.webers-testseite.de/calendar-sheet/

Read here: https://kriesi.at/support/topic/svg-support-3/

or better directly to: https://kriesi.at/support/topic/disappearing-webp-image-as-colorsection-background-image/#post-1317301

or the other way round:
You decide by giving same class to the images which belongs to each other.
Class: group-1 will open together – etc.

// group images for lightbox galleries (group-1, group-2 etc)
function handle_lightbox_groups_in_gallery(){
if(is_page(123456)){
?>
<script>
(function($){
    $(window).on('load',function() {
        $('.group-1 .lightbox-added').attr('data-group', '1');
        $('.group-2 .lightbox-added').attr('data-group', '2');
        $('.group-3 .lightbox-added').attr('data-group', '3');
        $('.group-4 .lightbox-added').attr('data-group', '4');
        $('.group-5 .lightbox-added').attr('data-group', '5');
        $('.group-6 .lightbox-added').attr('data-group', '6');
        $('.group-7 .lightbox-added').attr('data-group', '7');
        $('.group-8 .lightbox-added').attr('data-group', '8');

        var groups = {};
        $('.lightbox-added').each(function() {
          var id = parseInt($(this).attr('data-group'), 10);
          if(!groups[id]) {
            groups[id] = [];
          }
          groups[id].push( this );
        });

        $.each(groups, function() {
          $(this).magnificPopup({
              type: 'image',
              mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
              closeOnContentClick: false,
              closeBtnInside: false,
              gallery: { enabled:true }
          })
        });
    });
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'handle_lightbox_groups_in_gallery');

I have tried to read into the use of the nonce attribute in CSP Level 2, but my modest script knowledge is not sufficient for that.

see here : https://kriesi.at/support/topic/header-security-entries/#post-1153114

it is clear that if you like to use Google maps or play youtube videos you had to allow connection and script load ( and style too ) from Google Servers.
So you can add these servers by listing them in your CSP ( see here my settings : Link )
What makes me wonder ( and that was the reason for my topic on November 2019 ) is that the backend of a fresh installed WordPress could not work without these settings ( unsafe-inline … ).

you can try this:

#top.page-id-137 #av_section_3 .iconbox_content_title {
  display: block;
  position: absolute !important;
  bottom: 20%;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  line-height: 1.8em
}

well if it is your homepage – i would flex the content and use the whole width of the viewport,
and because you have one time the featured images on the right once on the left it is hard to say what text belongs to the image.
So maybe you colorize the columns to have a better overview.

#footer {
  padding: 25px 0 5px 0;
}

#footer .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
  padding: 0  !important;
  max-width: 100% !important;
  left: 0!important
}

#footer .container:after{
  display: none
}

#footer .container .flex_column {
  flex: 0 1 22%;
  width: unset !important;
  margin: 0 0 20px 0;
  padding: 10px;
  background-color: #333
}

#footer .container .flex_column section {
  padding: 0 15px;
}

@media only screen and (max-width: 1149px) {
  #footer .container {
    justify-content: space-evenly;
    width: 100%;
  }
  #footer .container .flex_column {
    flex: 0 1 46%;
    width: unset !important;
    margin: 0 0 20px 0;
  }
}

@media only screen and (max-width: 767px) {
  #footer .container {
    justify-content: space-evenly;
    width: 100%;
  }
  #footer .container .flex_column {
    flex: 0 1 90%;
    width: unset !important;
    margin: 0 0 20px 0;
  }
}

and on less wide screens: 2rows 2columns:

on small screens: 1 column only