While developing a new version of Muffin theme, I've made some major style changes for the Badges plugin, which were implemented on the theme.
But after Gurjyot's idea, I figured why not implement these changes directly to the plugin and make it available for everybody instead..
So that's what I did. I grabbed all the styles I was designing, and implemented to my "Updated version" of the plugin.
What did I change?.
- Badges styles are fully redesigned.
- Mobile ready styles.
- Badges styles are now implemented on a separate .css .
- Added Javascript algorithm to group Badges by "topics" on Badges page.
- Added supported styles for Right-To-Left.
- Fixed badges not appearing next to the User on question lists and next to the Loggedin text in the navigation bar.
Want a light color scheme for the badges? No worries, just add the following code to the usual Badge css stylesheet by navigating to Admin -> Plugins -> Badges -> Badge css stylesheet, and you'll be allright:
.badge-bronze, .badge-silver, .badge-gold {
background-color: #eee;
color: #000;
}
![](http://www.question2answer.org/qa/?qa=blob&qa_blobid=6763975272297079014)
Get the Plugin from my GitHub Q2A Badges repository.
Here's a live preview and also some Screenshots down below.
Buy me a beer (PayPal Chun)
![](https://i.giphy.com/dKCXuU2Dsd8Na.gif)
Screenshots:
![](http://www.question2answer.org/qa/?qa=blob&qa_blobid=13526728762364732429)
![](https://i.ibb.co/ZKVDTSH/badges-page.png)
Badges on profile page:
![](https://i.ibb.co/h7TgPQm/badges-profile-page.png)
Badges on profile page (Right-To-Left):
![](https://i.ibb.co/n05sL9h/badges-rtl-profile-page.png)
Badges on profile page (Mobile):
![](https://i.ibb.co/Y0hjXdR/badges-profile-page-mobile.png)
@NoahY , in case you're back one day, let me know. You can transfer some of the work you see fit for your official version, or I can push a full commit for the main repository. :)
Cheers!