Invisionfree Skin How-to Put On Your Forum

miikerocks

Jul 10 2008, 06:17 PM

Hey All who may want an invisionfree forum skin, because they are tired of their old, boring, squarish one.
Well I helped with this skin, and I'm going to give an explanation for starting users, so that they may too, have a nice forum skin!
First of all, when installing a new skin on your board, no upload or download is needed. You will most definately have to replace your old forum CSS or "Style sheets" (as called in the invisionfree Admin CP).

You will almost all the time have to place something in the footer (in Board wrappers IN THE ADMIN CP), and usually a header and body (also in the Board Wrappers). Sometimes the maker of the skin includes their own banner in the forum code and you may want it deleted (usually you do). So here I'm providing a skin with NO BANNER included in it. You may change the copyright, because I want to have a forum thats completely yours. Once you make it your style, I hand it over to you to do what you want with it! (But if you post it somewhere else atleast leave a reference to my site!)
I also included a song, which you may remove by using my other code in this post (you will see...)
AS WELL: If you want a song of the day or week, and you dont no html, PM ME and i will do it for you. Simply provide me your forum Board wrappers (NOT ACCESS TO YOUR CP)

Click here for Preview OF MY SITE ITSELF
Click here for an actual image of my Site (notice the music player)

Insert the following code into your forum CSS (AKA style sheets, go to admin cp>>Skinning and styles>>>Manage style sheets).

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: 9px; color: #fff; margin:0px 0px 0px 0px; background-color:#001D33 }
BODY { scrollbar-face-color: #0066FF;
scrollbar-shadow-color: #282828;
scrollbar-highlight-color: #282828;
scrollbar-3dlight-color: #323232;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #141414;
scrollbar-arrow-color: #004070}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #FFF; }
a:link, a:visited, a:active { text-decoration: none; color: #FFF }
a:hover { color: #00C2FF; text-decoration:none }

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

img.attach { border:1px 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 }

#ipbwrapper { text-align:left; width: 750px; margin-left:auto;margin-right:auto; overflow:hidden }
#ipbwrapper .maintitle {
text-align: center;
background-image: url(http://209.85.12.227/6969/128/upload/p5935187.jpg);
background-position:center;
padding: 0px 2px 0px 2px!important;
height: 12px;
color: #00243D;
}
#ipbwrapper div.desc {
color: #0096FF;
background-color: #005088;
}

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:#777;background-color:#DFE6EF;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:100%;width:22%; border:1px solid #00243D;background-color: #005088 }
#ucpmenu p { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #005088; border:1px solid #00243D;line-height:100%; width:auto }
#ucpcontent p { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top: 0px;right:5%; }
#logostrip { border: 0px solid #000;background-color: #000;overflow: hidden;background-image:url();padding:0px;margin:0px }
#submenu { border:1px solid #00243D;background-color: #005088;background-image: url(http://209.85.12.227/6969/128/upload/p5940130.jpg); font-size:10px;margin:3px 0px 3px 0px;color:#fff;font-weight:bold;}
#submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #fff; }
#submenu { display: none; }
#userlinks { border:1px solid #00243D; background-color: #005088; background-image: url(http://209.85.12.227/6969/128/upload/p5940130.jpg) }

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

.activeuserstrip { background-image: url(http://209.85.12.227/6969/128/upload/p5935493.jpg); background-color:#005088; padding:6px }

.pformstrip { background-color: #005088; background-image: url(http://209.85.12.227/6969/128/upload/p5935318.jpg); color:#00243D;font-weight:bold;padding:7px;margin-top:1px }
.pformleft { background-color: #005088; padding:6px; margin-top:1px;width:25%; border-top:1px solid #00243D; border-right:1px solid #00243D; }
.pformleftw { background-color: #005088; padding:6px; margin-top:1px;width:40%; border-top:1px solid #00243D; border-right:1px solid #00243D; }
.pformright { background-color: #005088; padding:6px; margin-top:1px;border-top:1px solid #00243D; }

.post1 { background-color: #005088 }
.post2 { background-color: #005088 }
.postlinksbar { background-color:#005088;padding:6px;margin-top:1px;font-size:10px; background-image: url(http://209.85.12.227/6969/128/upload/p5935493.jpg) }

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

.darkrow1 { background-color: #005088; color:#00243D; }
.darkrow2 { background-color: #005088; color:#00243D; background-image: url(http://209.85.12.227/6969/128/upload/p5935318.jpg) }
.darkrow3 { background-color: #005088; color:#00243D; background-image: url(http://209.85.12.227/6969/128/upload/p5935318.jpg) }

.hlight { background-color: #012545 }
.dlight { background-color: #012545 }

.titlemedium { font-weight:bold; color:#0096FF; padding:7px; margin:0px; background-image: url(http://209.85.12.227/6969/128/upload/p5935298.jpg) }
.titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: none; color:#0096FF }

.maintitle { text-align: center; vertical-align:middle; font-weight:bold; color:#002C4A; letter-spacing:1px; padding:8px 0px 8px 5px; background-image: url(http://209.85.12.227/6969/128/upload/p5935187.jpg) }
.maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #0073C3 }
.maintitle a:hover { text-decoration: none }

.plainborder { border:1px solid #005088;background-color:#00243D }
.tableborder { border:1px solid #005088;background-color:#00243D; padding:0px; margin:0px; width:100% }
.tablefill { border:1px solid#005088;background-color:#00243D;padding:6px; }
.tablepad { background-color:#00243D;padding:6px }
.tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

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

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

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

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #01C2FF; background-repeat: repeat-x; background-image: url(http://209.85.12.227/6969/128/upload/p5940600.jpg); border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #465584; background-color: #01C2FF; background-repeat: repeat-x; background-image: url(http://209.85.12.227/6969/128/upload/p5940600.jpg); border: 1px solid #000; 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; background-repeat: repeat-x; background-image: url(http://209.85.12.227/6969/128/upload/p5940600.jpg) }
.forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; background-repeat: repeat-x; background-image: url(http://209.85.12.227/6969/128/upload/p5940600.jpg);background-color: #01C2FF }

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

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

.customsubmenu{
text-align: center;
border: 1px solid #012545;
padding: 0px;
text-transform:
uppercase;
font-size: 18px;
margin: 10px 0px 0px 0px;
color: #00C2FF;
font-weight:bold;
text-align:center;
text-position:bottom;
height: 20px;
background-image: url(http://209.85.12.227/6969/128/upload/p5935318.jpg)
}

.customsubmenu a {
font-weight:bold;
font-size:10px;
text-decoration: none;
color: #00C2FF;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
padding-right: 20px;
border: 1px solid #012545;
border-left: 1px solid #012545;
border-top: 1px solid #012545;
background-image:url(http://209.85.12.227/6969/128/upload/p5935318.jpg); }

.customsubmenu a:hover { text-decoration:none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
padding-right: 20px;
border: 1px solid #012545;
background-image: url(http://209.85.12.227/6969/128/upload/p5935318.jpg);
background-position:top center;
color: #00C2FF;
}

Now insert the following into your Footer (header+body last because it needs explaining):

QUOTE

<br/>
</td><td align="right" valign="top" background="http://209.85.12.227/6969/128/upload/p5940677.jpg" style="padding:7px;border:0px;"></td></tr></table>

<script type='text/javascript'>
//miikerocks
var doHTML_open = 0;
td = document.getElementsByTagName("td");
for(x=0;x<td.length;x++)
{
if(td[x].className=="pformright" && td[x].innerHTML.match(/Close all Tags/i))
{
content = td[x].innerHTML;
td[x].innerHTML = "<input type='button' value='doHTML' onclick='simpletag(\"doHTML\")' class='codebuttons' name='doHTML' style=\"font-weight:bold\" />" + content;
}
}
</script>

NOW FOR HEADER AND BODY. (All wriiting in red you MUST EDIT)
Below is if you want the music player included (pm me and i can change it with song of your choice, next version (after this) is without music.

QUOTE

<center><body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#ffffff" vlink="#ffffff">
<table cellspacing="0" bgcolor="#000000" valign="top" height="100%" width="750"><tr><td valign="top" height="100%" background="http://209.85.12.227/6969/128/upload/p5940673.jpg" style="padding:9";border:0px;"></td><td height="100%" valign="top"style="padding:0px;">

<table width="100%" >
<td class="customsubmenu" align='center' width="100%">
<a href="http://z11.invisionfree.com/yourBOARDNAMEhere/"> INDEX </a> <a href='http://z11.invisionfree.com/yourBOARDNAMEhere/index.php?act=site'> PORTAL</a><a href='http://z11.invisionfree.com/yourBOARDNAMEhere/index.php?act=Help'> HELP </a><a href='http://z11.invisionfree.com/yourBOARDNAMEhere/index.php?act=Search&f='> SEARCH </a><a href='http://z11.invisionfree.com/yourBOARDNAMEhere/index.php?act=Members'> MEMBERS </a><a href='http://z11.invisionfree.com/yourBOARDNAMEhere/index.php?act=calendar'> CALENDAR</a><p></p>

<div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="210" height="25" id="mp3playerdarksmallv3" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.podbean.com/podcast-audio-video-blog-player/mp3playerdarksmallv3.swf?audioPath=http://www.toolshed-media.com/ts/the-charlatans-uk-blackened-eyes.mp3&autoStart=no" />
<param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="wmode" value="transparent" />

<embed
src="http://www.podbean.com/podcast-audio-video-blog-player/mp3playerdarksmallv3.swf?audioPath=http://www.toolshed-media.com/ts/the-charlatans-uk-blackened-eyes.mp3&autoStart=no" quality="high" width="210" height="25" name="mp3playerdarksmallv3" align="middle" allowScriptAccess="sameDomain" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
</object>
</div>
</td>
</table>
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<br/>
<center><B>©</B> <a href="PUT YOUR USER PROFILE LINK HERE" target="_blank"><B>PUT YOUR USER NAME HERE</a></b>-><b><a href="http://z11.invisionfree.com/yourBOARDNAMEhere" target="_blank">FreeLoads Forum (your forum name here)</a></b><p>
<text color=white>Part of style by inkdropstyles.com</text color></center>

Explanation: for the z11, replace it with yours (examlpe, yours might be s4). Replace yourBOARDNAMEhere with your board (example: mine is FreeLoads, yours might be tut-heaven).
For the stuff below the <% BOARD HEADER %> IS the copyright stuff. The first one, as said, replace with your user profile link, then the second with your username. Then replace the z11 with your own, and the yourBOARDNAMEhere with your board name.
For the last one, put you forum name. (EXAMPLE: whether you put tut-heaven or tut-heaven forum is up to you. The same applies for the second version of the header and body below.

Without music (instead of the one above this is if you want no music) HEADER AND BODY:

QUOTE

END OF TUTORIAL!!!

For extra help: reply or pm me. For requests, please pm me.

PLEASE COMMENT

P.S. please give me more then 1 host credit LOL, this took over an hour. But in the end its up to you, mods and admins.

Comment/Reply (w/o sign-up)

iGuest-AbsolDeath

Jul 27 2008, 12:11 AM

Question about User Profile Link
Invisionfree Skin How-to Put On Your Forum

With all your knowledge I know this question is going to sound absolutely ridiculous but how do I find my User Profile Link. I just made my first forum today so I really have no idea what I'm doing. Please help. Thank you xD

-question by AbsolDeath

Comment/Reply (w/o sign-up)

Invisionfree Skin How-to Put On Your Forum - A skin I partially made, I show you how to put on your forum.

Invisionfree Skin How-to Put On Your Forum - A skin I partially made, I show you how to put on your forum.