Table of Contents

1. Basics
2. Group or Profile Layout?
3. Font Styling
4. Background
5. Content Box

Basics

The Layout Generator is a simple Javascript form that outputs what you fill in, and leaves out anything you left empty. Layouts on TinierMe can only be made using inline HTML and CSS. You'll need prior knowledge of HTML, but to keep it short and simple, this is a quick run-down:

• HTML: A <div>, short for division, is a block element and is the most flexible, which is why it's used.
• CSS: A property declares what you want changed, but can't be alone. It needs a value to finish the job.
• CSS: A value is what determines what the property will display. It can have specific values, be numerical or a color value (HEX is used).

↑ Back to top.

Group or Profile Layout?

This is the most crucial part of the form that most people miss or don't catch. The checkbox activates the profile code- without it checked it becomes a group layout.

↑ Back to top.

Font Styling

• Font Size: Changes the overall font size. It's limited due to abuse.
• Font Family: Changes the overall font family. NO COMIC SANS.
• Text Transform: There's only two options: UPPERCASE and lowercase.
• Letter Spacing: This changes the spacing in between the characters.
• Line Height: This changes the spacing in between the lines of text.
• Text Alignment: This changes the alignment of the text.
• Text Color: Changes the overall color of the font. You'll need to click the color wheel after finding your color.

↑ Back to top.

Background

• Background Color: This controls the entire layout's background color.
• Background Image: Controls the background image. The other parts are optional, but by default the image will tile.
• Background Repeat: IF there is a background image, then this option can be filled. It controls how the image will tile, if at all.
• Background Image Height: IF there is a background image that doesn't repeat, then add the height of the image. Note: The image shouldn't have a width larger than 566px.
• Background Position: IF there is a background image this controls the position where there image will start.
• Background Attachment: IF there is a background image, this controls if the image will scroll along with your browser. It's best to use this for images that have a headache-inducing pattern.

↑ Back to top.

Content Box

• Box Width: This controls the content box's width. It shouldn't be bigger than 500px.
• Box Color: This controls the content box's background color.
• Box Padding: This controls the content box's padding. Keep it under 14px please.
• Border Thickness: This controls the content box's border thickness.
• Border Color: This controls the content box's border color (if there is one).
• Border Type: This controls the border styling.
• Rounded Borders: This is fairly new but it controls the rounding of the corners using CSS3.

↑ Back to top.