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 one of the following Lava snippets into the Display Text field. Rock version 14 made some changes to how badges are rendered, so be sure to choose the code that matches your version of Rock.

Pre-Version 14

{%- 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 
        { 
            position: relative;
            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: 18px;
            text-align: center;
            cursor: default;
        }
        .birthday-today .badge-icon { font-size: 35px; }
        .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: 50px;
        }
    </style>
    
    <div class="badge 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="birthday-days">{{ daysToBirthday }}</span>
        {%- else -%}
            <i class="badge-burst fa fa-certificate"></i>
        {%- endif -%}
    </div>
{%- endif -%}

Version 14+

{%- 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

• 2019-09-19 - Initial Version
• 2022-11-18 - Added variation for Rock version 14