remove link to a child page within a grid page

• 

  bytecodeio · Member · May 27, 2016 at 1:17 am

  • Copy link
  • Add topic to favorites

  Hi,

  I would like help in achieving the following:

  On these pages:
  https://bytecodedotio.wordpress.com/partners/
  https://bytecodedotio.wordpress.com/case-studies/

  1) I would like the images (partners logos and image used for the case study) to be unclickable (i.e. do not click through to its child page)
  2) But it’s important that the copy that has a link, to link through.

  On this page:
  https://bytecodedotio.wordpress.com/technology/
  1) tiles to be unclickable (i.e. do not click through to its child page)

  Thank you in advance,
  Gabi

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · May 29, 2016 at 10:11 pm

  • Copy link

  Hi Gabi,

  You could use the pointer-events property to make those links unclickable on those specific pages:

  .page-id-50 h2.entry-title a, .page-id-62 h2.entry-title a, .page-id-56 h2.entry-title a {
  pointer-events: none;
  cursor: default;
  }
  
  .page-id-50 .page > a, .page-id-62 .page > a {
  pointer-events: none;
  cursor: default;
  }

  Add the above to the CSS panel in the Customizer and let me know how you get on. :)

• 

  bytecodeio · Member · May 31, 2016 at 5:56 pm

  • Copy link

  Hi Siobhyp,

  Thanks for your reply.

  The page http://bytecode.io/technology/ got resolved with the code above.

  However, on the pages:
  – http://bytecode.io/partners/
  – http://bytecode.io/case-studies/

  the images for the tiles are still clickable.

  Can you please advise?
  Thanks again
  Gabi

• 

  siobhyb · Member · Jun 1, 2016 at 12:48 pm

  • Copy link

  Hi Gabi,

  I’m sorry about that. I asked one of my team mates to take a look and we figured out exactly what wasn’t working with the snippet I initially provided.

  Can you please remove the following from your custom CSS:

  .page-id-50 .page > a, .page-id-62 .page > a {
  pointer-events: none;
  cursor: default;
  }

  And then replace it with this snippet:

  .page-id-50 .hentry a:first-child, .page-id-62 .hentry a:first-child {
      pointer-events: none;
      cursor: default;
      display: block;
  }

  Let me know how that goes.

• 

  bytecodeio · Member · Jun 1, 2016 at 4:16 pm

  • Copy link

  Hi Siobhyb,

  Thanks again for your reply.

  We are almost there.
  With the new snippet, the images for the tiles do not click through (yay!), however – you cannot click on the links contained in the tile/block copy.

  For these pages, I still require any links contained in the tile copy to click through.

  – http://bytecode.io/partners/
  – http://bytecode.io/case-studies/

  Can you please check again?
  Many thanks in advance,
  Gabi

• 

  siobhyb · Member · Jun 1, 2016 at 5:02 pm

  • Copy link

  Hi Gabi.

  Can you try replacing .page-id-50 .hentry a:first-child, .page-id-62 .hentry a:first-child with .page-id-50 .page > a, .page-id-62 .page > a to leave you with the following:

  .page-id-50 .page > a, .page-id-62 .page > a {
      pointer-events: none;
      cursor: default;
      display: block;
  }

  Let me know if that does the trick!

• 

  bytecodeio · Member · Jun 1, 2016 at 5:05 pm

  • Copy link

  Yes! It worked :)
  Thank you very much once again.

• 

  siobhyb · Member · Jun 1, 2016 at 5:14 pm

  • Copy link

  Yay, I’m so happy to hear that worked! You know where to find us if extra questions come up.