How to make your own post layouts

First off, you need some basic HTML and CSS knowledge, to make a decent enough layout so that it is readable. :)

You need to put in the post header:

<style>
~~layout code go here~~
</style>

Next, we need to add the correct classes. The tilde will be used in place of your user , please make sure you get this correct for each class or it will screw up other people's layouts when they post in the same thread and page.

.mainbar~ - Controls the background and general elements of the post.
.sidebar~ - Controls the sidebar of your posts.
.topbar~_1 - Controls the left side where your username is displayed on the top bar.
.topbar~_2 - Controls the right side where the 'Link' 'Quote' and post date etc. are listed on the top bar.

Additions to .mainbar~, these can be placed by writing '.mainbar~ .newclass' in your post layout.

.quoteheader - Controls the 'Posted by' on the quote header.
.quotecontent - Controls the actual quote's contents.
div.codeblock - Controls code BBCode tag blocks.
.spoilerbutton - Controls the spoiler tag button.
.spoiled - Controls the content inside a spoiler.

Another thing you can do is add a Post Box with a DIV, you can do this by making a class of whatever name you want, setting a custom margin and padding, and then setting up the rest of it yourself. Remember to add after the style tag your div class, and close it in the footer.

Here's an example code to help you out, it is the same as the code on my layout.
Header:

<style>
.mainbar1 {
background:url(http://i.pi.gy/WRmP.jpg) center top !important;
background-width:100% !important;
color:white;
font-family:Tahoma,sans-serif;
border: 3px solid #066;
text-shadow: -1px -1px black, 0px -1px black, 1px -1px black, 1px 0px black, 1px 1px black, 0px 1px black, -1px 1px black, -1px 0px black;
}

.sidebar1 {
background:url(/themes/bstruct/back.png) repeat !important;
color:white;
font-family:Tahoama,sans-serif;
border: 3px solid #066;
text-align:center;
}

.topbar1_1, .topbar1_2 {
background: #066 url(/themes/glossy/generic_gloss.svg) repeat !important;
background-size:100% 100%;
color:white;
font-family:Tahoma,sans-serif;
}

.topbar1_1 {
text-align:center;
}

.mainbar1 div.codeblock {
background:rgba(0,0,0,0.2);
color:white;
}

.postbox1 {
margin:20px;
border:3px solid #066;
background:rgba(0,102,102,0.65);
}
</style>
<div class="postbox1">

Footer:

</div><div class="postbox1">[user 1]</div>

Make sure to disable signature separator and then set 'Apply layout to entire post box'.

Tips:
* Make sure your layout is readable on all themes. This is usually done by manually forcing a colour.
* Don't use GIFs in your background.
* Keep signature at around 200px or smaller in height.
* Feel free to customise it to the max!
* Check your layout is fully compatible with Google Chrome and Mozilla Firefox, since these are the most-conforming to web standards.
* Don't use fixed backgrounds as they lag the page on some browsers such as Safari and look odd on mobile devices.

Hope this helps! :D
(Note that the reason I didn't use my ID here on the example is because I copied it from my own board.)