Using custom profile field value in CSS?

[Former Member]

Hi. I'm wanting to use a custom field value to change the color of a user's mini icon in the online users section.

This is the part of the CSS in question.

.operationinfoicons {

float:left;

margin-left:5px;

margin-top:5px;

border:solid 5px #292929 ;

}

Basically, I just want to replace the #292929 with a different color for each user group. That user field is - "UserGroupColor" and it's value will be a color manually put in for each member of that group. 

Can I do that through something like - ".custom.field.value"?

[Brian]

Hi, @phantasmic.

The forum's style sheet isn't currently able to access layout template variables so the only way you'd be able to accomplish this is through the layout templates themselves.

Any other CSS properties not specific to that particular user can stay in the style sheet, but the one that's specific to the user can be added as an inline style. Since you're apparently styling a link you can add this among its attributes:

{if $[online_user_24.color] != "inherit"} style="border-color: #$[online_user_24.color];"{/if}

[Former Member]

Where would that line of code go? Sorry, not really great at coding yet.



(This is the area in question, aiming to change the green borders around the user's avatar.)

[Brian]

In Themes > Layout Templates > Home this is the HTML that your CSS is targeting:

<a href="$[online_user_24.href]" title="$[online_user_24.name]" class="operationinfoicons">

You would change that to this:

<a href="$[online_user_24.href]" title="$[online_user_24.name]" {if $[online_user_24.color] != "inherit"}style="border-color: #$[online_user_24.color];"{/if} class="operationinfoicons">

[Former Member]

Thank you. And how do I set the color for each user?

[Brian]

Assuming you're using groups to set each user's color the forum should plug those in automatically with that code change.

If you intended to do it via custom fields it would require a different code.

[Former Member]

Hmm, doesn't seem to be working then. Might have something to do with the skin styling links automatically?

Edit: Anyway, it's not a necessary thing. Thanks for the help!

[Brian]

The last code was for the users online in the last 24 hours. I was just using the first instance of the class in the CSS you posted being referenced, so my bad for the regular users online skipping my mind.

For the users currently online it's essentially the same thing. Replace this line:

<a href="$[online_user.href]" title="$[online_user.name]" class="operationinfoicons">

With this:

<a href="$[online_user.href]" title="$[online_user.name]" {if $[online_user.color] != "inherit"}style="border-color: #$[online_user.color];"{/if} class="operationinfoicons">

[Former Member]

So I contacted the creator of the skin and she provided this:

Go to line 23 of the Home layout template -

Find the "operationinfoicons" -

Right after the ending ", add this:

style="border-color:#$[online_user.group.color]!important;"


For the "online today", go to line 56 (I think???) and do the same, just with this:

style="border-color:#$[online_user_24.group.color]!important;"

For anyone looking to do the same thing, this was for the Operation: Mindcrime skin by Pharaoh Leap.

In the end this is what the relevant code looked like.

<div class="operationinfousers">

{foreach $[online_user_24]}

<a href="$[online_user_24.href]" title="$[online_user_24.name]" class="operationinfoicons" style="border-color:#$[online_user_24.group.color]!important;">$[online_user_24.avatar_small]</a>{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}

{/foreach}

{if $[total_online_not_shown_24]}

, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>{/if}

</div>


<div class="operationinfousers">

{foreach $[online_user]}

<a href="$[online_user.href]" title="$[online_user.name]" class="operationinfoicons" style="border-color:#$[online_user.group.color]!important;">$[online_user.avatar_small]</a>{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}

{/foreach}

{if $[total_online_not_shown]}

, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>{/if}

</div>

Thank you for the help though Brian, I appreciate it!