Mario Making Mods

IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		A guide on how to make a post layout!

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.)
Posted on 05-19-17, 05:27 pm (rev. 3 by NightYoshi370 on 06-29-17, 02:58 pm)
theninja1000User is Offline
Check bio for ban reason
  • Banned
Since: 06-06-17
From: UK
 		You should show others how to make a div post layout for if they're on a AcmlmBoard 2.064 board like K64. Or how to do the style and div like in my post layout.
Posted on 06-08-17, 06:41 pm
NightYoshi370User is Offline
  • Owner
Since: 05-17-17
From: Mushroom Kingdom
theninja1000 No. This is supposed to be on how to make a post layout for our forum.
Old 3DS XL info:
I used to have a 3DSafe A9LH V11.3.0-36U with Luma in my CTRNAND. Since ReiNAND Reibooted and Re-Reileased, I "switch"ed back.
Right now, I have boot9strap with Luma 8.0 as my CFW. Though, I'd like to see other CFW's for B9S.
Posted on 06-08-17, 09:02 pm
theninja1000User is Offline
Check bio for ban reason
  • Banned
Since: 06-06-17
From: UK
 		I was saying it like if users wanted to do it a different way, not towards those boards.
Posted on 06-08-17, 09:19 pm
NightYoshi370User is Offline
  • Owner
Since: 05-17-17
From: Mushroom Kingdom
Oh. Well um, IDK how to do it. Maybe you can, if you want to.
Old 3DS XL info:
I used to have a 3DSafe A9LH V11.3.0-36U with Luma in my CTRNAND. Since ReiNAND Reibooted and Re-Reileased, I "switch"ed back.
Right now, I have boot9strap with Luma 8.0 as my CFW. Though, I'd like to see other CFW's for B9S.
Posted on 06-08-17, 09:26 pm
theninja1000User is Offline
Check bio for ban reason
  • Banned
Since: 06-06-17
From: UK
 		Look at my post layout for an example. I know that Tierage did a tutorial on it at K64.

Example (This is just the div, not all of my post layout)
<div style="background:#601106 url(http://s01.shiftdelete.net/img/general_b/16-08/04/super-smash-brother-u-mario-wallpaper-hd.jpg) center top !important;padding:24px;color:#ffffff;min-height:350px;background-size:100% 100%;">
<div style="border: 1px solid #9e2422;outline: 1px solid #9e2422;outline-offset:-3px;padding:10px;max-width:800px;border-radius: 2px;background: rgba(215, 44, 44, 1););">
Posted on 06-08-17, 09:28 pm
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		You should use a HTTPS-based image host so as to not break HTTPS mode on this website and expose security risks somewhat. Even just element that is loaded from an insecure source will break it.

Not sure why you'd mix style element styling with div styling, however.
Posted on 06-15-17, 06:05 pm
FROGUser is Offline
That one Bird Thing
  • Normal user
Since: 05-21-17
From: The city of OOF vile
You should use a HTTPS-based image host so as to not break HTTPS mode on this website and expose security risks somewhat. Even just element that is loaded from an insecure source will break it.

Not sure why you'd mix style element styling with div styling, however.
Posted by Vanilla Lumina

I didnt even know this place had https, ive been using plain old http because it still works
Error 702: You provided Type C Meme gas when the Meme Machine™ required Type B Meme water
Posted on 06-15-17, 06:36 pm
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		Yeah it does, just somebody didn't decided to force HTTPS links by default, which can be done via htaccess somehow.
Posted on 06-16-17, 08:00 am
NightYoshi370User is Offline
  • Owner
Since: 05-17-17
From: Mushroom Kingdom
Yeah, I didn't do it because not every browser has https support.
Old 3DS XL info:
I used to have a 3DSafe A9LH V11.3.0-36U with Luma in my CTRNAND. Since ReiNAND Reibooted and Re-Reileased, I "switch"ed back.
Right now, I have boot9strap with Luma 8.0 as my CFW. Though, I'd like to see other CFW's for B9S.
Posted on 06-25-17, 01:30 pm
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
Yeah, I didn't do it because not every browser has https support.
Posted by NightYoshi370
Are you trying to cater to IE6 or something? :/
All browsers support HTTPS except old as crap browsers that are mostly used by computer illiterates and spambots.
Posted on 06-25-17, 03:09 pm (rev. 1 by IceFairyAmy on 06-25-17, 03:10 pm)
FROGUser is Offline
That one Bird Thing
  • Normal user
Since: 05-21-17
From: The city of OOF vile
Yeah, I didn't do it because not every browser has https support.
Posted by NightYoshi370
Are you trying to cater to IE6 or something? :/
All browsers support HTTPS except old as crap browsers that are mostly used by computer illiterates and spambots.
Posted by Vanilla Lumina

well, some people might have connection issues with https or are on an older system with old web browsers, windows 3.1 or 95 for example, lol
Error 702: You provided Type C Meme gas when the Meme Machine™ required Type B Meme water
Posted on 06-25-17, 03:18 pm
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		No one is going to be using those normally. And anything from around 2008 should work with it, heck even IE7 or FF2 would work.
Posted on 06-25-17, 04:17 pm (rev. 2 by IceFairyAmy on 06-25-17, 04:17 pm)
Star WolfUser is Offline
  • Normal user
Since: 05-21-17
From: Same as above. ^
Thanks for the tutorial! It helped me make a much better layout!
Nella carne io sono uno, ma nello spirito, che sono e per sempre saranno sette.
Posted on 06-26-17, 10:04 pm
MasterVermilli0nUser is Offline
Dat weeb NSMBU hacker though :3
  • Normal user
Since: 05-18-17
From: Not under a rock! :3
.codeblock - Controls code BBCode tag blocks.
Posted by Vanilla Lumina
It's dev.codeblock, Shironeko.
Stella is best waifu. :3
Posted on 06-27-17, 07:31 am (rev. 1 by MasterVermilli0n on 06-27-17, 07:41 am)
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		div.codeblock just selects the divs in .mainbarX called "codeblock", there is no need to do div.codeblock because there aren't any other elements using class codeblock.
Posted on 06-28-17, 11:19 am
MasterVermilli0nUser is Offline
Dat weeb NSMBU hacker though :3
  • Normal user
Since: 05-18-17
From: Not under a rock! :3
codeblock doesn't even work, Shironeko.
If it did, I wouldn't have bothered telling you.
Stella is best waifu. :3
Posted on 06-28-17, 11:23 am
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		I thought it was .codeblock. I'll give it a try, though.
Posted on 06-28-17, 03:47 pm
MasterVermilli0nUser is Offline
Dat weeb NSMBU hacker though :3
  • Normal user
Since: 05-18-17
From: Not under a rock! :3
I tried it, didn't work, took me ages to realize that it should be div.codeblock.
Freaking great.
Stella is best waifu. :3
Posted on 06-29-17, 11:29 am
IceFairyAmyUser is Offline
Banned permanently: Jamie Rereg
  • Banned
Since: 05-19-17
From: England
 		Someone fix it then. It's awkward as fuck to edit posts on mobile.
Posted on 06-29-17, 02:51 pm
Member List Online Users Records Calendar Privacy policy