New Badging System - Badges Prototype Beta 1 (Badges Only)


 
Thread Tools Search this Thread
The Lounge What is on Your Mind? New Badging System - Badges Prototype Beta 1 (Badges Only)
# 1  
Old 12-28-2018
New Badging System - Badges Prototype Beta 1 (Badges Only)

Today I mapped out the new badging system using FA icons, Beta 1 in no particular order except a 6 x 8 grid:

Image

The prototype HTML code for this layout:

Code:
<style>
    .fa-badge-grid {
        font-size: 1.5em;
    }

    .row {
        margin: 10px 0px 10px 0px;
    }

    .fas,
    .far,
    .fab {
        color: LightGray;

    }
</style>
<div class="container fa-badge-grid">
    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-address-book fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-apple fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-atom fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-award fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-balance-scale  fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-child fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-blender fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bolt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-brain fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-btc fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bug fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-building fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chalkboard-teacher fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-bishop fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-rook fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-knight fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-child fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-city fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-cogs fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-comment fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-database fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-dev fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-dungeon fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-network-wired fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-first-order-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-dragon fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-hippo fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-html5 fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-id-badge fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-image fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-jedi fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-jedi-order fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-laptop-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-linux fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-microchip fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-terminal fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-node-js fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-phoenix-squadron fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-project-diagram fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-puzzle-piece fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-researchgate fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-shield-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-stroopwafel fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-thumbs-up fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-trophy fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-university fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-user-graduate fa-stack-1x"></i>
        </div>
    </div>

</div>
<script>
    $(function () {
        $(window).on("resize", neoBadgeGrid);
        neoBadgeGrid();
        function neoBadgeGrid() {
            var myWidth = $(window).width();
            if (myWidth > 900) {
                $(".fa-badge-grid").css({ "font-size": "2em" });
            }
            else if (myWidth < 600) {
                $(".fa-badge-grid").css({ "font-size": "1em" });
            } else {
                $(".fa-badge-grid").css({ "font-size": "1.5em" });
            }
        }
    });

</script>

Feel free to suggest different icons from Font Awesome, change the order or location in the grid.

I will start writing the logic for each of the badges, one-badge-at-a-time, soon.
# 2  
Old 12-28-2018
After working on both mobile and the desktop found some FA icons that, for some strange reason did not work on mobile, so I switched them out and replaced them, so the work both in mobile and desktop:

Image

Here is the code Beta 1a:

Code:
<style>
  .fa-badge-grid {
    font-size:1.5em;
 
  }
.row{
margin:10px 0px 10px 0px;
}

</style>
 <div class="container fa-badge-grid">
    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-address-book fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-apple fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-atom fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-award fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-balance-scale  fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-code-branch fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-blender fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bolt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-brain fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-btc fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-bug fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-building fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chalkboard-teacher fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-bishop fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-rook fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-chess-knight fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-child fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-city fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-cogs fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-comment fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-database fa-stack-1x"></i>
        </div>
         <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-desktop fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-download fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-keyboard fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-first-order-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-pastafarianism fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-flask fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-html5 fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-id-badge fa-stack-1x"></i>
        </div>
    </div>


    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-image fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-jedi fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-jedi-order fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-laptop-code fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-linux fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-microchip fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-terminal fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-node-js fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-phoenix-squadron fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-project-diagram fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-puzzle-piece fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fab fa-researchgate fa-stack-1x"></i>
        </div>
    </div>

    <div class="row">
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-shield-alt fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-stroopwafel fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-thumbs-up fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-trophy fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-university fa-stack-1x"></i>
        </div>
        <div class="fa-stack col p-auto" style="vertical-align: top;">
            <i class="far fa-circle fa-stack-2x"></i>
            <i class="fas fa-user-graduate fa-stack-1x"></i>
        </div>
    </div>

</div>
<script>
$(function() {
  $(window).on("resize", neoBadgeGrid);
  neoBadgeGrid();
  function neoBadgeGrid() {
    var myWidth = $(window).width();
    if (myWidth > 900) {
        $(".fa-badge-grid").css({ "font-size": "2em" });
      }
    else if (myWidth < 600) {
      $(".fa-badge-grid").css({ "font-size": "1em" });
    } else  {
      $(".fa-badge-grid").css({ "font-size": "1.5em" });
    }
  }
$('.col').find('.far, .fas, .fab').css({"color":"LightGray"});
});

</script>

Next will code the logic for some of the "low hanging fruit" using the information already in the user information modal (UIM). I'm guessing that will be about 8 to 10 badges (low hanging UIM fruit for badges).

Will more than like use status colors for most of them, using core Bootstrap colors.

Anyone is free to propose any badge logic in pseudocode (or better is jQuery, but pseudocode is OK).
# 3  
Old 12-28-2018
Badges Mobile View (Beta 1A) iPhone6S

Image
This User Gave Thanks to Neo For This Post:
# 4  
Old 12-28-2018
Quote:
Originally Posted by Neo
After working on both mobile and the desktop found some FA icons that, for some strange reason did not work on mobile, so I switched them out and replaced them, so the work both in mobile and desktop:
..............................................................
OK).
Thanks a TON Neo for GREAT work. I hope we will get more users attracted by this system and moreover we will get more motivation to achieve these badges.

Thanks,
R. Singh
# 5  
Old 12-28-2018
LOL... it's starting to be a lot of work.

Quote:
Originally Posted by RavinderSingh13
Thanks a TON Neo for GREAT work. I hope we will get more users attracted by this system and moreover we will get more motivation to achieve these badges.

Thanks,
R. Singh
It was your idea... so now finally your vision is coming true. Thanks for the great idea!


Just created my first prototype badge for user post count. Needs work....

PHP:

Code:
<?php
if ($modaluser['posts'] > 1000) {
    $color['fauser'] = 'black';
} elseif ($modaluser['posts'] > 500) {
    $color['fauser'] = 'indigo';
} elseif ($modaluser['posts'] > 100) {
    $color['fauser'] = 'blue';
} elseif ($modaluser['posts'] > 10) {
    $color['fauser'] = 'green';
} else {
    $color['fauser'] = 'lightgray';
}

$badgejs = '<script>';
$badgejs .= 'var badge = [];';
$badgejs .= 'badge["posts"] = "' . $color[fauser] . '";';
$badgejs .= '</script>';

HTML (JS):

Code:
<script>
    $(function () {
            $('.fa-child').css("color", badge["posts"]);
            $('.fa-child').closest('div').find('.fa-circle').css("color", badge["posts"]);
    });
</script>

Please help me with the posts thresholds and colors for this badge!

I need to "un-hardcode" the colors and add Bootstrap color classes instead.

Colors . Bootstrap
# 6  
Old 12-28-2018
Quote:
Originally Posted by Neo
LOL... it's starting to be a lot of work.
It was your idea... so now finally your vision is coming true. Thanks for the great idea!
Colors . Bootstrap
Thank you Neo Smilie I am HAPPY at least I could help a bit to this GREAT forum. Also I hope we have category for badges or awards providing NEW THOUGHTS/Ideas too.

Quote:
Please help me with the posts thresholds and colors for this badge!
Here is my opinion on badges system.

1- on very first post 1 badge like Welcome kind of.
2- On 100th post of OP any users 1 Badge(bronze kind of or whatever lowest in category).
3- On users 500th post 1 badge.
4- On completing each 1000*N post 1 badge.
5- Special award with badge for completing 10,000 posts.
6- May be we could put 1 highest badge on 10,000 itself, since users will anyways get an badge/award on each 1000 posts so tat should boost them.(I am considering here that A person could earn FEW badges N number of times).

This is just a thought we could have more people to add/edit suggestions here too.

Thanks,
R. Singh
This User Gave Thanks to RavinderSingh13 For This Post:
# 7  
Old 12-28-2018
Hi Ravinder, I will make all of those for sure! Please keep the ideas flowing!

Regarding colors levels for badges, I created this css for now, four positive colors, 1 neutral (not enabled) color and three negative colors. That should cover most cases, and the negative badges will be used for only a few badges (like infractions, code tags, etc)

Code:
.mb-4 {
  color: "black";
}
.mb-3 {
  color: "indigo";
}
.mb-2 {
  color: "blue";
}
.mb-1 {
  color: "limegreen";
}
.mb-0 {
  color: "lightgray";
}
.mb-m1 {
  color: "darkorange";
}
.mb-m2 {
  color: "orangered";
}
.mb-m3 {
  color: "red";
}

Please note that in the actually code I am not yet using these mb classes because I cannot get the addClass() jQuery function to work whereas the .css() jQuery function works fine.

So, I'm not going done the rabbit hole today in search of why one function works and another does not, and will stick with badging logic (I think! haha)
Login or Register to Ask a Question

Previous Thread | Next Thread

7 More Discussions You Might Find Interesting

1. What is on Your Mind?

My Badges Page - A Major UserCP Update (v0.661):

Another major upgrade on the new UserCP today. I have created the "My Badges" page in the new control panel, and it's looking very cool :) If you have visited the new UserCP recently, you will more-than-likely need to close your browser (completely) and then restart it to clear out the old... (2 Replies)
Discussion started by: Neo
2 Replies

2. What is on Your Mind?

Patreon Badges Now Available as BBCODE at UNIX.COM

Dear All, We have a lot of amazing moderators and other very talented unix.com members who provide tireless top quality free technical support assistance to others. As a service to those long term unix.com members, I am making a new Patreon BBCODE badge available which can be posted in forum... (8 Replies)
Discussion started by: Neo
8 Replies

3. What is on Your Mind?

Current Array of Badges (Beta 1)

Here is the current array of the short description of badges for the new prototype badging system (Beta 1) with 42 icons allocated (prototype logic written) and 6 reserved (for future use); <?php $badges_desc = array( "fauser" => "Total Post Count", "faaward" => "First Post", ... (6 Replies)
Discussion started by: Neo
6 Replies

4. What is on Your Mind?

Status of Badging System - Beta 1

Dear All, Here is the current status of the badging system: The Beta 1 phase of the new badging system is close to completion. 42 prototype badges have been "allocated" 6 prototype badge slots are held in reserve The "alert you have new badges" prototype is running and is currently... (4 Replies)
Discussion started by: Neo
4 Replies

5. Web Development

Notes with Ravinder on Badging System Development Part II

Part II: Current PHP file Beta 73 Not Optimized: <?php $version = 73; $query = "SELECT * FROM " . TABLE_PREFIX . "user WHERE userid='" . $uid . "'"; $usertable = $db->query_read_slave($query); $modaluser = $db->fetch_array($usertable); $modaluser = gmdate("d F Y", $modaluser); $modaluser... (48 Replies)
Discussion started by: Neo
48 Replies

6. What is on Your Mind?

Four More UNIX.COM Achievement Award Badges to Award

Happy New Year! There are currently four UNIX.COM achievement awards up for grabs, as the say. Here they are, in no particular order: The Order of the Raven The Order of the Hippo The Order of the Spider The Order of the Dragon Don't ask me what they mean, or who who will get those... (0 Replies)
Discussion started by: Neo
0 Replies

7. Hardware

Stack Overflow Questions Tags Users Badges Unanswered Ask Question Ask for the explanation of types

I have read a document which tells me the following 4 things are done by the RAM embedded on disk driver controller. But I don't know what's difference between buffer and cache. Thanks! RAM on disk drive controllers 1 firmware 2 speed matching buffer 3 prefetching buffer 4 cache (1 Reply)
Discussion started by: 915086731
1 Replies
Login or Register to Ask a Question