Applying CSS Rules

[Robust]

Alright, say I have a specific post in a thread I want to add another CSS class to, how would I do that?

Say:
<li id="post-5" class="message">

How can I make it:
<li id="post-5" class="message bestAnswer">

But only for post 5, not for post 4 or 3 or any other posts in the thread.

 

[TickTackk]

Under template message
Find:

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

Replace with:

<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored} {xen:if $message.post_id == 5, 'hello_world'}"

Untested but it should work

 

[Robust]

Not sure why this was moved to Styling and Customization Questions. It's a development question I think.

@batpool52! This was just an example. Some threads have a post marked as a best answer. This is all done via an add-on. I'm doing the front-end styling part now. The best answer (marked by the bestanswer field in xf_thread) needs to have the bestAnswer CSS class applied to it.

@Chris D @Brogan Can this be moved back to development questions?

 

[Chris D]

Use a template modification batpool's premise is correct.

 

[Robust]

Use a template modification batpool's premise is correct.

I get that but say I'm in a post, how can I get the thread's bestanswer value?

<xen:if $message.post_id == $thread.bestanswer, 'bestAnswer'>

I don't think $thread is available in there, and I don't think bestanswer would be available if it was.

 

[Chris D]

Yes it will be and yes it probably is.

 

[Robust]

@Chris D Testing without that part right now. First time using CSS in XenForo, hell first time using CSS at all, I need to get a grip of all of this.

.messageList .message .bestAnswer
{
    @property "bestAnswerStyling";
    margin: 10px 0;
    color: @contentText;
    background-color: #6bbd48;
    @property "/bestAnswerStyling";
}

.messageList .message .messageInfo .bestAnswer
{
    @property "bestAnswerStyling";
    background-color: #6bbd48;
    @property "/bestAnswerStyling";
}

.message .bestAnswer .messageInfo
{
    @property "bestAnswerStyling";
    background-color: #6bbd48;
    @property "/bestAnswerStyling";
}

I'm just testing to see what'll actually apply, it seems like none of it does. If I remove the .bestAnswer it works fine, but with it nothing applies. The class is applied fine: <li id="post-7" class="message staff bestAnswer" data-author="admin">

And loaded (<link rel="stylesheet" href="css.php?css=attachment_editor,bb_code,bestanswer,editor_ui,inline_mod,message,message_user_info,moderator_bar,quick_reply,thread_view&amp;style=1&amp;dir=LTR&amp;d=1430763673" />) Issue is somewhere in my CSS, perhaps how I'm ordering the dots. I've tried !important and reordering in some ways how I'm trying to apply the rules, but I haven't figured it out yet.

 

[Chris D]

The top one is nearly right but it would be ".message.bestAnswer" (no space because they are selectors on the same element).

 

[Robust]

The top one is nearly right but it would be ".message.bestAnswer" (no space because they are selectors on the same element).

Ahh, I see. Got the hang of it I think. So the second one would be:

.messageList .message.bestAnswer .messageInfo

And it works like a charm Thank you so much for your help so far. You're a great staff member on XF, I can't imagine how much support people who buy your product get.

 

[Robust]

Working off a similar part:

<xen:avatar user="{xen:helper postuser, '{$thread.bestanswer}'}" size="m"/>
Gives the error:
The following templates contained errors and were not saved: thread_view: 1) thread_view - Line 84: Invalid variable reference