Subsilver2 Profiles on Right

Subsilver2 Profiles on Right

31 Jan Christian No Comments »

One of the biggest shocks when phpBB 3.0x was released was that poster’s avatars were displayed on the right hand side whilst the actual message was displayed on the left. At first this didn’t really go down well, although as time passed it caught on and thousands of boards still adopt the unique layout.

Several Forum Owners have been in touch to ask how they can switch avatars to the right on Subsilver2 (as they are on the left by default). The following steps will explain how to do just that.

Note: If you want to skip straight past the manual edits, the modified viewtopic_body.html file can be downloaded at the end of this post.

Open: /styles/subsilver2/template/viewtopic_body.html

Find:

	<!-- IF postrow.S_FIRST_ROW -->
		<tr>
			<th>{L_AUTHOR}</th>
			<th>{L_MESSAGE}</th>
		</tr>
	<!-- ENDIF -->

Replace with:

	<!-- IF postrow.S_FIRST_ROW -->
		<tr>
			<th>{L_MESSAGE}</th>
			<th>{L_AUTHOR}</th>
		</tr>
	<!-- ENDIF -->

Find:

<td align="center" valign="middle">
				<!-- IF postrow.S_FIRST_UNREAD --><a name="unread"></a><!-- ENDIF --><a name="p{postrow.POST_ID}"></a>
				<b class="postauthor"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="color: {postrow.POST_AUTHOR_COLOUR}"<!-- ENDIF -->>{postrow.POST_AUTHOR}</b>
			</td>
			<td width="100%" height="25">
				<table width="100%" cellspacing="0">
				<tr>
				<!-- IF postrow.POST_ICON_IMG -->
					<td><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" title="" /></td>
				<!-- ENDIF -->
					<td class="gensmall" width="100%"><div style="float: {S_CONTENT_FLOW_BEGIN};">&nbsp;<b>{L_POST_SUBJECT}:</b> {postrow.POST_SUBJECT}</div><div style="float: {S_CONTENT_FLOW_END};"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF --><b>{L_POSTED}:</b> {postrow.POST_DATE}&nbsp;</div></td>
				</tr>
				</table>
			</td>

Replace with:

<td width="100%" height="25">
				<table width="100%" cellspacing="0">
				<tr>
				<!-- IF postrow.POST_ICON_IMG -->
					<td><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" title="" /></td>
				<!-- ENDIF -->
					<td class="gensmall" width="100%"><div style="float: {S_CONTENT_FLOW_BEGIN};">&nbsp;<b>{L_POST_SUBJECT}:</b> {postrow.POST_SUBJECT}</div><div style="float: {S_CONTENT_FLOW_END};"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF --><b>{L_POSTED}:</b> {postrow.POST_DATE}&nbsp;</div></td>
				</tr>
				</table>
			</td>
            <td align="center" valign="middle">
				<!-- IF postrow.S_FIRST_UNREAD --><a name="unread"></a><!-- ENDIF --><a name="p{postrow.POST_ID}"></a>
				<b class="postauthor"<!-- IF postrow.POST_AUTHOR_COLOUR --> style="color: {postrow.POST_AUTHOR_COLOUR}"<!-- ENDIF -->>{postrow.POST_AUTHOR}</b>
			</td>

Find:

<td valign="top" class="profile">
				<table cellspacing="4" align="center" width="150">
			<!-- IF postrow.ONLINE_IMG -->
				<tr>
					<td>{postrow.ONLINE_IMG}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF postrow.RANK_TITLE -->
				<tr>
					<td class="postdetails">{postrow.RANK_TITLE}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF postrow.RANK_IMG -->
				<tr>
					<td>{postrow.RANK_IMG}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF postrow.POSTER_AVATAR -->
				<tr>
					<td>{postrow.POSTER_AVATAR}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF not (postrow.ONLINE_IMG or postrow.RANK_TITLE or postrow.RANK_IMG or postrow.POSTER_AVATAR) -->
				<tr>
					<td></td>
				</tr>
			<!-- ENDIF -->
				</table>

				<span class="postdetails">
					<!-- IF postrow.POSTER_JOINED --><br /><b>{L_JOINED}:</b> {postrow.POSTER_JOINED}<!-- ENDIF -->
					<!-- IF postrow.POSTER_POSTS != '' --><br /><b>{L_POSTS}:</b> {postrow.POSTER_POSTS}<!-- ENDIF -->
					<!-- IF postrow.POSTER_FROM --><br /><b>{L_LOCATION}:</b> {postrow.POSTER_FROM}<!-- ENDIF -->

					<!-- IF postrow.S_PROFILE_FIELD1 -->
						<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
						<br /><b>{postrow.PROFILE_FIELD1_NAME}:</b> {postrow.PROFILE_FIELD1_VALUE}
					<!-- ENDIF -->

					<!-- BEGIN custom_fields -->
						<br /><b>{postrow.custom_fields.PROFILE_FIELD_NAME}:</b> {postrow.custom_fields.PROFILE_FIELD_VALUE}
					<!-- END custom_fields -->
				</span>

			</td>
			<td valign="top">
				<table width="100%" cellspacing="5">
				<tr>
					<td>
					<!-- IF postrow.S_POST_UNAPPROVED or postrow.S_POST_REPORTED -->
						<table width="100%" cellspacing="0">
						<tr>
							<td class="gensmall"><!-- IF postrow.S_POST_UNAPPROVED --><span class="postapprove">{UNAPPROVED_IMG} <a href="{postrow.U_MCP_APPROVE}">{L_POST_UNAPPROVED}</a></span><br /> <!-- ENDIF --> <!-- IF postrow.S_POST_REPORTED --><span class="postreported">{REPORTED_IMG} <a href="{postrow.U_MCP_REPORT}">{L_POST_REPORTED}</a></span><!-- ENDIF --></td>
						</tr>
						</table>

						<br clear="all" />
					<!-- ENDIF -->

						<div class="postbody">{postrow.MESSAGE}</div>

					<!-- IF postrow.S_HAS_ATTACHMENTS -->
						<br clear="all" /><br />

						<table class="tablebg" width="100%" cellspacing="1">
						<tr>
							<td class="row3"><b class="genmed">{L_ATTACHMENTS}: </b></td>
						</tr>
						<!-- BEGIN attachment -->
							<tr>
								<!-- IF postrow.attachment.S_ROW_COUNT is even --><td class="row2"><!-- ELSE --><td class="row1"><!-- ENDIF -->{postrow.attachment.DISPLAY_ATTACHMENT}</td>
							</tr>
						<!-- END attachment -->
						</table>
					<!-- ENDIF -->

					<!-- IF postrow.S_DISPLAY_NOTICE -->
						<span class="gensmall error"><br /><br />{L_DOWNLOAD_NOTICE}</span>
					<!-- ENDIF -->
					<!-- IF postrow.SIGNATURE -->
						<span class="postbody"><br />_________________<br />{postrow.SIGNATURE}</span>
					<!-- ENDIF -->

					<!-- IF postrow.EDITED_MESSAGE or postrow.EDIT_REASON -->
						<!-- IF postrow.EDIT_REASON -->
							<br /><br />
							<table class="tablebg" width="100%" cellspacing="1">
							<tr>
								<td class="row3"><span class="gensmall">{postrow.EDITED_MESSAGE}</span></td>
							</tr>
							<tr>
								<td class="row2"><span class="genmed">{postrow.EDIT_REASON}</span></td>
							</tr>
							</table>
						<!-- ELSE -->
							<br /><br />
							<span class="gensmall">{postrow.EDITED_MESSAGE}</span>
						<!-- ENDIF -->
					<!-- ENDIF -->

					<!-- IF postrow.BUMPED_MESSAGE -->
						<span class="gensmall"><br /><br />{postrow.BUMPED_MESSAGE}</span>
					<!-- ENDIF -->

					<!-- IF not postrow.S_HAS_ATTACHMENTS --><br clear="all" /><br /><!-- ENDIF -->

						<table width="100%" cellspacing="0">
						<tr valign="middle">
							<td class="gensmall" align="{S_CONTENT_FLOW_END}">
							<!-- IF not S_IS_BOT -->
								<!-- IF postrow.U_REPORT --><a href="{postrow.U_REPORT}">{REPORT_IMG}</a> <!-- ENDIF -->
								<!-- IF postrow.U_INFO --><a href="{postrow.U_INFO}">{INFO_IMG}</a> <!-- ENDIF -->
								<!-- IF postrow.U_WARN --><a href="{postrow.U_WARN}">{WARN_IMG}</a> <!-- ENDIF -->
								<!-- IF postrow.U_DELETE --><a href="{postrow.U_DELETE}">{DELETE_IMG}</a> <!-- ENDIF -->
							<!-- ENDIF -->
							</td>
						</tr>
						</table>
					</td>
				</tr>
				</table>
			</td>

Replace with:

<td valign="top">
				<table width="100%" cellspacing="5">
				<tr>
					<td>
					<!-- IF postrow.S_POST_UNAPPROVED or postrow.S_POST_REPORTED -->
						<table width="100%" cellspacing="0">
						<tr>
							<td class="gensmall"><!-- IF postrow.S_POST_UNAPPROVED --><span class="postapprove">{UNAPPROVED_IMG} <a href="{postrow.U_MCP_APPROVE}">{L_POST_UNAPPROVED}</a></span><br /> <!-- ENDIF --> <!-- IF postrow.S_POST_REPORTED --><span class="postreported">{REPORTED_IMG} <a href="{postrow.U_MCP_REPORT}">{L_POST_REPORTED}</a></span><!-- ENDIF --></td>
						</tr>
						</table>

						<br clear="all" />
					<!-- ENDIF -->

						<div class="postbody">{postrow.MESSAGE}</div>

					<!-- IF postrow.S_HAS_ATTACHMENTS -->
						<br clear="all" /><br />

						<table class="tablebg" width="100%" cellspacing="1">
						<tr>
							<td class="row3"><b class="genmed">{L_ATTACHMENTS}: </b></td>
						</tr>
						<!-- BEGIN attachment -->
							<tr>
								<!-- IF postrow.attachment.S_ROW_COUNT is even --><td class="row2"><!-- ELSE --><td class="row1"><!-- ENDIF -->{postrow.attachment.DISPLAY_ATTACHMENT}</td>
							</tr>
						<!-- END attachment -->
						</table>
					<!-- ENDIF -->

					<!-- IF postrow.S_DISPLAY_NOTICE -->
						<span class="gensmall error"><br /><br />{L_DOWNLOAD_NOTICE}</span>
					<!-- ENDIF -->
					<!-- IF postrow.SIGNATURE -->
						<span class="postbody"><br />_________________<br />{postrow.SIGNATURE}</span>
					<!-- ENDIF -->

					<!-- IF postrow.EDITED_MESSAGE or postrow.EDIT_REASON -->
						<!-- IF postrow.EDIT_REASON -->
							<br /><br />
							<table class="tablebg" width="100%" cellspacing="1">
							<tr>
								<td class="row3"><span class="gensmall">{postrow.EDITED_MESSAGE}</span></td>
							</tr>
							<tr>
								<td class="row2"><span class="genmed">{postrow.EDIT_REASON}</span></td>
							</tr>
							</table>
						<!-- ELSE -->
							<br /><br />
							<span class="gensmall">{postrow.EDITED_MESSAGE}</span>
						<!-- ENDIF -->
					<!-- ENDIF -->

					<!-- IF postrow.BUMPED_MESSAGE -->
						<span class="gensmall"><br /><br />{postrow.BUMPED_MESSAGE}</span>
					<!-- ENDIF -->

					<!-- IF not postrow.S_HAS_ATTACHMENTS --><br clear="all" /><br /><!-- ENDIF -->

						<table width="100%" cellspacing="0">
						<tr valign="middle">
							<td class="gensmall" align="{S_CONTENT_FLOW_END}">
							<!-- IF not S_IS_BOT -->
								<!-- IF postrow.U_REPORT --><a href="{postrow.U_REPORT}">{REPORT_IMG}</a> <!-- ENDIF -->
								<!-- IF postrow.U_INFO --><a href="{postrow.U_INFO}">{INFO_IMG}</a> <!-- ENDIF -->
								<!-- IF postrow.U_WARN --><a href="{postrow.U_WARN}">{WARN_IMG}</a> <!-- ENDIF -->
								<!-- IF postrow.U_DELETE --><a href="{postrow.U_DELETE}">{DELETE_IMG}</a> <!-- ENDIF -->
							<!-- ENDIF -->
							</td>
						</tr>
						</table>
					</td>
				</tr>
				</table>
			</td>
            <td valign="top" class="profile">
				<table cellspacing="4" align="center" width="150">
			<!-- IF postrow.ONLINE_IMG -->
				<tr>
					<td>{postrow.ONLINE_IMG}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF postrow.RANK_TITLE -->
				<tr>
					<td class="postdetails">{postrow.RANK_TITLE}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF postrow.RANK_IMG -->
				<tr>
					<td>{postrow.RANK_IMG}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF postrow.POSTER_AVATAR -->
				<tr>
					<td>{postrow.POSTER_AVATAR}</td>
				</tr>
			<!-- ENDIF -->
			<!-- IF not (postrow.ONLINE_IMG or postrow.RANK_TITLE or postrow.RANK_IMG or postrow.POSTER_AVATAR) -->
				<tr>
					<td></td>
				</tr>
			<!-- ENDIF -->
				</table>

				<span class="postdetails">
					<!-- IF postrow.POSTER_JOINED --><br /><b>{L_JOINED}:</b> {postrow.POSTER_JOINED}<!-- ENDIF -->
					<!-- IF postrow.POSTER_POSTS != '' --><br /><b>{L_POSTS}:</b> {postrow.POSTER_POSTS}<!-- ENDIF -->
					<!-- IF postrow.POSTER_FROM --><br /><b>{L_LOCATION}:</b> {postrow.POSTER_FROM}<!-- ENDIF -->

					<!-- IF postrow.S_PROFILE_FIELD1 -->
						<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
						<br /><b>{postrow.PROFILE_FIELD1_NAME}:</b> {postrow.PROFILE_FIELD1_VALUE}
					<!-- ENDIF -->

					<!-- BEGIN custom_fields -->
						<br /><b>{postrow.custom_fields.PROFILE_FIELD_NAME}:</b> {postrow.custom_fields.PROFILE_FIELD_VALUE}
					<!-- END custom_fields -->
				</span>

			</td>

Find:

<td class="profile"><strong><a href="#wrapheader">{L_BACK_TO_TOP}</a></strong></td>
			<td><div class="gensmall" style="float: {S_CONTENT_FLOW_BEGIN};">&nbsp;<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{PROFILE_IMG}</a> <!-- ENDIF --> <!-- IF postrow.U_PM --><a href="{postrow.U_PM}">{PM_IMG}</a> <!-- ENDIF --> <!-- IF postrow.U_EMAIL --><a href="{postrow.U_EMAIL}">{EMAIL_IMG}</a> <!-- ENDIF -->&nbsp;</div> <div class="gensmall" style="float: {S_CONTENT_FLOW_END};"><!-- IF not S_IS_BOT --><!-- IF postrow.U_EDIT --><a href="{postrow.U_EDIT}">{EDIT_IMG}</a> <!-- ENDIF --> <!-- IF postrow.U_QUOTE --><a href="{postrow.U_QUOTE}">{QUOTE_IMG}</a> <!-- ENDIF --> <!-- ENDIF -->&nbsp;</div></td>

Replace with:

<td><div class="gensmall" style="float: {S_CONTENT_FLOW_BEGIN};">&nbsp;<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{PROFILE_IMG}</a> <!-- ENDIF --> <!-- IF postrow.U_PM --><a href="{postrow.U_PM}">{PM_IMG}</a> <!-- ENDIF --> <!-- IF postrow.U_EMAIL --><a href="{postrow.U_EMAIL}">{EMAIL_IMG}</a> <!-- ENDIF -->&nbsp;</div> <div class="gensmall" style="float: {S_CONTENT_FLOW_END};"><!-- IF not S_IS_BOT --><!-- IF postrow.U_EDIT --><a href="{postrow.U_EDIT}">{EDIT_IMG}</a> <!-- ENDIF --> <!-- IF postrow.U_QUOTE --><a href="{postrow.U_QUOTE}">{QUOTE_IMG}</a> <!-- ENDIF --> <!-- ENDIF -->&nbsp;</div></td>
            <td class="profile"><strong><a href="#wrapheader">{L_BACK_TO_TOP}</a></strong></td>

Save/Upload Modified File and refresh template cache:
Admin Panel => Styles Tab => Style Components => Templates => Subsilver2 => Refresh

Download: viewtopic_body.html

Posted in: Tutorials, phpBB3 Tutorials

Comments are closed.

© ChristianBullock.com 2009, 2010 • Powered by Hot Chocolate (and Wordpress)
xHTML 1.0