How to make a post layout

---

This is a tutorial on how to make a post layout, whether you're new to post layouts or if you don't know how to make a layout for this Acmlmboard variation. Prior knowledge in HTML and CSS is very helpful, but not required.

The general way to make a post layout is to put a div into your post header and footer, giving it a border, background, and a margin, leading to something that looks like this:



...and this being the code used for it:



You can also add a width if you want to make your post div box smaller:



You can stop here and make your post layout be that simple (with possible a signature as well) unless you want to make your post have a background image, such as Arisotura's layout.

Basically, you're going to want to create another div to go around the previously demonstrated div that was made earlier. Example of the code:



Now that the new div is made, you can add a background color or image (keep in mind StapleButter's posts about fixed backgrounds) to the div. It should end up looking something like this:



...and the code. Notice how I removed the margin of the inner div and made it padding of the outer div so it doesn't cut the background off weirdly.



And that's it! That's how you make a post layout. If you want to use the post layout I made to build off of to make yours, here's the code:

Tips

---

• Try being creative with your layout! Make it a bit more than just a basic div.

• Use different fonts and colors! Don't make it unreadable, of course.

• Put the CSS code in <style></style> tags! Makes it more organized and prettier, too.

• When you use style tags, make sure that the divs in your layout have a unique class name. If the class name is 'layout', 'box', or something else along those lines, it might affect another layout. Make it have something like your username in it, such as 'tierage-layout'.

• When you make a post layout, the board automatically removes padding from the post box, so your post layout fills it entirely. Make sure the text isn't cramped against the borders.

• You can use min-height to ensure your background fills the whole post area even with short posts. This is highly recommended if you have an avatar or a title.

• Try to not use spoilers in your signature. You are limited to 7 spoilers per post, and using spoilers in your signature reduces how many you can use in your posts.

• Host your images (backgrounds and stuff) on Kuribo64's Uploader rather than on your own host. Second option would probably be Imgur.

• Post layouts you make with this format should work on any other Acmlmboard but you may need to delete some line breaks and remove some padding in case there's an issue with automated line breaks on the board.

• If you're going to put the Acmlmboard layout on an ABXD-based board, you will need to add a .mainbar(USER ID GOES HERE) { padding:0; } styling in order to reset the padding.

Have fun!

---

...Yourself

Added those other tips.

Lunarius, I think you should put the min-height on the background outer div rather than the inner post contents div. Gives more background and less empty space on short posts.

---

...Yourself

Since the auto-<br> adds an extra line break at the end of a post (the start of the footer), I figured out a little CSS hack on how to make it not seem to be there:


In my post layout, .tierage-post has 15px padding though I set the bottom padding to 0 to appear as if there isn't an extra line. Just another tip I felt like sharing.

---

...Yourself

You did.

---

...Yourself

I made some layouts for some other people also, so they might need to fix it too.

---

...Yourself

Posted by saltypepper

I think I made a fairly simple layout. Anyone know what I can improve?

Maybe add a background and some padding while you're at it. It seems a little bit simple... though it doesn't look bad.

EDIT: I just noticed the background. You should add min-height to it so it doesn't cut off on shorter posts.

---

...Yourself

Posted by saltypepper

Do you think you could help me with this?

PM me the background image you want to use and I could try setting the layout up for you.

---

...Yourself

Well here's one simple layout.

Just one question:

How do you change the width of the borders? My white is too thick.

Oh and also my sample post looks kinda strange

Awesome post layout with the help of Tierage's awesome tutorial!

Trying to, but I'm failing D:

Awesome post layout with the help of Tierage's awesome tutorial!