 Codes & Images & Terms of use
| Paperfailsnail |
|
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 / USAGEThis 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  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 |
|
Administrator
Group: Admin
Posts: 7
Member No.: 1
Joined: 7-March 09
|
| 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&CODE=01&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 |
|
Administrator
Group: Admin
Posts: 7
Member No.: 1
Joined: 7-March 09
|
FORUM BUTTONSadmin 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.) |
Delete
|
|
|
|
| Paperfailsnail |
|
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:
Track this topic
Receive email notification when a reply has been made to this topic and you are not active on the board.
Subscribe to this forum
Receive email notification when a new topic is posted in this forum and you are not active on the board.
Download / Print this Topic
Download this topic in different formats or view a printer friendly version.
|
Help
Search
Members
Calendar
