0

I have some promoted links some of which I want to be active and others I want grayed out and unclickable. Been toying around with some css but have had no luck yet.

Have tried the sample below but it has no effect.

.ms-tileview-tile-content > a {
    pointer-events: none;
}

Attempting to gray out the tile.

$('.ms-tileview-tile-content').wrap('<div class="grayOut"></div>');

.grayOut {
    opacity: 0.6;
}
2

Pointer-events is for Mozilla Firefox only. You can target single tiles using the :nth-child() selector with CSS and Jquery.

This example below colors the second tile gray, colors the tiles title gray and disables the clickevent.

<script type="text/javascript" src="../SiteAssets/jquery-3.1.1.min.js"></script>

<style type="text/css">
.ms-tileview-tile-root:nth-child(2) .ms-tileview-tile-content {
    background-color:Grey;  
}
.ms-tileview-tile-root:nth-child(2) .ms-tileview-tile-titleMedium {
    color:Grey;
}
</style>

<script>
$( document ).ready(function() {
$('.ms-tileview-tile-root:nth-child(2)').find('a').removeAttr('clickAction');
});
</script>
|improve this answer|||||
  • One question @Christoffer if the promoted link already has a background image how would I apply the grey over the image rather than the background color? – user2756091 Feb 24 '17 at 17:32
  • Nevermind, I got it. Just changed the opacity to .5 .ms-tileview-tile-root:nth-child(1) { opacity: .5; } – user2756091 Feb 24 '17 at 17:48
  • Glad to hear! @user2756091 :) – Christoffer Feb 27 '17 at 7:10
0

Regardless, the code is working or not, but I think you can't achieve that scenario (Gray out some links) because there's no ID for every link to control that. so in this case, if the code is working it will gray out all links.

What I think, you are trying to prevent unauthorized people from accessing these links so I suggest to Hide these links rather than diable it, by managing Item Permission.

Now the links should be shown only to the authorized people based on the assigned permission for each link.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.