zIFBoards - Free Forum Hosting
Free Forums. Reliable service with over 8 years of experience.

Learn More · Sign-up for Free
Welcome to Paperfailsnailnine. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Name:   Password:






 
Add reply
New topic
New Poll

 Codes & Images & Terms of use
Paperfailsnail
Posted: Mar 13 2009, 06:25 PM


Administrator


Group: Admin
Posts: 7
Member No.: 1
Joined: 7-March 09



first post: About
Second Post: Codes
Third Post: Buttons
Fourth Post: Toolbox

ABOUT / USAGE

This is the TWELFTH public skin I've finished, inspired by a challenge on Skin Me Pretty. The skin was to be based on one of our favorite songs. I based mine on 'Too Bright To See, Too Loud To Hear' By Underoath (Who I saw in concert yesterday biggrin.gif They were fantastic!! What a perfect time to release this skin haha.)

Palette by Jules!!

Do not rip or steal or claim as your own.
Leave the copyright alone.
You are allowed to make minor changes. Ex: Change font/link colors/families/sizes, provided it is not a big change and you still keep the copyright on it.
Rehost all images, for the love of all things holy!
If you wish to make any larger changes, you must contact me and get my permission first
Paperfailsnail
Posted: Mar 13 2009, 06:26 PM


Administrator


Group: Admin
Posts: 7
Member No.: 1
Joined: 7-March 09



CODES / IMAGES

IMAGES TO REHOST IN CSS:

IMAGE 1 http://i42.tinypic.com/2csf95x.jpg
IMAGE 2 http://i41.tinypic.com/dnnlo2.jpg
IMAGE 3 http://i39.tinypic.com/fp02eu.jpg

in the board wrappers:

QUOTE (Admin cp -skinning & Styles - manage stylesheets)

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: #a8a8a8; margin:0px 0px 0px 0px;background:#d8d8d8}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #a8a8a8; }
a:link, a:visited, a:active { text-decoration: none; color: #686666; letter-spacing:1px; }
a:hover { color: #686666; text-decoration:none }

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

#ipbwrapper {margin-left:auto;margin-right:auto; width:850px;}

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; }
.googlepaper {color: #cde5cd; font-weight:normal;}
.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; padding:3px; margin:0px; font-weight:bold; color:#a8a8a8; text-transform: uppercase; font-size:8px; padding:3px; margin:0px; background: #d8f0d8; border:1px solid #cde5cd; }

.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:normal; text-align:center; text-transform:uppercase; }
#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 #c9c9c9;background:#e9e9e9 url(IMAGE 1) bottom right no-repeat; padding:10px 10px 40px 10px; }
#ucpmenu .maintitle, #ucpcontent .maintitle {padding:25px 0px 20px 120px; vertical-align:middle; font-weight:normal; color:#a8a8a8; font-size:20px; text-transform:uppercase; letter-spacing:1px; background: url(IMAGE 2) top left no-repeat; }

#ucpmenu p  { padding:2px 5px 6px 9px; margin:0px; background: #f0f0f0; border: 1px solid #dfdddd; }
#ucpcontent { line-height:150%; width:auto;
border:1px solid #c9c9c9;background:#e9e9e9 url(IMAGE 1) bottom right no-repeat; padding:10px 10px 40px 10px; }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { background: transparent; padding:0px;margin:0px; }
#submenu   { display:none;}
#userlinks { border:1px solid #CBE3CB; background:#D8F0D8; text-transform:uppercase; color:#7d7d7d; }
#userlinks td {font-size:8px;}

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

.activeuserstrip { background-color:transparent; padding:3px }

.pformstrip { font-weight:bold; color:#a8a8a8; text-transform: uppercase; font-size:8px; padding:3px; margin:0px; background: #f0f0d8; border:1px solid #e8e8b0; }
.pformleft  { background-color: #f0f0f0; padding:3px; width:25%; border-left: 1px solid #dfdddd; }
.pformleftw { background-color: #f0f0f0; padding:3px;  width:40%; border:1px solid #dfdddd; }
.pformright { background-color: #f0f0f0; padding:3px; margin-top:1px; border-right:1px solid #dfdddd; }

.post1, .post2 { background-color: #f0f0f0; border:1px solid #dfdddd; padding:3px; }
.postlinksbar { font-weight:bold; color:#a8a8a8; text-transform: uppercase; font-size:8px; margin-top:6px; background:transparent;}
.postlinksbar strong {background: #f0f0d8; border:1px solid #e8e8b0; padding:3px; }

.row1 { background: #f0f0f0; border: 1px solid #dfdddd; }
.row2 { background: #f0f0f0; border:1px solid #dfdddd; }
.row3 { background: #f0f0f0; border: 1px solid #dfdddd; }
.row4 { background: #f0f0f0; border:1px solid #dfdddd; }
.row4 b a {font-weight:normal;}
td.row4 div.row4 {border:0px;}
td.row4 div.row4 .postdetails {margin-top:-3px; margin-bottom:-3px;}
/*for buttons*/
td.row4 div { padding:4px; }

.darkrow1 { background: transparent; color:#a8a8a8; }
.darkrow2 { background-color: transparent; color:#a8a8a8; }
.darkrow3 { background: transparent; text-transform:uppercase; color:#a8a8a8; padding:0px; }
.darkrow3 div {border:1px solid #CBE3CB; background:#D8F0D8; text-transform:uppercase; color:#a8a8a8; padding:3px;}
.darkrow3 div.darkrow3 {border:0px; background:transparent; padding:3px 0px 0px 0px;}

.hlight { background: #d8f0d8; border: 1px solid #dfdddd; }
.dlight { background: #f0f0f0; border: 1px solid #dfdddd; }

.titlemedium { font-weight:bold; color:#a8a8a8; text-transform: uppercase; font-size:8px; padding:3px; margin:0px; background: #f0f0d8; border:1px solid #e8e8b0; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #a8a8a8 }

.maintitle { vertical-align:middle;font-weight:normal; color:#a8a8a8; font-size:20px; text-transform:uppercase; letter-spacing:1px; padding:18px 0px 20px 165px; background: url(IMAGE 3) top left no-repeat; }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #a8a8a8 }
.maintitle a:hover { text-decoration: none }
.maintitle img {display:none;}

.plainborder { border:1px solid #c9c9c9;background:#e9e9e9 url(IMAGE 1) bottom right no-repeat; padding:10px 10px 40px 10px; }
.tableborder { border:1px solid #c9c9c9;background:#e9e9e9 url(IMAGE 1) bottom right no-repeat; padding:10px 10px 40px 10px; margin:0px; width:100% }
.tablefill   { padding:6px;   }
.tablepaper {color: #cde5cd; font-weight:normal;}
.tablepad    { background-color:#f0f0f0;padding:3px }
.tablebasic  { width:100%; padding:10px; margin:0px; border:1px solid #c9c9c9; background:#e9e9e9; }

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

.desc { font-size:10px; color:#a8a8a8; text-align:justify; display:block; margin-top:;}
b .desc {border:1px solid #CBE3CB; background:#D8F0D8; padding:3px;}
.edit { font-size: 9px }

.signature   { font-size: 10px; color: #a8a8a8 }
.postdetails { font-size: 10px; display: block; padding:3px; background: #f0f0d8; border:1px solid #e8e8b0;}
.postcolor   { font-size: 11px; line-height: 120% }

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

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

#QUOTE, #CODE { font-family: Verdana, Arial; font-size: 10px; color: #a8a8a8; background-color: #d8f0d8; border: 1px solid #cde5cd; 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-family: verdana, helvetica, sans-serif; vertical-align: middle; border:1px solid #CBE3CB; background:#D8F0D8; font-size:8px; text-transform:uppercase; font-weight:bold; color: #a8a8a8; }
.forminput, .textinput, .radiobutton, .checkbox  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #a8a8a8; border:1px solid #CBE3CB; background:#D8F0D8; }
.forminput {text-transform:uppercase; font-weight:bold; font-size:8px;}

.thin { padding:3px; line-height:140%; margin:2px 0px 2px 0px;border:1px solid #CBE3CB; background:#D8F0D8; }

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

.tableborder table {background: transparent; padding:5px 5px 5px 40px;}
/*fix*/
.pformleft table {padding:5px;}
#ucpcontent .tableborder {padding-left:0px; padding-right:0px;}
#ucpcontent .tableborder table {padding:0px;}

#headerdiv .tableborder table {padding:0px;}

.maintable {width:850px; border-left: 150px solid #888787;}
.maintd {padding:20px 70px 20px 50px;}
.credit div.row4 {border:0px!important; background:transparent; margin-top:-10px!important; font-size:8px!important;}

.menusub {text-align:right; vertical-align:center; padding:3px 100px 5px 3px;}

.clickwrap {background: #f0f0f0; border:1px solid #dfdddd; padding:3px;}
.click {display:inline;}
.clickconto { padding:5px;}
.clickcont {display:none;padding:5px;}
#links a {padding-left:10px; padding-right:10px;}

.clickwrap h1 {font-size:18px; text-transform:uppercase; font-weight:normal; margin-bottom:-5px;}

.button {display:inline; background: #f0f0f0;  border:1px solid #c9c9c9; padding:5px 5px 5px 5px; text-transform:capitalize; margin:1px 1px 1px 3px;}




QUOTE (Admin cp -skinning & Styles - board wrappers -javascript)

<script language="javascript">
var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index, AccHeight)
{
ContentHeight = AccHeight;
var nID = "menu" + index;
if(openAccordion == nID)
  nID = '';

setTimeout("animate("
    + new Date().getTime() + "," + TimeToSlide + ",'"
    + openAccordion + "','" + nID + "')", 33);

openAccordion = nID;
}

function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var opening = (openingId == '') ?
    null : document.getElementById(openingId);
var closing = (closingId == '') ?
    null : document.getElementById(closingId);

if(timeLeft <= elapsedTicks)
{
  if(opening != null)
    opening.style.height = ContentHeight + 'px';

  if(closing != null)
  {
    closing.style.display = 'none';
    closing.style.height = '0px';
  }
  return;
}

timeLeft -= elapsedTicks;
var newClosedHeight =
    Math.round((timeLeft/TimeToSlide) * ContentHeight);

if(opening != null)
{
  if(opening.style.display != 'block')
    opening.style.display = 'block';
  opening.style.height =
      (ContentHeight - newClosedHeight) + 'px';
}

if(closing != null)
  closing.style.height = newClosedHeight + 'px';

setTimeout("animate(" + curTick + "," + timeLeft + ",'"
    + closingId + "','" + openingId + "')", 33);
}
</script>
QUOTE (Admin cp -skinning & Styles - board wrappers -header & body)

<table class="maintable">
<tr><td class="maintd">
<div id="headerdiv"><div class="tableborder">
<% BOARD HEADER %>
<% NAVIGATION %>

<div class="clickwrap">

<!-----IMAGES FOR DROP DOWN MENU------>
<!-----WELCOME------>
<div onclick="runAccordion(1,210);" class="click"> <img src="WELCOME"></div>

<!-----BOARD INFO------>
<div onclick="runAccordion(2,210);" class="click"> <img src="BOARD INFO"></div>

<!-----STAFF------>
<div onclick="runAccordion(3,210);" class="click">
<img src="STAFF"></div>

<!-----AWARDS------>
<div onclick="runAccordion(4,210);" class="click">
<img src="AWARDS "></div>

<!-----LINKS------>
<div onclick="runAccordion(5,210);" class="click">
<img src="LINK US"></div>

<!-----CREDITS------>
<div onclick="runAccordion(6,60);" class="click">
<img src="CREDITS"></div>
<br>

<div class="clickconto" id="links">
<!-----QUICKLINKS------> Quickies:
<a href="linkhere">Rules</a>
<a href="linkhere">Plot</a>
<a href="linkhere">Canons</a>
<a href="linkhere">Face Claim</a>
<a href="linkhere">Advertise</a>
<a href="linkhere">Application</a>
<a href="linkhere">Updates</a>
<a href="linkhere">Our Advert</a>
</div>

<div id="menu1" class="clickconto">

<!-----WELCOME TEXT------>

<table><tr><td width="100%" valign="top">

<h1>Welcome!</h1>
Write a welcome message here!


</td>
<td rowspan="2">

Cbox code goes here!!

</td></tr><tr><td valign="bottom">

<!---QUICK LOGIN--->

<center><form style='display:inline' action="http://BOARD URL HERE/index.php?amp;act=Login&amp;CODE=01&amp;CookieDate=1" method="post">
<strong>Quick Log In</strong>
<input type="text" class="forminput" size="10" name="UserName" onfocus="this.value=''" value="User Name" />
<input type='password' class='forminput' size='10' name='PassWord' onfocus="this.value=''" value='ibfrules' />
<input type='submit' class='forminput' value='Go' />
</form></center>

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

<div id="menu2" class="clickcont">

<!-----BOARD INFO TEXT------>

<table width="100%"><tr><td valign="top">

<h1>Plot Information</h1>
here is some info about our board's plot

</td><td valign="top">

<h1>Setting Information</h1>
here is some info about our board's setting

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

<div id="menu3" class="clickcont">

<!-----STAFF TEXT------>

<table width="100%"><tr><td valign="top">

<h1>Administration</h1>
Admin 1<br>
<b>Contact:</b><br>
<b>Characters:</b><br>

</td><td valign="top">

<h1>Moderation / Staff</h1>
Mod 1<br>
<b>Contact:</b><br>
<b>Characters:</b><br>

</td></tr></table>

</div>

<div id="menu4" class="clickcont">

<!-----AWARDS TEXT------>

<table width="100%"><tr><td valign="top">

<h1>Character of The Month</h1>
here is some info about our COTM

</td><td valign="top">

<h1>Member Of The Month</h1>
here is some info about our MOTM

</td><td valign="top">

<h1>Ship Of The Month</h1>
here is some info about our SOTM

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

<div id="menu5" class="clickcont">

<!-----ADVERTISEMENTS TEXT------>

<table width="100%"><tr><td valign="top" width="120px">

<h1>Our Info</h1>
<a href="your board link  here"><img src="your affiliate button img url here" width="88px" height="31px"></a>
<br>
<textarea width="100%" readonly="readonly" onclick="this.focus();this.select()" rows="5" cols="18" style="overflow: hidden;">
<a href="your board link  here"><img src="your affiliate button img url here" width="88px" height="31px"></a>
</textarea><br>

<a href="">Get Listed?</a>

</td><td valign="top">

<h1>Our Affiliates:</h1>
<div style="width:100%; height:180px; overflow:auto;">

YOUR AFFILIATES CODES CAN GO HERE!

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

<div id="menu6" class="clickcont">

<!-----CREDITS TEXT------>

<center><a href="http://z8.invisionfree.com/paperfailsnailnine/index.php?">Too Bright To See, Too Loud To Hear</a> skinned (with graphics) by Paperfailsnail of <a href="http://z8.invisionfree.com/skin_me_pretty/index.php?showuser=16">SMP</a> and <a href="http://forums.redcarpetrebellion.net/index.php?">RC&R</a> and <a href="http://forums.designer-drug.info">DD</a>.</center>

</div>

</div><br>

</div></div>
<br><br>
<% BOARD %>
<% STATS %>

<div class="tableborder">
<div class="credit">
<center><a href="http://z8.invisionfree.com/paperfailsnailnine/index.php?">Too Bright To See, Too Loud To Hear</a> skinned (with graphics) by Paperfailsnail of <a href="http://z8.invisionfree.com/skin_me_pretty/index.php?showuser=16">SMP</a> and <a href="http://forums.redcarpetrebellion.net/index.php?">RC&R</a> and <a href="http://forums.designer-drug.info">DD</a>.</center>




QUOTE (Admin cp -skinning & Styles - board wrappers - footer)

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


QUOTE (admin cp - skinning & styles - images - logo)

<div class="menusub">
<a href="http://YOURBOARDURL/index.php?">Index</a> <a href="http://YOURBOARDURL/index.php?act=site">Portal</a> <a href="http://YOURBOARDURL/index.php?act=Help">Help</a> <a href="http://YOURBOARDURL/index.php?act=Search&f=">Search</a> <a href="http://YOURBOARDURL/index.php?act=Members">Members</a> <a href="http://YOURBOARDURL/index.php?act=calendar">Calendar</a>
</div>
Paperfailsnail
Posted: Mar 13 2009, 06:26 PM


Administrator


Group: Admin
Posts: 7
Member No.: 1
Joined: 7-March 09



FORUM BUTTONS
admin cp - skinning & styles - images

REHOST IMAGES:
http://i40.tinypic.com/309lq2w.jpg <-- Forum marker
http://i43.tinypic.com/14ui1pd.jpg <--- forum marker (no new posts)


QUOTE (new topic - add reply - new poll - quick reply - topic options)

<div class="button">New topic</div>


QUOTE ( edit - delete -report - aim - email - profile card - etc.)

&nbsp;Delete&nbsp;
Paperfailsnail
Posted: Mar 13 2009, 06:27 PM


Administrator


Group: Admin
Posts: 7
Member No.: 1
Joined: 7-March 09



Toolbox
You'll notice I've installed a toolbar in the header of this one. It's basically a hide/show menu, depending on what button you click ^^ This is very similar to a sidebar! Except all the extras are hidden until you want to see them ^^

The coding isn't that much different than a sidebar, and editing it isn't any more difficult, all the content is in containing divs. I put tables inside some of my divs to make columns (EX: board info and staff) n.n but you can remove those tables if you like! It was just a way I thought people may want to organize their information.

I added HTML notes to the top of each section so you can tell where the different sections start. If you have any difficulties, contact me on SMP or RC&R ^^
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
DealsFor.me - The best sales, coupons, and discounts for you

Topic Options
Add reply
New topic
New Poll


Too Bright To See, Too Loud To Hear skinned (with graphics) by Paperfailsnail of SMP and RC&R and DD.

Hosted for free by zIFBoards* (Terms of Use: Updated 2/10/2010) | Powered by Invision Power Board v1.3 Final © 2003 IPS, Inc.
Page creation time: 0.1998 seconds | Archive