YAGA question regarding ranks

Skisma

@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?

hgtonight

You can place your CSS rules in any stylesheet you want, although I would suggest placing it in your theme's custom stylesheet.

hgtonight

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.

Skisma

@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.

vrijvlinder

It is a plugin for the Yaga app.

Skisma

@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?

hgtonight

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;
}

Skisma

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

hgtonight

You can place your CSS rules in any stylesheet you want, although I would suggest placing it in your theme's custom stylesheet.

Skisma

Ok cool, sorry I'm a noob

Skisma

@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?

hgtonight

@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.

Skisma

@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?

hgtonight

@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.

Skisma

@hgtonight Awesome, thanks for the info!

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

hgtonight

Where ever is convenient for you.

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

Skisma

@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?

Skisma

@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).

Skisma

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

Bleistivt

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

Skisma

@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?

Skisma

@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?