1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Applying CSS Rules

Discussion in 'XenForo Development Discussions' started by Robust, May 4, 2015.

  1. Robust

    Robust Well-Known Member

    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.
     
  2. batpool52!

    batpool52! Well-Known Member

    Under template message
    Find:
    HTML:
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}"
    Replace with:
    Code:
    <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 likes this.
  3. Robust

    Robust Well-Known Member

    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?
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    Use a template modification batpool's premise is correct.
     
  5. Robust

    Robust Well-Known Member

    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.
     
  6. Chris D

    Chris D XenForo Developer Staff Member

    Yes it will be and yes it probably is.
     
  7. Robust

    Robust Well-Known Member

    @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.

    Code:
    .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.
     
  8. Chris D

    Chris D XenForo Developer Staff Member

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

    Robust Well-Known Member

    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.
     
  10. Robust

    Robust Well-Known Member

    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
     

Share This Page