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.

Moving 'Points' to the right in 2.1

This discussion is related to the PeregrineLeaderBoard addon.

Trying to move the "points" button to the right as it's now brushing up against the small profile image on the left side of the display.

Using 2.1, example of what it looks like is here on my site.

Appreciate any guidance.

Tagged:

Comments

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    While you could float the Count element using CSS, this wouldn't work quite as one might hope. You'll need to utilize a wrapper element instead for a perfect result - Vanilla 2.1 handles this using Aside so change line 50 in the main module to the following:

    echo "<span class=\"Aside\"><span class=\"Count\">" . T('Points: ') . $Points . "</span></span>";
    

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • try something like in custom.css.

    .PhotoWrap {
    margin-right:5px;
    }

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • hgtonighthgtonight ∞ · New Moderator

    You can add the css rule float: right; to the element (.plbanchor .Count).

    @Peregrine if you add a span with the class .Aside that encloses your count element it will be inline with the default theme. I personally would just add the class .Aside to the existing element.

    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.

    Kasperperegrine
  • so if you guys give me the finalized code statement I can add to my plugin I will update it, One that will work with 2.0.18.4 and 2.1 and I will add it. I'm no .css wizard and I haven't played with 2.1 in a while

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    Kasper
  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    @peregrine said:
    so if you guys give me the finalized code statement I can add to my plugin I will update it, One that will work with 2.0.18.4 and 2.1 and I will add it. I'm no .css wizard and I haven't played with 2.1 in a while

    Using a wrapper element is how Vanilla 2.1 handles it and how it should be handled - applying floats to an inline element will mess with its display properties and make it a block element instead.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    peregrine
  • so @kasperisager

    I interpret this as for 2.1 use this:

    echo "<span class=\"Aside\"><span class=\"Count\">" . T('Points: ') . $Points . "</span></span>";
    

    what to do for 2.0.18.4 or let users change it if they use 2.1

    supporting both version in one plugin can be a nightmare.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited March 2013

    @peregrine: Yup, use that for 2.1 and then add this bit of CSS:

    #Panel .FilterMenu .Aside,
    .PanelInfo .Aside {
        float: right;
    }
    

    ...just to make sure 2.0 users get the same effect :-)

    EDIT: Added CSS used by 2.1

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    peregrine
  • peregrineperegrine MVP
    edited March 2013

    I'll give it a try and add to the next update thx @kasperisager and @hgtonight

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    Kasperhgtonight
  • BBSForumBBSForum New
    edited March 2013

    I ended up going with:

    `.plbanchor {
    text-align: left;
    height: 1.0 em;
    }

    .plbanchor .Count {
    float: right;
    }`

    when I tried the other version with #Panel .FilterMenu .Aside, I was not getting the same alignment. Now I'm going to add in username and be in widget heaven! :)

  • BBSForumBBSForum New
    edited March 2013

    Gorgeous! Text in name, adjustable by the CSS, points on far right.

    In class.peregrineleaderboardmodule.php I removed the echo strong code on class=plbanchor and instead added a simple font-size: 12px; line to .plbanchor in the plb.css file. Keep in mind the original .plbanchor was a typo and had ".klbanchor" when I first started working with it as well.

    Digging it!

  • thx.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • The new version of the plugin now display pretty cleanly in both vanilla 2.1 and vanilla 2.0.18.x

    I also added some options to the plugin. give it a try.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    Kasper
  • As of 5 minutes ago, The new version of the plugin version now displays points pretty cleanly in both vanilla 2.1 and vanilla 2.0.18.x

    I also added some options to the plugin. give it a try.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Looks great. Only difference other than a little CSS is that I put $Name in it.

    Icon - Name - Points

    echo " $Name ";

    Right above the echo call for Points.

    peregrine
Sign In or Register to comment.