Coding Website Layouts
Step 1Download a base for a coded layout. If you don't have one you can download my coding for my Taylor Swift coded layout:
Step 2
To change the CSS to match your layout you will need a photo editing program. If you do not know how to get color codes or do not have a program I suggest you get the free program PhotoFiltre.
Click here to learn how to get color codes in PhotoFiltre.
Make sure to change the color codes in the entire code otherwise some colors will be mismatching because that code is from one of my premade layouts.
Step 3
In the top of the code where it says YOUR TITLE GOES HERE, change that to whatever you want your title to be.
Step 4
Near the bottom of the code where it says HEADER IMAGE GOES HERE, place the URL of the header image.
After you place the header URL in, make sure to change the positioning of your header. If you want to place your image in a certain area then change these codes:
Step 5
Near the bottom of the code where it says BACKGROUND IMAGE, put the URL of the image that will be your background.
Step 6
Now if you want to change the positioning for your sidebar and content area then change the left: and top: codes. If you want to change the width, change the width:.
The higher your number in the left part, the more to the right of your screen it goes.
The higher your number in the top part, the more to the bottom of your screen it goes.
Step 7
Now just add affiliates and your navigation and edit the code to your liking. If you would like to see what this base code looks like originally, click here.
Step 8
Now the rest is really up to you because it's all color codes and setting them to how you want them to be. Just use the dropper tool in whatever program you're using and select colors FROM YOUR LAYOUT to match your CSS.
I hope this helped, please credit with a link back!
