it would be helpful to know what kind of setting your header is set to.
Best is to see your site to give precise instructions.

But on most cases the header_bg class is for that a good hint

it is in deed the fact that it is a bit transparent ( opacity: 0.95)
just change for those pages the .header_bg option with quick css:

.home .header_bg {
 opacity:0.5;
 filter:alpha(opacity=50);
}

it maybe neccessary to have here an !important – but first try it without

Sorry – take the time only form $entry – i changed the snippet above so try for your needs:

function avf_portfolio_extra_mod($output, $entry) {
	$output = '<div class="portfolio-new-meta">';
	$output .= '<div class="portfolio-read-more-link"><a href="'.get_permalink($entry->ID).'" class="more-link">'.__('Read more','avia_framework').'<span class="more-link-arrow"></span></a></div>';
	$output .= '<time class="date-container minor-meta updated">' .get_the_date("j. F Y", $entry).'</time>';
 	$output .= '</div>';
	return $output;
}
add_filter('avf_portfolio_extra', 'avf_portfolio_extra_mod', 10, 2);

First – does it realy work with $markup ? at the classes

what about this :

add_filter('avf_portfolio_extra', 'avf_portfolio_extra_mod', 10, 2);
function avf_portfolio_extra_mod($output, $entry) {
	$output = '<div class="portfolio-new-meta">';
	$output .= '<div class="portfolio-read-more-link"><a href="'.get_permalink($entry->ID).'" class="more-link">'.__('Read more','avia_framework').'<span class="more-link-arrow"></span></a></div>';
	$output .= '<time class="date-container minor-meta updated">'.get_the_date("Y-m-d", $entry).'</time>';
 	$output .= '</div>';
	return $output;
}

the point is to include the same relation to the entry ID as on permalink – you can do everything as format you like f.e.

.get_the_date("d. M Y", $entry).

on default the month names are localized via General Setting Language of the page

by the way: thanks – nice use of that filter !

is there a link you can make here public. only that image leads me to a different way it was generated than over the portfolio grid alb element.

Edit Ok – i didn’t see that there is : “special column layout – side by side” option. ( has this been around for a while?)

Next Question – how do you set the date to this element? because on default i got no date there.
Are these portfolio ALB generated – or set by classic editor. Do you have inserted here the post meta data?
If so – did you take the publishing date or the last modified date etc. pp

more input please

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

Everything stayes the same but you have instead of:

jQuery(window).load(function(){

that:

jQuery(window).on('load', function () {

do not forget to clear all browser cache and to refresh (if used) the merged files in enfold (see performance tab in enfold options)

See here in the first yellow frame: https://api.jquery.com/load-event/

maybe a jQuery ( no SEO influence on that) solution will be ok for you –
try this in child-theme functions.php:

Edit: ok i see you began to insert manually – what is best for SEO Purpose too.

Have you thought about editing the first of the 1/4 columns of each row so that it is set to no-margin?
Unfortunately, the first in a row is always assigned the default value: “space between columns”.

Be carefull to do this each time – when you change positions in your layout ( by moving the columns e.g.)

it is because of this rule in enfold settings:

.responsive .av_one_fourth.first + .av_one_fourth.flex_column_div {
 margin-left: 4%
}

so you got two options here – either you think of that to edit each first column in that layout – or you overwrite it by:
( and that is much more comfortable )

.responsive #top .four-in-a-row .flex_column {
 margin-left: 0 !important
}

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

2. pictures have 0 padding & margin. BUT have a 50px left and right padding to the parent container.(again exactly like the website I mentioned above)

i do not see that on the image in your example page – as on my test page too

so more and precise input for those who want and could help.

this is my Advance Layout for it:

• give a custom class to the color section f.e. : four-in-a-row
• you can put as many 1/4 Containers in it you like.
• BUT: ever first 1/4 column in it – you had to set the no-margin ( no space between the columns) option again
• The Containers 1/4 : no distance but indivual height
• put in each 1/4 container an image , a heading , a textblock
• the images are pure images – you can animate them if you like
• the images should have the same dimensions!

put this to your quick css:

.four-in-a-row .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.four-in-a-row .entry-content-wrapper:before,
.four-in-a-row .entry-content-wrapper:after,
.four-in-a-row .entry-content-wrapper .flex_column:before,
.four-in-a-row .entry-content-wrapper .flex_column:after {
  display: none
}

.four-in-a-row .entry-content-wrapper .flex_column {
  float: none;
  width: unset !important;
  padding: 0;
  margin: 0;
  flex: 0 1 25%;
  display: inline-flex;  /***  the flex-item itself is a flex-container too ***/
  flex-flow: column wrap;
  justify-content: stretch;
}

.four-in-a-row .entry-content-wrapper .flex_column .av-special-heading {
  padding: 0 !important;
  margin: 0; 
}

.four-in-a-row .entry-content-wrapper .flex_column .av-special-heading,
.four-in-a-row .entry-content-wrapper .flex_column .av_textblock_section  {
  padding: 5px 20px !important;
}

@media only screen and (max-width: 989px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 0 1 33.33%;
  }
}

@media only screen and (max-width: 767px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 0 1 50%;
  }
}

@media only screen and (max-width: 480px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}

if you like to start with 6 images in a row – no problem :
start with
flex: 0 1 16.66%;

see result: https://webers-testseite.de/4inarow/

yes on avia.js line 32 :
you can enter postion:’bottom’ and the rest will be css – but maybe a mod knows a child-theme solution without having a whole avia.js on child-theme folder.

new $.AviaTooltip({"class": 'avia-related-tooltip', data: 'avia-related-tooltip', position:'bottom', scope: ".related_posts, .av-share-box", attach:'element', delay:0});

on line 1609 maybe that is enough to replace top with bottom – sadly this is not a pluggable function ( if function exists …) then it would be ease to have a child theme solution)

Sorry – hope ismael or günter knows how to.

this is hard stuff – because it seems to be calculated values in the infinite vastness of the source code.
Maybe some of the Devs knows where to find.

li.av-share-link:hover .avia-related-tooltip  {
  transform: translateY(15px) !important;
  top: unset !important;
  margin-top: unset !important;
}

li.av-share-link:hover .avia-related-tooltip .avia-arrow-wrap {
  top: 0 !important;
  bottom: auto !important;
  transform: scaleY(-1) !important;
}

This quick css solution is an insufficient solution of the whole, because the original container initially appears for fractions of a moment at the top position.

maybe Günter could insert an extra class to that page ( similar to privacy-policy page ) which is set to be the footer-page

where then in fact the question would be how to rewrite the code so that it works with a class to body.
i tested of course !is_page(106) but even with the ID it does not work. so !is_page(‘kontact-section’) won’t work too.

Thank you GrandmasterA for your addition to the if-clause.
Preventing something from emerging is definitely better here than just hiding it later.

This should work on both post with classic editor and posts with alb editor ( don’t know if it will work for Gutenberg):

add_filter('the_content', function($content) {
     if (is_singular('post')) {
      $content .= '[av_sidebar widget_area="my-sidebar-name"]';
     }
     return $content;
   }
);

And if you got more than one widget in that widget area – you can play with flex layout to have those widgets besides each other :

#main .avia-builder-widget-area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#main .avia-builder-widget-area::before, 
#main .avia-builder-widget-area::after {
  display: none;
}

#main .avia-builder-widget-area .widget {
    padding: 0;
    margin-bottom: 30px;
}