How to: Beautifing your MessageIndex with Tiny Portal.

[nite0859]

File modified : MessageIndex.template.php

I suppose I should say this before I start : I'm not a professional coder. I don't want to provide support for these code changes. Although its minor, I don't want the responsibility of troubleshooting a mess up. Before you do anything, backup the original file first.

See attached images.

Prior :

Code Select Expand


// Show breadcrumbs at the bottom too?
echo '
<div>', theme_linktree(), '<br /></div>';

echo '
<div class="tborder">
<table cellpadding="8" cellspacing="0" width="100%" class="titlebg2">
<tr>';
if (!$context['no_topic_listing'])
echo '
<td style="padding-top: 2ex;" class="smalltext">', !empty($modSettings['enableParticipation']) ? '
<img src="' . $settings['images_url'] . '/topic/my_normal_post.gif" alt="" align="middle" /> ' . $txt['participation_caption'] . '<br />' : '', '
<img src="' . $settings['images_url'] . '/topic/normal_post.gif" alt="" align="middle" /> ' . $txt[457] . '<br />
<img src="' . $settings['images_url'] . '/topic/hot_post.gif" alt="" align="middle" /> ' . $txt[454] . '<br />
<img src="' . $settings['images_url'] . '/topic/veryhot_post.gif" alt="" align="middle" /> ' . $txt[455] . '
</td>
<td valign="top" style="padding-top: 2ex;" class="smalltext">
<img src="' . $settings['images_url'] . '/icons/quick_lock.gif" alt="" align="middle" /> ' . $txt[456] . '<br />' . ($modSettings['enableStickyTopics'] == '1' ? '
<img src="' . $settings['images_url'] . '/icons/quick_sticky.gif" alt="" align="middle" /> ' . $txt['smf96'] . '<br />' : '') . ($modSettings['pollMode'] == '1' ? '
<img src="' . $settings['images_url'] . '/topic/normal_poll.gif" alt="" align="middle" /> ' . $txt['smf43'] : '') . '
</td>
</tr>
</table>';
echo '
<table cellpadding="8" cellspacing="0" width="100%" class="titlebg2">
<tr>
<td align="', !$context['right_to_left'] ? 'right' : 'left', '" valign="middle">
<form action="', $scripturl, '" method="get" accept-charset="', $context['character_set'], '" name="jumptoForm">
<span class="smalltext"><label for="jumpto">' . $txt[160] . '</label>:</span>
<select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt[251] . ':</option>';


After :

Code Select Expand


// Show breadcrumbs at the bottom too?
echo '
<div>', theme_linktree(), '<br /></div>';

echo '
<div class="tborder">
<table cellpadding="8" cellspacing="0" width="100%" class="titlebg2">
<tr>';
if (!$context['no_topic_listing'])
echo '
<td style="padding-top: 2ex;" class="smalltext">', !empty($modSettings['enableParticipation']) ? '
<img src="' . $settings['images_url'] . '/topic/my_normal_post.gif" alt="" align="middle" /> ' . $txt['participation_caption'] . '<br />' : '', '
<img src="' . $settings['images_url'] . '/topic/normal_post.gif" alt="" align="middle" /> ' . $txt[457] . '<br />
<img src="' . $settings['images_url'] . '/topic/hot_post.gif" alt="" align="middle" /> ' . $txt[454] . '<br />
<img src="' . $settings['images_url'] . '/topic/veryhot_post.gif" alt="" align="middle" /> ' . $txt[455] . '
</td>
<td valign="top" style="padding-top: 2ex;" class="smalltext">
<img src="' . $settings['images_url'] . '/icons/quick_lock.gif" alt="" align="middle" /> ' . $txt[456] . '<br />' . ($modSettings['enableStickyTopics'] == '1' ? '
<img src="' . $settings['images_url'] . '/icons/quick_sticky.gif" alt="" align="middle" /> ' . $txt['smf96'] . '<br />' : '') . ($modSettings['pollMode'] == '1' ? '
<img src="' . $settings['images_url'] . '/topic/normal_poll.gif" alt="" align="middle" /> ' . $txt['smf43'] : '') . '
</td>
</tr>
</table>';
echo '
<table cellpadding="8" cellspacing="0" width="100%" class="titlebg2">
<tr>
<td align="', !$context['right_to_left'] ? 'right' : 'left', '" valign="middle">
<form action="', $scripturl, '" method="get" accept-charset="', $context['character_set'], '" name="jumptoForm">
<span class="smalltext"><label for="jumpto">' . $txt[160] . '</label>:</span>
<select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
<option value="">' . $txt[251] . ':</option>';


Essentially, all I did was close the table that displayed the images and put the form bar inside another table with the same parameters.

In particular:

Prior:

      // Show breadcrumbs at the bottom too?
   echo '
   <div>', theme_linktree(), '
</div>';

   echo '
   <div class="tborder">
      <table cellpadding="8" cellspacing="0" width="100%" class="titlebg2">
         <tr>';
   if (!$context['no_topic_listing'])
         echo '
            <td style="padding-top: 2ex;" class="smalltext">', !empty($modSettings['enableParticipation']) ? '
               <img src="' . $settings['images_url'] . '/topic/my_normal_post.gif" alt="" align="middle" /> ' . $txt['participation_caption'] . '
' : '', '
               <img src="' . $settings['images_url'] . '/topic/normal_post.gif" alt="" align="middle" /> ' . $txt[457] . '

               <img src="' . $settings['images_url'] . '/topic/hot_post.gif" alt="" align="middle" /> ' . $txt[454] . '

               <img src="' . $settings['images_url'] . '/topic/veryhot_post.gif" alt="" align="middle" /> ' . $txt[455] . '
            </td>
            <td valign="top" style="padding-top: 2ex;" class="smalltext">
               <img src="' . $settings['images_url'] . '/icons/quick_lock.gif" alt="" align="middle" /> ' . $txt[456] . '
' . ($modSettings['enableStickyTopics'] == '1' ? '
               <img src="' . $settings['images_url'] . '/icons/quick_sticky.gif" alt="" align="middle" /> ' . $txt['smf96'] . '
' : '') . ($modSettings['pollMode'] == '1' ? '
               <img src="' . $settings['images_url'] . '/topic/normal_poll.gif" alt="" align="middle" /> ' . $txt['smf43'] : '') . '
            </td>
         </tr>
      </table>';
   echo '
      <table cellpadding="8" cellspacing="0" width="100%" class="titlebg2">
         <tr>
            <td align="', !$context['right_to_left'] ? 'right' : 'left', '" valign="middle">
               <form action="', $scripturl, '" method="get" accept-charset="', $context['character_set'], '" name="jumptoForm">
                  <span class="smalltext"><label for="jumpto">' . $txt[160] . '</label>:</span>
               <select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != \'?\' ? 0 : 1);">
                        <option value="">' . $txt[251] . ':</option>';

I wish SMF came like this from default. It makes things prettier.

[Assistance]

See attached images.??

[Dazed]

See attached images.??

Think he is referring to the code...

[Crip]

You try it 1st Grumpy.

[Dazed]

No, I did not try the code. The way I read the post that is what I got from it. If he is referring to the links in the code, that require special images, then that is different.

[Crip]

Looks like to bottom linktree?

[Dazed]

Welp, I have the time and a test site... lets see what happens.


And, btw, hello Crip!

[Dazed]

Cant say I see any change but I will have to check some other themes. I did seem to lose the message button in the one I tried. Not sure I understand the full intent of the change...

[Gourgi]

i think a screenshot of what the original code is doing would be helpful nite0859