program im using:gimp (im using this because its free, therefore we hopefully can get more skinners)
how long it takes to make a skin?about 3 hours at best
SIZES
Maintitle - 750 x 29 px(or bigger)
Titlemedium - 6 x 19 px
Darkrow2 - 750 x 20 px
Userlinks - 750 x 20 px (depends)
Submenu - 750 x 29 px (depends)
Caldate - 106 x 21 px
lets begin!
first off lets go to http://www.invisionfree.com and register a board! name it wisely for your first skin. but you can always rename it if you choose.
now first things first. select a color scheme, like grey and red or black and pink, ect.
next. get color cop or another hex color code generator color cop can be found here to download for free.
now, once you have your preview board up go to admin cp-->board wrappers
say what? ya board wrappers. change that top part above board header to the following:
QUOTE
<center><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000">
<table cellspacing="0" bgcolor="BGCOLOR" valign="top" height="100%" width="WIDTH"><tr><td valign="top" height="100%" background="LEFT BORDER URL" style="padding:PADDINGpx;border:0px;"></td><td height="100%" valign="top">
<table cellspacing="0" bgcolor="BGCOLOR" valign="top" height="100%" width="WIDTH"><tr><td valign="top" height="100%" background="LEFT BORDER URL" style="padding:PADDINGpx;border:0px;"></td><td height="100%" valign="top">
dont worry about anything yet. I'll talk about it in a second.
now add this to your footers:
QUOTE
</td><td align="left" valign="top" background="RIGHT BORDER URL" style="padding:PADDINGpx;border:0px;"></td></tr></table>
alright, now ill talk about it. the bg color is simply the backround color, which all of those are in red, all the purple is the border urls, ones right ones left, for your first skin its recomended not to use one, just to save time, later you can experiment, padding, basically its the extra stuff on the side of the forums, if you scroll down youll see what i mean
now, edit that the way u want it, remember, wen using colors, do not say red,ect, use the hex color code..
now, lets talk about the main title, if your new to skinning, please scroll down and see what a main title looks like, and now that you have the idea of what it is, a perfect maintitle isnt flat, or round, its a mixture, and on gimp, you can use the tools to add gradients, and bevels, thats the key, to choose a section use the path selection tool, then after you draw around the section u wanan edit, click on the gimp section create using path. then add w\e u want and itll edit that part..
but before we talk about main title look for
CODE
BODY {
if u wanna put a backround image in there add this:
CODE
background-image: url(http://); background-repeat: repeat-x; background-position: top
if you dont, then find
CODE
BACKGROUND-COLOR:#hex
and change the hex to the backround hex color
once your main title is done search for:
QUOTE
.maintitle
in your css.after you found it add
QUOTE
text-align: center;
to the begining after the { and change that blue text to the side you want the text to be on the main title.
once you have that look for the part that says:
QUOTE
background-image: url(http://);
which should be near the .main title, by the end } and add the image url of your main title, remmeber save main titles as .png or .gif for better quality
now click edit, you have that done on your skin!!!
now go back to
CODE
.maintitlep
and find
CODE
padding: 0px 0px 0px 0px
what that is is, the padding, or space in that main title, it depends what size your maint title is.
the numbers go like this:
0px 0px 0px 0px
top right bottom left
if the space is too big, the maintitle will repeat itself and thats bad...
now for the title medium.
the title medium is a gradient basically, use your main color, and make a dark/lighter version of it and make it into
a gradient with gimp , then add it like so:
after you uploaded it
find
CODE
.titlemedium
and near it look for :
CODE
background-image: url (http://);
once you make your title medium which is just a simple gradient then enter it in
again and place your image in place of http://
start messing around with the padding on it
and click edit and your title medium is done!
now lets look for
CODE
.tableborder
in it, look at the border change the border left to
CODE
0px solid #
what this does is give it sort of a 3-d effect.
now for the rows, its pretty simple exactly...
look for
CODE
.row4 {background-color: #hex}
just change it to a simple color for now
change all the rows to that same color , untill you get better
at skinning and ect, but dont mess with dark rowsyet
under .row4 add:
CODE
.div.row4 {border: #lhex 1px solid; border-bottom: #000000 0px solid}
where it says lhex change it to a hex color that is lighter then your row 4
next under .row2
add
CODE
.div.row2 {border: #samehex 1px solid; border-bottom: #000000 0px solid}
then change where it says same hex to the same color u did to the above step.
now lets do the dark rows, basically all u need to change is dark row 2, what it is like your
title medium, but reverse,
find
CODE
.darkrow2
and add
CODE
background-image: url(http://);
to the end of it. change http:// to your dark row 2.
im gonna go quickly now and explain it, breifly
CODE
.post1 {background-color: #COLOR}
.post2 {background-color: #COLOR}
.post2 {background-color: #COLOR}
change the color to the color you want the backround of your posts to be, its encouraged that they are the same color
add this:
[color]border: #COLOR 1px solid; border-bottom: #000000 0px solid;[/color]
after both post 1 and 2, the hex can be any color you want, its the border of your posts, again it is recomended not to change #000000
Edit the parts in red with the same color of the border you used in your div.row4. It will give your board a 3d effect.
Now find:
pformleft, pformleftw, pformright. Search through their parts to find the background-color code. Change it the same color as your row4.
Change the border color on all of them to the same color as the background of your .tableborder.
to fix your TEXT color for everything look for:
CODE
color: #COLOR
make sure its not
CODE
backround-color: #COLOR
Search through the CSS for class that say:
CODE
.hlight {
and
CODE
.dlight {
Change the background color of that class to the same color of your row4. It is the background behind the pm area, when you receive a new pm.
thats basics of skinning, hope u liked it, im making a tutorial now on what is what, like dark row is ect, i used notepad to make this guide, then copy/pasted it into what you see now, any questions please post them here
*THIS IS NOT A FULL 100% GUIDE, POST WHAT YOU WANT CHANGED IN YOUR SKIN AND I WILL HELP YOU*
Your skin could end up pretty good, here are some of my skins
http://z11.invisionfree.com/fbincchristmas/index.php?act=idx
http://z11.invisionfree.com/valentinesskin/index.php?act=idx
http://z7.invisionfree.com/NolDesigns3/index.php?act=idx (under construction)
