target a Modal instead of _self for content services

This topic has 10 replies, 2 voices, and was last updated 5 years, 5 months ago by Skandha.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
June 9, 2019 at 11:30 am #174493

david viard
Participant

Hello,

I am trying to change behavior of home page links from the featured-content and services sections.
At first, I tried deactivating them, which works (see, this thread…) using CSS pointer-events:none;

But the display on mobile (phone) is not good since text/images are too narrow.
So, I thought of using a simple thumb+title and displaying the resulting article/page in a modal box instead of a classic link. My goal being to stay on the home page and not change page for these short contents.

I installed fancy-box plug-in & managed to change the content-featured.php template part to include a “fancy-frame” class on the links.
Now, I am a bit lost doing the same thing with the Services. I tried modifying service.php in the inc folder but without success.

Can you help? thank you

Site url: https://www.maison-des-algues.com

PS: I made a template page with no header/footer and/or remove them with a display:none in CSS for that purpose, depending on wether I use posts or pages

June 9, 2019 at 9:11 pm #174512

Skandha
Participant

@xdave: Hello David,
The Featured Content and Services Section on mobile view looks distorted. I think this is due to one of the plugins you are using. Can you deactivate all your plugins and check if the sections show up well on mobile view?

Let me know if the issue persists!
Kind Regards,
Skandha

June 10, 2019 at 11:03 am #174584

david viard
Participant

hello Skandha,

I know it is distorted, that’s not what I asked.
I want to open a modal instead of targeting _self or a blank window.

Thanks.

On featured-content.php, I just had to change lines 19 & 35 by adding a class fancy-frame on the a tag. I don’t see where to do it for services.

June 11, 2019 at 3:58 am #174674

david viard
Participant

@skandha,

No answer to my request?

Is there a way to have multiple rows of feature-content, at least?
I don’t care they’re called services or whatever, I just want a different background on those two sections and open their content in a modal (div)

thanks

June 11, 2019 at 7:30 am #174692

Skandha
Participant

@xdave: Hello David,
I suggest you to always create a child theme before making any changes to the core theme files. If you directly make changes to the core theme file all your changes will be lost when you update the theme. So please create a child theme before making changes in theme files.

To add fancy-frame to services section you will need to first create a child theme.
You can use Generate Child Theme Plugin to create a child theme.

You will need to copy the inc/service.php to the child theme folder and should have the same path.

Then find post-thumbnail text and you add add the fancy-frame class there.

As you increase the no of featured content the featured content posts will flow to the next row.

Let me know if this helps you out!
Kind Regards,
Skandha

June 11, 2019 at 12:16 pm #174712

david viard
Participant

hello @skandha,

I have already created a child theme of course.
And I found out the code was in this file (inc/service.php). I did what you suggest (adding the fancy-box class to the post-thumbnail text) but when uploaded back this does not work as expected.
The class does not show up in the code (online).
I was wondering if I had to do something elsewhere also.
I managed to do it successfully with the featured-content.php file, so I am a bit surprised.

It looks like there is some code that strips out my added class

kind regards

Edit : please note , I used Child Theme Configurator to build my child theme, but started on the free version. Maybe there is a miss at that point.

edit2 : the modal is functional on featured on the site, you can see the first row with just the title+thumb. The link is disabled on services with this css code [
/*#featured-content-section, */
#service-content-section {
pointer-events:none;
}

June 12, 2019 at 1:56 am #174748

Skandha
Participant

@xdave: Hello David,
Can you let me know on which line you added your class in service.php?

Also can you let me know what you are trying yo achieve by add the class?

Kind Regards,
Skandha

June 12, 2019 at 3:47 am #174753

david viard
Participant

@Skandha

hello.
The “fancybox-iframe” class allows a jQuery command from the fancy-box plug-in to display the content of the page in a modal, as shown on the second row “Nos petits plus” which is my modification of the featured-content.php*.

I added the class on line 273 of inc/service.php

It never shows up in the code online. I am baffled.

* Btw, suggestion, this should/could be an option in your themes.

June 12, 2019 at 4:05 am #174757

Skandha
Participant

@xdave: Hello David,
You will need to add the class in line no 189 in service.php as well. Then the code will show up on your site.

The doesn’t responsive though as when I switch to smaller screen the featured content and service section looks distorted.

Kind Regards,
Skandha

June 12, 2019 at 6:35 am #174771

david viard
Participant

@Skandha,

did that just now (I did before, restored from the original and made the changes again), still does not work.
It was my first guess since I did it on feature-content.php without problem.
So, I resolved to ask here, I really don’t understand what is going on.

Edit : I know it’s not responsive (yet), I need to solve this modal subject first.

June 13, 2019 at 2:31 am #174866

Skandha
Participant

@xdave: I added the class in line no 189 in service.php and the class fanxybox-iframe is showing up at my end.

Can you try doing this to the parent theme just to check if the class shows up?

Kind Regards,
Skandha
Author

Posts