Please upgrade here. These earlier versions are no longer being updated and have security issues.

YAGA question regarding ranks

SkismaSkisma New
edited December 2014 in Vanilla 2.0 - 2.8

@hgtonight‌ First off, great application! I feel like this is something that can really help engage my community and promote consistent involvement.

I'm wondering about the ranks portion, it seems that I can only attach one image and am wondering if I can add more. I know when creating a new badge there is an option to add a new image, but not for ranks.

What I'm wanting to achieve is a ranking system based on post count, where users rank up when they hit a certain number. Each new rank would need a new image. Does this make sense?

«1

Comments

  • hgtonighthgtonight ∞ · New Moderator
    edited December 2014

    Thanks for using my addon!

    Rank promotion only uses the image for the activity item. The image is not displayed anywhere else.

    There is a plugin called YAGA - Rank In Meta that spits out the rank in the author meta section. This could easily be modified to include some image styling.

    Ranks can be set to to advance once three criteria have been met: account age, post count, and score. You could set the ranks to only have a post count threshold.

    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.

  • @hgtonight‌ Oh ok I see. So this plugin is different than what comes in the YAGA app? I'll download and see if I can handle modifying the code, haha.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    It is a plugin for the Yaga app.

  • @hgtonight‌ Ok so I installed the plugin so that ranks will be displayed in the author meta, but I don't have the slightest clue on what I need to modify so that I can have a "browse" option when creating a new rank. I need to assign a new icon for each rank.

    Any guidance you can provide?

  • hgtonighthgtonight ∞ · New Moderator

    It doesn't provide a GUI, but you now have some classes that you can style via CSS.

    For example:

    .Rank.Rank-RankName:after {
      content: '&nbsp';
      width: 20px;
      height: 20px;
      background: url('path/to/desired/rank/image.png');
      display: inline-block;
    }
    

    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.

  • @hgtonight‌ Ok I think I get it, haha. So is this code in the RiM plugin that I'd need to modify?

  • Ok cool, sorry I'm a noob :)

  • @hgtonight‌ Hey if I wanted to make it so users rank up by either meeting the desired post count OR a certain number of points earned, what would I need to modify in the code? As of right now if I were to create new ranks and fill in criteria for both fields, it would require the users meet both of them, correct?

  • hgtonighthgtonight ∞ · New Moderator

    @Skisma said:
    hgtonight‌ Hey if I wanted to make it so users rank up by either meeting the desired post count OR a certain number of points earned, what would I need to modify in the code? As of right now if I were to create new ranks and fill in criteria for both fields, it would require the users meet both of them, correct?

    Your analysis is correct. That is currently not possible.

    Perhaps a rank progression overhaul is due. I don't like the idea of having to select "AND/OR" checkboxes. Let's have a think about it.

    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.

  • @hgtonight Hey it's been a while, but i'm looking to actually execute this now. I've just created a test rank called "Test Rank". What file to I need to access to find out what to label it as in CSS? Or do I just make it:

    .Rank.Rank-Test Rank:after {

    Also, is the recommended place to add this code going to be my custom_yeti.css file since that's my theme?

  • hgtonighthgtonight ∞ · New Moderator

    @Skisma I believe the class would be Rank-test-rank but the easiest way to find out is to right click on the rank in your browser and inspect it for the class.

    I pass the rank title through the Gdn_Format::Url() method which replaces special characters with - and lowercases the entire thing. The easiest way I could to guarantee a valid class name.

    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.

  • @hgtonight Awesome, thanks for the info!

    Is there any place in particular I should be adding this code? my theme's css file?

  • hgtonighthgtonight ∞ · New Moderator

    Where ever is convenient for you.

    Theme's css file seems like a good place to me.

    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.

  • @hgtonight Ok so I figured I'd just make a new css file containing all of the rank icon code. What I've done is made a file called FHRanks.css and uploaded it to public_html > forums. What the file contains is this:

    .Rank.Rank-test-rank:after {

    content: '&nbsp';
    
    width: 20px;
    
    height: 20px;
    
    background: url('http://i945.photobucket.com/albums/ad293/Skisma/TEST_IMAGE_zpsnwrmr1yo.jpg');
    
    display: inline-block;
    
    }
    

    Didn't work. What I've done to test this is: I have this rank set to activate once a user hits 25 posts. I had 24, so I just posted a test comment and the rank activated...but it appeared just as it does by default (with RiM installed). No icons or anything. Any ideas?

  • SkismaSkisma New
    edited February 2015

    @hgtonight I just noticed is I cannot delete ranks, it says "Failed to delete Rank".

    One thing I've tried regarding the original issue above is, I've updated the rank name to just "Test" in attempt to simplify it where I won't need a hyphen. I'm still not getting any response, so now I'm going to try adding it to my theme's css to see if that will help. Any other ideas?

    EDIT: Ok after removing the FHRanks.css file and adding it to custom_yeti.css it appears that I'm making some progress! Check out the image:

    What's weird is this was displaying before I even hit the rank (I have it currently set to 26 posts, where I have 25 and then post a test post, making me hit 26).

  • SkismaSkisma New
    edited February 2015

    @Bleistivt @vrijvlinder @R_J Any insight you kind fellows can provide?

  • The only advice I can give you is to use the web inspector of your browser.

    Also HTML entities don't work in CSS, you need to use \00a0

    My themes: pure | minusbaseline - My plugins: CSSedit | HTMLedit | InfiniteScroll | BirthdayModule | [all] - PM me about customizations

    • Vanilla APP » Learn more «
    • iOS & Android App for Vanilla - White label app for your forum
  • @Bleistivt Awesome! You got me 1 step closer :) Here's how it looks now:

    So as of right now, it's working! ..but there are quite a few problems.

    For one, I haven't hit the test rank yet (I have 25 posts and need 26). I understand now that I will need some additional code to have this css only display when the rank is hit (and turn off when the next rank is hit).

    Also, it doesn't resize the image so I'm assuming the easiest fix will be to use an image that matches the same size as the width/height css credentials. Here's what the test image is supposed to look like:

    Another thing is that the rank title still shows up, which the image is supposed to replace.

    Anyone have some ideas on what additional code I need to add to get this working right?

  • @hgtonight Any ideas on what more I need to do to get this implemented correctly? Do I need add some js or something to get this working?

Sign In or Register to comment.