Separate First Post From Replies

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?
 
Admin CP -> Appearance -> Templates -> message

Add the red code near the top:

Rich (BB 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;
}
 
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.
 
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.

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

Attachments

  • xf-different_post_layout-1.webp
    xf-different_post_layout-1.webp
    114.4 KB · Views: 84
hmmmm.
http://xenforo.com/community/threads/8wayrun-com-xenporta-portal.7586/page-147#post-259154

1-png.19056
 
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.

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.
 
Top Bottom