![]() | ||
Views: 13,070,071 |
Home
| Forums
| Uploader
| Wiki
| Object databases
| IRC
Rules/FAQ | Memberlist | Calendar | Stats | Online users | Last posts | Search |
01-25-21 09:15 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! | New reply |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 454/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 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! ...Yourself |
Arisotura |
| ||
![]() Star Mario in this room you have a pile of apple pies Level: 155 ![]() Posts: 3322/8849 EXP: 46560302 Next: 856918 Since: 07-02-12 From: in a box ![]() Last post: 6 days ago Last view: 16 hours 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: 37 ![]() Posts: 147/335 EXP: 335651 Next: 2602 Since: 11-11-12 From: The United States of America.『アメリカ合衆国。』 Last post: 1540 days ago Last view: 1413 days ago |
Arisotura |
| ||
![]() Star Mario in this room you have a pile of apple pies Level: 155 ![]() Posts: 3325/8849 EXP: 46560302 Next: 856918 Since: 07-02-12 From: in a box ![]() Last post: 6 days ago Last view: 16 hours ago |
Lunarius |
| ||
Member > Custom title goes here < Semi-Normal User Level: 37 ![]() Posts: 148/335 EXP: 335651 Next: 2602 Since: 11-11-12 From: The United States of America.『アメリカ合衆国。』 Last post: 1540 days ago Last view: 1413 days ago |
Arisotura |
| ||
![]() Star Mario in this room you have a pile of apple pies Level: 155 ![]() Posts: 3327/8849 EXP: 46560302 Next: 856918 Since: 07-02-12 From: in a box ![]() Last post: 6 days ago Last view: 16 hours ago |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 456/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 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. ...Yourself |
Arisotura |
| ||
![]() Star Mario in this room you have a pile of apple pies Level: 155 ![]() Posts: 3333/8849 EXP: 46560302 Next: 856918 Since: 07-02-12 From: in a box ![]() Last post: 6 days ago Last view: 16 hours ago |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 465/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 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. ...Yourself |
Lunarius |
| ||
Member > Custom title goes here < Semi-Normal User Level: 37 ![]() Posts: 149/335 EXP: 335651 Next: 2602 Since: 11-11-12 From: The United States of America.『アメリカ合衆国。』 Last post: 1540 days ago Last view: 1413 days ago |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 466/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 days ago |
Arisotura |
| ||
![]() Star Mario in this room you have a pile of apple pies Level: 155 ![]() Posts: 3340/8849 EXP: 46560302 Next: 856918 Since: 07-02-12 From: in a box ![]() Last post: 6 days ago Last view: 16 hours 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 |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 468/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 days ago |
salty |
| ||
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Level: 79 ![]() Posts: 174/2021 EXP: 4562311 Next: 17156 Since: 03-01-14 From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Last post: 27 days ago Last view: 3 days ago |
I think I made a fairly simple layout. Anyone know what I can improve? ____________________ still i remember that rainy september discord: salty#1212 photobucke­t ![]() |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 471/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 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. ...Yourself |
salty |
| ||
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Level: 79 ![]() Posts: 175/2021 EXP: 4562311 Next: 17156 Since: 03-01-14 From: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Last post: 27 days ago Last view: 3 days ago |
Do you think you could help me with this? ____________________ still i remember that rainy september discord: salty#1212 photobucke­t ![]() |
Tierage |
| ||
![]() Melon Bug Normal user Level: 51 Posts: 476/737 EXP: 981549 Next: 32389 Since: 06-24-14 From: united states of america Last post: 915 days ago Last view: 912 days ago |
Posted by saltypepper PM me the background image you want to use and I could try setting the layout up for you. ...Yourself |
marikdff |
| ||
Member Username created by: "Key"board Level: 22 ![]() Posts: 86/107 EXP: 54141 Next: 4209 Since: 07-08-14 Last post: 2068 days ago Last view: 1654 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: 50 ![]() Posts: 251/711 EXP: 936192 Next: 11125 Since: 05-23-14 From: Right behind you, breathing down your neck Last post: 1567 days ago Last view: 1567 days ago |
If you could, please add a post separator, or make a signature box. ![]() send me your terrible userbars and such to advertize in my footer ;^) ![]() youtube i never use CRAWLING IN MY CRAWL THESE CRAWLS THEY WILL NOT CRAWL |
marikdff |
| ||
Member Username created by: "Key"board Level: 22 ![]() Posts: 87/107 EXP: 54141 Next: 4209 Since: 07-08-14 Last post: 2068 days ago Last view: 1654 days ago |
Trying to, but I'm failing D: |
Main - Site help, bug reports, suggestions - How to make a post layout! | New reply |
Page rendered in 0.042 seconds. (2048KB of memory used) MySQL - queries: 28, rows: 236/236, time: 0.030 seconds. ![]() © 2005-2008 Acmlm, Xkeeper, blackhole89 et al. |