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

Separate First Post From Replies

Discussion in 'Styling and Customization Questions' started by Xarcell, Sep 28, 2011.

  1. Xarcell

    Xarcell Well-Known Member


    I'm wondering if there is a way to make the first post of a topic look different than it's replies. I'm fully capable of styling it and making it look how I want, unfortunately I do not know what edits need to be made in which templates to achieve this. Can someone point me in the right direction?
     
    Fuhrmann likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> message

    Add the red code near the top:

    Code:
    <xen:require css="message.css" />
    <xen:require css="bb_code.css" />
    
    <li id="{$messageId}" class="{xen:if '{$message.position} == 0', 'firstPost '}message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'}" data-author="{$message.username}">
    
    	<xen:include template="message_user_info">
    		<xen:map from="$message" to="$user" />
    	</xen:include>
    
    	<div class="messageInfo primaryContent">
    		<xen:if is="{$message.isNew}"><strong class="newIndicator"><span></span>{xen:phrase new}</strong></xen:if>
    		
    		<xen:if hascontent="true">
    			<ul class="messageNotices">
    
    Now you can style the first post by using the "firstPost" class. For example, edit this template:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code to change the background color of the first post:

    Code:
    .firstPost, .firstPost .primaryContent
    {
    	background: #999999;
    }
    
     
  3. Xarcell

    Xarcell Well-Known Member

    That's a start, but I will need to be able to alter the HTML as well. I intend to make first post look like an article, and the replies like comments.
     
  4. kkm323

    kkm323 Well-Known Member

  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You could just surround the entire contents of the template with that condition which would allow you to define different HTML:

    Code:
    <xen:if is="{$message.position} == 0">
    	HTML FOR FIRST POST
    <xen:else />
    	HTML FOR ALL OTHER POSTS
    </xen:if>
    
     
  6. Xarcell

    Xarcell Well-Known Member

    just what I'm looking for, thanks!
     
  7. Xarcell

    Xarcell Well-Known Member

  8. Xarcell

    Xarcell Well-Known Member

    I tried it out and nothing happened after I started removing stuff(just to see if there were any changes).

    This is what I had in the message template:

    Code:
    <xen:require css="message.css" />
    <xen:require css="bb_code.css" />
    
    <xen:if is="{$message.position} == 0">
    
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'}" data-author="{$message.username}">
    
        <div class="messageInfo primaryContent">
            <xen:if is="{$message.isNew}"><strong class="newIndicator"><span></span>{xen:phrase new}</strong></xen:if>
    
            <xen:if hascontent="true">
                <ul class="messageNotices">
                    <xen:contentcheck>
                        <xen:hook name="message_notices">
                            <xen:if is="{$message.isDeleted}">
                                <li class="deletedNotice">{xen:phrase this_message_has_been_removed_from_public_view}</li>
                            <xen:elseif is="{$message.isModerated}" />
                                <li class="moderatedNotice">{xen:phrase this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal}</li>
                            </xen:if>
                        </xen:hook>
                    </xen:contentcheck>
                </ul>
            </xen:if>
    
            <xen:hook name="message_content" params="{xen:array 'message={$message}'}">
            <div class="messageContent">
                <article>
                    <blockquote class="messageText ugc baseHtml">
                        <xen:include template="ad_message_body" />
                        {xen:raw $message.messageHtml}
                    </blockquote>
                </article>
    
                {xen:raw $messageContentAfterTemplate}
            </div>
            </xen:hook>
     
            <xen:if is="{$visitor.content_show_signature} && {$message.signature}">
                <div class="baseHtml signature ugc"><aside>{xen:raw $message.signatureHtml}</aside></div>
            </xen:if>
    
            {xen:raw $messageAfterTemplate}
    
            <div id="likes-{$messageId}"><xen:if is="{$message.likes}"><xen:include template="likes_summary" /></xen:if></div>
        </div>
    
        <xen:include template="ad_message_below" />
    
    </li>
    
    <xen:else />
    
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'}" data-author="{$message.username}">
    
        <xen:include template="message_user_info">
            <xen:map from="$message" to="$user" />
        </xen:include>
    
        <div class="messageInfo primaryContent">
            <xen:if is="{$message.isNew}"><strong class="newIndicator"><span></span>{xen:phrase new}</strong></xen:if>
    
            <xen:if hascontent="true">
                <ul class="messageNotices">
                    <xen:contentcheck>
                        <xen:hook name="message_notices">
                            <xen:if is="{$message.isDeleted}">
                                <li class="deletedNotice">{xen:phrase this_message_has_been_removed_from_public_view}</li>
                            <xen:elseif is="{$message.isModerated}" />
                                <li class="moderatedNotice">{xen:phrase this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal}</li>
                            </xen:if>
                        </xen:hook>
                    </xen:contentcheck>
                </ul>
            </xen:if>
    
            <xen:hook name="message_content" params="{xen:array 'message={$message}'}">
            <div class="messageContent">
                <article>
                    <blockquote class="messageText ugc baseHtml">
                        <xen:include template="ad_message_body" />
                        {xen:raw $message.messageHtml}
                    </blockquote>
                </article>
    
                {xen:raw $messageContentAfterTemplate}
            </div>
            </xen:hook>
     
            <xen:if is="{$visitor.content_show_signature} && {$message.signature}">
                <div class="baseHtml signature ugc"><aside>{xen:raw $message.signatureHtml}</aside></div>
            </xen:if>
    
            {xen:raw $messageAfterTemplate}
    
            <div id="likes-{$messageId}"><xen:if is="{$message.likes}"><xen:include template="likes_summary" /></xen:if></div>
        </div>
    
        <xen:include template="ad_message_below" />
    
    </li>
    
    </xen:if>
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It works for me. Make sure you are editing the same style you are viewing.
     
    Fuhrmann likes this.
  10. Floris

    Floris Guest

    bukkit.org's forums is a great example of splitting first post (on their plugins page) from the rest.
     
    Fuhrmann likes this.
  11. Xarcell

    Xarcell Well-Known Member

    Good catch. I was changing the right style & template, but not "using" the modified style. :p

    All good now, works.
     
  12. Xarcell

    Xarcell Well-Known Member

    I wanted to show you what I did with your code. I experimented and created a different layout for first post & replies. I may not stick with this layout you see here, but it's a start for me on making the post look like an article.

    Thanks for you help. Gonna take a break and play a little BF3 Beta on 360. Let me know what you think.
     

    Attached Files:

    ArnyVee, Marcus, bambua and 1 other person like this.
  13. Digital Doctor

    Digital Doctor Well-Known Member

  14. Xarcell

    Xarcell Well-Known Member

  15. Xarcell

    Xarcell Well-Known Member

  16. Digital Doctor

    Digital Doctor Well-Known Member

  17. bambua

    bambua Well-Known Member

    I'm thinking of using a simliar approach to this on a new forum I'm considering. Create a child theme of the main one that just has this article layout and only use it on the category/forums that I want it in. I'm thinking about using a format similar to the status messages on the profile page for the comments. Nicely done Xarcell.
     
    Xarcell likes this.
  18. Xarcell

    Xarcell Well-Known Member

  19. Xarcell

    Xarcell Well-Known Member

  20. Xarcell

    Xarcell Well-Known Member

    just to update this post, XenPorta has this option when you promote threads. Although, it's only in the beta version, not the latest release.
     

Share This Page