vb.org Archive - Custom Flat-Style Quote Box

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)

- - Custom Flat-Style Quote Box (https://vborg.vbsupport.ru/showthread.php?t=139511)

Custom Flat-Style Quote Box

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

Code:

<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.

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:

Code:

<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>

Quote:

Originally Posted by CyberAlien (Post 1183677)

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.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (3)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01784 seconds Memory Usage 1,727KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (3)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: