Making Your Own Domain Layout
This tutorial is going to explain in full detail and depth about making a domain layout.
I will teach you about all the little tricks and things you can do to spice it up.
After this tutorial you should be able to code practically any layout, and make any one you want. So, I hope you all enjoy! I know alot of people wanted me to do this. Sorry I delayed so much. But here it is!
If you are still having trouble after reading and following this tutorial, please feel free to EMAIL me {{amber@pixel-heart.org}}, and I will personally help you C:
**Please Note, This is how I do it.**
~Let's get started~
First let's talk about the parts of a plain layout code. {{You should open notepad or something and start typing this out as this is how you are going to code the layout}}
The <Title> is what shows up in the browser tab & header.
The Shortcut Icon, is the "favicon." It is the little image that appears next to the title in the tab. These are 16x16 pixel images. However, you can use any image and they will be resized.
This is what starts the css. So type that in to wherever you are writing this.
This coding controls the background.
Background-Color: is where you put your color code. For example; #ffffff {which is white}
Background-Image: is where you enter your background image. Using the direct path is the best way to go. For example; http://www.yourdomain.org/imagefile
Background-Repeat: is where you choose how you want your background to repeat. There are 4 different types of repeat.
- repeat; repeats the background both vertically and horizontally
- See example
- repeat-x; repeats the background JUST horizontally
- See example
- repeat-y; repeats te background JUST vertically
- See example
- no-repeat; causes the background to NOT repeat at all
- See example
- See example
- scroll; This is the default setting, and does not need to be added in unless you want to.
- See example
- fixed; This causes the background to be "fixed" a.k.a. "not moving"
- See example
- See example
- left top; Puts the background to the left & at the top of the page.
- See example
- left center; Puts the background to the left & at the center of the page.
- See example
- left bottom; Puts the background to the left & at the bottom of the page.
- See example
- right top; Puts the background to the right & at the top of the page.
- See example
- right center; Puts the background to the right & at the center of the page.
- See example
- right bottom; Puts the background to the right & at the bottom of the page.
- See example
- center top; Puts the background to the center & at the top of the page.
- See example
- center center; Puts the background to the center & at the center of the page.
- See example
- center bottom; Puts the background to the center & at the bottom of the page.
- See example
- See example
- td; td, is the table data {{
<td></td> -Used in tables-}} - p; p is the paragraph text {{
<p></p> }} - body; body is the general text {{the text appearing in the main area of the site etc.}}
Font-Family: Specifies the font face. Font Face List
Font-Size: Specifies the font size. Enter a Number in then "px" (stands for pixel)
Font-Weight: Specifies bold, bolder, lighter.
- normal; Defines normal characters
- See example
- bold; Defines a thick character
- See example
- See example
- none; Default; does nothing.
- See example
- overline; Creates a line over the text.
- See example
- underline; Creates a line under the text.
- See example
- line-trough; Creates a line through the text.
- See example
- blink; Makes the text blink.
- See example
- See example
- none; Default Setting; However you type it is how it will show.
- See example
- uppercase; Forces all text to be in Caps. Like Caps Lock.
- See example
- lowercase; Forces all text to be lower case
- See example
- capitalize; Forces the First letter of each word to be Capitalized.
- See example
- See example
- Left; Default; Makes text align to the left.
- See example
- Right; Makes text align to the right.
- See example
- Center; Makes text align in the center.
- See example
- See example
- b: edit the bold property {{
<b></b> }} - i: edit the italicized property {{
<i></i> }} - u: edit the underlined property {{
<u></u> }} - s: edit the
strikeproperty {{<s></s> }} - big: edit the big property {{
<big></big> }} - small: edit the small property {{
<small></small> }} - blink: edit the property {{
<blink></blink> }}
Header 1 {{h1}} is how you are going to decorate your headers. Headers are used with
You can have as many headers as you want.
Every time you want a new header just make it a new number. h1, h2, h3, h4, h5, h6, etc..
Examples of headers can be seen on my own layout in the sidebars.
Also instead of using margin-left/right/top/bottom you can just write margin: #px; same goes for padding. This makes all the sides the same amount.
Margin is the area AROUND it.
Padding is the area INSIDE (like inside a border) it.
Display is how your text/etc. will appear in line. either display:block; (forces own line) or display:inline; (stays in line with other text)
Adding backgrounds are also a great way of decorating them, and is just like the background code for the page background.
Borders can be added. There are three different types.
- Solid; Is a solid line.
- See example
- Dashed; Is a "broken" line.
- See example
- Dotted; Is dotted, "small circles" line.
- See example
- See example
These pertain to the normal ol' links.
Links are fun to play around with, giving them backgrounds, and changing them when you hover.
You can also add margins & padding to them. Using this when hovering gives them a fun effect.
You can also make custom links. You do this by going "a.titleoflink" and for the hover it is "a.titleoflink:hover"
To use your custom link you have to give the link you want to change a "class"
So when writing out the link code;
Block quotes are used with
They are just an extra thing, usually used for updates, as it is a different kind of "box" thing.
Overflow: has three different options to it.
- auto; does whatever depending on if it needs to scroll or not.
- hidden; hides the scroll bars (can not scroll).
- scroll; Scrolls..
- Also note the following;
- overflow-x; only effects the x (horizontal) overflow.
- overflow-y; only effects the y (vertical) overflow.
- Also note the following;
This code controls the header. Usually it is 0 because it is at the top, and to the left. But you can play with it.
The higher the "top" value is, the lower the image is going to go.
The highter the "left" value is, the farther right the image is going to go.
The position:absolute; is kind of hard to explain why it's there. So I'm not going to. It just is!
Rename the divs to whatever you want. Like Main, Content, SideBar, SideBar2, etc..
Use these to define areas of your site where your content is. Do this by
When you are working with a premade layout image, you just have to guess at how far down, and right the values are.
After awhile though you will be able to do it really fast as you will get use to what 100 pixels etc. look like and are.
So just start playing with the values until they are in the right areas.
Also, setting the height to 'auto' is useful because if will just keep growing for the length of the text. Not always having a scroll bar is a good thing!
:Also for the width, the best thing to do is just measure it in photoshop/gimp/etc.
You are DONE with your style. so put
These are your div id's Put the one for your main content (like where your blog, resources, etc. are going to show up) LAST.
Why last? This is just more organized and will come in handy when using PHP incldues.
You put ALL of your side bar things, and content area INSIDE the divs.
Also just a tip, you can make random divs anywhere you want.
Now, this should be your ENTIRE layout code.
Hopefully you learned how to do this C:
Comments and feedback would be loved ♥
Okay. So now you have the layout done. Here are some more tips and tricks for making a cooler layout (:
This code is for those "boxes" people make. Like on my current website. The sidebars, with the different sections. This is how you make those!
just replace "name" with whatever you want, like I name mine box1 alot of the time.
And when you want to use them just go
writing/writing/writing
Please note, that these do INSIDE of the DIV ID
This is how you would add shadows to your text. #hex is the color of the shadow itself. The X-coordinate of the text-shadow (20px), relative to the text The Y-coordinate of the text-shadow (-12px), relative to the text The blur radius of the text-shadow (2px), which means the amount of space the shadowtext is 'stretched', causing a blur effect.
This is how you make rounded corners on things.
You need BOTH the border&moz-border ones. This is to make it browser friendly.
You can just say border-radius: #px; and -moz-border-radius: #px; as well. (but still TOGETHER)
Just enter the # you want. The higher the number. The more of the turn C:
Well have fun making layouts! I did not really proof read because after spending 8+ hours writing this out I really dont feel like it. So if you find a problem, like an example not working, or one of the codes not working please let me know! And if you have any further questions or need help please feel free to email me! {amber@pixel-heart.org} I will happily help! (:
Happy Coding!
