THIS IS NOT A GUIDE EXPLAINING HOW TO MAKE LAYOUTS, THIS IS A THREAD GIVING HELPFUL TIPS. THIS THREAD ASSUMES YOU HAVE A CODE/KNOW HOW TO CODE. If you're looking to create your own, but don't know how, refer to soxfan's thread here.

Making something clear - I know there is a thread similar to this one, I just wanted to go into more detail. It is also in another forum, and I feel like this forum needs one as well.

Layout making can be tough- and pretty fun too! But the fun is ruined when you need to make like 30 corrections, right?

Read this thread and you'll take none of that, you'll have girls and boys lining up to praise your layout! (not guaranteed with this product)

POSTING LAYOUTS

---CODING---

•Don't use so many tags - the shorter your code is, the easier it is to edit when you want to change it. Looks nice to whoever you may give it to, too! Example, combine all your font editing code using this quick guide I made.

This is edited text using the font "serif" at 14 pt, with the color red.

How did I edit it?

•Make sure your tags are closed - The layout maker doesn't always catch open tags, and even one left unfixed can mess up the entire thread page. Not hard to check it over if you simplify your code as stated above, right?

•DON'T MAKE REALLY LONG SIGNATURES OR HEADERS - Please. This is very annoying. VERY ANNOYING.

---FONT COLOR---
If you're going to read any of this thread, PLEASE PLEASE read this part.

•Obviously, don't use a font color that is the exact same as the background - or if it has a very low readability rate. But if you're dying to look fashionable, use a font color that contrasts with the background enough for it to be readable, but also matches a small aspect of the layout - such as a small portion of the image, or border.

That explanation might confuse you, so here's an example (kudos to Gingercream1 for the image!)

Take this image. It has a light peach background, so that's obviously not what you're going to use as a font color. However, look at the character's hair and pants - orange, right? A dark enough shade of orange would look good, because not only is it readable but also matches part of the image.

•Regarding the font family, use a very common font that nearly everyone's computer has - here's a website showing a big list of fonts that you can definitely use. DON'T USE EITHER OF THE WINGDINGS THEY DON'T WORK

---TEXT BOX---
Placement, color, and opacity tips.

•Try to put your text box in the most bland part of the background, color-wise - it'll just be easiest to read it there. Think about it, if you have 5 colors in the background, one of them is more than likely going to mess with your font color.

•Your text box color should not be identical to the background color, either - if you want to make it similar, have a very high opacity and a font color that contrasts greatly. Low chance of having a readable font otherwise. I don't recommend coloring the text box at all, but that's your call.

•Opacity is very important - opacity can make the difference between a readable font and one that's nearly invisible. I would say go one point above the least readable level (if you can read it at 0.5, put it at 0.6).

•Remember that image borders don't appear the same on different browsers -

---BORDERS---
Not a big issue, but for my negative margin layouts, I would like to mention one thing.

•When extending your margins above the post area, please make sure the words and links at the top of your post are still visible - same goes for the left side of the posting area. Make sure your stats are readable, and all that jazz.

---General Tips that don't deserve their own section---

•When using a gif file as the background, please make sure it isn't very distracting. Something like Nyan Cat is acceptable, but the whole background flashing isn't as fun.

•For boxed layouts, don't make the resolution past 800x600; some monitors are too small to view such big images/layouts.

•Trying to get an image under 200kb? Try using this program to edit the image. Save it as a .jpg file, and lower the quality until you see its under 200kb (the quality won't have any visible differences until you get to maybe 30%, and that shouldn't have to happen).

Profile Layouts
This thread is mostly stressed on posting layouts, but I should mention a few things about profile layouts as well.

•DO NOT USE AUTO-PLAY - VERY annoying. Maybe not to you, but it is to other people who already have music going, or just have their volume all the way up and are in for a surprise. Keep the music player visible as well, too.

•Everything should be readable - just like posting layouts. Refer to the tips above.

•It isn't recommended to use such an exciting image - Kinda distracts from the actual profile, no? This is just personal taste, though. It's your call.

That raps up all the tips I can give you. Thank you to EideticMemory for giving me a few extra tips. Anything you want to suggest? Post below!

Best of luck with your layout making!

User-submitted Tips (Summon me to your reply if you want your tips added)

• Keep the layout width 100%, anymore than that and people stretch the page...

• Take it easy on the text effects, people feel like they have to add the flame to their texts and if they really can't go without it just make it readable

-Blubcreator

• Just because your layout looks amazing on one browser, doesn't mean it will look good on others (Galacta's added note - experiment with different browsers, or ask your friends who use different browsers to look over your layout)

-thephantombrain

• When putting music in post layouts, It would be useful to add a second source that isn't an mp3 file. Adding a .wav file to the audio box will make the music work in all 5 major browsers, Instead of just 4 of them.

-yoshirulez!

• Use Percentile instead of px because some pending on your screen resolution, people will have the web browser zoomed in more or less and percentile keeps it in perspective.

-bombchu link

This is a great guide to making a post layout! I don't need to make one, since I already have one, but it's great for the people who don't have one yet. Thanks for telling people about this stuff, I can't describe with words how annoying it is when I can't read people's posts because of a bad layout. Also, I agree even more on that autoplaying music issue. Media that autoplays has always annoyed me, personally.

I really wish people will read this more because it's pretty much perfect. A lot of layouts I see are incredibly annoying lately.

Maybe if you feel it's a good idea you could add these tips:

- Keep the layout width 100%, anymore than that and people stretch the page...

- Take it easy on the text effects, people feel like they have to add the flame to their texts and if they really can't go without it just make it readable

Thank you for the link to the font list - It is a nice reference. That thing that Blubcreator said about width is one of the most important things to remember.

Something people might want to think about -
*Just because your layout looks spectacular in one browser, doesn't mean that it's not hideous and annoying in another.

I've learned this lesson the hard way. Each browser has it's own little quirks. There are even differences between the way Internet Explorer 9 and Internet Explorer 10 interpret code, etc.

I edited in Blubcreator's and thephantombrain's tips, and I will do that to anybody else who submits any tips. I will state this in the OP, but please summon me if you want your tip added to the thread.

Galacta : Thanks this is very helpful. great idea also. I find it very hard to make layouts.

This is actually going to be really helpful, because I have I always tried to make my own layout, but every time I tried, I ended up failing dramatically. 

ON the profile music, make sure that your music has no pitches that may be harmful to any person who may have hearing difficulties. Look your music in the mid octaves, and don't go too high or too low. Also, all vizzed rules apply for your music NO SWEARING.

Something I've been thinking about...



When putting music in post layouts, It would be useful to add a second source that isn't an mp3 file. Adding a .wav file to the audio box will make the music work in all 5 major browsers, Instead of just 4 of them.



Galacta : Whoo summons yay

EDIT:You could also instead add a .ogg file instead of .wav, but I prefer to use .wav

Excuse my question but is there any specific coding language that layout creating is connected to?

Collapz3 : It's based on HTML and CSS, I believe. 

You can use both once you're able to use code to create layouts (that particular feature is currently restricted to Trusted+).

I have no idea where I need to post it, but I have a problem with this layout..
http://s12.postimg.org/knfu0ba8d/jhyhgjyg.jpg
This is basicaly the problem, I can not find out how to make it scrollable and not strech the page, and yeah..
Heres the current codes for this layout I'm using now:

http://s30.postimg.org/ofk9txeqp/Coding.jpg
Can someone help me please? This here isn't stretched because it's not as large as the whole layout together..
*edit*
I fixed my problem, I mispelled height:200px... It said heigh200px. So yeah, layout is fixed.

Use Percentile instead of px because some pending on your screen resolution, people will have the web browser zoomed in more or less and percentile keeps it in perspective. (unless it's for text padding or something small like that, then use pixels) 

Okay cool I made a layout, Now where to I upload it to? do I have to be a trusted member? D:

catbert225 : What do you mean, upload it to? You have to be a trusted member to use the advanced layout maker (which is your own code), yes, but I think you can still use the basic one. I've never used the basic layout editor as rarely anything good comes out of it, so I don't know who can and can't use it.

Also, I updated the thread to have BL's suggestion but since his post is so old I'm not going to bother summoning him.

thanks this is useful (-: