Profile Fields & CSS

[grey_goose]

I'd like to have a profile field that lets users change the color that another field is displayed in. This is what I'm currently using:

PHP Code:

        <vb:if condition="$post['field101'] == 'A'">
            <font color="green" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'B'">
            <font color="#26466D" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'C'">
            <font color="#2F4F4F" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'D'">
            <font color="royalblue" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'E'">
            <font color="purple" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'F'">
            <font color="#7A7ACC" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'G'">
            <font color="red" size="2">
        <vb:else /><vb:if condition="$post['field101'] == 'H'">
            <font color="brown" size="2">
        <vb:else />
            <font size="2">
        </vb:if></vb:if></vb:if></vb:if></vb:if></vb:if></vb:if></vb:if>{vb:raw post.field14}</font> 


That seems like a ton of conditionals, and it would be more elegant to have multiple CSS classes:

PHP Code:

.Adisplay { color: green; }
.Bdisplay { color: #26466D; } 


..etc...

Then use:

PHP Code:

<span class="{vb:raw bbuserinfo.field101}display">{vb:raw post.field14}</span> 


However, this doesn't work -- I'm guessing it's because the CSS is rendered before the custom profile fields are read?

Is there a way to do this, or a more elegant way to do what I'm doing?