04-29-2007, 06:16 PM
Someone on the MyBB Community requested to know how to round corners of a theme, so I am making a simple tutorial for the way I did it.
Note: This only places rounded corners on the index page, not on any other page.
To get rounded corners on most of all pages, download and install the MyBB Dream theme.
Open your Admin CP > Templates > *Your Template Set*. Open the Forum Bit Templates and edit forumbit_depth1_cat.
Replace the entire contents of that template with this:
Now, save that, and open the Index Page Templates, and edit index. Just so there's no mistakes, replace the entire contents of that template with this:
Save it.
Now, just by looking at the code, your LEFT corner image is named cat_l.gif
Your RIGHT corner image is named cat_r.gif
And the image between those corners is called cat_tbg.gif
Make those images and put them in your image directory for your theme. Tweak it to your likings.
Note: This only places rounded corners on the index page, not on any other page.
To get rounded corners on most of all pages, download and install the MyBB Dream theme.
Open your Admin CP > Templates > *Your Template Set*. Open the Forum Bit Templates and edit forumbit_depth1_cat.
Replace the entire contents of that template with this:
Code:
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<tbody>
<tr>
<td align="left"><img src="{$theme['imgdir']}/cat_l.gif" alt="" border="0"></td>
<td style="background: url({$theme['imgdir']}/cat_tbg.gif) repeat-x" align="center" width="100%"><div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" /></div>
<span class="thead"><div style="text-align: left;"><strong><a href="forumdisplay.php?fid={$forum['fid']}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></span>
</td>
<td align="right"><img src="{$theme['imgdir']}/cat_r.gif" alt="" border="0"></td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<tbody style="" id="cat_1_e">
<tr>
<td class="tcat" width="35"> </td>
<td class="tcat"><strong>{$lang->forumbit_forum}</strong></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><strong>{$lang->forumbit_threads}</strong></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><strong>{$lang->forumbit_posts}</strong></td>
<td class="tcat" width="200" align="center"><strong>{$lang->forumbit_lastpost}</strong></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />Now, save that, and open the Index Page Templates, and edit index. Just so there's no mistakes, replace the entire contents of that template with this:
Code:
<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
{$forums}
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr>
<tbody>
<tr>
<td align="left"><img src="{$theme['imgdir']}/cat_l.gif" alt="" border="0"></td>
<td style="background: url({$theme['imgdir']}/cat_tbg.gif) repeat-x" align="center" width="100%"><div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['boardstats']}.gif" id="boardstats_img" class="expander" alt="[-]" /></div>
<span class="thead"><div style="text-align: left;"><strong><a href="stats.php">{$lang->boardstats}</a></strong></div></span>
</td>
<td align="right"><img src="{$theme['imgdir']}/cat_r.gif" alt="" border="0"></td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<tbody style="" id="boardstats_e">
{$whosonline}
{$birthdays}
{$forumstats}
</tbody>
</table>
<br />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="trow1">
<table width="100%">
<tr>
<td>
<img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /> <span class="smalltext">{$lang->new_posts}</span><br />
<img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /> <span class="smalltext">{$lang->no_new_posts}</span><br />
<img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" style="vertical-align: middle;" /> <span class="smalltext">{$lang->forum_locked}</span>
</td>
<td style="vertical-align: top; text-align: right;"><span class="smalltext">{$logoutlink}<a href="misc.php?action=markread">{$lang->markread}</a> | <a href="showteam.php">{$lang->forumteam}</a> | <a href="stats.php">{$lang->forumstats}</a></span>
{$loginform}
</td>
</tr>
</table>
</td>
</tr>
</table>
{$footer}
</body>
</html>Now, just by looking at the code, your LEFT corner image is named cat_l.gif
Your RIGHT corner image is named cat_r.gif
And the image between those corners is called cat_tbg.gif
Make those images and put them in your image directory for your theme. Tweak it to your likings.
