XF 1.5 [request] Display different Message Container background depending on usergroup of poster

[Cribbage]

I've been working on this all day and I'm pretty stuck. I've got this code in my message.css:

.messageList .message
{
    @property "message";
    background-image: url('/post_cricsim.png');
    background-repeat: repeat-y;
    padding-top: 0;
    padding-right: 0;
    margin-bottom: 20px;
    border: 2px solid @primaryDark;
    border-radius: 30px;
    min-height: 280px
    @property "/message
}

.. and I want to make the background-image url conditional based on the usergroup of the poster. Of course I can't do this inside the message.css file, so I created a bunch of custom .css files and called them conditionally within the message template, but I could only succeed in having them shown conditionally based on the usergroup of the /reader/ (rather than the poster). Eventually I was getting backgrounds based on whether or not users from certain usergroups had posted on the page at all, but they applied to the entire page of posts each time, which made me think I was just going about it the wrong way entirely as opposed to just not finding the magic code yet.

How would I go about doing this?

EDIT: My site is cricsim.com, for reference.

 

[Paul B]

Ensure you use $user rather than $visitor.

 

[Cribbage]

Yeah, ultimately I needed to use $message rather than either because of the nature of the message template, but even then, it loads the same background image for each post on a page (the last one it loads on each page). I can't seem to get it to load a different one for each post at all, even though it's calling a custom css on each post. Each call seems to over-write all the previous ones for the entire page.

 

[Cribbage]

This is the beginning of my message template with the modification at the bottom:

<xen:require css="message.css" />
<xen:require css="bb_code.css" />

<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

    <xen:include template="message_user_info">
        <xen:map from="$message" to="$user" />
    </xen:include>
  
    <xen:if is="{xen:helper ismemberof, $message, 10}">
    <xen:require css="pumas.css" />
    </xen:if>

This is the pumas.css I created:

.messageList .message
{
    background-image: url('/post_Pumas.png');
}

But what it does is change the left-column background to post_Pumas.png for all posts on the same page as a post from someone in Group 10, instead of just the posts from the people in Group 10. If there are no Group 10 member posts on a page, all the posts on the page stay the default background image (post_cricsim.png).

I'm thinking it might be fundamentally unsolvable given the way css files seem to be loaded, unless there's another way to do this entirely.

 

[DL6]

Try with this:

<xen:require css="message.css" />
<xen:require css="bb_code.css" />

<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if '{xen:helper ismemberof, $message, 10}', 'pumas'}" data-author="{$message.username}">

    <xen:include template="message_user_info">
        <xen:map from="$message" to="$user" />
    </xen:include>

Add in Extra.css

.messageList .message.pumas
{
    background-image: url('/post_Pumas.png');
}

 

[Cribbage]

Thank you so much! That worked perfectly. I'd actually kind of given up before your post.

 

[Oz_Horror]

@DL6 I know this is like two years old but do you know anyway to get this to work on 2.1 it is exactly what I am looking for?!?

 

[Cribbage]

@DL6 I know this is like two years old but do you know anyway to get this to work on 2.1 it is exactly what I am looking for?!?

I'm still on an older version but I'll be doing an update in a couple of weeks and need to do it again there too. If no-one else has helped you by then I'll let you know how I go.