Views: 23,103,605 |
Home
| Forums
| Uploader
| Wiki
| Object databases
| IRC
Rules/FAQ | Memberlist | Calendar | Stats | Online users | Last posts | Search |
12-05-24 06:31 AM |
Guest: |
0 users reading How to make a post layout! | 1 bot |
Main - Site help, bug reports, suggestions - How to make a post layout! | Hide post layouts | New reply |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 454/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
How to make a post layoutThis 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: <div style="background:#04002B url(http://kuribo64.net/get.php?id=rQdmSb4N0koZSi2z);padding:24px;"><div style="border:1px solid #1F6FA5;background:#080151;padding:10px;max-width:800px;">
</div></div>
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! |
Arisotura |
| ||
Star Mario in this room you have a pile of apple pies Level: 165 Posts: 3322/9047 EXP: 57969833 Next: 965848 Since: 07-03-12 From: in a box Last post: 38 days ago Last view: 1 day ago |
A few additions, too.
• 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. ____________________ NSMBHD - Kafuka - Jul melonDS the most fruity DS emulator there is zafkflzdasd |
Lunarius |
| ||
Member > Custom title goes here < Semi-Normal User Level: 40 Posts: 147/335 EXP: 407012 Next: 34297 Since: 11-11-12 From: The United States of America.『アメリカ合衆国。』 Last post: 2950 days ago Last view: 2823 days ago |
Arisotura |
| ||
Star Mario in this room you have a pile of apple pies Level: 165 Posts: 3325/9047 EXP: 57969833 Next: 965848 Since: 07-03-12 From: in a box Last post: 38 days ago Last view: 1 day ago |
Lunarius |
| ||
Member > Custom title goes here < Semi-Normal User Level: 40 Posts: 148/335 EXP: 407012 Next: 34297 Since: 11-11-12 From: The United States of America.『アメリカ合衆国。』 Last post: 2950 days ago Last view: 2823 days ago |
Arisotura |
| ||
Star Mario in this room you have a pile of apple pies Level: 165 Posts: 3327/9047 EXP: 57969833 Next: 965848 Since: 07-03-12 From: in a box Last post: 38 days ago Last view: 1 day ago |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 456/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
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. |
Arisotura |
| ||
Star Mario in this room you have a pile of apple pies Level: 165 Posts: 3333/9047 EXP: 57969833 Next: 965848 Since: 07-03-12 From: in a box Last post: 38 days ago Last view: 1 day ago |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 465/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
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:
<div class="tierage-post" style="padding-bottom: 0px;">
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. |
Lunarius |
| ||
Member > Custom title goes here < Semi-Normal User Level: 40 Posts: 149/335 EXP: 407012 Next: 34297 Since: 11-11-12 From: The United States of America.『アメリカ合衆国。』 Last post: 2950 days ago Last view: 2823 days ago |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 466/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
You did. |
Arisotura |
| ||
Star Mario in this room you have a pile of apple pies Level: 165 Posts: 3340/9047 EXP: 57969833 Next: 965848 Since: 07-03-12 From: in a box Last post: 38 days ago Last view: 1 day ago |
Posted by Tierage That's not the auto-br, it adds that linebreak even if you choose no signature separator apparently. That's dumb. Well there, it's fixed. You can remove your dirty hack ____________________ NSMBHD - Kafuka - Jul melonDS the most fruity DS emulator there is zafkflzdasd |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 468/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
I made some layouts for some other people also, so they might need to fix it too. |
salty |
| ||
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Level: 85 Posts: 174/2046 EXP: 5802613 Next: 95927 Since: 03-02-14 From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Last post: 50 days ago Last view: 10 days ago |
I think I made a fairly simple layout. Anyone know what I can improve? ____________________ discord: taikonotatsujin photobucke­t |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 471/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
Posted by saltypepper 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. |
salty |
| ||
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Level: 85 Posts: 175/2046 EXP: 5802613 Next: 95927 Since: 03-02-14 From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Last post: 50 days ago Last view: 10 days ago |
Do you think you could help me with this? ____________________ discord: taikonotatsujin photobucke­t |
kaj |
| ||
Lantern Ghost the gummiest worm of them all Level: 55 Posts: 476/754 EXP: 1279036 Next: 35153 Since: 06-24-14 From: treehouse Last post: 233 days ago Last view: 231 days ago |
Posted by saltypepper PM me the background image you want to use and I could try setting the layout up for you. |
marikdff |
| ||
Member Username created by: "Key"board Level: 24 Posts: 86/107 EXP: 68251 Next: 9874 Since: 07-08-14 Last post: 3478 days ago Last view: 3064 days ago |
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 |
MercuryPenny |
| ||
Normal user Level: 54 Posts: 251/712 EXP: 1178547 Next: 55323 Since: 05-24-14 From: :mroF Last post: 1359 days ago Last view: 1358 days ago |
marikdff |
| ||
Member Username created by: "Key"board Level: 24 Posts: 87/107 EXP: 68251 Next: 9874 Since: 07-08-14 Last post: 3478 days ago Last view: 3064 days ago |
Trying to, but I'm failing D: |
Main - Site help, bug reports, suggestions - How to make a post layout! | Hide post layouts | New reply |
Page rendered in 0.063 seconds. (2048KB of memory used) MySQL - queries: 28, rows: 235/235, time: 0.009 seconds. Acmlmboard 2.064 (2018-07-20) © 2005-2008 Acmlm, Xkeeper, blackhole89 et al. |