Changing color of font based on drop down selection choice?

[Lyla]

Hi! 

I was wondering if it's possible in the mini profiles to have the color of a font change based on the drop down selection option that someone selected?

To walk you through my thoughts:
In the custom profile fields, I have a drop down selection where someone chooses a season in which their character is born. 
Is there a code where in the profile it shows up as a different color depending on what they selected. i.e. Winter is blue, Summer is green etc

[Bennett 🚀]

Jul 15, 2020 7:47:29 GMT -8 Lyla said:

Hi!

I was wondering if it's possible in the mini profiles to have the color of a font change based on the drop down selection option that someone selected?

To walk you through my thoughts:
In the custom profile fields, I have a drop down selection where someone chooses a season in which their character is born.
Is there a code where in the profile it shows up as a different color depending on what they selected. i.e. Winter is blue, Summer is green etc

Hey Lyla ,

You can, in your Mini-Profile tab of your Layout Templates use something similar to this, given your custom profile field name is 'Season':

{foreach $[user.mini_custom_field]}
    {if $[user.mini_custom_field.name] == "Season"}
    <br /><span class="$[user.mini_custom_field.content_class] $[user.mini_custom_field.value]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
    {else}
    <br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
    {/if}
{/foreach}

And then from there you can use CSS (Themes > Advanced Styles & CSS -- Style Sheet tab) to style the text, replacing season with the lowercase version of your season field's name from above, and replacing the seasons Spring, Summer, Fall, Winter with whatever your field values are (case sensitive).

.custom-field-season.Spring { color: green; /* spring color */ }

.custom-field-season.Summer { color: red; /* summer color */ }

.custom-field-season.Fall { color: brown; /* fall color */ }

.custom-field-season.Winter { color: gray; /* winter color */ }

[Lyla]

IT WORKED! You're the BEST! Thank you!