Description

This badge will display a birthday cake when the person's birthday is within the next 7 days. The number of days left until their birthday appears in the middle of the cake. If today is the person's birthday, then the number is not displayed and a yellow star burst is shown behind the cake.

The cake will be slightly different colors depending on whether the person is male, female or unknown.

The badge tooltip just describes what the number/star burst represents.

The badge is not displayed at all if the person's birthday is not within the next 7 days.

How To

Building this badge is extremely simple. Just create a new Lava Badge and paste the following Lava snippet into the Display Text field.

{%- comment %} Birthday Badge {%- endcomment %}
{%- assign daysToBirthday = Person.DaysToBirthday %}
{%- assign gender = Person.Gender %}
{%- if daysToBirthday <= 7  %}
    {%- assign tooltip = Person.NickName %}
    {%- if gender == 'Male' %}
        {%- assign badgeColor = '#4797ff' %}
    {%- elseif gender == 'Female' %}
        {%- assign badgeColor = '#ba84ff' %}
    {%- else %}
        {%- assign badgeColor = '#866eff' %}
    {%- endif %}
    {%- if daysToBirthday == 1 %}
        {%- capture tooltip %}{{ tooltip }}&rsquo;s birthday is tomorrow!{%- endcapture %}
    {%- elseif daysToBirthday == 0 %}
        {%- capture tooltip %}Today is {{ tooltip }}&rsquo;s birthday!{%- endcapture %}
    {%- else %}
        {%- capture tooltip %}{{ tooltip }}&rsquo;s birthday is in {{ daysToBirthday }} days{%- endcapture %}
    {%- endif %}
    <style>
        .badge-birthday 
        { 
            color: {{ badgeColor }};
        }
        .badge-birthday .badge-icon { position: relative; z-index: 2; }
        .badge-birthday .birthday-days
        {
            position: absolute;
            left: 50%; bottom: 2px;
            z-index: 3;
            margin-left: -0.5em;
            width: 1em; height: 1em;
            border-radius: 50%;
            background: {{ badgeColor }};
            color: #fff;
            font-size: 40%;
            text-align: center;
            cursor: default;
        }
        .birthday-today .badge-icon { font-size: 80% !important; }
        .badge-burst
        {
            position: absolute;
            z-index: 1;
            left: 50%; top: 50%;
            margin-left: -0.5em;
            margin-top: -0.45em;
            width: 1em; height: 1em;
            line-height: 1em;
            color: #ffd360;
            font-size: 120%;
        }
    </style>
    <div class="rockbadge rockbadge-icon rockbadge-icon-nobg badge-birthday{% if daysToBirthday == 0 %} birthday-today{% endif %}" data-toggle="tooltip" data-original-title="{{ tooltip }}">
        <i class="badge-icon fa fa-birthday-cake"></i>
        {%- if daysToBirthday > 0 %}
            <span class="metric-value birthday-days">{{ daysToBirthday }}</span>
        {%- else %}
            <i class="badge-burst fa fa-certificate"></i>
        {%- endif %}
    </div>
{%- endif %}

Follow Up

Please don't hesitate to leave a comment or hit me up on Rock Chat (@JeffRichmond) if you have questions or find any issues with this recipe.

Change Log

• 2026-07-07 - Removed the pre-version 14 variation
• 2022-11-18 - Added variation for Rock version 14
• 2019-09-19 - Initial Version