Kuribo64
Views: 19,819,835 Home | Forums | Uploader | Wiki | Object databases | IRC
Rules/FAQ | Memberlist | Calendar | Stats | Online users | Last posts | Search
03-19-24 02:45 AM
Guest:

0 users reading How to make a post layout! | 2 bots

Main - Site help, bug reports, suggestions - How to make a post layout! Hide post layouts | New reply

Pages: 1 2 3 4 5 6 7 8
kaj
Posted on 03-13-15 05:03 AM (rev. 12 of 03-15-18 08:46 AM) Link | #57529

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:

[thumbnail]

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

[thumbnail]

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

[thumbnail]

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:

[thumbnail]

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:

[thumbnail]

...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.

[thumbnail]

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
Posted on 03-13-15 08:00 AM (rev. 2 of 06-01-17 09:31 AM) Link | #57536
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.

• 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. not valid anymore but spoilers don't compress content

____________________
NSMBHD - Kafuka - Jul
melonDS the most fruity DS emulator there is

zafkflzdasd

Lunarius
Posted on 03-13-15 02:32 PM Link | #57557
Oh, you use divs instead of style. Figures. Thanks! :)




<Silvreus>I am a random person…
<Silvreus>With a random personality…
<Silvreus>With a random life…
<Silvreus>How fun. :P



Arisotura
Posted on 03-13-15 02:35 PM Link | #57559
Actually, I use both. It isn't a "A or B" thing.

____________________
NSMBHD - Kafuka - Jul
melonDS the most fruity DS emulator there is

zafkflzdasd

Lunarius
Posted on 03-13-15 03:00 PM Link | #57561
I know I'm doing something wrong. My post layout just shows up where my post is. My other effects I added don't show up as well.




<Silvreus>I am a random person…
<Silvreus>With a random personality…
<Silvreus>With a random life…
<Silvreus>How fun. :P



Arisotura
Posted on 03-13-15 03:19 PM Link | #57564
min-height: 18em;

You might need a bit more depending on your avatar.

____________________
NSMBHD - Kafuka - Jul
melonDS the most fruity DS emulator there is

zafkflzdasd

kaj
Posted on 03-13-15 10:29 PM Link | #57594
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
Posted on 03-13-15 11:12 PM Link | #57599
And as I said, tweak the number to whatever looks right with your layout ;)

____________________
NSMBHD - Kafuka - Jul
melonDS the most fruity DS emulator there is

zafkflzdasd

kaj
Posted on 03-14-15 01:04 PM Link | #57630
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
Posted on 03-14-15 01:33 PM Link | #57633
Uh, did I fix my layout?




<Silvreus>I am a random person…
<Silvreus>With a random personality…
<Silvreus>With a random life…
<Silvreus>How fun. :P



kaj
Posted on 03-14-15 01:34 PM Link | #57634
You did. :P

Arisotura
Posted on 03-14-15 02:27 PM (rev. 2 of 03-14-15 02:28 PM) Link | #57641
Posted by Tierage
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.

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 :P

____________________
NSMBHD - Kafuka - Jul
melonDS the most fruity DS emulator there is

zafkflzdasd

kaj
Posted on 03-14-15 02:28 PM Link | #57642
I made some layouts for some other people also, so they might need to fix it too. :P

salty
Posted on 03-15-15 02:07 AM Link | #57687
I think I made a fairly simple layout. Anyone know what I can improve?

____________________
discord: salty#1212
twitter
photobucke­t ;)

kaj
Posted on 03-15-15 02:11 AM (rev. 2 of 03-15-15 02:12 AM) Link | #57692
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.

salty
Posted on 03-15-15 02:25 AM Link | #57707
Do you think you could help me with this?

____________________
discord: salty#1212
twitter
photobucke­t ;)

kaj
Posted on 03-15-15 02:28 AM Link | #57712
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.

marikdff
Posted on 03-15-15 02:30 AM Link | #57713
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!



Kirbeh
Killager
Red Luigi
...and that's about it

MercuryPenny
Posted on 03-15-15 02:36 AM Link | #57718
If you could, please add a post separator, or make a signature box.

marikdff
Posted on 03-15-15 02:36 AM (rev. 2 of 03-15-15 02:37 AM) Link | #57720
Trying to, but I'm failing D:
Awesome post layout with the help of Tierage's awesome tutorial!



Kirbeh
Killager
Red Luigi
...and that's about it
Pages: 1 2 3 4 5 6 7 8

Main - Site help, bug reports, suggestions - How to make a post layout! Hide post layouts | New reply

Page rendered in 0.072 seconds. (2048KB of memory used)
MySQL - queries: 30, rows: 237/237, time: 0.015 seconds.
[powered by Acmlm] Acmlmboard 2.064 (2018-07-20)
© 2005-2008 Acmlm, Xkeeper, blackhole89 et al.