MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > 2 Columns of "Announcements" on the portal (portal.php) page.
Full Version: 2 Columns of "Announcements" on the portal (portal.php) page.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

User 51303

2014-07-16, 09:59 AM
Hey well i'm back, i decided to convert my wordpress site to a MyBB site as i wanted to engage with the community better...

Any way i want to make it so that the portal.php is 4 columns (2 are the normal sidebars) i want 2 columns of articles... you will see on http://cyanlabs.net i have up to 4 columns (depends on resolution) i want to do just 2 on http://dev.cyanlabs.net

Here are the templates...

portal_announcement
<table cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
	<tr>
		<td class="thead" colspan="2">
			<strong>{$icon} <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}">{$announcement['subject']}</a></strong>
			<span style="text-align: right; float:right;" class="smalltext">{$anndate} {$anntime} &nbsp; <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}"><strong>{$announcement['views']}</strong></a> Views &nbsp; <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}"><strong>{$announcement['replies']}</strong></a> {$lang->replies}</span>
		</td>
	</tr>
	<tr>
		<td class="trow1"colspan="2">
			<table border="0" cellpadding="{$theme['tablespace']}" width="100%">
				<tr>
					<td class="trow1" style="border: 0px;">
						<p style="margin: -2px 0;">
							{$message}
						</p>
						{$post['attachments']}
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td class="trow2" align="right" valign="middle" colspan="2">
			<span class="smalltext">
				<a href="{$mybb->settings['bburl']}/printthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/printable.gif" alt="{$lang->print_this_item}" title="{$lang->print_this_item}" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/sendthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/send.gif" alt="{$lang->send_to_friend}" title="{$lang->send_to_friend}" /></a>
			</span>
		</td>
	</tr>
</table>
<br />

portal
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/fitonpage.js?ver=230"></script>
<script type="text/javascript">
<!--
	var fitonpage_on = "{$mybb->settings['g33k_fitonpage_enabled']}";
	var fitonpage_resize = "{$mybb->settings['g33k_fitonpage_resize']}";
	var fitonpage_fluid = "{$mybb->settings['g33k_fitonpage_fluid']}";
	var fitonpage_topbar_resized = "{$lang->fitonpage_topbar_resized}";
	var fitonpage_topbar_full = "{$lang->fitonpage_topbar_full}";
	var fitonpage_topbar_text_class = "{$mybb->settings['g33k_fitonpage_topbar_text_class']}";
	var fitonpage_topbar_bground = "{$mybb->settings['g33k_fitonpage_topbar_bground']}";
	var fitonpage_topbar_icon = "{$mybb->settings['g33k_fitonpage_topbar_icon']}";
	var fitonpage_location = "portal";
-->
</script>
</head>
<body>
{$header}
{$ps_header_portal}
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center">
<tr>
<td valign="top">
{$announcements}
<br />

</td>
<td>&nbsp;</td>
<td valign="top" style="width:300px;">
{$welcome}
{$pms}
{$mydownloads}
{$search}
{$stats}
{$whosonline}
{$latestthreads}
</td>
</tr>
</table>
{$ps_footer_portal}
{$footer}
</body>
</html>

Here is how it looks now,
[Image: 65c382c3e2.jpg]

and i want it to look like this (Paint.NET mock up)
[Image: 16fcb3a28d.jpg]

Hey well i'm back, i decided to convert my wordpress site to a MyBB site as i wanted to engage with the community better...

Any way i want to make it so that the portal.php is 4 columns (2 are the normal sidebars) i want 2 columns of articles... you will see on http://cyanlabs.net i have up to 4 columns (depends on resolution) i want to do just 2 on http://dev.cyanlabs.net

Here are the templates...

portal_announcement
<table cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
	<tr>
		<td class="thead" colspan="2">
			<strong>{$icon} <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}">{$announcement['subject']}</a></strong>
			<span style="text-align: right; float:right;" class="smalltext">{$anndate} {$anntime} &nbsp; <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}"><strong>{$announcement['views']}</strong></a> Views &nbsp; <a href="{$mybb->settings['bburl']}/{$announcement['threadlink']}"><strong>{$announcement['replies']}</strong></a> {$lang->replies}</span>
		</td>
	</tr>
	<tr>
		<td class="trow1"colspan="2">
			<table border="0" cellpadding="{$theme['tablespace']}" width="100%">
				<tr>
					<td class="trow1" style="border: 0px;">
						<p style="margin: -2px 0;">
							{$message}
						</p>
						{$post['attachments']}
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td class="trow2" align="right" valign="middle" colspan="2">
			<span class="smalltext">
				<a href="{$mybb->settings['bburl']}/printthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/printable.gif" alt="{$lang->print_this_item}" title="{$lang->print_this_item}" /></a>&nbsp;<a href="{$mybb->settings['bburl']}/sendthread.php?tid={$announcement['tid']}"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/send.gif" alt="{$lang->send_to_friend}" title="{$lang->send_to_friend}" /></a>
			</span>
		</td>
	</tr>
</table>
<br />

portal
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/fitonpage.js?ver=230"></script>
<script type="text/javascript">
<!--
	var fitonpage_on = "{$mybb->settings['g33k_fitonpage_enabled']}";
	var fitonpage_resize = "{$mybb->settings['g33k_fitonpage_resize']}";
	var fitonpage_fluid = "{$mybb->settings['g33k_fitonpage_fluid']}";
	var fitonpage_topbar_resized = "{$lang->fitonpage_topbar_resized}";
	var fitonpage_topbar_full = "{$lang->fitonpage_topbar_full}";
	var fitonpage_topbar_text_class = "{$mybb->settings['g33k_fitonpage_topbar_text_class']}";
	var fitonpage_topbar_bground = "{$mybb->settings['g33k_fitonpage_topbar_bground']}";
	var fitonpage_topbar_icon = "{$mybb->settings['g33k_fitonpage_topbar_icon']}";
	var fitonpage_location = "portal";
-->
</script>
</head>
<body>
{$header}
{$ps_header_portal}
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center">
<tr>
<td valign="top">
{$announcements}
<br />

</td>
<td>&nbsp;</td>
<td valign="top" style="width:300px;">
{$welcome}
{$pms}
{$mydownloads}
{$search}
{$stats}
{$whosonline}
{$latestthreads}
</td>
</tr>
</table>
{$ps_footer_portal}
{$footer}
</body>
</html>

Here is how it looks now,
[Image: 65c382c3e2.jpg]

and i want it to look like this (Paint.NET mock up)
[Image: 16fcb3a28d.jpg]

UPDATE: could i replace the whole template with tables to div's and then use jQuery Isotope to automatically resize and re-arrange based on users resolution?
Ok never mind i've figured it out Smile
just gotta tweak it a little.
Ok So sorry for constant updates but i like to show im trying to solve it my self Smile

http://dev.cyanlabs.net you can see i am having some issues with alignment... im using isotope jQuery plugin to make it auto re-arrange... any ideas how i can fix the gaps between each post?
ok on closer inspection i realise that isotope is actually not working, any ideas why?
So yeah to clarify it's sorted... it even resizes and hides elements. Smile

Cleopatra

2014-10-24, 08:03 PM
can you explain how you did it
MyBB Community Forums > Extensions > Themes > Theme Support > 2 Columns of "Announcements" on the portal (portal.php) page.