Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5

Very Simple Responsive Tables in MyBB

#1
Here I'm going to share a very simple CSS trick that can be implemented on any tables in MyBB with very little effort! You will be surprised that if you can figure out how to make tables responsive, making MyBB responsive becomes a hell of a lot easier. + I don't like frameworks too much.

This is a great place to start when making a responsive MyBB theme, and there is very little too it! I'm using the Profile page to demonstrate as it will be the easiest to follow and implement on a learning basis.

First things first, what the hell am I talking about? Tongue Here is what we are trying to accomplish. https://i.imgur.com/ptwq7hu.mp4


Step 1: Back to basics, firstly you need to make sure you are including the "Responsive meta" tag. Make sure you have the following code(or the like) included in your headerinclude:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Why? - This little line of code is telling your browser to view the website via your devices width, instead of the browsers default. Without this code your browser will be unable to tell if you are using a desktop size screen or a mobile size screen.


Step 1a: Annoyingly, in MyBB's default theme, they included a minimum width in the wrapper class. We need to remove this or it wont allow us to resize the screen any less than the minimum defined. This is usually 970px by default. Go to your global.css and find ".wrapper", after that remove: "min-width: 970px;"


Step 2: Now we've prepped our theme to be made responsive, we will modify a tiny bit of the member_profile template, note - there is very little template edits to be made. Big Grin There are 2 new classes we are going to introduce: .break, and .resp

.resp - This class is marking the table it is attached to, that it is a responsive table.
.break - This class will be attached to a <td> element. This is indicating that this <td> will need to be full width when on smaller screens.

The default markup of the member_profile template is as followsNote - I've removed some of the code to condense things but we are working on this bit:[/b]
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="50%" valign="top">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
</table>
</td>
<td>&nbsp;&nbsp;</td>
<td width="50%" valign="top">
{$profilefields}
{$signature}
</td>
</tr>
</table>

We need to add the .resp tag to the second table in the member_profile template (line 31):
Code:
<table class="resp" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
We then need to add the .break tag to any <td> element inside the responsive table that contains another <table>, at the same time remove any width="50%".
Code:
<td valign="top" class="break">

In total, you should have added 1 .resp class and 2 .break classes to the default theme.




Step 3: You should see an empty <td> tag or <td>&nbsp;</td> in the middle of both the <td>'s we added the .break too, here we need to add width="15px" height="15px" to make sure the padding between the tables is even on all devices. Should be as follows:
Code:
<td width="15px" height="15px"></td>


To confirm - Your template should now look like the following if you are editing the default theme (or default template):
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<fieldset>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<span class="largetext"><strong>{$formattedname}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span>
</td>
<td width="25%" align="right" valign="middle">{$avatar}</td>
</tr>
</table>
</fieldset>
<br />
{$awaybit}{$bannedbit}
<table class="resp" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td valign="top" class="break">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
<td class="trow2">{$memlastvisitdate}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total}){$findposts}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->total_threads}</strong></td>
<td class="trow2">{$memprofile['threadnum']} ({$lang->tpd_percent_total}){$findthreads}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->timeonline}</strong></td>
<td class="trow1">{$timeonline}</td>
</tr>
{$referrals}
{$reputation}
{$warning_level}
</table>
{$contact_details}
</td>
<td width="15px" height="15px"></td>
<td valign="top" class="break">
{$profilefields}
{$signature}
{$modoptions}
{$adminoptions}
<div style="text-align: center">{$buddy_options}{$ignore_options}{$report_options}</div>
</td>
</tr>
</table>
{$footer}
</body>
</html>

If you're happy, we can move onto the CSS.

Step 4: Earlier we introduced 2 new classes .break and .resp. Surprisingly, there isn't a lot of CSS to go with them. Wink Firstly, we need to modify our tables globally. Add the following to your global.css stylesheet (this is just to make sure the tables handle the classes correctly):
Code:
table {
  border-collapse: collapse;
  width: 100%;
}

Step 4a: We're now going to add our media queries to tell the browser what to do if the screen is smaller than a certain width. You can device the width on which you want it to "break" onto a new line, however I choose 720px which is pretty standard. If you haven't used media queries before, don't be scared by the look - they're actually really simple. I usually add my media queries and custom CSS in a new stylesheet but feel free to add the following to your global.css(I've commented this one out so you understand it easier):
Code:
@media screen and (max-width: 720px) {  /* This is telling the browser this CSS is only valid when the screen size is lower than 720px */
  table.resp tr {          
           display: block;        /* .resp tag: This makes sure that nothing will stick to the side of a table row making it break the page. */
  }
table.resp td:first-child {
           min-width:120px;   /* OPTIONAL: This is how I handled the Joined:etc.. colums from being different widths */
  }
table.resp td.break {
           display: block;        /* .break tag: This forces attached <td> elements to extend to full width - causing side by side <td> to go below. (The Magic) */
}
table.resp .thead {
display:block;         /* Fixes the thead bg from only covering some of the table due to border-collapse: collapse. */
}
}

And there you go! CTRL+F5 AND GO! Try it out, see how it goes and have a play! Hopefully you have the same result as me, let me now if you need any help. If you manage to get this done right, you will be able to implement this all over MyBB and almost make a fully responsive theme with just this trick!!

I do recommend anyone to go table-less for their forum index's, postbits, forumdisplay etc.. however this can be extremely tricky so using reponsive tables is just as good! Smile Good luck guys Big Grin
[Image: forumonic-bar.png]...............[Image: xige-logo-png-blue-sml.png]
Latest snapshots: Postbit Design - Multi Login Modal (1) - Responsive Pollbar
Reply
#2
This is a really awesome tutorial, many thanks for posting this. I am in the process of making our theme responsive here at MS ("Makestation development version") and it has been a bit of a headache. This will definitely be a huge time saver. MyBB is so heavily dependent on tables that it is extremely time consuming to remove all of them. Tongue

Thank you for posting this.

Reply
#3
(June 6th, 2018 at 8:49 PM)Darth-Apple Wrote: MyBB is so heavily dependent on tables that it is extremely time consuming to remove all of them. Tongue

That is exactly why I decided to try do this, and am using it in my theme Colore. Sometimes it is acceptable to use tables, especially when like you said MyBB is so dependant on them. I still think as much as you can try and stay away from them. Always keep them inside a div, and where possible replace the entire table with divs, but it would be so time consuming and would break almost all plugins if the entire theme were tableless.

I've fully converted my forums index, forumdisplay and postbit from tables to divs, and once its converted it is soo much easier to work with. Rolleyes
[Image: forumonic-bar.png]...............[Image: xige-logo-png-blue-sml.png]
Latest snapshots: Postbit Design - Multi Login Modal (1) - Responsive Pollbar
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Simple Reputation Bars [MyBB Plugin] Darth-Apple 7 4,083 October 22nd, 2020 at 4:25 AM
Last Post: tc4me



Users browsing this thread: 2 Guest(s)

Dark/Light Theme Selector

Contact Us | Makestation | Return to Top | Lite (Archive) Mode | RSS Syndication 
Proudly powered by MyBB 1.8, © 2002-2024
Forum design by Makestation Team © 2013-2024