If you're wondering how to make a layout, this guide is for you.

The parts of the post
___________________________________________________________________________________________________________

First of all, you should know what are ".mainbarX" ".sidebarX" ".topbarX_1" ".topbarX_2" ".tableX" and what's X.

What's .mainbarX? It is this part of the post (where is written your post):
NOTE: This is only a sample post.



What are .topbarX_1 and _2? .topbarX_1 is the part of post where is written your username, .topbarX_2 is the part of post where is written the date of when you have posted it.



What is .sidebarX? It is the part of the post where is your avatar, and where is written your karma and your post number.



What's .tableX .tableX is all the post (for example if you put a BG code in .tableX, it will affects all the post).

What's X? X is your profile ID, for example mine is 1556.


Where I have to insert my code?
___________________________________________________________________________________________________________

Go in your profile, then click on Edit my profile, click on Post layout, and write your code in Header.


Basics
___________________________________________________________________________________________________________

Everything concerns with the code must be stored between


(Don't put *Insert code here* in header!)

For example if you want a color BG (background) only in your .mainbar, the code should be like this:



This simple code make your .mainbar black.
You (if you are new to CSS), are wondering how you can change the color of the .mainbar, you just have to change this part:



You can find the right color with this.
Instead if you want an image as BG, you can use this:



For have a fixed repeat, just add



next to the round brackets.

Here's a few examples for change some things:

Font

URL Link

Spoiler Button

Font Color

Spoiler Content

Quote Content

Codeblock Content


Example Code
___________________________________________________________________________________________________________

Here's an example:


Remember to replace the X with your user ID.


"FAQ"
___________________________________________________________________________________________________________


Q: Some things I've changed work, but other things I've changed don't work... What can I do?
A: Try to add an "!important". If it still doesn't work, you have done something wrong.

Q: How can I get my user ID?
A: Go in your profile page, then view the URL bar, there should be written something like that: "http://nsmbhd.net/profile/1556-sherry/". The numbers before the username are your user ID (in this case my ID is 1556).

Q: Where can I upload my BG image?
A: You can upload it on Imgur, or just on NSMBHD.net.

Q: With CSS can I customize everything? For example my username on .table_1?
A: Yes, for example, you can modify the username font, but you can't change your username color! (actually you can, but it's not allowed, so...)

Q: What's an HEX COLOR?
A: This.


Other
___________________________________________________________________________________________________________


If you have some questions, don't hesitate to post it here!
And before make your layout, please read these guidelines.

Enjoy your new layout!

(post layout disabled for readability)

This works if element_2 is the immediate child of element_1.


This works if element_B is a child of element_A. Any child. If you put only a space, it affects any 'element_B' element inside element_A, and not only the immediate child, unlike when you use >.

Note:


This here will work like the first example, and not the second one. As long as there is the >.


Just can do. Not that it matters much, I'm just saying.

______


Also, Sherry_, I have a question. Why did you do this?:

You made this tutorial, so I assume you know very well this code applies to everyone.

I do not have authority nor anything, I'm just asking why you did this. Common sense tells it break the website rules.