Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Pablo2020

Turn off click through link portfolio page

Question

Hi All, I’m working with the Novo template in 7.1 and trying to modify the portfolio page click through link for one of my sub-pages. The portfolio page automatically adds a hover effect on top of my preview image which I’d like to keep so I don’t want to build these using different page types. I’d like to just stop the link from being active. I saw that it might be possible with a pointer event tag but I’m not sure exactly how to execute that. Any help is much appreciated! Thanks!

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0
2 hours ago, tuanphan said:

Can you share link to portfolio page? Difficult to give pointer event code without checking url.

Thanks Tuonphan! I’m a little uneasy about sharing the link to my site while it’s under construction, but I’m hoping you can use the demo site im pasting below as reference for what I’d like to do. The first item in the portfolio is called “American portraiture” I would like to have the image and hover effect stay on screen but if you try to click on that item  it wouldn’t go anywhere. Sorry, I know it’s not my page but it’s exactly my layout and template so I hope that’s OK. 

Share this post


Link to post
  • 0
37 minutes ago, Pablo2020 said:

Thanks Tuonphan! I’m a little uneasy about sharing the link to my site while it’s under construction, but I’m hoping you can use the demo site im pasting below as reference for what I’d like to do. The first item in the portfolio is called “American portraiture” I would like to have the image and hover effect stay on screen but if you try to click on that item  it wouldn’t go anywhere. Sorry, I know it’s not my page but it’s exactly my layout and template so I hope that’s OK. 

Where demo?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

I found this code which should do what I want but it requires adding the css class and then modifying the html link for my portfolio item, but I don’t know where to do that part, or how to find the link in the html. I used the inspector and can find the container and graphic but no specifically named link. I didn’t think we were able to change the html associated with these sites. Only the css  I’m lost. Thanks for any suggestions.

.not-active {

  pointer-events: none;

  cursor: default;

  text-decoration: none;

  color: black;

}

<a href="link.html" class="not-active">Link</a>

Share this post


Link to post
  • 0
26 minutes ago, Pablo2020 said:

I found this code which should do what I want but it requires adding the css class and then modifying the html link for my portfolio item, but I don’t know where to do that part, or how to find the link in the html. I used the inspector and can find the container and graphic but no specifically named link. I didn’t think we were able to change the html associated with these sites. Only the css  I’m lost. Thanks for any suggestions.

 

pointer event none will disable link & disable show title on hover

If you want to use, add to Design > Custom CSS

.grid-item {
    pointer-events: none;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

or use this code

Add to Home > Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.grid-item').off('click');
</script>

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
48 minutes ago, tuanphan said:

or use this code

Add to Home > Settings > Advanced > Code Injection > Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.grid-item').off('click');
</script>

 

You are amazing! Unfortunately I don’t have the business plan so I can’t modify the header code. I did put the pointer event code in css but it turned off all of the overlays and text for all of the items. Is there a way to isolate just a single item with that pointer event? Sorry, I really appreciate your help. 

Share this post


Link to post
  • 0
57 minutes ago, tuanphan said:

or use this code

Add to Home > Settings > Advanced > Code Injection > Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.grid-item').off('click');
</script>

 

If I upgrade my account I can modify this header code but would this script code isolate a single item or affect all of the items in the grid? It might be worth it to upgrade. 

Share this post


Link to post
  • 0

(I guess another CSS can solve. I will check carefully tomorrow) 😅

Script will affect all items with class .grid-item

you can add to Page Header, It will run on only that page.

I have not tried, but I guess we can exclude an item. Which item?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...