Vitality values like on community.khoros.com

Hello phoneboy, adriana4u 

I have somehow customise this functionality, find the code below:

CSS:

<style>
.lia-panel.lia-panel-standard.custom-vitality {
text-align: center;
}
.lia-vitality-value-style{
color: #FFFFFF !important;
}
.lia-vitality-key-style{
color: #FFFFFF !important;
}
.lia-panel .custom-vitality .lia-panel-heading-bar-wrapper .lia-panel-heading-bar .lia-panel-heading-bar-title {
display: none;
}
.lia-panel.custom-vitality .lia-vitality-component .lia-metrics-display.lia-vitality-metrics-display-completed-registrations:before {
background-color: #00004B;
}
.lia-panel.custom-vitality .lia-vitality-component .lia-metrics-display.lia-vitality-metrics-display-net-overall-threads:before {
background-color: #00004B;
}
.lia-panel.custom-vitality .lia-vitality-component .lia-metrics-display.lia-vitality-metrics-display-net-kudos-count:before{
background-color: #00004B;
}
</style>

Component (custom-vitality) code:

<#include "theme-lib.common-functions" />

<#assign qry = "SELECT * FROM metrics WHERE id IN ('net_accepted_solutions','completed_registrations','net_overall_threads', 'net_kudos_weight', 'net_overall_posts')" />
<#assign metrics = executeLiQLQuery(qry, false, true) />
<#if metrics?size gt 0>
<#assign asCount = 0 />
<#assign crCount = 0 />
<#assign nopCount = 0 />
<#assign nkCount = 0 />
<#assign overallTopicCount = 0 />
<#list metrics as metric>
<#switch metric.id>
<#case "net_accepted_solutions">
<#assign asCount = metric.value />
<#break />
<#case "completed_registrations">
<#assign crCount = metric.value />
<#break />
<#case "net_overall_threads">
<#assign nopCount = metric.value />
<#break />
<#case "net_kudos_weight">
<#assign nkCount = metric.value />
<#break />
<#case "net_overall_posts">
<#assign overallTopicCount = metric.value />
<#break />
</#switch>
</#list>

<@generateComponentContent className="custom-vitality" componentTitleKey="custom.vitality.title">
<div class="lia-vitality-component lia-community-metrics-display">
<div class="lia-vitality-display lia-metrics-display lia-vitality-metrics-display-completed-registrations" role="presentation">
<span class="lia-vitality-stats"><span class="lia-vitality-value lia-vitality-value-style">${crCount}</span><span class="lia-vitality-key lia-vitality-key-style">${text.format("general.Members")}</span></span>
</div>
</div>
<div class="lia-vitality-component lia-community-metrics-display">
<div class="lia-vitality-display lia-metrics-display lia-vitality-metrics-display-net-overall-threads" role="presentation">
<span class="lia-vitality-stats"><span class="lia-vitality-value lia-vitality-value-style">${overallTopicCount}</span><span class="lia-vitality-key lia-vitality-key-style">${text.format("general.Posts")}</span></span>
</div>
</div>
<div class="lia-vitality-component lia-community-metrics-display">
<div class="lia-vitality-display lia-metrics-display lia-vitality-metrics-display-net-kudos-count" role="presentation">
<span class="lia-vitality-stats"><span class="lia-vitality-value lia-vitality-value-style">${nkCount}</span><span class="lia-vitality-key lia-vitality-key-style">${text.format("general.Kudos")}</span></span>
</div>
</div>
</@generateComponentContent>

</#if>

 Hope it helps.

Regards,
Abhishek Gupta