My skins

[Karumichan]

I don't like seeing this empty topic, so you all get to see what I've been doing for a bit of the time I was gone.

This are my invisionfree skins (the better ones):

s12.invisionfree.com/Exampley/index.php?act=idx

s15.invisionfree.com/SliverSkin/index.php

s15.invisionfree.com/skin_testy/index.php

So much cooler then proboards....

[chibipyroduo]

hmmm interesting, but honestly they all seem blah....no offense K-chan, but I know you can do better.

[Karumichan]

Hah, trust me, if you knew the process, you wouldn't think so. There are only so many people who can make great skins. I just started, and only use paint shop pro, while those experts are using photoshop and have made hundreds of skins.

Look at it this way:

Here is what you change to make a proboard skin-

<!-- left side of site outside of table -->
<center>
<TABLE borderColor=#7d7d7d cellSpacing=0 cellPadding=0 width=720 bgColor=#202020 border=1>
<!-- center over table, outside of table -->
<TBODY>
<TR vAlign=top>
<TD vAlign=top align=middle width=800>
<BR>
<TABLE class=bordercolor cellSpacing=1 cellPadding=0 width=719 align=center bgColor=#000000 border=0>
<TBODY>
<tr>
<TD class=welcomebg align=middle bgColor=#f1f1f1 height=50><FONT size=+1><IMG alt="Tengoku no Keiseki forums" src="http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/719intro.gif" border=0></FONT><BR><FONT size=-1></FONT></TD>
<TD width="100%">
<TABLE cellSpacing=3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=welcomebg style="DISPLAY: none" bgColor=#f1f1f1>
<P><FONT size=2>Hey, Karumichan, you have <A href="/index.cgi?action=pm">0 messages</A>, 0 are new.<BR>Oct 1, 2005, 7:14pm </FONT><BR></P></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD align=middle width="100%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD class=menubg vAlign=center align=middle bgColor=#d9d9d9 height=20><FONT size=1><A href="/index.cgi">[Home]</A> . <A href="/index.cgi?action=search">[Search]</A> . <A href="/index.cgi?action=members">[Members]</A> . <A href="/index.cgi?action=admin">[Admin]</A> . <A href="/index.cgi?action=viewprofile">[Profile]</A> </FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<CENTER></CENTER><BR><BR>
<STYLE type=text/css>
BODY {background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/TNKbg.png); background-position: ; background-repeat: repeat;} </STYLE>

And then fill in a little color form that works by itself.

And here is an invison skin-

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

form { display:inline; }
img { vertical-align:middle; border:0px }
BODY { font-family: Arial; font-size: 10px; color: #8C8C8C; margin:2px 10px 2px 10px;background-color:#A1A1A1 }

TABLE { font-family: Arial; font-size: 10px; color: #8C8C8C; }

TR { font-family: Arial; font-size: 10px; color: #8C8C8C; }

TD { font-family: Arial; font-size: 10px; color: #8C8C8C; }

a:link, a:visited, a:active { text-decoration: underline; color: #8C8C8C }
a:hover { color: #a1a1a1; text-decoration:underline }

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

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

.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:#8c8c8c;background-color:#f1f1f1;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 #dddddd; background-color: #f4f4f4 }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #f4f4f4; border:1px solid #dddddd; line-height:150%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #FFB03F;background-color: #FFB03F;padding:0px;margin:0px; display: none }
#submenu { border:1px dotted #000000;background-color: #FFB03F;font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C;font-weight:bold; display: none }
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #3A4F6C; }
#userlinks { border:1px solid #ddd; background-color: #ededed; padding-top: 0px; padding-bottom: 0px; }

.customsubmenu{ text-align: center; border: 1px solid #DDDDDD; padding: 0px; text-transform: uppercase; font-size: 18px; margin: 10px 3px 0px 3px; color:#949494; font-weight:bold; text-align:center; text-position:bottom; height: 30px; background-image: url(http://70.85.81.229/3658/182/upload/p1269285.gif) }

.customsubmenu a { font-weight:bold; font-size:10px; text-decoration: none; color: #949494; padding-top: 10px; padding-bottom: 8px; padding-left: 25px; padding-right: 25px; border: 1px solid #E3E3E4; border-left: 1px solid #FAFAFA; border-top: 1px solid #FAFAFA; background-image:url(http://70.85.81.229/3658/182/upload/p1269285.gif); }

.customsubmenu a:hover { text-decoration:none; padding-top: 10px; padding-bottom: 8px; padding-left: 25px; padding-right: 25px; border: 1px solid #E3E3E4; background-image: url(http://70.85.81.229/3658/182/upload/p1269285.gif); background-position:top center; color: #949494; }

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

.activeuserstrip { background-color:#f1f1f1; padding:6px }

.pformstrip { background-color: #EDEDED; color:#8C8C8C;font-weight:bold;padding:7px;margin-top:1px; background-image:url(http://67.15.129.139/5879/36/pip/titlemedium.png) }
.pformleft { background-color: #f4f4f4; padding:6px; margin-top:1px;width:25%; border-top:1px solid #ddd; border-right:1px solid #ddd; }
.pformleftw { background-color: #f6f6f6; padding:6px; margin-top:1px;width:40%; border-top:1px solid #ddd; border-right:1px solid #ddd; }
.pformright { background-color: #f4f4f4; padding:6px; margin-top:1px;border-top:1px solid #ddd; }

.post1 { background-color: #f1f1f1 }
.post2 { background-color: #f1f1f1 }
.postlinksbar { background-color:#D1DCEB; padding:7px; margin-top:1px; font-size:10px; background-image:url(http://67.15.129.139/5879/36/pip/titlemedium.png) }

.row1 { background-color: #f4f4f4 }
.row2 { background-color: #f4f4f4 }
.row3 { background-color: #f4f4f4 }
.row4 { background-color: #f4f4f4 }

.darkrow1 { background-color: #f7f7f7; color:#8c8c8c; }
.darkrow2 { background-color: #BCD0ED; color:#3A4F6C; background-image:url(http://67.15.129.139/5879/36/pip/darkrow2.png) }
.darkrow3 { background-color: #f6f6f6; color:#ddd; background-image:url(http://67.15.129.139/5879/36/pip/titlemedium.png); }
div.row4 { border-bottom:0px solid;margin-bottom:0px; margin: 3px; padding:1px; background-color: f4f4f4; border-color: #ddd!important }
.darkrow3 .desc { background: transparent; color:#ccc }

.hlight { background-color: #DFE6EF }
.dlight { background-color: #EEF2F7 }

.titlemedium { font-weight:bold; color:#8C8C8C; padding:7px; margin:0px; background-image: url(http://67.15.129.139/5879/36/pip/titlemedium.png) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #8C8C8C }

.maintitle { text-align: center; vertical-align: top; font-weight:bold; color:#8C8C8C; letter-spacing:1px; padding:8px 0px 8px 5px; background-image: url(http://67.15.129.139/5879/36/pip/maintitle.png) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #8C8C8C }
.maintitle a:hover { text-decoration: underline }

.plainborder { border:0px solid #ddd;background-color:#f4f4f4 }
.tableborder { border:1px solid #dddddd; background-color:#dddddd; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid #ddd;background-color:#f1f1f1; padding:6px; }
.tablepad { background-color:#f1f1f1!important; padding: 6px; }
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }
.outertable { background: #f4f4f4; border: 1px solid #787878; width:830px; padding-left: 3px; padding-right: 3px; padding-top: 3px; padding-bottom: 3px; }
.innertable { width: 100%; }
html>body .innertable { width: 98% }
.banner { background-image:url(http://67.15.129.139/5879/36/pip/banner.png); background-position: center; }


.wrapmini { float:left; line-height:1.5em; width:20% }
.pagelinks { float:left; line-height:1.2em; width:35% }

.desc { font-size:10px; color:#8c8c8c; background-color: f1f1f1; }
.edit { font-size: 9px }

.signature { font-size: 10px; color: #339 }
.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 }



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

#quote { border-right: #d7dadf 1px dotted; padding-right: 3px; background-position: right top; border-top: #d7dadf 1px dotted; padding-left: 4px; font-size: 11px; background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/quote.jpg); padding-bottom: 4px; border-left: #d7dadf 4px solid; color: #647286; padding-left: 4px; border-bottom: #d7dadf 1px dotted; background-repeat: no-repeat; font-family: Verdana, Arial; background-color: #f5f5f5
}

#code { border-right: #d7dadf 1px dotted; padding-right: 2px; border-top: #d7dadf 1px dotted; padding-left: 2px; font-size: 11px; padding-bottom: 2px; border-left: #d7dadf 4px solid; color: #647286; padding-top: 2px; border-bottom: #d7dadf 1px dotted; font-family: Courier, Courier New, Verdana, Arial; background-color: #f5f5f5 }

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

.codebuttons { border-right: #d7dadf 1px solid; border-top: #d7dadf 1px solid; font-size: 10px; background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/codebuttons.jpg); vertical-align: middle; border-left: #d7dadf 1px solid; border-bottom: #d7dadf 1px solid; font-family: verdana, helvetica, sans-serif }

input { border-right: #d7dadf 1px solid; padding-right: 2px; background-position: right bottom; border-top: #d7dadf 1px solid; padding-left: 2px; font-size: 10px; background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/postbg.jpg); padding-bottom: 2px; vertical-align: middle; border-left: #d7dadf 1px solid; color: #687688; padding-top: 2px; border-bottom: #d7dadf 1px solid; font-family: verdana, helvetica, sans-serif; background-color: #f8f8f8 }

select { border-right: #d7dadf 1px solid; padding-right: 2px; background-position: right bottom; border-top: #d7dadf 1px solid; padding-left: 2px; font-size: 10px; background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/postbg.jpg); padding-bottom: 2px; vertical-align: middle; border-left: #d7dadf 1px solid; color: #687688; padding-top: 2px; border-bottom: #d7dadf 1px solid; font-family: verdana, helvetica, sans-serif; background-color: #f8f8f8 }

textarea { border-right: #d7dadf 1px solid; padding-right: 2px; background-position: right bottom; border-top: #d7dadf 1px solid; padding-left: 2px; font-size: 10px; background-image: url(); padding-bottom: 2px; vertical-align: middle; border-left: #d7dadf 1px solid; color: #687688; padding-top: 2px; border-bottom: #d3d5d8 1px solid; font-family: verdana, helvetica, sans-serif; background-color: #f4f4f4 }

.textinput { border-top: #d7dadf 1px solid; background-position: left top; border-top: #d7dadf 1px solid; font-size: 10px; vertical-align: middle; border-left: #d7dadf 1px solid; border-bottom: #d7dadf 1px solid; background-repeat: repeat-x; font-family: verdana, helvetica, sans-serif; background-color: #f4f4f4 }

.radiobutton { border-right: #d7dadf 1px solid; background-position: left top; border-top: #d7dadf 1px solid; font-size: 10px; background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/darkrow2.jpg); vertical-align: middle; border-left: #d7dadf 1px solid; border-bottom: #d7dadf 1px solid; background-repeat: repeat-x; family-font: verdana, helvetica, sans-serif; background-color: #f8f8f8 }

.forminput { border-top: #d7dadf 1px solid; background-image: url(http://i7.photobucket.com/albums/y277/sicakura/miscellaneous/codebuttons.jpg); background-position: left top; border-top: #d7dadf 1px solid; font-size: 10px; vertical-align: middle; border-left: #d7dadf 1px solid; border-bottom: #d7dadf 1px solid; background-repeat: repeat-x; font-family: verdana, helvetica, sans-serif; background-color: #f4f4f4}

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

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


<body bgcolor="#f5f5f5" leftmargin="2" topmargin="2" marginwidth="2" marginheight="0" alink="#8c8c8c" vlink="#8c8c8c">
<table class="outertable" width="830" background="#fafafa" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style= colspan="0" cellpadding="2">

<!-- submenu -->
<div class="banner" width="100%">
<img src='http://67.15.129.139/5879/36/pip/banner.png'></div>
<table width="100%">
<td class="customsubmenu" align='center' width="100%">
<a href='http://s15.invisionfree.com/SliverSkin/index.php?act=site'>PORTAL</a><a href='http://s15.invisionfree.com/SliverSkin/index.php?act=Help'>HELP</a><a href='http://s15.invisionfree.com/SliverSkin/index.php?act=Search&f='>SEARCH</a><a href='http://s15.invisionfree.com/SliverSkin/index.php?act=Members'>MEMBERS</a><a href='http://s15.invisionfree.com/SliverSkin/index.php?act=calendar'>CALENDAR</a>
</td>
</table>

<% BOARD HEADER %>
<div class="innertable" style="padding:5px; margin: 3px; background: #ededed; border:1px solid #dddddd;" width="80%">
<% NAVIGATION %>
<% BOARD %>
</div>
<% STATS %>
<br>
<br>
<center>
<table width="99%" height="15px" style="border:1px solid #ddd;">
<tr>
<td style="background: #ededed; font-family:arial; font-size:10px; color: #8c8c8c; width:100%; height:15px; text-align: center; align: left">
<b>Sliver</b> skin created by <b>Karumi</b> of <a href="http://s13.invisionfree.com/LCF">LCF</url>.
</td>
</tr>
</table>
</center>


</div>
</td>
</center>
</tr>
</table>
</center>

Everything is done yourself with no forms. Those are the best three skins I can do, and maybe I'll be better in a few years.
Oo, I also have you know, that it took 2 days to figure out why the table in that skin wasn't working in firefox, and not even the skin support experts on IFSZ could figure it out. I finally fixed it on my own. XD I'm very pround of that.

[chibipyroduo]

::pat on the back:: Your right I'm dumb, geez and you don't want to major in computer graphics? You seem to be really good at it.