Jump to content
xisto Community
Sign in to follow this  
Followers 0
nol

Invisionfree Skinning Tutorial * Skill Level: Easy So you want to skin invisionfree?

By nol, in General Discussion

Recommended Posts

nol    0

nol
Posted

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.zifboards.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:

 

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

 

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

 

BODY {
if u wanna put a backround image in there add this:

 

background-image: url(http://); background-repeat: repeat-x; background-position: top

 

if you dont, then find

 

BACKGROUND-COLOR:#hex
and change the hex to the backround hex color

 

once your main title is done search for:

 

 

.maintitle

in your css.

 

after you found it add

 

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:

 

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

 

.maintitlep
and find

 

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

 

.titlemedium
and near it look for :

 

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

 

.tableborder
in it, look at the border change the border left to

 

0px solid #
what this does is give it sort of a 3-d effect.

 

now for the rows, its pretty simple exactly...

 

look for

 

.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:

 

.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

 

.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

 

.darkrow2
and add

 

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

 

.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:

 

border: #COLOR 1px solid; border-bottom: #000000 0px solid;

 

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:

 

color: #COLOR
make sure its not

 

backround-color: #COLOR
Search through the CSS for class that say:

 

.hlight {
and

 

.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)

Share this post

Link to post
Share on other sites

Ridwan sameer    0

Ridwan sameer
Posted

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

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted

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]

Share this post

Link to post
Share on other sites

iGuest    3

iGuest
Posted

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 versionPLEASE HELP ME-Jb97-reply by Random 1234

Share this post

Link to post
Share on other sites

nol    0

nol
Posted

Sorry for the late responses:

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://forums.xisto.com/no_longer_exists/404.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://forums.xisto.com/no_longer_exists/404.png); 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://forums.xisto.com/no_longer_exists/404.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://forums.xisto.com/no_longer_exists/404.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,

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

Share this post

Link to post
Share on other sites

nol    0

nol
Posted

hey nol, i like how u show step by step but i love how u did on ur first preview forum.. i want to do mine like that: http://forums.xisto.com/no_longer_exists/ so how can i do it? can u show me how please. Thanks u in advance

Sorry for taking awhile to get back to ya, I just posted the css on the preview forum if you wanna take a look at it, you can take off the copyright just please dont say you made it.

Share this post

Link to post
Share on other sites

nol    0

nol
Posted

Ya, its extremely old, I think I might have made it even before that was started, and I'm surprised people were commenting on it this whole time.

Share this post

Link to post
Share on other sites

Tramposch    1

Tramposch
Posted

i followed your tutorial nol and it helped me a lot.. and if its okay, i`ll post some of my issues here? hahaha thanks


.Nol Isn't exactly "Active" here anymore, but I used to skin for invisionfree and like forum softwares, so I, and the rest of the community may be able to give you a hand with your problems.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept