Custom Flat-Style Quote Box

[PntSingularity]

Here's a flat-style quote box I made. The colors are adapted for the original vB theme.

<table width="100%" border="0">
<tr><td width="100%" align="center">
<table width="97%" border="0">
  <tr>
    <td width="100%" bgcolor="#738FBF">
      <table width="100%" border="0" bgcolor="#E1E4F2">
        <tr>
          <td width="1%" bgcolor="#738FBF" nowrap align="left" valign="top">
            &nbsp;<font size="1"><b>
            <if condition="$show['username']">
                <phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
		<if condition="$postid">
                  <a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/viewpost.gif" border="0" alt="$vbphrase[view_post]" /></a>
                </if>
            <else />
              Quoted Text
            </if>
            </b></font>&nbsp;</td>
          <td width="99%" bgcolor="#E1E4F2">&nbsp;</td>
        </tr>
        <tr>
          <td width="100%" bgcolor="#E1E4F2" colspan="2">
            <table width="100%" cellpadding="2">
              <tr>
                <td width="100%" align="left" valign="top">
                  $message
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</td></tr>
</table><br />

Click here to see it in action.
If you keep reading through that thread you will find the code to have the very same box as custom bbCode (but with another color scheme). I use the custom one for OOC (Out-of-Character) posts, since it's a roleplaying forum.

[CyberAlien]

That looks nice, but there are way too many tables. Why use extra table for border when you can set border to <td> or <table>?

This is the same code (approximately, I didn't test it. you might need to adjust padding and margin to make it look exactly the same), but with much less code and inline styling that you can move to classes in css making code much smaller and easier to adjust for different color schemes:

<div style="width: 80%; margin: 2px auto; border: solid 1px #738FBF; padding: 5px 2px; text-align: left; background-color: #E1E4F2;">
	<span style="padding: 3px 3px 0 3px; background-color: #738FBF; font-weight: bold; font-size: 10px; color: #000;">
            <if condition="$show['username']">
                <phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
		<if condition="$postid">
                  <a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/viewpost.gif" border="0" alt="$vbphrase[view_post]" /></a>
                </if>
            <else />
              Quoted Text
            </if>
	</span>
	<div style="margin: 5px 2px; font-size: 11px;">$message</div>
</div>

[PntSingularity]

Originally Posted by CyberAlien

That looks nice, but there are way too many tables. Why use extra table for border when you can set border to <td> or <table>?

This is the same code (approximately, I didn't test it. you might need to adjust padding and margin to make it look exactly the same), but with much less code and inline styling that you can move to classes in css making code much smaller and easier to adjust for different color schemes:

That was less code indeed. I might try it out. Thing is, I'm not that good at coding. This new "div" thing that I see more and more widely used instead of tables is somewhat confusing.
However, I looked all over the net for the code for a nice box. I could find code for any box at all, and therefore decided to make my own.