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.

YAGA question regarding ranks

2»

Answers

  • hgtonighthgtonight ∞ · New Moderator

    @Skisma you need to set your CSS rules up properly.

    No JS needed.

    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 great! Only problem is that it is working, just not nearly as properly as expected. I have implemented a test image and it is displaying. The only modification I made was I replaced '&nbsp' with '\00a0'. But it's displaying before I even hit the rank, and the rank name is still displaying as well.

    Check out my post above that shows a screenshot of what I'm currently getting.

  • hgtonighthgtonight ∞ · New Moderator

    Send me a link to your site and I will check it out.

    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.

  • Can anyone help me figure out what I need to modify to remove the rank title from displaying, so only the image shows? Here's what it looks like now:

  • BleistivtBleistivt Moderator
    edited February 2015
  • Sweet! I guess I'll have to figure out which file unless @hgtonight knows, cause simply adding this to the existing code doesn't do the trick, lol.

    One other thing I'd like to accomplish is (and really, getting these two things done should complete this entire task) to reduce the amount of spacing, in height, between my image and the meta (I think that's what it's called) borders. Currently I can't really use an image larger than 20x20 pixels because if I do, it will expand the meta to be thicker.

    Here's what I mean:

  • You should always add them to your custom.css if you want to keep the changes after an update of YAGA

    The problem with style questions like this is:
    If you had just posted a link to your site, it would take someone who knows CSS a minute to quickly make these changes in the browser and post them here. Right know one can only guess what CSS rule would work.

    Or you could try to learn basic CSS and how to use the F12 tools yourself.

  • Thanks for the tips. I'm going to take the css course on codecademy. I didn't know I could just post the link and have someone make changes just with that. Here's my site: http://forgehaven.com/forums/

  • Yes, most modern browsers have excellent style development tools

    .Rank.Rank-test {
      font-size: 0;
    }
    
    .Rank.Rank-test:after {
        content: " ";
        width: 20px;
        height: 20px;
        background: url("http://i945.photobucket.com/albums/ad293/Skisma/TEST_IMAGE_zpsnwrmr1yo.jpg");
        background-size: 100%;
        display: inline-block;
        vertical-align: bottom;
    }
    
  • SkismaSkisma New
    edited February 2015

    You're the man @Bleistivt! You actually fixed the resizing issue that I was just going to not worry about and find a workaround for, lol.

    Would you happen to know what can be done to fix the spacing issue I mentioned earlier? Because 20px is to me.

    http://vanillaforums.org/discussion/comment/225508/#Comment_225508

  • agcyphersagcyphers Nooooop.
    edited February 2015

    Late to the party and didn't see this above. For the "OR" rank progressions, couldn't you just create two ranks with mostly the same data then style them the same?

    .Rank.Rank-Clone1, .Rank.Rank-Clone2 { ... }

  • You can use negative margins:

     margin: -10px 0;
    
  • @agcyphers said:
    Late to the party and didn't see this above. For the "OR" rank progressions, couldn't you just create two ranks with mostly the same data then style them the same?

    .Rank.Rank-Clone1, .Rank.Rank-Clone2 { ... }

    Ayyyyyy, you're a genius! Such a simple, yet feasible solution! The only issue I can see arising here is if someone hit the criteria for post count, and then later hit the criteria for point count (both for the same rank) it would cause some problems. Especially if say they hit the post count for, say, Rank 2. Then hit the point count for Rank1, it would essentially de-rank them. There would have to be some kind of rule that says:

    if (Rank1-1 or Rank 1-2 is active) {

    break (the other one);

    }

    @Bleistivt I added this like so:

    .Rank.Rank-test {

    font-size: 0;
    
    margin: -10px 0;
    
    }
    

    And it didn't make any change. I've tried playing around with it a bit before asking, but I can't seem to get it to work.

    I've tried margin: -10px; which brings the image below my username, margin: 2px; which does nothing (same as margin: -10px 0;), and margin: 2px 0; which seems to shift the image 2 pixels to the left.

  • The negative margin needs to be applied to the .Rank.Rank-test:after pseudo element.
    It basically reduces the vertical space it takes up on a line while making the contents overflow the bounding box.

    if (Rank1-1 or Rank 1-2 is active) {

    break (the other one);

    }

    http://css-tricks.com/child-and-sibling-selectors/
    This logic could probably be implemented in CSS with the sibling operators, but generally the stylesheet is the wrong place for this.

  • agcyphersagcyphers Nooooop.
    edited February 2015

    jQuery might be best.

    var badges = $('#ContainerID').find('.Rank.Rank-Clone'); if ( badges.length > 1 ) { badges[1].css('display','none'); }

    SHould work...untested though.

  • SkismaSkisma New
    edited February 2015

    @agcyphers Very interesting, I'll probably end up trying this out later to give my users two ways to rank up!

    @Bleistivt Ok I see, I added it to the code and it worked! There appears to be an alignment issue now, and my OCD is going to kill me if I don't fix it.

    Here's how it looks in the OP:

    And here's how it looks in replies:

    Here's a link to a topic where you can see these: http://forgehaven.com/forums/discussion/11/halo-5-guardians-beta-discussion#latest

  • Ok sure I've implemented the ranking system which is pretty sweet. I'm just wondering if there's a line of css I can add that'll center the image to have an equal amount of margin space on both ends. It was fine before I added the line to reduce the margins that @Bleistivt gave me:

    margin: -10px 0;

    Of course, I still need this code in place so that it wont stretch the thickness of the meta.

    Here is a link to a discussion that shows what I'm talking about and need to get fixed: http://www.forgehaven.com/forums/discussion/9/welcome-to-forge-haven#latest

  • Remove margin: -10px 0; from the .Rank.Rank-rank-5:after section and add these two new sections in the CSS file:

    .Discussion .Rank.Rank-rank-5:after {
       margin: -7px 0;
    }
    
    .Comment .Rank.Rank-rank-5:after {
       margin: -10px 0;
    }
    

    Adjust margins to your liking. The first one targets the Discussion rank icon and the second one targets the Comment rank icon.

    Add Pages to Vanilla with the Basic Pages app

  • @Shadowdare Awesome! However, there are currently 43 different ranks and soon there will be a total of 50...so is there a way to declare this as a whole?

  • ShadowdareShadowdare r_j MVP
    edited February 2015

    Here's a way to set the margins for the rank icons if they're all the same size:

    .Discussion .AuthorInfo .Rank:after {
       margin: -7px 0;
    }
    
    .Comment .AuthorInfo .Rank:after {
       margin: -10px 0;
    }
    

    Notice that I removed .Rank-rank-5 from the selectors so that the CSS rules target all elements with the Rank class. I also added .AuthorInfo to be part of the selectors just in case there's another element on the page with the Rank class that belongs to something else.

    Add Pages to Vanilla with the Basic Pages app

Sign In or Register to comment.