Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Highlighting Discussions for Roles

Hey there Vanilla Community!

I've been toying around with Vanilla quite a lot and am loving it, as well, I've been lurking around the forums for questions I've had along the way and have been able to figure out the majority of any alterations I've wished to make.

I'm stuck on this issue however, highlighting certain discussions in a category's main discussion list per user role.

To give an example - I have a role called "VIP", and I'd like discussions started by that role to be "highlighted" in the discussions list.

What I've tried:

  • Defining .ItemDiscussion.Role_VIP's background color via custom CSS using !important to override all previous styles.
  • Trying several variations of the above with .DataList, even resorting to trying to define .Role_VIP's .div, etc.

Custom CSS properties work perfectly inside a discussion, highlighting said UserRole's (VIPs) posts, but not on the discussion list.

My best guess is it's going to require PHP, which I have essentially no knowledge of, and after hours straight of trying to make a simple function such as this work, have become quite frustrated with it all.

If anyone could point me in the right direction or lend a hand it would be extremely appreciated, I'd even be happy to tip someone to help at this point.

You guys rock, thank you in advance.

  • iK1NG

Comments

  • Options

    Found a plugin by @x00 that achieves this via PHP, however it is set to be purchased as the requirement.

    https://github.com/x00/PurchaseHighlightedDiscussions-Vanilla-Plugin

    Would love to see if we could extend this to allow highlighting for roles!

    Honestly wouldn't even mind hard-coding the allowance if I knew how. :open_mouth:

  • Options
    whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    You could have a look at this plugin:

    http://vanillaforums.org/addon/roletitle-plugin

    This adds a role title (which you could hide via CSS if you didn't want it) and a CSS class to each role.

    I don't use it, so don't know if it works with 2.2, but ti should at least give you a starting point.

  • Options
    ik1ngik1ng New
    edited January 2016

    @whu606 said:
    You could have a look at this plugin:

    http://vanillaforums.org/addon/roletitle-plugin

    This adds a role title (which you could hide via CSS if you didn't want it) and a CSS class to each role.

    I don't use it, so don't know if it works with 2.2, but ti should at least give you a starting point.

    Thank you for your input! :)

    I have RoleTitle on the site and it allows me to assign a role's comment/discussion CSS successfully (how I was able to get the role's background changed for comments) but for some reason doesn't extend to the discussion listing page.

    I have tried utilizing the parent class (.DataList) that I found on the discussion listing page using Chrome's inspect element feature, using .Role_VIP (RoleTitle's assigned role CSS) to no avail.

  • Options
    hgtonighthgtonight ∞ · New Moderator

    You would do something like:

    public function discussionsController_beforeDiscussionName_handler($sender) {
      $sender->EventArguments['CssClass'] .= ' ' . $RoleName;
    }
    

    You need to fill out the $RoleName variable as you see fit.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    Try this...

    li.Item..Role_VIP {
    background: yellow !important;
    }

  • Options

    @hgtonight said:
    You would do something like:

    public function discussionsController_beforeDiscussionName_handler($sender) {
      $sender->EventArguments['CssClass'] .= ' ' . $RoleName;
    }
    

    You need to fill out the $RoleName variable as you see fit.

    Thank you so much for the reply, I tried adding the snippet above directly to class.roletitle.plugin.php at the bottom to no avail (Before the closing bracket of the plugin I believe, bear with me, designer not a developer haha!) -

    And I did test it on Vanilla's default theme with an added custom.css file just to be sure that the theme wasn't interfering with it. :)

    But I believe I've figured out where the problem lies:

    RoleTitle doesn't natively define any css injection into discussion items on the discussions page, the idea you posted above seems to want to add that exact function but for some reason doesn't seem to want to work as far as I can tell. :(

    RoleTitle is calling for a custom CSS injection on comments -

    But not on the discussion item itself on the discussions page (.ItemContent.Discussion).

    @vrijvlinder said:
    Try this...

    li.Item..Role_VIP {
    background: yellow !important;
    }

    Thank you for the input bud! I think the problem lies in the plugin not defining a place for custom CSS to be injected for discussion items on the main discussions page, so no custom styling is getting picked up, which is why none of our attempts at styling it are working.

    I could very well simply be overlooking something obvious, not entirely sure.

    Anyways, you guys rock! I think we're getting close. :)

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    If you give me a link to it I can figure it out..

  • Options

    @vrijvlinder said:
    If you give me a link to it I can figure it out..

    PM sent! :)

    Will update this thread if a solution is found!

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    The reason for the roles not attaching to the discussions in the discussion index is because the index is dynamic and changes the user based on who commented Last. I think that in order to make the role titles attach to the discussions in the index, there needs to be something checking who the last user was who commented.

    The Index has certain css already, for Alt, Read, Unread,Mine etc. One would have to override those if there was a role title as well.

    I tried messing with the plugin to see If there is a way but have run into a brick wall. Maybe someone else has a better clue as to how to do it. I know that on this forum it does work because I have an extension that allows me to add css to this forum in order to make it easier to read. In this forum they use Ranks.

    Maybe you can achieve this by adding the YAGA application and then add ranks.

  • Options
    hgtonighthgtonight ∞ · New Moderator

    @ik1ng said:

    @hgtonight said:
    You would do something like:

    public function discussionsController_beforeDiscussionName_handler($sender) {
      $sender->EventArguments['CssClass'] .= ' ' . $RoleName;
    }
    

    You need to fill out the $RoleName variable as you see fit.

    Thank you so much for the reply, I tried adding the snippet above directly to class.roletitle.plugin.php at the bottom to no avail (Before the closing bracket of the plugin I believe, bear with me, designer not a developer haha!) -

    And I did test it on Vanilla's default theme with an added custom.css file just to be sure that the theme wasn't interfering with it. :)

    I gave you example code that shows the hook and method to add the CSS class. Your code is appending a null variable to the CSS class list. You need to come up with how to determine if the discussion needs to be highlighted as well as what class to add.

    In that hook, the discussion should be in the event arguments. Sample code:

    public function discussionsController_beforeDiscussionName_handler($sender) {
      $discussion = $sender->EventArguments['Discussion'];
      if(val('InsertUserID', $discussion) == 2) {
      $sender->EventArguments['CssClass'] .= ' ' . 'SystemUser';
    }
    

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    What you really want is a plugin that attaches a class to any div by that rank or type of user no matter where that may be. So that anything they post will show the specific style. Here on this forum, the bellow code works becuse they already have a rank attached to their ID . So the best way to do this is to create a way to attach the class to the user perpetually. As this forum does.

    li.Item.Rank-Mod {
        background: yellow;
    }
    

    For example look at the output on this forum for the rank class, it appears on practically everything.

        <li class="Item ItemComment Offline Rank-Mod" id="Comment_237053">
                    <div class="Comment">
    
                        <span id="latest"></span>                <div class="Options">
                                            </div>
                                        <div class="Item-Header CommentHeader">
                            <div class="AuthorWrap">
                    <span class="Author">
                       <a title="hgtonight" href="/profile/hgtonight" class="PhotoWrap Offline Rank-Mod"><img src="https://us.v-cdn.net/5018160/uploads/userpics/205/nQM3WWQ1NUY1C.png" alt="hgtonight" class="ProfilePhoto ProfilePhotoMedium"></a><a href="/profile/hgtonight" class="Username">hgtonight</a>            </span>
                    <span class="AuthorInfo">
                        <span class="MItem AuthorTitle">∞ · New</span>  <span class="Rank MItem Rank-Mod" title="Moderator">Moderator</span> 
    
Sign In or Register to comment.