Requirement:
When a thread has a response, or is started by someone with the role of - "DigitalPlatforms Support" or - "Administrator"
then we need to display an icon next to the thread display when viewing a board:
As an example, please see the following mock-up: https://playstation.box.com/s/wf8t6e7y69rvj63n194l
We want to implement it on all the listing of threads on a boards
E.g. We want it on URL : http://community.us.playstation.com/t5/PlayStation-General/bd-p/10031
Hi bhupen - The icon which you are referring to is the user role icon, and by default, it shows up along with the user name, i.e. in the Author row. I checked and noted that these default icons are hidden via CSS in PlayStation Community, using display:none;
CSS to be used to display them back again:
.messageAuthorColumn .UserName.lia-user-name img.lia-user-rank-icon-left {
display: block;
margin-left: -81px !important;
}Now, as you want to display this only for 2 roles, i.e. "DigitalPlatforms Support" or - "Administrator", so this can be done via jQuery:
ForDigitalPlatforms Support:
<img class="lia-user-rank-icon-left" title="DigitalPlatforms Support" alt="DigitalPlatforms Support" id="display_9" src="http://community.us.playstation.com/t5/image/serverpage/image-id/213315i52E5BF6439205975/image-size/large/is-moderation-mode/true?v=mpbl-1&px=600">
For SMSCS:
<img class="lia-user-rank-icon-left" title="Administrator" alt="Administrator" id="display_7" src="http://community.us.playstation.com/t5/image/serverpage/image-id/213313i3C90E5E52BF684C6/image-size/large/is-moderation-mode/true?v=mpbl-1&px=600">
So, you get to this node using jQuery, and the read the title attribute using .attr, and hide the icons which are not one of these 2.
<script>
$(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
var getRole = $(this).find('.lia-user-rank-icon-left').attr('title');
if(getRole != "PlayStation MVP" || getRole !="Administrator"){
$(this).find('.lia-user-rank-left-icon').hide();
}
});
</script>
I hope this helps.
Hi VarunLuthra Thank you so much for this help and giving your precious time into it.
I did display back the icon on listing but somehow Iam not able to show desired icon on "DigitalPlatforms Support" or
- "Administrator". Icon is displaying for all. Iam sure Iam missing something somewhere. Can you please have a look and suggest me the right steps.
I would like to display icon only on two roles."DigitalPlatforms Support" or - "Administrator" not for other.
Steps I followed:
1. Made a Digitalplatforms role in backend.
2. Put the following code in header section "Page Head Content" and "Page Header". I tried to put code on both section at a time because its not working in any place. First I put the code in "Page Head Content" and later on "Page Header".
<script>
$(".thread-list .lia-list-row .messageAuthorColumn").each(function(){
var getRole = $(this).find('.lia-user-rank-icon-left').attr('title');
if(getRole != "DigitalPlatforms" || getRole !="Administrator"){
$(this).find('.lia-user-rank-left-icon').hide();
}
});
</script>
<script>
<img class="lia-user-rank-icon-left" title="DigitalPlatforms Support" alt="DigitalPlatforms Support" id="display_9" src="http://stage.community.us.playstation.com/html/assets/true.png" >
<img class="lia-user-rank-icon-left" title="Administrator" alt="Administrator" id="display_7" src="http://stage.community.us.playstation.com/html/assets/true.png" >
</script>
Help is appreciated.
Thanks & Regards
You're on the right track putting your script in the wrapper Page Head Content, though there are several other ways of including script blocks, depending on your preference. Previous advice is sound, though you can probably simplify this one a bit. You might leave the CSS rule which hides the icons, then just turn on the ones for the roles you want -- assuming you have far fewer Admin and Support users here than ordinary users -- which you should be able to select like so:
<script type="text/javascript">
(function($){
$(document).ready(function() {
$('.lia-user-rank-icon-left[title="DigitalPlatforms Support"], .lia-user-rank-icon-left[title="Administrator"]').show();
});
})(LITHIUM.jQuery);
</script>
I've wrapped this in a doc.ready so it won't execute until all of the elements in question are loaded. You could substitute Lithium versions of the <script> and doc.ready bits, though that's really not necessary if you're executing this in your wrapper header.
Cheers,
Tyson
Also, if you're going to stick this script in the wrapper header, you might want to wrap it with something like the following:
<#if page.name == "ForumPage"> <script> ... </script> </#if>
So it doesn't execute on every single page on the site.
Cheers,
Tyson
