[AL] Original Poster Highlight

[AL] Original Poster Highlight 1.5.0

No permission to download
Exactly, we are working on a fix for this. If you have any suggestion on where you would like to see the badge with rounded avatars please let us know.
Tricky because I intend to have semi-rounded (ie 25% border radius)

Perhaps an option to have "OP" underneath username.

(NB: lovely addon 5* from me!)
 
I appreciate this may seem unusual, but I have @AddonsLab's permission to do so.. An "unofficial" update!

This is based on code that I have been running at Nerdface with a bit of added polish. I have built and asked for permission to release this as a self-learning tool for XF add-ons. More of these may come, but equally they may not.. :LOL:

[AL][NERD] Original Poster Highlight 1.0.2n
  • Additional ribbon location (as suggested here, compatibility with XF2.0 and XF2.1 - idea credit to @Jaxel)
  • XenPorta 2 PRO compatibility (as requested here text locations only)
Simply upload, and run the upgrade as you normally would.

192335192336192337
 

Attachments

Last edited:
AddonsLab updated [AL] Original Poster Highlight with a new update entry:

XenForo 2.1 compatibility and new locations by @Nerdface

Hello everyone,

this release implements XenForo 2.1 compatibility by implementing styling of the badge to match XenForo round avatars style. This is achieved by adding a new CSS class to HTML tag on XenForo 2.1.x only - v_2_1, and this CSS class is used to tweak the look of the badge. Left Top/Right top locations are modified to show a rounded badge. The locations are supported on mobile as well, but the look may be sub-optimal, so please check how it looks on mobiles to decide if you want...

Read the rest of this update entry...
 
So on a forum with square avatars (I'm running XF 2.1), how do I make it look like it did before updating to the latest version of your add-on?

195060

See what I mean?

I want to get rid of those rounded edges.
 
So on a forum with square avatars (I'm running XF 2.1), how do I make it look like it did before updating to the latest version of your add-on?

View attachment 195060

See what I mean?

I want to get rid of those rounded edges.

It'd be great if this were an option, I had to update the CSS.

Disclaimer: I haven't had time to verify this appears correctly on all responsive formats, it probably doesn't.

Code:
.v_2_1 .ribbonBox.leftCornerDesktop .ribbon-wrapper, .v_2_1 .ribbonBox.leftCornerMobile .ribbon-wrapper {
    border-radius: 0;
}

div.leftCornerDesktop .ribbon-wrapper, div.rightCornerDesktop .ribbon-wrapper {
    width: 55%;
    height: 55%;
}

@media (max-width: 650px) {

    .v_2_1 .ribbonBox.leftCornerDesktop .ribbon-wrapper, .v_2_1 .ribbonBox.leftCornerMobile .ribbon-wrapper {
        border-radius: 0;
    }

    div.leftCornerDesktop .ribbon-wrapper, div.rightCornerDesktop .ribbon-wrapper {
        width: 55%;
        height: 55%;
    }  

    .v_2_1 .ribbonBox.leftCornerDesktop .ribbon-wrapper div.ribbon, .v_2_1 .ribbonBox.leftCornerMobile .ribbon-wrapper div.ribbon {
        left: -40%;
        top: 10%;
    }

}
 
It'd be great if this were an option, I had to update the CSS.

Disclaimer: I haven't had time to verify this appears correctly on all responsive formats, it probably doesn't.

Code:
.v_2_1 .ribbonBox.leftCornerDesktop .ribbon-wrapper, .v_2_1 .ribbonBox.leftCornerMobile .ribbon-wrapper {
    border-radius: 0;
}

div.leftCornerDesktop .ribbon-wrapper, div.rightCornerDesktop .ribbon-wrapper {
    width: 55%;
    height: 55%;
}

@media (max-width: 650px) {

    .v_2_1 .ribbonBox.leftCornerDesktop .ribbon-wrapper, .v_2_1 .ribbonBox.leftCornerMobile .ribbon-wrapper {
        border-radius: 0;
    }

    div.leftCornerDesktop .ribbon-wrapper, div.rightCornerDesktop .ribbon-wrapper {
        width: 55%;
        height: 55%;
    } 

    .v_2_1 .ribbonBox.leftCornerDesktop .ribbon-wrapper div.ribbon, .v_2_1 .ribbonBox.leftCornerMobile .ribbon-wrapper div.ribbon {
        left: -40%;
        top: 10%;
    }

}

Thanks, that did the trick!

I agree though that this should be a selectable option on the backend. Not everyone is using circle avatars.
 
I just installed 1.2.0 but it doesn't seem to be working at all :confused:

Is it working for anyone else?

Please make sure you have the default CSS (or the customizations you made are not the ones causing the issue). Please provide more details if it still does not work for you.

Thank you!
 
Top Bottom