Hi,
Very good, we will look at your other thread.

Best regards,
Mike

Hi,
Thanks for the login, I found that you had a PHP function in your Quick CSS:

add_filter('avf_magazine_excerpt_length','avf_magazine_excerpt_new_lenght', 10, 1);
function avf_magazine_excerpt_new_lenght($excerpt) {
$excerpt = 100;
return $excerpt;
}

I removed this but merging still doesn’t seem to be working, is this site using object-oriented cache such as Memcached, Redis, Varnish, Litespeed, etc. if so please clear the server level cache as the function above may still be in the object cache.

Best regards,
Mike

Hey delmonte,
Thanks for your question but unfortunately you will need to change the order of your form to do this.

Best regards,
Mike

Hi,
Thank you for your patience and the link to the GitHub project, I first noticed that the project has an option to define a button on line 72 by adding the attribute to the shortcode like this:
[mfp_post_popup post_slug_id="3460" popup_id="1" link_text="Popup Button" button="true"]
in the project on line 105 you will see it has an image attribute image_link so it will allow an image like this:
[mfp_post_popup post_slug_id="3460" popup_id="2" link_text="" image_link="/wp-content/uploads/2015/07/portfolio-2-2-260x185.jpg"]
notice the link_text=”” is empty for the image, without the empty attribute the default is “Click Me”

Now considering that your goal is:

to create a portfolio page style by clicking on the image from the main page, then loading the pop-up window in which more detailed information is shown as a scrolling popup window.

I tested this GitHub project on some portfolio items and found that full width elements break it and display some the target page below the footer on the trigger page, it works fine if the target page has no full width elements.

If you are going to have full width elements on the target page why not just use a button or image with ?iframe=true in the link?

you could use css like this to make the lightbox larger:

.mfp-iframe-scaler {
    width: 100% !important;
    max-width: 100% !important;
    height: 300vh !important;
    max-height: 300vh !important;
}
.mfp-iframe-holder .mfp-content {
    max-width: 90vw!important
}

and use the theme options to hide the footer and header on the target page:

So since you want to create a grid of images that link to pages that show in a lightbox, I don’t see an advantage to using this GitHub project to create a grid of shortcodes when you could use the image elements to do it without errors.
Another built-in option would be to use the portfolio ajax, true it’s not a lightbox but it loads the content on the same page.

For the example page you linked to, I didn’t find any lightbox popups on it, each grid image that I clicked loaded a new page, perhaps you meant to link to a different page.

Best regards,
Mike

Hi,
Thank you for the link to your site, I see that you have used custom css to hide the checkout col-2, this is where the shipping information is located.
Please disable your custom css to for the checkout and clear your cache and check again.

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
You can add a Horizontal Ruler Separator shorcode in a custom HTML widget in your sidebar, here is an example:


to reduce the padding and margin around the separator use this css in your Quick CSS:

#main .sidebar .widget_custom_html {
	padding: 0;
}
#main .sidebar .widget_custom_html .custom-html-widget .hr-short {
	margin: 0;
}

the expected results:

Best regards,
Mike

Hi,
Guenni007 thank you for sharing, I agree that it is not practical which is unfortunate because for Chrome, Edge, Safari it was a simple and easy css solution.
As you pointed out if the image is a direct child of the background-image container then it works good.

For future readers that want to try this with a code block element that will work in all browsers:

<div>
        <img src="/wp-content/uploads/2022/06/BV-Associates-Banner-Main-1.jpg">
        <img src="/wp-content/uploads/2022/06/badges.jpg" style="position: relative;top: -300px;left: 100px;mix-blend-mode: multiply;">
 </div>

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Guenni007, I don’t think this is what whdsolutions was trying to achieve, unless I misunderstood.
He is trying to use the mix-blend-mode CSS property for an image on an image, similar to this

here the logos (badges) have the original white background:

originally on his site the layerslider did this, so he was trying to duplicate it with a color section and imagine element, currently he has changed the layerslider to use a transparent background image like you suggested.
Your solution works great and a transparent background image is easier to use, but I found it interesting that the css mix-blend-mode could do this.
Do you have any ideas for my example to work with firefox?

Best regards,
Mike

Hi,
Thanks for your feedback, my results with Chrome & Edge on Windows and Safari and Chrome on Mac:

unfortunately with Firefox it is not working on Mac or Windows, I assume that your screenshot is with Firefox. I don’t know why it’s not working for Firefox.

Best regards,
Mike

Hi,
Sorry, I don’t know about that, you will need to ask a google support member.

Best regards,
Mike

Hi,
To add a new folder to the child theme directory called shortcodes you will need to do so with FTP or your web host “file manager” you can’t do this from inside WordPress.
If you include your login to your web host we could help, or you could ask your web host support to create the directory for you and copy the modified file to it as explained above.

Best regards,
Mike

Hi,
Thanks for the feedback, please try updating your theme to v5.0.1 by downloading the latest version from your Theme Forest account and uploading it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New as outlined above.
I don’t believe that this is the root cause, but we should rule it out as a possibility.
It probably is something to do with your Google account but I don’t know why since you have an active billing account and you followed the steps to create an API key.

Best regards,
Mike