MyBB Community Forums

I'm currently on MyBB 1.8.15, and I've been working on creating a heavily modified version of the BootBB theme for my forum using a local mirror to test it. However, I've been running into some problems with the MyAlerts plugin. From what I can tell, it's still using tables, and isn't scaling properly as a result. Maybe. I don't actually know anything about structures. These problems became more obvious when I enabled the theme on the actual forum as admin-only to see how it worked live (I have deleted it from the live forum to tweak it more offline after taking these screenshots).

In the full, desktop version of the forum, the MyAlerts popup ends up looking like this:

[Image: icmNg4H.png]

If I scale the window down, it looks like this:

[Image: bpO3XE6.png]

Which suggests to me that the container for the table is scaling, but the table has a maximum width it won't exceed. I'm also not thrilled about how avatars get squished, and I'd like to replace that close button with a glyph, but neither of those are urgent issues.

Width is also a problem on the full alerts page.

[Image: fmnjusY.png]

All of them look even smaller and worse with no alerts, but you'll have to take my word for it on that. I assume that these problems are rooted in the templates, rather than the CSS, but I... don't actually know. Just so you have as much information as possible, here's my current myalerts_page template:

<html>
<head>
<title>{$lang->myalerts_page_title} - {$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
{$usercpnav}
<div class="col-sm-10">

<div class="tborder">

<table border="0" cellspacing="{$theme['borderwidth']}"
                   cellpadding="{$theme['tablespace']}"
                   class="tborder">
                <thead>
                <tr>
                    <th class="thead" colspan="10">
                        <strong>{$lang->myalerts_page_title}</strong>

                        <div class="float_right">
                            <a id="getUnreadAlerts"
                               href="{$mybb->settings['bburl']}/alerts.php">{$lang->myalerts_page_getnew}</a>
                        </div>
                    </th>
                </tr>
                </thead>
                <tbody id="latestAlertsListing">
                {$alertsListing}
                </tbody>
            </table>

</div>

</div>
{$footer}
</body>
</html>

And my myalerts_alert_row template:

<tr class="alert-row alert--{$alert['alert_code']} {$alert['alert_status']}"
    id="alert_row_{$alert['id']}">
    <td class="{$altbg}">
        <a class="avatar" href="{$alert['from_user_raw_profilelink']}"><img
                src="{$alert['avatar']['image']}"
                alt="{$alert['username']}'s avatar" /></a>
    </td>
    <td class="{$altbg}">
        <a href="{$mybb->settings['bburl']}/alerts.php?action=view&amp;id={$alert['id']}">
            {$alert['message']}
        </a>
        <br/>
		<span class="smalltext float_right">
			<a href="{$mybb->settings['bburl']}/alerts.php?action=delete&amp;id={$alert['id']}&amp;my_post_key={$mybb->post_code}"
               class="deleteAlertButton" id="delete_alert_{$alert['id']}">{$lang->myalerts_delete}</a>
		</span>
        <br class="clear"/>
    </td>
    <td class="{$altbg}">
        {$alert['received_at']}
    </td>
</tr>

I don't think any other relevant templates have been changed from the MyAlerts default, but I'm willing to share any other files that might be useful in figuring out what's happening here.

Even just getting pointed in the right direction as far as what files/code I should be fiddling with should be helpful, I'm having a lot of trouble parsing out which sections of code are doing what here.

I'm using the same theme for mine and I looked it up. It's taking the width of the .modal class.

Have you tried putting in the table-responsive class from Bootstrap 3 alongside the other table class?

It'll look like this instead of just tborder.

<table class="tborder table-responsive" cellspacing="0" cellpadding="0" border="0">

If that doesn't work, try making another .modal just for it (call it .modalalerts for an example) and edit it in the myalerts_modal_content template in the MyAlerts templates as well as styling it in the css.

KittyUnpretty

Camy