Merge pull request #1719 from cyberalien/ticket/11552

Responsive design for prosilver

phpBB/styles/prosilver/template/forum_fn.js

@@ -414,6 +414,9 @@ function insert_single_user(formId, user)
 */
 (function($) {
 	$(document).ready(function() {
+		// Swap .nojs and .hasjs
+		$('#phpbb.nojs').toggleClass('nojs hasjs');
+
 		// Focus forms
 		$('form[data-focus]:first').each(function() {
 			$('#' + this.getAttribute('data-focus')).focus();
@@ -435,8 +438,396 @@ function insert_single_user(formId, user)
 		delete test;
 
 		if (oldBrowser) {
-			// Fix .linkslist.bulletin lists
+			// Fix .linklist.bulletin lists
 			$('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
+
+			// Do not run functions below for old browsers
+			return;
 		}
+
+		// Adjust topiclist lists with check boxes
+		$('ul.topiclist dd.mark').siblings('dt').children('.list-inner').addClass('with-mark');
+
+		// Resize navigation block to keep all links on same line
+		$('.navlinks').each(function() {
+			var $this = $(this),
+				left = $this.children().not('.rightside'),
+				right = $this.children('.rightside');
+
+			if (left.length !== 1 || !right.length) return;
+
+			function resize() {
+				var width = 0,
+					diff = left.outerWidth(true) - left.width();
+
+				right.each(function() {
+					width += $(this).outerWidth(true);
+				});
+				left.css('max-width', Math.floor($this.width() - width - diff) + 'px');
+			}
+
+			resize();
+			$(window).resize(resize);
+		});
+
+		// Responsive breadcrumbs
+		$('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				links = $this.find('.crumb'),
+				length = links.length,
+				classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'],
+				classesLength = classes.length,
+				maxHeight = 0,
+				lastWidth = false,
+				wrapped = false;
+
+			// Test height by setting nowrap
+			$this.css('white-space', 'nowrap');
+			maxHeight = $this.height() + 1;
+			$this.css('white-space', '');
+
+			// Set tooltips
+			$this.find('a').each(function() {
+				var $link = $(this);
+				$link.attr('title', $link.text());
+			});
+
+			// Funciton that checks breadcrumbs
+			function check() {
+				var height = $this.height(),
+					width = $body.width(),
+					link, i, j;
+
+				if (height <= maxHeight) {
+					if (!wrapped || lastWidth === false || lastWidth >= width) {
+						lastWidth = width;
+						return;
+					}
+				}
+				lastWidth = width;
+
+				if (wrapped) {
+					$this.removeClass('wrapped').find('.crumb.wrapped').removeClass('wrapped ' + classes.join(' '));
+					wrapped = false;
+					if ($this.height() <= maxHeight) {
+						return;
+					}
+				}
+
+				wrapped = true;
+				$this.addClass('wrapped');
+				if ($this.height() <= maxHeight) {
+					return;
+				}
+
+				for (i = 0; i < classesLength; i ++) {
+					for (j = length - 1; j >= 0; j --) {
+						links.eq(j).addClass('wrapped ' + classes[i]);
+						if ($this.height() <= maxHeight) {
+							return;
+						}
+					}
+				}
+			}
+
+			// Run function and set event
+			check();
+			$(window).resize(check);
+		});
+
+		// Responsive tables
+		$('table.table1').not('.not-responsive').each(function() {
+			var $this = $(this),
+				th = $this.find('thead > tr > th'),
+				columns = th.length,
+				headers = [],
+				totalHeaders = 0,
+				i, headersLength;
+
+			// Find each header
+			th.each(function() {
+				var cell = $(this),
+					colspan = parseInt(cell.attr('colspan')),
+					dfn = cell.attr('data-dfn'),
+					text = dfn ? dfn : cell.text();
+
+				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+
+				for (i=0; i<colspan; i++) {
+					headers.push(text);
+				}
+				totalHeaders ++;
+			});
+			
+			headersLength = headers.length;
+
+			// Add header text to each cell as <dfn>
+			$this.addClass('responsive');
+
+			if (totalHeaders < 2) {
+				$this.addClass('show-header');
+				return;
+			}
+
+			$this.find('tbody > tr').each(function() {
+				var row = $(this),
+					cells = row.children('td'),
+					column = 0;
+
+				if (cells.length == 1) {
+					row.addClass('big-column');
+					return;
+				}
+
+				cells.each(function() {
+					var cell = $(this),
+						colspan = parseInt(cell.attr('colspan')),
+						text = cell.text().trim();
+
+					if (headersLength <= column) {
+						return;
+					}
+
+					if (text.length && text !== '-') {
+						cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>');
+					}
+					else {
+						cell.addClass('empty');
+					}
+
+					colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+					column += colspan;
+				});
+			});
+		});
+
+		// Responsive link lists
+		$('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				links = $this.children().not('.skip-responsive'),
+				html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><ul class="responsive-popup" style="display:none;" /></li>',
+				// List of items that should be hidden last
+				filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon',
+				filtered = links.filter(filterString);
+
+			if (links.is('.rightside'))
+			{
+				links.filter('.rightside:first').before(html);
+			}
+			else
+			{
+				$this.append(html);
+			}
+
+			var toggle = $this.children('.responsive-menu'),
+				toggleLink = toggle.find('a.responsive-menu-link'),
+				menu = toggle.find('ul.responsive-popup'),
+				lastWidth = false,
+				compact = false,
+				responsive = false,
+				copied = false;
+
+			function check() {
+				var width = $body.width();
+				if (responsive && width <= lastWidth) {
+					return;
+				}
+
+				// Reset responsive and compact layout
+				if (responsive) {
+					responsive = false;
+					$this.removeClass('responsive');
+					links.css('display', '');
+					toggle.css('display', 'none');
+				}
+
+				if (compact) {
+					compact = false;
+					$this.removeClass('compact');
+				}
+
+				// Find tallest element
+				var maxHeight = 0;
+				links.each(function() {
+					if (!$(this).height()) return;
+					maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+				});
+
+				if (maxHeight < 1) {
+					return;
+				}
+
+				// Nothing to resize if block's height is not bigger than tallest element's height
+				if ($this.height() <= maxHeight) {
+					toggle.removeClass('visible');
+					menu.hide();
+					return;
+				}
+
+				// Enable compact layout, find tallest element, compare to height of whole block
+				compact = true;
+				$this.addClass('compact');
+
+				var compactMaxHeight = 0;
+				links.each(function() {
+					if (!$(this).height()) return;
+					compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
+				});
+
+				if ($this.height() <= maxHeight) {
+					toggle.removeClass('visible');
+					menu.hide();
+					return;
+				}
+
+				// Compact layout did not resize block enough, switch to responsive layout
+				compact = false;
+				$this.removeClass('compact');
+				responsive = true;
+
+				if (!copied) {
+					if (menu.parents().is('.rightside')) {
+						menu.addClass('responsive-rightside');
+					}
+					menu.append(links.clone(true));
+					menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
+					menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
+					copied = true;
+				}
+				else {
+					menu.children().css('display', '');
+				}
+
+				toggle.css('display', '');
+				$this.addClass('responsive');
+
+				// Try to not hide filtered items
+				if (filtered.length) {
+					links.not(filterString).css('display', 'none');
+
+					maxHeight = 0;
+					filtered.each(function() {
+						if (!$(this).height()) return;
+						maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+					});
+
+					if ($this.height() <= maxHeight) {
+						menu.children().filter(filterString).css('display', 'none');
+						return;
+					}
+				}
+
+				links.css('display', 'none');
+			}
+
+			toggleLink.click(function() {
+				if (!responsive) return;
+				if (!toggle.hasClass('visible')) {
+					// Hide other popups
+					$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
+				}
+				toggle.toggleClass('visible');
+				menu.toggle();
+			});
+
+			check();
+			$(window).resize(check);
+		});
+
+		// Responsive tabs
+		$('#tabs, #minitabs').not('.skip-responsive').each(function() {
+			var $this = $(this),
+				$body = $('body'),
+				ul = $this.children(),
+				tabs = ul.children().not('.skip-responsive'),
+				links = tabs.children('a'),
+				toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'),
+				toggleLink = toggle.find('a.responsive-tab-link'),
+				menu = toggle.find('ul.responsive-tabs'),
+				maxHeight = 0,
+				lastWidth = false,
+				responsive = false;
+
+			links.each(function() {
+				maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
+			})
+
+			function check() {
+				var width = $body.width(),
+					height = $this.height();
+
+				if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) {
+					return;
+				}
+
+				tabs.show();
+				toggle.hide();
+
+				lastWidth = width;
+				height = $this.height();
+				if (height <= maxHeight) {
+					responsive = false;
+					return;
+				}
+
+				responsive = true;
+				toggle.show();
+				menu.hide().html('');
+
+				var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'),
+					total = availableTabs.length,
+					i, tab;
+
+				for (i = total - 1; i >= 0; i --) {
+					tab = availableTabs.eq(i);
+					menu.prepend(tab.clone(true));
+					tab.hide();
+					if ($this.height() <= maxHeight) {
+						menu.find('a').click(function() { check(true); });
+						return;
+					}
+				}
+				menu.find('a').click(function() { check(true); });
+			}
+
+			toggleLink.click(function() {
+				if (!responsive) return;
+				menu.toggle();
+			});
+
+			check(true);
+			$(window).resize(check);
+		});
+
+		// Hide responsive menu and tabs
+		$('#phpbb').click(function(e) {
+			var parents = $(e.target).parents();
+			if (!parents.is('.responsive-menu.visible')) {
+				$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
+			}
+			if (!parents.is('.responsive-tab')) {
+				$('.responsive-tabs').hide();
+			}
+		});
+
+		// Hide *CP navigation if there is only 1 item
+		$('#navigation').each(function() {
+			var items = $(this).children('ol, ul').children('li');
+			if (items.length == 1)
+			{
+				$(this).addClass('responsive-hide');
+			}
+		});
+
+		// Hide empty responsive tables
+		$('table.responsive > tbody').each(function() {
+			var items = $(this).children('tr');
+			if (items.length == 0)
+			{
+				$(this).parent('table:first').addClass('responsive-hide');
+			}
+		});
 	});
 })(jQuery);

phpBB/styles/prosilver/template/index_body.html

@@ -1,7 +1,7 @@
 <!-- INCLUDE overall_header.html -->
 
-<p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
-<!-- IF U_MCP --><p>{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->
+<p class="{S_CONTENT_FLOW_END} responsive-center<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
+<!-- IF U_MCP --><p class="responsive-center">{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->
 
 <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
 <ul class="linklist bulletin">
@@ -15,7 +15,7 @@
 		<!-- ENDIF -->
 		<li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
 	<!-- ENDIF -->
-	<!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
+	<!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside mark-read"><a href="{U_MARK_FORUMS}" accesskey="m" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
 </ul>
 <!-- ENDIF -->
 

phpBB/styles/prosilver/template/mcp_post.html

@@ -48,6 +48,8 @@
 	<div class="inner">
 
 	<div class="postbody">
+		<h3><a href="{U_VIEW_POST}">{POST_SUBJECT}</a></h3>
+
 		<!-- IF U_EDIT -->
 		<ul class="profile-icons">
 			<li class="edit-icon"><a href="{U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li>
@@ -56,7 +58,6 @@
 
 		<span class="right-box" id="expand"><a href="#post_details" onclick="viewableArea(getElementById('post_details'), true); var rev_text = getElementById('expand').getElementsByTagName('a').item(0).firstChild; if (rev_text.data == '{LA_EXPAND_VIEW}'){rev_text.data = '{LA_COLLAPSE_VIEW}'; } else if (rev_text.data == '{LA_COLLAPSE_VIEW}'){rev_text.data = '{LA_EXPAND_VIEW}'}; return false;">{L_EXPAND_VIEW}</a></span>
 
-		<h3><a href="{U_VIEW_POST}">{POST_SUBJECT}</a></h3>
 		<!-- IF S_PM -->
 		<p class="author">
 			<strong>{L_SENT_AT}{L_COLON}</strong> {POST_DATE}

phpBB/styles/prosilver/template/memberlist_body.html

@@ -28,7 +28,7 @@
 		<div class="panel">
 			<div class="inner">
 
-			<ul class="linklist">
+			<ul class="linklist wrap">
 				<li>
 				<!-- IF U_FIND_MEMBER and not S_SEARCH_USER --><a href="{U_FIND_MEMBER}" id="member_search" data-alt-text="{LA_HIDE_MEMBER_SEARCH}">{L_FIND_USERNAME}</a> &bull; <!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP --><a href="{U_HIDE_FIND_MEMBER}" id="member_search" data-alt-text="{LA_FIND_USERNAME}">{L_HIDE_MEMBER_SEARCH}</a> &bull; <!-- ENDIF -->
 				<strong style="font-size: 0.95em;">
@@ -58,7 +58,7 @@
 		<table class="table1" cellspacing="1" id="memberlist">
 		<thead>
 		<tr>
-			<th class="name"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
+			<th class="name" data-dfn="{L_RANK}{L_COMMA_SEPARATOR}<!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF -->"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
 			<th class="posts"><a href="{U_SORT_POSTS}#memberlist">{L_POSTS}</a></th>
 			<th class="info"><a href="{U_SORT_WEBSITE}#memberlist">{L_WEBSITE}</a>{L_COMMA_SEPARATOR}<a href="{U_SORT_LOCATION}">{L_LOCATION}</a></th>
 			<th class="joined"><a href="{U_SORT_JOINED}#memberlist">{L_JOINED}</a></th>
@@ -89,7 +89,7 @@
 	<thead>
 	<tr>
 	<!-- IF not S_LEADERS_SET -->
-		<th class="name"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP -->{L_GROUP_MEMBERS}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
+		<th class="name" data-dfn="{L_RANK}{L_COMMA_SEPARATOR}{L_USERNAME}"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP -->{L_GROUP_MEMBERS}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
 			<th class="posts"><a href="{U_SORT_POSTS}#memberlist">{L_POSTS}</a></th>
 			<th class="info"><a href="{U_SORT_WEBSITE}#memberlist">{L_WEBSITE}</a>{L_COMMA_SEPARATOR}<a href="{U_SORT_LOCATION}">{L_LOCATION}</a></th>
 			<th class="joined"><a href="{U_SORT_JOINED}#memberlist">{L_JOINED}</a></th>

phpBB/styles/prosilver/template/memberlist_leaders.html

@@ -11,7 +11,7 @@
 	<table class="table1" cellspacing="1">
 	<thead>
 	<tr>
-		<th class="name"><span class="rank-img">{L_RANK}&nbsp;</span><!-- IF group.U_GROUP --><a href="{group.U_GROUP}">{group.GROUP_NAME}</a><!-- ELSE -->{group.GROUP_NAME}<!-- ENDIF --></th>
+		<th class="name" data-dfn="{L_RANK}{L_COMMA_SEPARATOR}{L_USERNAME}"><span class="rank-img">{L_RANK}&nbsp;</span><!-- IF group.U_GROUP --><a href="{group.U_GROUP}">{group.GROUP_NAME}</a><!-- ELSE -->{group.GROUP_NAME}<!-- ENDIF --></th>
 		<th class="info">{L_PRIMARY_GROUP}</th>
 		<!-- IF S_DISPLAY_MODERATOR_FORUMS --><th class="info">{L_MODERATOR}</th><!-- ENDIF -->
 	</tr>

phpBB/styles/prosilver/template/memberlist_view.html

@@ -14,7 +14,7 @@
 		</dl>
 	<!-- ENDIF -->
 
-	<dl class="left-box details" style="width: 80%;">
+	<dl class="left-box details profile-details">
 		<dt>{L_USERNAME}{L_COLON}</dt>
 		<dd>
 			<!-- IF USER_COLOR --><span style="color: {USER_COLOR}; font-weight: bold;"><!-- ELSE --><span><!-- ENDIF -->{USERNAME}</span>
@@ -105,7 +105,7 @@
 
 		<h3>{L_SIGNATURE}</h3>
 
-		<div class="postbody"><div class="signature" style="border-top:none; margin-top: 0;">{SIGNATURE}</div></div>
+		<div class="postbody"><div class="signature standalone">{SIGNATURE}</div></div>
 
 	<span class="clear"></span></div>
 </div>

phpBB/styles/prosilver/template/overall_footer.html

@@ -6,7 +6,7 @@
 		<div class="inner">
 
 		<ul class="linklist leftside bulletin">
-			<li class="icon-home"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}">{L_SITE_HOME}</a> <strong>&#8249;</strong> <!-- ENDIF --><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>
+			<li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}">{L_SITE_HOME}</a> <strong>&#8249;</strong></span> <!-- ENDIF --><span class="crumb"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></span>
 				<!-- EVENT overall_footer_breadcrumb_append -->
 			</li>
 			<!-- IF not S_IS_BOT -->

phpBB/styles/prosilver/template/overall_header.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 {META}
@@ -28,6 +29,7 @@
 <!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
 <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
 <link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
+<link href="{T_THEME_PATH}/responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
 
 <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
 	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
@@ -47,7 +49,7 @@
 {$STYLESHEETS}
 
 </head>
-<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
+<body id="phpbb" class="nojs section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
 
 <div id="wrap">
 	<a id="top" accesskey="t"></a>
@@ -82,9 +84,9 @@
 
 			<ul class="linklist navlinks">
 				<!-- DEFINE $MICRODATA = ' itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""' -->
-				<li class="icon-home"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>&#8249;</strong> <!-- ENDIF -->
-					<a href="{U_INDEX}" accesskey="h"{$MICRODATA}>{L_INDEX}</a> 
-					<!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}>{navlinks.FORUM_NAME}</a><!-- END navlinks -->
+				<li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>&#8249;</strong></span> <!-- ENDIF -->
+					<span class="crumb"><a href="{U_INDEX}" accesskey="h"{$MICRODATA}>{L_INDEX}</a></span> 
+					<!-- BEGIN navlinks --> <span class="crumb"><strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}>{navlinks.FORUM_NAME}</a></span><!-- END navlinks -->
 					<!-- EVENT overall_header_breadcrumb_append -->
 				</li>
 
@@ -92,13 +94,14 @@
 				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
 				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
 				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
+				<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH --><li class="responsive-search rightside" style="display: none;"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li><!-- ENDIF -->
 			</ul>
 
 			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
 			<ul class="linklist leftside bulletin">
 				<!-- IF S_NOTIFICATIONS_DISPLAY -->
-				<li class="icon-notification">
-					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button">{L_NOTIFICATIONS} [<strong>{NOTIFICATIONS_COUNT}</strong>]</a>
+				<li class="icon-notification skip-responsive">
+					<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
 					<div id="notification_list" class="notification_list">
 						<div class="pointer"><div class="pointer_inner"></div></div>
 						<div class="header">
@@ -137,7 +140,7 @@
 				<!-- ENDIF -->
 				<!-- IF S_DISPLAY_PM -->
 					<li class="icon-pm">
-						<a href="{U_PRIVATEMSGS}">{L_PRIVATE_MESSAGES} [<strong>{PRIVATE_MESSAGE_COUNT}</strong>]</a>
+						<a href="{U_PRIVATEMSGS}"><span>{L_PRIVATE_MESSAGES} [</span><strong>{PRIVATE_MESSAGE_COUNT}</strong><span>]</span></a>
 					</li>
 				<!-- ENDIF -->
 				<li class="icon-ucp">
@@ -152,7 +155,7 @@
 			</ul>
 			<!-- ENDIF -->
 
-			<ul class="linklist rightside">
+			<ul class="linklist rightside<!-- IF S_IS_BOT or not S_USER_LOGGED_IN --> fullwidth<!-- ENDIF -->">
 				<!-- EVENT overall_header_navigation_prepend -->
 				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
 				<!-- IF not S_IS_BOT -->

phpBB/styles/prosilver/template/posting_editor.html

@@ -31,7 +31,7 @@
 			<!-- ENDIF -->
 			<!-- IF not S_EDIT_POST -->
 			<dl class="pmlist">
-				<dt><textarea id="username_list" name="username_list" class="inputbox" cols="50" rows="2" tabindex="1"></textarea></dt>
+				<dt><label>{L_TO}{L_COLON}<textarea id="username_list" name="username_list" class="inputbox" cols="50" rows="2" tabindex="1"></textarea></label></dt>
 				<dd><span><a href="{U_FIND_USERNAME}" onclick="find_username(this.href); return false;">{L_FIND_USERNAME}</a></span></dd>
 				<dd><input type="submit" name="add_to" value="{L_ADD}" class="button2" tabindex="1" /></dd>
 				<dd><input type="submit" name="add_bcc" value="{L_ADD_BCC}" class="button2" tabindex="1" /></dd>
@@ -111,14 +111,16 @@
 		<!-- ENDIF -->
 
 		<!-- IF BBCODE_STATUS -->
-		<!-- IF .smiley --><hr /><!-- ENDIF -->
-		{BBCODE_STATUS}<br />
-		<!-- IF S_BBCODE_ALLOWED -->
-			{IMG_STATUS}<br />
-			{FLASH_STATUS}<br />
-			{URL_STATUS}<br />
-		<!-- ENDIF -->
-		{SMILIES_STATUS}
+		<div class="bbcode-status">
+			<!-- IF .smiley --><hr /><!-- ENDIF -->
+			{BBCODE_STATUS}<br />
+			<!-- IF S_BBCODE_ALLOWED -->
+				{IMG_STATUS}<br />
+				{FLASH_STATUS}<br />
+				{URL_STATUS}<br />
+			<!-- ENDIF -->
+			{SMILIES_STATUS}
+		</div>
 		<!-- ENDIF -->
 		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
 			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->

phpBB/styles/prosilver/template/posting_topic_review.html

@@ -22,13 +22,16 @@
 	<!-- ENDIF -->
 
 		<div class="postbody" id="pr{topic_review_row.POST_ID}">
+			<h3><a href="#pr{topic_review_row.POST_ID}">{topic_review_row.POST_SUBJECT}</a></h3>
+
 			<!-- IF topic_review_row.POSTER_QUOTE and topic_review_row.DECODED_MESSAGE -->
 			<ul class="profile-icons">
 				<li class="quote-icon"><a href="#postingbox" onclick="addquote({topic_review_row.POST_ID}, '{topic_review_row.POSTER_QUOTE}', '{LA_WROTE}');" title="{L_QUOTE} {topic_review_row.POST_AUTHOR}"><span>{L_QUOTE} {topic_review_row.POST_AUTHOR}</span></a></li>
 			</ul>
 			<!-- ENDIF -->
+
 			<!-- IF topic_review_row.U_MCP_DETAILS --><div class="right-box"><a href="{topic_review_row.U_MCP_DETAILS}">{L_POST_DETAILS}</a></div><!-- ENDIF -->
-			<h3><a href="#pr{topic_review_row.POST_ID}">{topic_review_row.POST_SUBJECT}</a></h3>
+
 			<p class="author"><!-- IF S_IS_BOT -->{topic_review_row.MINI_POST_IMG}<!-- ELSE --><a href="{topic_review_row.U_MINI_POST}">{topic_review_row.MINI_POST_IMG}</a><!-- ENDIF --> {L_POST_BY_AUTHOR} <strong>{topic_review_row.POST_AUTHOR_FULL}</strong> &raquo; {topic_review_row.POST_DATE}  </p>
 			<div class="content">{topic_review_row.MESSAGE}</div>
 

phpBB/styles/prosilver/template/search_body.html

@@ -105,7 +105,7 @@
 	<!-- BEGIN recentsearch -->
 		<tr class="<!-- IF recentsearch.S_ROW_COUNT is even -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">
 			<td><a href="{recentsearch.U_KEYWORDS}">{recentsearch.KEYWORDS}</a></td>
-			<td class="active"><span>&nbsp;{recentsearch.TIME}</span></td>
+			<td class="active">{recentsearch.TIME}</td>
 		</tr>
 	<!-- BEGINELSE -->
 		<tr class="bg1">

phpBB/styles/prosilver/template/search_results.html

@@ -120,20 +120,19 @@
 			{searchresults.L_IGNORE_POST}
 		</div>
 	<!-- ELSE -->
-		<div class="postbody">
-			<h3><a href="{searchresults.U_VIEW_POST}">{searchresults.POST_SUBJECT}</a></h3>
-			<div class="content">{searchresults.MESSAGE}</div>
-		</div>
-
 		<dl class="postprofile">
 			<dt class="author">{L_POST_BY_AUTHOR} {searchresults.POST_AUTHOR_FULL}</dt>
-			<dd>{searchresults.POST_DATE}</dd>
-			<dd>&nbsp;</dd>
+			<dd class="search-result-date">{searchresults.POST_DATE}</dd>
 			<dd>{L_FORUM}{L_COLON} <a href="{searchresults.U_VIEW_FORUM}">{searchresults.FORUM_TITLE}</a></dd>
 			<dd>{L_TOPIC}{L_COLON} <a href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a></dd>
 			<dd>{L_REPLIES}{L_COLON} <strong>{searchresults.TOPIC_REPLIES}</strong></dd>
 			<dd>{L_VIEWS}{L_COLON} <strong>{searchresults.TOPIC_VIEWS}</strong></dd>
 		</dl>
+
+		<div class="postbody">
+			<h3><a href="{searchresults.U_VIEW_POST}">{searchresults.POST_SUBJECT}</a></h3>
+			<div class="content">{searchresults.MESSAGE}</div>
+		</div>
 	<!-- ENDIF -->
 
 	<!-- IF not searchresults.S_IGNORE_POST -->

phpBB/styles/prosilver/template/simple_header.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 {META}
@@ -11,6 +12,7 @@
 <!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
 <link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
 <link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
+<link href="{T_THEME_PATH}/responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
 
 <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
 	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
@@ -24,7 +26,7 @@
 
 </head>
 
-<body id="phpbb" class="{S_CONTENT_DIRECTION}">
+<body id="phpbb" class="nojs {S_CONTENT_DIRECTION}">
 
 <div id="simple-wrap">
 	<a id="top" accesskey="t"></a>

phpBB/styles/prosilver/template/ucp_pm_history.html

@@ -15,13 +15,14 @@
 		<div class="inner">
 
 		<div class="postbody" id="pr{history_row.MSG_ID}">
+			<h3><a href="{history_row.U_VIEW_MESSAGE}" <!-- IF history_row.S_CURRENT_MSG -->class="current"<!-- ENDIF -->>{history_row.SUBJECT}</a></h3>
+
 			<!-- IF history_row.U_QUOTE or history_row.MESSAGE_AUTHOR_QUOTE -->
 			<ul class="profile-icons">
 				<li class="quote-icon"><a <!-- IF history_row.U_QUOTE -->href="{history_row.U_QUOTE}"<!-- ELSE -->href="#postingbox" onclick="addquote({history_row.MSG_ID}, '{history_row.MESSAGE_AUTHOR_QUOTE}', '{LA_WROTE}');"<!-- ENDIF --> title="{L_QUOTE} {history_row.MESSAGE_AUTHOR}"><span>{L_QUOTE} {history_row.MESSAGE_AUTHOR}</span></a></li>
 			</ul>
 			<!-- ENDIF -->
 
-			<h3><a href="{history_row.U_VIEW_MESSAGE}" <!-- IF history_row.S_CURRENT_MSG -->class="current"<!-- ENDIF -->>{history_row.SUBJECT}</a></h3>
 			<p class="author">{history_row.MINI_POST_IMG} {L_SENT_AT}{L_COLON} <strong>{history_row.SENT_DATE}</strong><br />
 				{L_MESSAGE_BY_AUTHOR} {history_row.MESSAGE_AUTHOR_FULL}</p>
 			<div class="content"><!-- IF history_row.MESSAGE -->{history_row.MESSAGE}<!-- ELSE --><span class="error">{L_MESSAGE_REMOVED_FROM_OUTBOX}</span><!-- ENDIF --></div>

phpBB/styles/prosilver/template/ucp_pm_viewmessage.html

@@ -17,7 +17,40 @@
 <div id="post-{MESSAGE_ID}" class="post pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">
 <div class="inner">
 
+	<dl class="postprofile" id="profile{MESSAGE_ID}">
+		<dt class="<!-- IF RANK_TITLE or RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF -->"><!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}" class="avatar">{AUTHOR_AVATAR}</a><!-- ENDIF -->{MESSAGE_AUTHOR_FULL}</dt>
+
+		<!-- IF RANK_TITLE or RANK_IMG --><dd class="profile-rank">{RANK_TITLE}<!-- IF RANK_TITLE and RANK_IMG --><br /><!-- ENDIF -->{RANK_IMG}</dd><!-- ENDIF -->
+
+		<dd><strong>{L_POSTS}{L_COLON}</strong> {AUTHOR_POSTS}</dd>
+		<!-- IF AUTHOR_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {AUTHOR_JOINED}</dd><!-- ENDIF -->
+		<!-- IF AUTHOR_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {AUTHOR_FROM}</dd><!-- ENDIF -->
+
+		<!-- EVENT ucp_pm_viewmessage_custom_fields_before -->
+		<!-- BEGIN custom_fields -->
+			<dd><strong>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {custom_fields.PROFILE_FIELD_VALUE}</dd>
+		<!-- END custom_fields -->
+		<!-- EVENT ucp_pm_viewmessage_custom_fields_after -->
+
+
+		<!-- IF U_PM or U_EMAIL or U_WWW or U_MSN or U_ICQ or U_YIM or U_AIM or U_JABBER -->
+		<dd>
+			<ul class="profile-icons">
+			<!-- IF U_PM --><li class="pm-icon"><a href="{U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
+			<!-- IF U_EMAIL --><li class="email-icon"><a href="{U_EMAIL}" title="{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}"><span>{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}</span></a></li><!-- ENDIF -->
+			<!-- IF U_WWW --><li class="web-icon"><a href="{U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
+			<!-- IF U_MSN --><li class="msnm-icon"><a href="{U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
+			<!-- IF U_ICQ --><li class="icq-icon"><a href="{U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
+			<!-- IF U_YIM --><li class="yahoo-icon"><a href="{U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
+			<!-- IF U_AIM --><li class="aim-icon"><a href="{U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
+			<!-- IF U_JABBER --><li class="jabber-icon"><a href="{U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
+			</ul>
+		</dd>
+		<!-- ENDIF -->
+	</dl>
+
 	<div class="postbody">
+		<h3 class="first">{SUBJECT}</h3>
 
 		<!-- IF U_DELETE or U_EDIT or U_QUOTE or U_REPORT -->
 		<ul class="profile-icons">
@@ -28,8 +61,6 @@
 		</ul>
 		<!-- ENDIF -->
 
-		<h3 class="first">{SUBJECT}</h3>
-
 		<p class="author">
 			<strong>{L_SENT_AT}{L_COLON}</strong> {SENT_DATE}
 			<br /><strong>{L_PM_FROM}{L_COLON}</strong> {MESSAGE_AUTHOR_FULL}
@@ -76,38 +107,6 @@
 		<!-- ENDIF -->
 	</div>
 
-	<dl class="postprofile" id="profile{MESSAGE_ID}">
-		<dt><!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}">{AUTHOR_AVATAR}</a><br /><!-- ENDIF -->{MESSAGE_AUTHOR_FULL}</dt>
-		<!-- IF RANK_TITLE --><dd>{RANK_TITLE}</dd><!-- ENDIF -->
-		<!-- IF RANK_IMG --><dd>{RANK_IMG}</dd><!-- ENDIF -->
-		<dd>&nbsp;</dd>
-		<dd><strong>{L_POSTS}{L_COLON}</strong> {AUTHOR_POSTS}</dd>
-		<!-- IF AUTHOR_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {AUTHOR_JOINED}</dd><!-- ENDIF -->
-		<!-- IF AUTHOR_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {AUTHOR_FROM}</dd><!-- ENDIF -->
-
-		<!-- EVENT ucp_pm_viewmessage_custom_fields_before -->
-		<!-- BEGIN custom_fields -->
-			<dd><strong>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {custom_fields.PROFILE_FIELD_VALUE}</dd>
-		<!-- END custom_fields -->
-		<!-- EVENT ucp_pm_viewmessage_custom_fields_after -->
-
-
-		<!-- IF U_PM or U_EMAIL or U_WWW or U_MSN or U_ICQ or U_YIM or U_AIM or U_JABBER -->
-		<dd>
-			<ul class="profile-icons">
-			<!-- IF U_PM --><li class="pm-icon"><a href="{U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
-			<!-- IF U_EMAIL --><li class="email-icon"><a href="{U_EMAIL}" title="{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}"><span>{L_SEND_EMAIL_USER} {MESSAGE_AUTHOR}</span></a></li><!-- ENDIF -->
-			<!-- IF U_WWW --><li class="web-icon"><a href="{U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
-			<!-- IF U_MSN --><li class="msnm-icon"><a href="{U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
-			<!-- IF U_ICQ --><li class="icq-icon"><a href="{U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
-			<!-- IF U_YIM --><li class="yahoo-icon"><a href="{U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
-			<!-- IF U_AIM --><li class="aim-icon"><a href="{U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
-			<!-- IF U_JABBER --><li class="jabber-icon"><a href="{U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
-			</ul>
-		</dd>
-		<!-- ENDIF -->
-	</dl>
-
 	<div class="back2top"><a href="#top" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
 
 	</div>

phpBB/styles/prosilver/template/ucp_profile_signature.html

@@ -9,7 +9,7 @@
 		<div class="inner">
 		<h3>{L_SIGNATURE_PREVIEW}</h3>
 		<div class="postbody">
-			<div class="signature" style="border-top:none; margin-top: 0; ">{SIGNATURE_PREVIEW}</div>
+			<div class="signature standalone">{SIGNATURE_PREVIEW}</div>
 		</div>
 		</div>
 	</div>

phpBB/styles/prosilver/template/viewforum_body.html

@@ -28,7 +28,7 @@
 <!-- IF S_HAS_SUBFORUM -->
 <!-- IF not S_IS_BOT and U_MARK_FORUMS -->
 <ul class="linklist">
-	<li class="rightside"><a href="{U_MARK_FORUMS}" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_SUBFORUMS_READ}</a></li>
+	<li class="rightside mark-read"><a href="{U_MARK_FORUMS}" data-ajax="mark_forums_read" data-overlay="false">{L_MARK_SUBFORUMS_READ}</a></li>
 </ul>
 <!-- ENDIF -->
 	<!-- INCLUDE forumlist_body.html -->

phpBB/styles/prosilver/template/viewonline_body.html

@@ -29,7 +29,7 @@
 		<tbody>
 		<!-- BEGIN user_row -->
 		<tr class="<!-- IF user_row.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">
-			<td>{user_row.USERNAME_FULL}<!-- IF user_row.USER_IP --> <span style="margin-left: 30px;">{L_IP}{L_COLON} <a href="{user_row.U_USER_IP}">{user_row.USER_IP}</a> &#187; <a href="{user_row.U_WHOIS}" onclick="popup(this.href, 750, 500); return false;">{L_WHOIS}</a></span><!-- ENDIF -->
+			<td>{user_row.USERNAME_FULL}<!-- IF user_row.USER_IP --> <span style="float: {S_CONTENT_FLOW_END};">{L_IP}{L_COLON} <a href="{user_row.U_USER_IP}">{user_row.USER_IP}</a> &#187; <a href="{user_row.U_WHOIS}" onclick="popup(this.href, 750, 500); return false;">{L_WHOIS}</a></span><!-- ENDIF -->
 				<!-- IF user_row.USER_BROWSER --><br />{user_row.USER_BROWSER}<!-- ENDIF --></td>
 			<td class="info"><a href="{user_row.U_FORUM_LOCATION}">{user_row.FORUM_LOCATION}</a></td>
 			<td class="active">{user_row.LASTUPDATE}</td>

phpBB/styles/prosilver/template/viewtopic_body.html

@@ -116,6 +116,50 @@
 	<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF -->">
 		<div class="inner">
 
+		<dl class="postprofile" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
+			<dt class="<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF -->">
+				<!-- IF postrow.POSTER_AVATAR -->
+					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="avatar">{postrow.POSTER_AVATAR}</a><!-- ELSE --><span class="avatar">{postrow.POSTER_AVATAR}</span><!-- ENDIF -->
+				<!-- ENDIF -->
+				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
+			</dt>
+
+			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
+
+		<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}{L_COLON}</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
+		<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
+		<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {postrow.POSTER_FROM}</dd><!-- 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. -->
+			<dd><strong>{postrow.PROFILE_FIELD1_NAME}{L_COLON}</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
+		<!-- ENDIF -->
+
+		<!-- EVENT viewtopic_body_postrow_custom_fields_before -->
+		<!-- BEGIN custom_fields -->
+			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
+		<!-- END custom_fields -->
+		<!-- EVENT viewtopic_body_postrow_custom_fields_after -->
+
+		<!-- IF not S_IS_BOT -->
+		<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
+			<dd>
+				<ul class="profile-icons">
+					<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
+					<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
+				</ul>
+			</dd>
+		<!-- ENDIF -->
+		<!-- ENDIF -->
+
+		</dl>
+
 		<div class="postbody">
 			<!-- IF postrow.S_POST_HIDDEN -->
 				<!-- IF postrow.S_POST_DELETED -->
@@ -132,6 +176,8 @@
 			<!-- ENDIF -->
 			<div id="post_content{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
 
+			<h3 <!-- IF postrow.S_FIRST_ROW -->class="first"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>
+
 		<!-- IF not S_IS_BOT -->
 			<!-- IF postrow.U_EDIT or postrow.U_DELETE or postrow.U_REPORT or postrow.U_WARN or postrow.U_INFO or postrow.U_QUOTE -->
 				<ul class="profile-icons">
@@ -147,7 +193,6 @@
 			<!-- ENDIF -->
 		<!-- ENDIF -->
 
-			<h3 <!-- IF postrow.S_FIRST_ROW -->class="first"<!-- ENDIF -->><!-- IF postrow.POST_ICON_IMG --><img src="{T_ICONS_PATH}{postrow.POST_ICON_IMG}" width="{postrow.POST_ICON_IMG_WIDTH}" height="{postrow.POST_ICON_IMG_HEIGHT}" alt="" /> <!-- ENDIF --><a href="#p{postrow.POST_ID}">{postrow.POST_SUBJECT}</a></h3>
 			<p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF -->{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> &raquo; {postrow.POST_DATE} </p>
 
 			<!-- IF postrow.S_POST_UNAPPROVED -->
@@ -220,52 +265,6 @@
 
 		</div>
 
-		<dl class="postprofile" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->>
-			<dt>
-				<!-- IF postrow.POSTER_AVATAR -->
-					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
-				<!-- ENDIF -->
-				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
-			</dt>
-
-			<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
-
-		<dd>&nbsp;</dd>
-
-		<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}{L_COLON}</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
-		<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}{L_COLON}</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
-		<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}{L_COLON}</strong> {postrow.POSTER_FROM}</dd><!-- 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. -->
-			<dd><strong>{postrow.PROFILE_FIELD1_NAME}{L_COLON}</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
-		<!-- ENDIF -->
-
-		<!-- EVENT viewtopic_body_postrow_custom_fields_before -->
-		<!-- BEGIN custom_fields -->
-			<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
-		<!-- END custom_fields -->
-		<!-- EVENT viewtopic_body_postrow_custom_fields_after -->
-
-		<!-- IF not S_IS_BOT -->
-		<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
-			<dd>
-				<ul class="profile-icons">
-					<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}{L_COLON} {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
-					<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
-				</ul>
-			</dd>
-		<!-- ENDIF -->
-		<!-- ENDIF -->
-
-		</dl>
-
 		<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
 
 		</div>