M3NF
11-Nov-2002, 02:34 PM
Skinning
Tutioral
This is a basic way to build a skin for Invision borad
1.1.Beta 2 (notes there maybe changes in later releases).
The first
part is to have a plain on what you require your site to look like. Once
you got a idea it time to start to work on making that happen.
You
can either work on the colours of the forum or the graphics on the forum
Eg buttons.
Graphic's
Once you got the idea of what
you want then you need to work on the images. So get yourself a copy of
the Style_image folder from the install of Invision 1.1.
This will be
located from the download from IBS. So unzip your folder. Inside You see a
folder called "Invboard 1.1". Open that and your see 5 folders, open
"uploads", then inside you see a folder called "1".
This is the
folder that contains all the images for the forum.
Ok once you have
this folder open it and look inside, you will see all the images for the
forum, what you need to do next is to start to make one to replace these
one.
You will need to make the images the same size as the originals,
or the items will not look right when in use.
Here is a list of the
size for each image.
add.gif 11 x 11
bar.gif
1 x 8
bar_left.gif 2 x 8
bar_right.gif 2 x
8
bc_new.gif 28 x 28
bc_nonew.gif 28 x
28
bf_new.gif 28 x 28
bf_nonew.gif 28 x
28
bf_readonly.gif 28 x 28
birthdays.gif 30
x 30
br_new.gif 28 x 28
br_no_new.gif 28
x 28
dark_line.gif 1 x 7
f_closed.gif 18 x
12
f_hot.gif 18 x 12
f_hot_dot.gif 18
x 12
f_hot_no.gif 18 x 12
f_hot_no_dot.gif 18
x 12
f_moved.gif 18 x 12
f_norm.gif 18 x
12
f_norm_dot.gif 18 x 12
f_norm_no.gif 18
x 12
f_norm_no_dot.gif 18 x 12
f_pinned.gif 16 x
18
f_poll.gif 18 x 12
f_poll_dot.gif
18 x 12
f_poll_no.gif 18 x 12
f_poll_no_dot.gif
18 x 12
header_tile.gif 1 x 59
icon0.gif 15
x 15
icon1.gif 19 x 19
icon2.gif 19 x
19
icon3.gif 19 x 19
icon4.gif 19 x
19
icon5.gif 19 x 19
icon6.gif 19 x
19
icon7.gif 19 x 19
icon8.gif 19 x
19
icon9.gif 19 x 19
icon10.gif 19 x
19
icon11.gif 19 x 19
icon12.gif 19 x
19
icon13.gif 19 x 19
icon14.gif 19 x
19
icon15.gif 15 x 15
icon16.gif 15 x
15
icon17.gif 15 x 15
icon18.gif 15 x
15
icon99.gif 8 x 10
icon_clndr.gif 24
x 21
icon_div.gif 6 x 21
icon_help.gif 22 x
21
icon_members.gif 22 x 21
icon_msg_new.gif 22 x
21
icon_msg_new_dis.gif 22 x 21
icon_msg_nonew.gif 22 x
21
icon_msg_nonew_dis 22 x 21
icon_search.gif 22
x 21
logo.jpg 249 x 59
msg_l_addmem.gif 89
x 28
msg_l_delete.gif 89 x 28
msg_l_reply.gif
89 x 28
nav.gif 21 x 21
nav_m.gif 8
x 8
nav_m_dark.gif 8 x 8
newpost.gif 12 x
12
p_aim.gif 50 x 21
p_delete.gif 60 x
21
p_edit.gif 50 x 21
p_email.gif 60 x
21
p_icq.gif 52 x 21
p_msn.gif 56 x
21
p)pm.gif 51 x 21
p_quote.gif 60 x
21
p_up.gif 25 x 21
p_www.gif 60 x
21
p_yim.gif 56 x 21
pip.gif 10 x
9
remove.gif 11 x11
spacer.gif 1 x 1
stats.gif
30 x 30
t_closed.gif 94 x 30
t_moved.gif 94 x
30
t_new.gif 94 x 30
t_poll.gif 94 x
30
t_reply.gif 94 x 30
tile_back.gif 1
x 52
tile_back_small.gif 1 x 22
tile_sub.gif 1 x
48
user.gif 30 x 30
Thats all the image files
and sizes, so it will be now case of replaceing them will your own work,
alot thou most people do not change, like the smilies(icon.gif) so its up
to you what you change.
The main ones you can see what they change,
like the buttons.
But for the "header_tile" this will change the main
top header pic where the logo goes on.
The "tile_back" changes the
the first forum heading colour.
The "tile_sub" changes the bar colour
below the "tile_back"
Once you have done all your graphics to
the way you like them, test them out on a NEW install, so make yourself a
new test forum and then swap the images that you have done. So upload all
the images and place them inside your style_images/1 folder and overwrite
them.
No goto to the url of your test forum to see how it looks. If
you happy then move on to the css (custom style sheet). If not hapt rework
your images until your happy.
Changeing the background
of your forum via the style sheets.
Ok now its time to log into
admin control panel of your test forum. Then goto manage skins and
templates, then manage style sheets.
Click edit next to the name
"Invision Style Sheet" on main screen.
This will bring up a window of
coding, this is where you change the colours of text,background,postboxes
and so on.
You need to know a little about colour codes on html ie
#000000 is black and #ffffff is white. But if unsure you can use you
graphics program to help you with it.
Alot of the main items are
easyish to tell like.......
.forum1 { background-color: #DFE6EF
}
This is colour for the top forum
posting area.
I will work on all the codes there on next post when i
have more time.
So you can now go though the style sheet and edit
the colours to suite your need for the skin.
The main ones that change
alot are....
a:hover { color:
#465584 }
.hlight { background-color: #DFE6EF }
.dlight {
background-color: #EEF2F7 }
.mainbg { background-color: #FFFFFF
}
.mainfoot { background-color: #BCD0ED }
.forum1 {
background-color: #DFE6EF }
.forum2 { background-color: #E4EAF2
}
.post1 { background-color: #F5F9FD }
.post2 {
background-color: #EEF2F7 }
.posthead { background-color:
#E4EAF2 }
.postbak { background-color: #D2D2D0 }
.title {
background-color: #C4DCF7 }
.row1 { background-color: #EEF2F7
}
.row2 { background-color: #F5F9FD }
.postsep {
background-color: #C7D2E0; height: 1px
}
Not all thou change items on the
front page. So you need to maybe post a topic to see the change in
colour.
Once you have done that click the "edit stylesheet" to save
your changes then goto your test forum url to see what you have
done.
Keep repeating until you are happy with the forum colours. Once
happy goto manage skins and templates and then manage skin templates and
click edit on main window next to the skin.
Enter the name your wish
your skin to be called in the list along with any other details you wish
to be shown.
Once done goto manage skins and click edit on main window,
then enter a new name for your skin there to.
Then click manage skins
and click on the export skin, and click the HERE and save to your
harddrive.
And that it your skin is made, now send it to me
:)
Hope this helps you out as a
basic start to skinning. I will update parts when i have more time.
Tutioral
This is a basic way to build a skin for Invision borad
1.1.Beta 2 (notes there maybe changes in later releases).
The first
part is to have a plain on what you require your site to look like. Once
you got a idea it time to start to work on making that happen.
You
can either work on the colours of the forum or the graphics on the forum
Eg buttons.
Graphic's
Once you got the idea of what
you want then you need to work on the images. So get yourself a copy of
the Style_image folder from the install of Invision 1.1.
This will be
located from the download from IBS. So unzip your folder. Inside You see a
folder called "Invboard 1.1". Open that and your see 5 folders, open
"uploads", then inside you see a folder called "1".
This is the
folder that contains all the images for the forum.
Ok once you have
this folder open it and look inside, you will see all the images for the
forum, what you need to do next is to start to make one to replace these
one.
You will need to make the images the same size as the originals,
or the items will not look right when in use.
Here is a list of the
size for each image.
add.gif 11 x 11
bar.gif
1 x 8
bar_left.gif 2 x 8
bar_right.gif 2 x
8
bc_new.gif 28 x 28
bc_nonew.gif 28 x
28
bf_new.gif 28 x 28
bf_nonew.gif 28 x
28
bf_readonly.gif 28 x 28
birthdays.gif 30
x 30
br_new.gif 28 x 28
br_no_new.gif 28
x 28
dark_line.gif 1 x 7
f_closed.gif 18 x
12
f_hot.gif 18 x 12
f_hot_dot.gif 18
x 12
f_hot_no.gif 18 x 12
f_hot_no_dot.gif 18
x 12
f_moved.gif 18 x 12
f_norm.gif 18 x
12
f_norm_dot.gif 18 x 12
f_norm_no.gif 18
x 12
f_norm_no_dot.gif 18 x 12
f_pinned.gif 16 x
18
f_poll.gif 18 x 12
f_poll_dot.gif
18 x 12
f_poll_no.gif 18 x 12
f_poll_no_dot.gif
18 x 12
header_tile.gif 1 x 59
icon0.gif 15
x 15
icon1.gif 19 x 19
icon2.gif 19 x
19
icon3.gif 19 x 19
icon4.gif 19 x
19
icon5.gif 19 x 19
icon6.gif 19 x
19
icon7.gif 19 x 19
icon8.gif 19 x
19
icon9.gif 19 x 19
icon10.gif 19 x
19
icon11.gif 19 x 19
icon12.gif 19 x
19
icon13.gif 19 x 19
icon14.gif 19 x
19
icon15.gif 15 x 15
icon16.gif 15 x
15
icon17.gif 15 x 15
icon18.gif 15 x
15
icon99.gif 8 x 10
icon_clndr.gif 24
x 21
icon_div.gif 6 x 21
icon_help.gif 22 x
21
icon_members.gif 22 x 21
icon_msg_new.gif 22 x
21
icon_msg_new_dis.gif 22 x 21
icon_msg_nonew.gif 22 x
21
icon_msg_nonew_dis 22 x 21
icon_search.gif 22
x 21
logo.jpg 249 x 59
msg_l_addmem.gif 89
x 28
msg_l_delete.gif 89 x 28
msg_l_reply.gif
89 x 28
nav.gif 21 x 21
nav_m.gif 8
x 8
nav_m_dark.gif 8 x 8
newpost.gif 12 x
12
p_aim.gif 50 x 21
p_delete.gif 60 x
21
p_edit.gif 50 x 21
p_email.gif 60 x
21
p_icq.gif 52 x 21
p_msn.gif 56 x
21
p)pm.gif 51 x 21
p_quote.gif 60 x
21
p_up.gif 25 x 21
p_www.gif 60 x
21
p_yim.gif 56 x 21
pip.gif 10 x
9
remove.gif 11 x11
spacer.gif 1 x 1
stats.gif
30 x 30
t_closed.gif 94 x 30
t_moved.gif 94 x
30
t_new.gif 94 x 30
t_poll.gif 94 x
30
t_reply.gif 94 x 30
tile_back.gif 1
x 52
tile_back_small.gif 1 x 22
tile_sub.gif 1 x
48
user.gif 30 x 30
Thats all the image files
and sizes, so it will be now case of replaceing them will your own work,
alot thou most people do not change, like the smilies(icon.gif) so its up
to you what you change.
The main ones you can see what they change,
like the buttons.
But for the "header_tile" this will change the main
top header pic where the logo goes on.
The "tile_back" changes the
the first forum heading colour.
The "tile_sub" changes the bar colour
below the "tile_back"
Once you have done all your graphics to
the way you like them, test them out on a NEW install, so make yourself a
new test forum and then swap the images that you have done. So upload all
the images and place them inside your style_images/1 folder and overwrite
them.
No goto to the url of your test forum to see how it looks. If
you happy then move on to the css (custom style sheet). If not hapt rework
your images until your happy.
Changeing the background
of your forum via the style sheets.
Ok now its time to log into
admin control panel of your test forum. Then goto manage skins and
templates, then manage style sheets.
Click edit next to the name
"Invision Style Sheet" on main screen.
This will bring up a window of
coding, this is where you change the colours of text,background,postboxes
and so on.
You need to know a little about colour codes on html ie
#000000 is black and #ffffff is white. But if unsure you can use you
graphics program to help you with it.
Alot of the main items are
easyish to tell like.......
.forum1 { background-color: #DFE6EF
}
This is colour for the top forum
posting area.
I will work on all the codes there on next post when i
have more time.
So you can now go though the style sheet and edit
the colours to suite your need for the skin.
The main ones that change
alot are....
a:hover { color:
#465584 }
.hlight { background-color: #DFE6EF }
.dlight {
background-color: #EEF2F7 }
.mainbg { background-color: #FFFFFF
}
.mainfoot { background-color: #BCD0ED }
.forum1 {
background-color: #DFE6EF }
.forum2 { background-color: #E4EAF2
}
.post1 { background-color: #F5F9FD }
.post2 {
background-color: #EEF2F7 }
.posthead { background-color:
#E4EAF2 }
.postbak { background-color: #D2D2D0 }
.title {
background-color: #C4DCF7 }
.row1 { background-color: #EEF2F7
}
.row2 { background-color: #F5F9FD }
.postsep {
background-color: #C7D2E0; height: 1px
}
Not all thou change items on the
front page. So you need to maybe post a topic to see the change in
colour.
Once you have done that click the "edit stylesheet" to save
your changes then goto your test forum url to see what you have
done.
Keep repeating until you are happy with the forum colours. Once
happy goto manage skins and templates and then manage skin templates and
click edit on main window next to the skin.
Enter the name your wish
your skin to be called in the list along with any other details you wish
to be shown.
Once done goto manage skins and click edit on main window,
then enter a new name for your skin there to.
Then click manage skins
and click on the export skin, and click the HERE and save to your
harddrive.
And that it your skin is made, now send it to me
:)
Hope this helps you out as a
basic start to skinning. I will update parts when i have more time.