*~ G's Templates ~*
Pre-Mades & Coding Help

Welcome to G's Templates! You're welcome to use these and edit them any way you want. No credit needed! (Though it would be nice.) Using no images it's bandwidth free for me, and you get to design it yourself!

I have posted up a little guide to help you edit my templates. If you already know some code, go ahead and try it without help. Experimentation helps you learn. I hope you enjoy!

Thanks to these cool sites for teaching me how to code style sheets.
Some of the codes on this very page, come from them!
-- --

Need a color? Try NeoColors

---

News: -March 31st. Added a fixed top link. -March 24th. Added div scroll box template and added to the news section. -March 20th. Added Q&A section. -March 18th. Added div headers template. -March 15th. Added our first template and edit! A starting CSS. -March 9th. The site is OPEN!! :o

Link to Us <a><img src="http://i95.photobucket.com/albums/l141/Olafwa/gstemp1.jpg" border="0"></a> <a><img src="http://i95.photobucket.com/albums/l141/Olafwa/gstemp2.jpg" border="0"></a>

Affies ♪♫ +--

CSS Templates

Here are some style sheets I have put together. Feel free to edit them any way you want.

Notice: These are ONLY CSS codes. Some codes require an HTML code to activate it, please add those yourself. Thank you.

Starting CSS
Here is a starting CSS temp, from this purple page.
Containing a background color, font & link codes, divider code, and the text area code.
<style> body, td, p { color: purple; font: 13px tahoma; } a:link, a:active, a:visited { color: violet; font: 13px tahoma; text-decoration: underline; } a:hover { color: purple; text-decoration: none; cursor: help; } hr { color: red; height: 5px; width: 500px; } body { background: #FDF8FF; } TEXTAREA { width: 200px; height: -blocked-; color: #8B2252; font: 13px tahoma; border: 1px dashed purple; background-color: #FDF8FF; padding: 3px; } </style>
^{Need help editing?Click here}

Div Headers
Again from this page, the purple headers.
Containing an ID code, a class code, and two header codes.
<style> #tablearea { position: absolute; top: 200px; left: 200px; width: 600px; } .table { width: auto; height: -blocked-; background-color: #FDF8FF; text-align: left; padding: 2px; margin: 0px; margin-bottom: 20px; border-top: 2px solid #D8BFD8; border-bottom: 4px solid #7A378B; } h1 { font: 20px century gothic; color: #EED2EE; text-align: right; letter-spacing: 3px; background-color: #91219E; border-bottom: 1px solid #A74CAB; border-top: 1px dashed #FDF8FF; border-left: 1px dashed #FDF8FF; border-right: 1px dashed #FDF8FF; margin: 0px; padding: 20px; padding-right: 20px; } h2 { font: 14px century gothic; color: #8E388E; text-align: left; letter-spacing: 2px; background-color: #CD96CD; margin: 0px; padding-left: 20px; font-weight: bold; border-top: 2px solid #7A378B; } </style>
^{Need help editing?Click here}

Div Scroll Box
A white box that scrolls.
Containing only an ID code! :o
<style> #box1 { width: 300px; height: 250px; overflow: auto; background-color: white; text-align: left; padding: 2px; border: 4px double black; } </style>
^{Need help editing?Click here}

Edit the Templates

You can edit any of the codes, but if you are a beginner this guide will help. I will be explaining how to edit my templates. Even if you don't use them, this might help you anyway.

---

Edit CSS

Starting CSS
Italics - Codes
Bolds - Parts of the code you change.
UPPERCASE - Parts of the code you change.

All CSS codes go between style codes.
<style> </style>

Backgrounds
All the background codes look like so.

body {background:COLOR;}

Just give it your own hex code, or type a color.
If you want to use an image, add this instead.

body {background:COLOR URL(URL OF IMAGE) repeat;}

Change repeat to no-repeat to make a fixed background.

Fonts
Font codes look like this.

body,td,p {color:COLOR; font:SIZEpx FAMILY;}

Give it the color you want, and the size you want. I use pixels, but you can use points if you want. (pt) Then give it a font family. Do NOT got rid of the space between the size, and the font family.

Links
Link codes are like this.

a:link,a:active,a:visited {color:COLOR; font:SIZEpx FAMILY; text-decoration:underline;}

Edit it just like your font codes.
You can change underline to none, overline, and underline overline.
To give it a hover, add this.

a:hover {color:COLOR; text-decoration:none; cursor:help;}

You can change your cursor to all sorts of things. crosshair is popular.
(You can also add a cursor to your body code to get a default cursor.)

Dividers
The divider code.

hr {color:COLOR; height:NUMBERpx; width:NUMBERpx;}

Give it the color you want and the size of the divider. (It's better to make the height a small number)
If you use Firefox and the dividers come out hallow add,

hr {background-color:COLOR; color:COLOR; height:NUMBERpx; width:NUMBERpx;}

Use the same color, contrasting colors, or different shades. Experiment to see what looks best!

Text Areas
Some of my temps have a textarea code. You can add it to the ones what don't.

TEXTAREA {width:NUMBERpx; height:overflow; color:COLOR; font:SIZEpx FAMILY; border:1px dashed COLOR; background-color:COLOR; padding:3px;}

The color part is the color of the font. The background-color is the color of the inside of the text area. Make the border a larger number for more thickness, and change the dashed to solid, dotted, or double for a different effect.

| Back to CSS |

---

Div Headers
Italics - Codes
Bolds - Parts of the code you change.
UPPERCASE - Parts of the code you change.

All CSS codes go between style codes.
<style> </style>

ID Codes
ID codes are for making specific changes, used only once. Good for positioning and unique boxes.

#IDNAME {position:absolute; top:NUMBERpx; left:NUMBERpx; width:NUMBERpx; height:NUMBERpx;}

Remember your idname, you'll need it. Change top and left to position the box on your page. Change width and height to select the size of the box. Remove the height code to make the box end when your content ends. You can add font codes, background codes, border codes, and more.
Then, add this HTML code under your CSS, to make your box appear.
<div id="IDNAME"> CONTENT HERE </div>

Class Codes
Class codes are for making boxes that will be used more than once.

.CLASSNAME {width:auto; height:overflow; background-color:COLOR; text-align:left; padding:2px; margin:0px; margin-bottom:NUMBERpx; border-top:2px solid COLOR; border-bottom:4px solid COLOR;}

Remember your classname. Change the width and height to numbers for a specific size. Give it a background color and a bottom size. You can change the . to a # to make it an ID!
Add this HTML code after your CSS to make the box appear.
<div class="CLASSNAME"> CONTENT HERE </div>

Header Codes
Header codes are great for just that, headers. So versatile, you can do anything with them!

h1 {font:SIZEpx FAMILY; color:COLOR; text-align:left; letter-spacing:NUMBERpx; background-color:COLOR; margin:0px; padding-left:20px; font-weight:bold; border-top:2px solid COLOR;}

You should know most of these codes. Font, background, border.
Letter-spacing can be used in any CSS directed at text. This page's header letters are 2px apart.
Add this HTML code to make your headers appear.
<h1>HEADER TEXT HERE</h1>
Change h1 to h2 for a second header. Keep adding a number the more headers you want.
(In both HTML and CSS)

| Back to CSS |

---

Div Scroll Box
Italics - Codes
Bolds - Parts of the code you change.
UPPERCASE - Parts of the code you change.

All CSS codes go between style codes.
<style> </style>

Scrolling ID Code
Really, all you have to do is add one more code to make it a scroll box.

#IDNAME {width:NUMBERpx; height:NUMBERpx; overflow:auto; background-color:COLOR; text-align:left; padding:2px; border:4px double COLOR;}

More familiar codes. Add overflow:auto; to any ID or class code to make it a scroll box! You can add font codes, positioning codes, etc. Also can change left to right or center.
Remember to add the HTML code!
<div id="IDNAME"> TEXT AND CODE HERE </div>

| Back to CSS |

---

Questions & Answers

Some questions, and my answers. Have a question? Neomail me.
If it's useful I might add it to this section!

Q: How do I get cool Navigation links like yours?
A: I got them from Kitty's page. Her navigation section is awesome.