ok, I have the content boxes about how I want them, but it screws up the rest of my site. How do I put a background color and the like in?
This is what I have as of right now.

This is in my custom stylesheet:
.ctopleft { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -5px top no-repeat; height:53px; width:47px; }
.ctoptile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left top repeat-x; height:53px; }
.ctopright { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -52px top no-repeat; height:53px; width:47px; }
.clefttile { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) left top repeat-y; width:5px; }
.crighttile { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) right top repeat-y; width:5px; }
.cbottomleft { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -5px -53px no-repeat; height:15px; width:15px; }
.cbottomtile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left -53px repeat-x; height:15px; }
.cbottomright { background: url(http://farm4.static.flickr.com/3068/2965798622_7e5f274670_o.jpg) -20px -53px no-repeat; height:15px; width:15px; }
.ltopleft, .rtopleft { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -2px top no-repeat; height:55px; width:16px; }
.ltoptile, .rtoptile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left -68px repeat-x; height:55px; }
.ltopright, .rtopright { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -18px top no-repeat; height:55px; width:16px; }
.llefttile, .rlefttile { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) left top repeat-y; width:2px; }
.lrighttile, .rrighttile { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) right top repeat-y; width:2px; }
.lbottomleft, .rbottomleft { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -2px -55px no-repeat; height:21px; width:16px; }
.lbottomtile, .rbottomtile { background: url(http://farm4.static.flickr.com/3170/2997029286_d67b11fb82_o.gif) left -123px repeat-x; height:21px; }
.lbottomright, .rbottomright { background: url(http://farm4.static.flickr.com/3064/2932151079_b83b38074d_o.gif) -18px -55px no-repeat; height:21px; width:16px; }
table.TabBar {
 background: #000000;
 border: 0px;
 margin: 0px;
 padding: 0px;
 width:100px;
 margin-left:auto;
 margin-right:auto;
}

.SelectedTab a {
 color: #ffffff !important;
}

.UnSelectedTabMo a {
 color: #ffcc00 !important;
}

.SelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left top no-repeat;
 font-weight: bold;
 text-align: center;
 height: 42px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

.UnSelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left -42px no-repeat;
 font-weight: bold;
 text-align: center;
 width: 125px;
 height: 42px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

.UnSelectedTabMo {
 color: #eeeeee;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left bottom no-repeat;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 width: 125px;
 height: 42px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

/* html>body added for non-IE styling */

html>body .SelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left top no-repeat;
 font-weight: bold;
 text-align: center;
 height: 28px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

html>body .UnSelectedTab {
 color: #ffffff;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left -42px no-repeat;
 font-weight: bold;
 text-align: center;
 height: 28px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}

html>body .UnSelectedTabMo {
 color: #eeeeee;
 background: url(http://i259.photobucket.com/albums/hh311/hotwow/themes/styles/wowbutton2.gif) left bottom no-repeat;
 font-weight: bold;
 text-decoration: none;
 text-align: center;
 height: 28px;
 width: 125px;
 padding: 14px 0px 0px 0px;
 border: 0px;
}





And this is what is in all of my content boxes:
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="ltopleft"></td>
  <td class="ltoptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="ltopright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="llefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="lrighttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lbottomleft"></td>
  <td class="lbottomtile">&nbsp;</td>
  <td class="lbottomright"></td>
</tr>
</table>
</td></tr></table>
<br>





I know I am missing the code for page background and content box background. How do I insert that into what I already have?

Mottie, oh guru.  First, thank you so much for all the work you've put into this community.  I've been searching for all of a couple days through these forums in an attempt to re-vamp our site.  This information has been a godsend.

Now, though, I have a question.

When it comes to creativity with computer graphics, my well is about as barren as a desert with no oasis.  That being the case, I shamelessly am stealing some of your borders while I am fiddling on my test site.  (Eventually I hope to make my own for our true site, but bébé steps.

I have finally gotten the CSS portion right (from copying your source), but my table, I believe, is where I am off.  Although it seems so simple, perhaps it really is the CSS.

First, on Manifest Ascension's test site you've managed to move the title box down a level and keep it to the left.  Mine is still to the right of the topleft border piece.

Also, my repeating seems to not be working.

My test site (actually our unused horde sister guild's) is here.  I am only fiddling with the left column for now.

The table code is:
<table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="topleft"></td>
  <td class="toptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="topright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttop"></td>
  <td rowspan=2 class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="righttop"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttile"></td>
  <td class="righttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="bottomleft"></td>
  <td class="bottomtile">&nbsp;</td>
  <td class="bottomright"></td>
</tr>
</table>
</td></tr></table>
<br>

I know you can view source, but here is the ContextBox Code portion of the CSS:

/*ContentBox Code*/
.ContentBox {background-color: #330000;border: solid 1px #330000;}
.ContentBoxTitle {padding: 0px;background-color: #330000;color: #ffff66;}
.ContentBoxBody {background-color: #330000;color: #CCCCCC;padding: 0px;}
.ContentTable { background-color: #330000;color: #CCCCCC;font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 10pt;} table { color: #CCCCCC;font-family: Verdana, Tahoma,Segoe,sans-serif;font-size: 10pt; }
.StateBar {background-color: #330000;color: #CCCCCC;text-align: center;padding: 0px;}
.topleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/TopLeft.png) no-repeat; height:23px; width:125px; }
.toptile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/TopTile.png) repeat-x; height:23px; }
.topright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/TopRight.png) no-repeat; height:23px; width:19px; }
.lefttop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/LeftTop.png) no-repeat; width:13px; height:58px; }
.lefttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/LeftTile.png) repeat-y; width:13px; }
.leftbot { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/LeftTile.png) repeat-y; width:13px; height:58px; }
.righttop { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/RightTile.png) repeat-y; width:19px; height:58px; }
.righttile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/RightTile.png) repeat-y; width:19px; }
.rightbot { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/RightTile.png) repeat-y; width:19px; height:58px; }
.bottomleft { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BottomLeft.png) no-repeat; height:50px; width:13px; }
.bottomtile { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BottomTile.png) repeat-x; height:50px; }
.bottomright { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/guildsite/styles/BottomRight.png) no-repeat; height:50px; width:125px; }

Mottie, you are wonderful.

I am sad to say that I didn't understand a couple of the CSS lines.  I kept right on fiddling after I made my post and got the title down on the next line (yeah, it was obvious once I actually studied the table) and managed to make a few other things cleaner, but still didn't get it "just so".

Your edits, of course, fixed everything.

If I plan on using Content Box IDs?  I'm so sorry to ask this, but under what circumstances would I want to do this?  If I want different styles of content boxes within the same site or theme?

While it isn't on my immediate agenda, that is something I've thought about as an eventuality.  (I'm currently working on the pre-reqs for implementing your theme selector.)  Thank you so much for thinking ahead and suggesting that.

EDIT:  Taking more time to thoroughly read the linked page, I figured it out.  Thanks again for all your help, Mottie!

~Ayiana

There is one issue I am having with the provided code.  And it actually affects both the left top and right bottom.  When the box scales along the vertical access, the image in those two areas loses contact with its partner image in the topleft and bottom right respectively.

How can I tell the left top image to stay flush against the top of the box and the right bottom to align itself against the bottom edge?

Thanks!
~Ayiana

Hi Mottie,

Im ineterested in using custom CSS however when I follow your instructions here to enable it......

"1. View Source of your page.
2. Copy everything between <style type="text/css"> and </style> thats within the top 10 lines of the source.
3. Paste this into your Custom CSS, then add your new CSS at the end.
4. Enable the Custom CSS."

I get this error message...... 

"The provided custom CSS contained invalid characters, such as HTML mark-up, that are not valid for a Cascading Style Sheet.  Please modify your code, removing any mark-up, before submitting. "

What do I need to do to make this work?

Thanks