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?
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:
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.
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]
We need to add the .resp tag to the second table in the member_profile template (line 31):
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%".
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> </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:
To confirm - Your template should now look like the following if you are editing the default theme (or default template):
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.
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):
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):
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!
Good luck guys
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?
Here is what we are trying to accomplish. https://i.imgur.com/ptwq7hu.mp4Step 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">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.
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> </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">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> </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.
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!
Good luck guys
![[Image: forumonic-bar.png]](https://forumonic.com/images/forumonic-bar.png)
![[Image: xige-logo-png-blue-sml.png]](http://xigeti.me/img/xige-logo-png-blue-sml.png){kind=logo}
