Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Invisionfree Skinning Tutorial * Skill Level: Easy, So you want to skin invisionfree?
nol
post May 30 2007, 12:07 AM
Post #1


Super Member
*********

Group: [HOSTED]
Posts: 257
Joined: 27-May 07
Member No.: 43,758
Welcome, I have made this tutorial because our forums are in desprate need of skinners..

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">


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}


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)

(list)

Go to the top of the page
 
+Quote Post
Ridwan sameer
post Jun 22 2007, 05:43 AM
Post #2


Advanced Member
*******

Group: Members
Posts: 137
Joined: 20-March 07
From: Where ever you want me to be
Member No.: 40,391
This is just waht i was looking for. But anyway when you say look for this and look for that. on which CSS ae those placed? are those in the main css? the IPB default one? please reply

(list)

Go to the top of the page
 
+Quote Post
shrty
post Apr 11 2008, 08:10 PM
Post #3


Newbie
*

Group: Members
Posts: 2
Joined: 11-April 08
Member No.: 60,683
can someone give me that type of format but with a black backround??

(list)

Go to the top of the page
 
+Quote Post
iGuest
post May 26 2008, 05:12 PM
Post #4


Trap Double Mocha Member
***************

Group: Members
Posts: 2,360
Joined: 21-September 07
Member No.: 50,369
Skinning
Invisionfree Skinning Tutorial * Skill Level: Easy

Ok, So I have an invisionfree website and I am having trouble changing the skin color. Right now, it's all grey. Here is the site if you need it: http://z10.Invisionfree.Com/Blind_Element/index.Php?. Now what I want to do is add some blue in there to make it seem better. As for the color of the blue, more like a darkish blue. But not like navy blue. Do you think you can help?

Thanks
-Buddy9246

-reply by Buddy9246 [username]

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Jun 1 2008, 05:42 AM
Post #5


Trap Double Mocha Member
***************

Group: Members
Posts: 2,360
Joined: 21-September 07
Member No.: 50,369
Ok, I have an Invison free website that I have the backgroudn color red.. From this tutorial but how do I make the background all black alike this version but to make it black not red from this version

PLEASE HELP ME

-Jb97

-reply by Random 1234

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Jun 12 2008, 02:23 AM
Post #6


Trap Double Mocha Member
***************

Group: Members
Posts: 2,360
Joined: 21-September 07
Member No.: 50,369
Could you post one of your css to see what it look's like ?

-reply by alex

(list)

Go to the top of the page
 
+Quote Post
nol
post Jul 18 2008, 03:27 PM
Post #7


Super Member
*********

Group: [HOSTED]
Posts: 257
Joined: 27-May 07
Member No.: 43,758
Sorry for the late responses:

QUOTE
html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 10px; color: #FE00FE; margin: 10px 0px 10px 0px; background-color:#FFFFFF; margin:0px 80px 0px 80px; background-image: url(http://img297.imageshack.us/img297/2743/valentinebackroundng0.png) }
TABLE, TR, TD { font-family: Verdana, Tahoma; Arial; sans-serif; font-size: 10px; color: #FE00FE; }
a:link, a:visited, a:active { text-decoration: none; color: #FE00FE }
a:hover { color: #D800D8; text-decoration: none }

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:1px outset #ffffff;padding:2px }

#ipbwrapper { text-align:left; width:750px; margin-left:auto;margin-right:auto }
#ipbwrapper img { vertical-align:middle; border: 0px }

.googleroot { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#555 }
.caldate { text-align:right;font-weight:bold;font-size:11px;color:#000000;background-color:#f5f5f5; background-image: url();padding:4px;margin:0px }

.warngood { color:green }
.warnbad { color:red }

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg { text-align:center; margin-top:15px }

#ucpmenu { line-height:150%;width:22%; border:1px solid #ffffff;background-color: #efefef; background-image: url(http://) }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #efefef; background-image: url(http://); border:1px solid #ffffff;line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #fffffff;background-color: #ffffff;padding:0px;margin:0px; background-repeat: repeat-x; background-position: top right; }
#submenu { border:1px dashed #d8d8d8;background-color: #f5f5f5; margin-top:3px; margin-bottom: 3px;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold; text-decoration:none }
#userlinks { border:1px dashed #999999; background-color: #f5f5f5; background-image: url() }

#navstrip { font-weight:bold;padding:6px 0px 6px 0px; }

.activeuserstrip { background-color:#; background-image: url(http://img428.imageshack.us/img428/7971/titlemedium6xk.gif); padding:6px }

.pformstrip { background-color: #; background-image: url(http://i4.tinypic.com/106xc45.gif); color:#;font-weight:bold;padding:3px;margin-top:1px }
.pformleft { background-color: #efefef; background-image: url(http://); padding:6px; margin-top:1px;width:25%; border-top:1px solid #ffffff; border-right:1px solid #ffffff; }
.pformleftw { background-color: #efefef; background-image: url(http://); padding:6px; margin-top:1px;width:40%; border-top:1px solid #ffffff; border-right:1px solid #ffffff; }
.pformright { background-color: #efefef; background-image: url(http://); padding:6px; margin-top:1px;border-top:1px solid #ffffff; }

.post1 { background-color: #f5f5f5; background-image: url(http://) }
.post2 { background-color: #f5f5f5; background-image: url(http://) }
.postlinksbar { background-color:#;padding:3px;margin-top:1px;font-size:10px; background-image: url(http://i4.tinypic.com/106xc45.gif) }

.row1 { background-color: #f5f5f5; background-image: url(http://) }
.row2 { background-color: #f5f5f5; background-image: url(http://) }
.row3 { background-color: #f5f5f5; background-image: url(http://) }
.row4 { background-color: #f5f5f5; background-image: url(http://) }

.darkrow1 { background-color: #F5F5F5; background-image: url(); color:#dedede; }
.darkrow2 { background-color: #; background-image: url(http://img47.imageshack.us/img47/2273/darkrow2354fc1.png); color:#000000; }
.darkrow3 { background-color: #f5f5f5; background-image: url(); color:#000000; }

.hlight { background-color: #efefef; background-image: url(http://) }
.dlight { background-color: #efefef; background-image: url(http://) }

.titlemedium { font-weight:bold; color:#; padding:3px; margin:0px; background-color: #; background-image: url(http://i4.tinypic.com/106xc45.gif) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: # }

.maintitle { text-align: center;text-align: center; vertical-align:middle;font-weight:bold; color:#FFFfff; letter-spacing:1px; padding:10px 0px 8px 0px; background-color: #ffffff;background-image: url(http://img291.imageshack.us/img291/4390/valentinesmtip3.png) ;background-repeat: no-repeat;background-position: center}
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #fff }
.maintitle a:hover { color: #f1f2f3; text-decoration: underline }

.plainborder { border:1px solid #bfbfbf;background-color:#f5f5f5 }
.tableborder { background-color:#d3d5d8; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #bfbfbf;background-color:#f9f9f9;padding:6px; }
.tablepad { background-color:#f9f9f9;padding:6px; border:1px solid #bfbfbf; }
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
div.tableborder div.tablepad { background-color: F1F1F1!important; }
div.tableborder div.tablepad table { background-color: F1F1F1!important; }
.wrapmini { float:left;line-height:1.5em;width:25% }
.pagelinks { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#000000 }
.edit { font-size: 9px }

.signature { font-size: 10px; color: #0079C9 }
.postdetails { font-size: 10px }
.postcolor { font-size: 12px; line-height: 160% }

.normalname { font-size: 12px; font-weight: bold; color: #003 }
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #900 }

.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #000000; background-color: #ffffff; background-image: url(); background-repeat:repeat-x; border: 1px dashed #999999; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #000000; background-color: #ffffff; background-image: url(0); background-repeat:repeat-x; border: 1px dashed #999999; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

.codebuttons { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }
.forminput, .textinput { background-color: #ffffff; color: #000000; border: 1px solid #999999; background-color:#ffffff;background-image:url(http://i5.tinypic.com/13z920n.gif);background-repeat:repeat-x; background-position: top}


.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px dashed #999999;border-bottom:1px dashed #999999 }

.purple { color:purple;font-weight:bold }
.red { color:red;font-weight:bold }
.green { color:green;font-weight:bold }
.blue { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }
thats for my pink skin i made. I don't really code invisionfree skins anymore, so I'll try helping bes tto my understanding.

to change the background whoever asked that,

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">
thats in the headers. Change the <body bgcolor="FFFFFF" to the color you want.