Basic Post Layout Base Codes - Computers & Technology

I thought it'd be good to have a thread with all the most common types of post layouts and base codes for them so that the people who help out in the layout request thread can have a bit of a break, and so that generators are less frequently used.

Before I start, I'd like to point out that the number sign followed by three or six xharacters represents a color, and can be changed to whatever you like. Just Google "hexadecimal color picker" or something to help find the colors you want.

Let's start with the simplest one. A repeating background, and nothing else.

Text goes here.
S
T
R
E
T
C
H

The code for that is just this:
HEADER:
<div style="background: url(IMAGE URL GOES HERE) repeat;">

FOOTER:
</div>

That was quite simple, so let's get a bit more complex. This time we'll have a background, and another box in front of that to be the table where we put our text.

Here's one with colors only:

Text goes here.
S
T
R
E
T
C
H

Here's the code:
HEADER:
<div style="background: repeat #111111; padding: 20px;"><div style="background: #aaaaaa; border: 2px #ffffff solid; padding: 3px;">

FOOTER:
</div></div>

NOTE: If you want a sig box in your layout, use this as your footer:
</div><div style="background: #aaaaaa; border: 2px #ffffff solid; padding: 3px; ; margin-top: 20px;">SIGNATURE GOES HERE</div></div>

Here's an example with images:

Text goes here.
S
T
R
E
T
C
H

Here's the code:
HEADER:
<div style="background: url(BACKGROUND IMAGE URL GOES HERE) repeat; padding: 20px;"><div style="background: url(TRANSPARENT OVERLAY THING URL GOES HERE); border: 2px #abcdef solid; padding: 3px;">

FOOTER:
</div></div>

NOTE: If you want a sig box in your layout, use this as your footer:
</div><div style="background: url(TRANSPARENT OVERLAY THING URL GOES HERE); border: 2px #abcdef solid; padding: 3px; ; margin-top: 20px;">SIGNATURE GOES HERE</div></div>

Alright, the next one is pretty much just an add-on of the previous one, but it's been deemed its own thing. People seem to call it Pieguy's style, because he was the first person to use it on the site. I like this one, because while being fairly simple to code, it's quite personalization-oriented. You can replace the image on the right with whatever you like, most people use people. I just had that image of OS9 icons lying around so I used it.

Text goes here.
S
T
R
E
T
C
H

SIGNATURE GOES HERE

Here's the code:
HEADER:
<div style="background: url(URL OF IMAGE YOU WANT TO ALIGN TO THE RIGHT GOES HERE) right no-repeat #112; padding: 20px; padding-right: 0px;"><div style="background: #09aaaf; border: 2px #a12dfe solid; padding: 3px; margin-right: 200px;">

FOOTER:
</div><div style="background: #09aaaf; border: 2px #a12dfe solid; padding: 3px; margin-right: 200; margin-top: 20px;">SIGNATURE GOES HERE</div></div>

Note: If you don't want the extra box for your signature, use this as your footer instead:
</div></div>

Another note: If your image is too big for the space on the right, play with the part that says margin-right: 200px. For a larger space, raise the number, for a smaller space, lower it.

Next, signature boxes on the side. This is relatively comprehensible, so I'll just get on with it. Also, I consider this to be where the layouts start getting a bit long. There are also a couple extra things you'll need to set for yourself if you want to have this work right, but it should all be pretty obvious when you come to it, as it's just simple changes of numbers or words.

Text goes here.

SIG GOES HERE

Here's the code:
HEADER:
<style type="text/css">table.ex1 {background: url(BACKGROUND IMAGE URL GOES HERE) center repeat; font-family: "Verdana"; color: #FFFFFF;} table.ex1 td {background-image: url(TRANSPARENT OVERLAY THING URL GOES HERE); border: 2px #000 solid; background-repeat: repeat;</style><table class="ex1" style="text-align: left; width: 100%;" cellspacing="20" height="215"><tr><td valign="top" width="75%">

FOOTER:
</td><td valign="top" width="25%">SIG GOES HERE</td></tr></table>

And finally (for now), this is for if you want a signature box on the side AND one on the bottom.

Text goes here.	SIG BOX ON THE RIGHT
SIG BOX ON THE BOTTOM

Here's the code:
HEADER:
<style type="text/css">table.ex2 {background-image: url(BACKGROUND IMAGE URL GOES HERE); font-family: "Century Gothic"; color: #000000; background-position: bottom left; background-repeat: repeat-xy; background-color: #174fb1 } table.ex2 td {background-image: url(TRANSPARENT OVERLAY THING URL GOES HERE); border-style:solid; border-color:#000000; border-size: 2px; background-repeat: repeat;}</style><table class="ex2" style="text-align: left; width: 100%" height="275" cellspacing="17"><tr><td valign="top">

FOOTER:
</td><td width=135 rowspan=2 valign=top>SIG BOX ON THE RIGHT<tr><td height=90 valign=top>SIG BOX ON THE BOTTOM</td></tr></td></tr></table>

Now, if you want to have an image that repeats ONLY horizontally, or ONLY vertically, you should find a place in the header where it says "repeat" or "repeat-xy" and change it to "repeat-x" or "repeat-y" depending on the direction you want it to repeat in. Of course, then you'll have a bit of cutoff with the color for longer posts, so you'll need to add in "background-color: #xxxxxx" to your header, just after "background: url(whatever)". Make sure the color of #xxxxxx matches the color of the sky or whatever in the image you're using. If you need help getting the color you want, use this and copy the color that's the closest to the sky. You'll also need to place this after to align it to a certain place. "background-position:" and then one of these four, or a combination of two of them for corners: "top" "left" "right" "bottom".

Or on the off chance that I didn't make any sense with that parahraph, (or with anything in particular) you could just PM me and ask for help, or ask your question in the stickied HTML/CSS help threads. :P

Holy hell thats a lot of writing but I'm using this for my layout. Thanks! Is it possible to have a gradient background?

Originally posted by Magikarpa

To have a variable-height gradient would not be possible in HTML or CSS, to my knowledge, unless you could use a flash document as a background somehow, but I doubt it. Besides, even if that were possible, there would be some compatibility issues with users whose browsers don't support flash.

However, it'd be possible to align a picture of the gradient to the top or bottom of the table, and then set a background color to go under it, but it'd render all black, white, or grey text in the table illegible, should it overlap the part of the gradient with the same color.

It is indeed possible (to some extent), however I don't think it's a good idea to do it, due to the fact that it'd be distracting to anyone trying to read your posts.

Inb4sticky

I cry when angels deserve to die <3
Lay-out made by Broozer
©Broozer

I vote for sticky.

Now with extra girl and extra hacker

Sticky vote get!
Now how about some sticky votes for the new IRC channel?

Super Mario: Star Seeker

I definitely vote for sticky. This tutorial helped me create my own layout.

Cohost account

Steam Community profile

Ok ok here you go. This thread seems useful.

have a nice day.

My blog. I could post stuff now and then

My Assembly for the SNES tutorial (it's actually finished now!)

Originally posted by Luxmas

I definitely vote for sticky. This tutorial helped me create my own layout.

What about Player 1's tutorial?

And yes, this tutorial should definately help most people with layouts. I personally prefer using tables and such opposed to div tags since that's how I learned it, but useful nonetheless.

World Community Grid: Thread | Team

The addition of the side box layouts is nice, but could you try and condense the code? I.E:

Code

background-image: url(BACKGROUND IMAGE URL GOES HERE); font-family: "Verdana"; color: #FFFFFF; background-position: center; background-repeat: repeat;

is the same as

Code

background: url(BACKGROUND IMAGE URL GOES HERE) center repeat; font-family: "Verdana"; color: #FFFFFF;

I think this would help, as there is less code to search though.

Good point. I made the code for a specific person a while ago, and I guess I forgot to make it more universally usable before putting it in this thread. Thanks for the reminder, I'll change it now.

Your layout has been removed.

I made my layout with this code

Originally posted by UMA

I made my layout with this code

That looks very nice. The inverse stripes add a cool effect to the layout.

Originally posted by Tom Servo

Originally posted by UMA

I made my layout with this code

That looks very nice. The inverse stripes add a cool effect to the layout.

Thanks!

your layout is nice too.

Originally posted by UMA

I made my layout with this code

The best new user's layout I've ever seen as of now. Looks great!

Originally posted by MSAhm3d59113

Is it possible to have a gradient background?

Yes, use PhotoShop or whatever that is better than MS Paint.

You can, also, use the CSS3 gradient tag, but support for that in most browsers (*coughinternetexplorercough*) is limited.

Oh and you should tell users to disable the "Use default padding" option, because it makes 4-pixel padding on the outer edge of your layout, making it look ugly.

MARIO in MAINLAND Progress

Mario in Mainland will be in the next C3.

Originally posted by Hobz

thanks for the helpful tutorial

It's not a tutorial. #w{

} Those are just base layouts.

Originally posted by MSAhm3d59113

Is it possible to have a gradient background?

Might have been answered already, but multiple DIV cells can do the trick. Hell, I've done layouts where there is a bottom base graphic (let's say sky, for example) with a middle graphic for the bottom (ground) and where the post is, the top graphic (Sky, clouds, stars, whatever). Clever coders can make all three elements work regardless with different BG colors, different grounds, different skies, all in an effort to mix and match game elements to form surreal layered backgrounds for their posts.

Or for your background, you can simply have different background colors as base graphic files, and the circles and dots can remain the same, fading into transparency.

And oh, even though it is not as superior, use Gimp over Photoshop. Rougher to use? Maybe. But at least you don't have to commit piracy by downloading it and setting http://activate.adobe.com to direct to 127.0.0.1 in your hosts file before you run the installer so the program can be activated with pre-supplied product keys. Makes uninstallation a breeze too because you don't have to unregister the key! Isn't piracy wonderful?

Seriously. Don't.

Slightly well-versed on everything Linux

I'll beta-test your hack. Find me here!

darky can i have the code for your layout?

i don't get nothin when i buy me some cheese :D

Another base layout:

POST GOES HERE

SIGNATURE GOES HERE

CODE:

HEADER:

<div style="background: url(BACKGROUND URL GOES HERE) repeat"><div style="background: url(SIDE IMAGE URL GOES HERE) right no-repeat; color: ; border: px solid; padding: 10px;"><div style="background: url(http://alex.losego.com/images/blacktdbg.png); border: 2px rgb(255,255,255) solid; padding: 10px; padding-top: 10px; margin-right: WIDTH OF SIDE IMAGE;">

FOOTER:

</div><div style="background: url(http://alex.losego.com/images/blacktdbg.png); border: 2px rgb(255,255,255) solid; padding: 10px; margin-right: WIDTH OF SIDE IMAGE; margin-top: 10px;">SIGNATURE GOES HERE</div></div></div>