Add Reply
New Topic
New Poll

 Only If For The Night, yellow / tan
merc
 Posted: Jun 30 2014, 06:06 PM
Quote
Group Icon
merc ▪ Offline


skin title
You may use the graphics that I have used for the carousel header if you so please, but do not claim them as your own. Please do not remove the credit at the bottom of the skin. Carousel Header by Ring Wang. Please remember to credit these people in your credits.



WRAPPERS
CODE
<html>
<head>
<title><% TITLE %></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<% CSS %>
<% JAVASCRIPT %>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="ipbwrapper">
<div style="padding-top:13px;"></div>
<div class="sp-slideshow">
         
 <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
 <label for="button-1" class="button-label-1"></label>
 
 <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
 <label for="button-2" class="button-label-2"></label>
 
 <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
 <label for="button-3" class="button-label-3"></label>
 
 <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
 <label for="button-4" class="button-label-4"></label>
 
 <label for="button-1" class="sp-arrow sp-a1"></label>
 <label for="button-2" class="sp-arrow sp-a2"></label>
 <label for="button-3" class="sp-arrow sp-a3"></label>
 <label for="button-4" class="sp-arrow sp-a4"></label>
 
 <div class="sp-content">
     <div class="sp-parallax-bg"></div>
     <ul class="sp-slider clearfix">
         <li><div class="slideone">slide 1</div></li>
         <li><div class="slidetwo">slide 2</div></li>
         <li><div class="slidethree">slide 3</div></li>
         <li><div class="slidefour">slide 4</div></li>
     </ul>
 </div>    
</div>
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>
<br />
<center><div class="merccredit">SKIN BY MERC OF <A HREF="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=37282">CAUTION</A> & <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9524">ATF</a></div></center>
<% COPYRIGHT %>
</div><br />
</body>
</html>


STYLESHEETS
CODE
/*
---------------------------------------------------------------
DO NOT REMOVE
----------------------------------------------------------------
*/

html { overflow-x: auto; }

/* The body, general text color and background colors */

BODY {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000; margin:0px;
padding:0px; background-image:url(http://i.imgur.com/XdZDn2j.png);
background-attachment:fixed;
background-position:center;
text-align:center;
}

/* Tables */

TABLE, TR, TD {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 11px;
color: #000;
}

/* Board Width */
#ipbwrapper {
text-align:left;width:900px;margin: 5px auto 0 auto; padding:13px; background-color:#fcfcfc;
}

/* Link Colors */
a:link, a:visited, a:active {
text-decoration: none;color: #191919;
}
a:hover {
color: #191919;
text-decoration:none;
}

/* Calendar style */
.caldate   {
text-align:right;font-weight:bold;font-size:11px;
color:#777;
background-color:#DFE6EF;
padding:4px; margin:0px;
}

#calendarname { font-size:22px; font-weight:bold; }
#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px; }

/* Profile stuff */
#profilename { font-size:28px; font-weight:bold; }
#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid black }
#photoimg   { text-align:center; margin-top:15px }


/* UserCP/My Controls styles */
#ucpmenu    {
line-height:150%;
width:22%;
background-color: #efefed;
}

#ucpmenu a { text-decoration:none;}
#ucpmenu a:hover { text-decoration:underline; }
#ucpmenu p  { padding:2px 5px 6px 9px; margin:0px;  }

#ucpcontent {
background-color: #efefed;
line-height:150%; width:auto;
}
#ucpcontent p  { padding:10px;margin:0px; }

/* Header/Logo area */
#ipsbanner { position:absolute; top:0px;right:5%; }
#logostrip { padding:0px;margin:0px;}

/* Navigation menu */
#submenu   {display:none; }


/* User links menu (ex: Messages  / View new posts / etc ) */
#userlinks { background-color: #e7e2ba; position: fixed; top: 0px; left: 0px; display: block; z-index: 99; text-transform:uppercase; font-size:9px; letter-spacing:2px; }
#userlinks a { text-decoration:none; }
#userlinks a:hover { text-decoration:none; }
#navstrip  { font-weight:none;padding:6px; text-align:center; text-transform:uppercase; font-size:9px; letter-spacing:2px; font-weight:none; }
#navstrip a {color:#191919; text-decoration:none; font-family: 'Open Sans Condensed', sans-serif; padding:6px; border-top:1px solid #e7e2ba; border-bottom:1px solid #e7e2ba;}

/* Topic and post related styles */

.activeuserstrip { background-color:#e7e2ba; padding:3px; font-family:calibri; font-size:9px; text-transform:uppercase; text-align:center; }
.activeuserstrip a { background-color:#e7e2ba; padding:3px; font-family:calibri; font-size:9px; text-transform:uppercase; text-align:center; }

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

.post1 { background-color: #efefed; }
.post2 { background-color: #efefed; }

.postdetails { font-size: 10px; }
.postcolor   { display: block; font: 10px arial; line-height: 95%; margin: 40px; text-align: justify; }

.postlinksbar {
padding:3px;margin-top:1px; font-size:10px;
background-color: #e7e2ba; font-family:calibri; font-size:9px; text-transform:uppercase;
}
.postlinksbar a {font-family:calibri; font-size:9px; text-transform:uppercase;}

.signature   { font-size: 10px; color: #339; line-height:150%;  }

.button-large { display: inline; }

/* Global general table/div row styles */
.row1 { background-color: #efefed; }
.row2 { background-color: #efefed; font-family: 'Open Sans Condensed', sans-serif; }
.row2 a {text-decoration:none; }
.row2 a:hover { text-decoration:none; }
.row3 { background-color: #EEF2F7; }
.row4 { background-color: #efefed;}
.row4 a { }

.darkrow1 { background-color: #e7e2ba; color:#191919; }
th.darkrow1 { text-align:left; }
.darkrow2 { background-color: #ebebeb; color:#fcfcfc; font-size:1px; }
div.darkrow2{ font-size:11px; background-color:#ebebeb; }
.darkrow3 { background-color: #ebebeb; color:#ebebeb; }

.hlight { background-color: #e7e2ba }
.dlight { background-color: #ebebeb }

/* Top table bars / gradient holders */

.maintitle {
vertical-align:middle; letter-spacing:3px;
font-weight:none; text-align:center;
padding:10px; font-family: 'Open Sans Condensed', sans-serif; font-size:11px; text-transform:uppercase;
color:#191919; text-transform:uppercase; padding-bottom:16px;
}

.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #191919; border-top:1px solid #e7e2ba; border-bottom:1px solid #e7e2ba; padding:6px; font-weight:none;}
.maintitle a:hover { text-decoration: none;  }
.maintitle a span {display:none;}
.maintitle b {font-weight:normal;}

/* The bar directly below the maintitles */
.titlemedium {
font-weight:none; color:#fcfcfc; font-family: 'Open Sans Condensed', sans-serif; font-size:10px; text-transform:uppercase; padding:6px; margin:0px; text-align:center;
background-color:#e7e2ba;
}

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  {
text-decoration: none;
color: #191919;
}


/* Forum borders */
.plainborder { background-color:#efefed; }

.tableborder {
background-color:#efefed; padding:10px; margin:0;
}
.tablefill { background-color:#efefed; padding:6px; }
.tablepad { background-color:#e7e2ba; padding:6px; }
.tablebasic { width:100%; padding:0; 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:#434951 }
.edit { font-size: 9px }
.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }

/* QUOTE and CODE BBCode boxes */

#QUOTE {
white-space:normal;
font-family: Verdana, Arial;
font-size: 11px;
color: #465584;
background-color: #FAFCFE;
border: 0px;
padding:2px;
border:1px solid #576984; margin-top:2px;
}

#CODE  {
white-space:normal;
font-family: Courier, Courier New, Verdana, Arial;  
font-size: 11px;
color: #465584;
background-color: #FAFCFE;
border: 0px;
padding:2px;
border:1px solid #576984; margin-top:2px;
}

/* Form related styles */

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

.forminput, .textinput, .radiobutton, .checkbox  {
font-size: 10px;
font-family: calibri;
vertical-align: middle;
border:3px solid #e7e2ba;
margin-top:2px;padding:5px;
background-color: #fcfcfc;
color:#2b2b2b;
display: inline;
}

.codebuttons  {
font-size: 10px;
font-family: calirbi;
vertical-align: middle;
border:3px solid #ebebeb;
margin-top:2px;
background-color: #fcfcfc;
color:#191919;
}

.thin {
line-height:140%;
margin:2px 0px 2px 0px; padding:10px;
background-color:#e7e2ba; border-top:1px solid #fcfcfc; border-bottom:1px solid #fcfcfc;
}

.thin a { text-decoration:none; }

/* More form/general table styles, left/right/top pads */

.pformstrip {
font-weight:none; color:#fcfcfc; font-family: 'Open Sans Condensed', sans-serif; font-size:10px; text-transform:uppercase; padding:6px; margin-top:1px; text-align:center;
background-color:#e7e2ba; padding:2px;
}
.pformstrip a {font-family: 'Open Sans Condensed', sans-serif; font-size:10px; text-transform:uppercase; color:#191919;}

.pformleft  {
background-color: #efefed;
padding:6px; margin-top:1px;width:25%;
}
.pformleftw {
background-color: #efefed;
padding:6px; margin-top:1px;width:40%;  
}
.pformright {
background-color: #efefed;
padding:6px;
margin-top:1px;
}


/* The copyright. Removing or hiding it is against Terms of Service */

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

/* General image styles */
img        { vertical-align:middle; border:0px }
img.attach { border:2px outset #EEF2F7;padding:2px }

/* Misc */
form div.tableborder div.pformstrip {
border-bottom:1px solid #fff; border-top:none}
table.tablebasic td.pformleft { border:none }
table.tablebasic td.pformleftw { border:none }
table.tablebasic td.pformright { border:none }
td.maintitle {background-color:#e7e2ba;}

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

.warngood { color:green }
.warnbad  { color:red }

.sp-slideshow {  position: relative; margin: 10px auto; width: 900px; max-width: 900px; min-width: 260px; height: 375px;}
.sp-content { background: #7d7f72 url(http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/images/grid.png) repeat scroll 0 0;position: relative;width: 100%;height: 100%;overflow: hidden;}
.sp-parallax-bg {
 background:#cccccc;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.sp-slideshow input {position: absolute;bottom: 15px;left: 50%;width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}
.sp-slideshow input + label { position: absolute;bottom: 15px;left: 50%;width: 6px;height: 6px;display: block;z-index: 1000;border: 3px solid #fff;border: 3px solid rgba(255,255,255,0.9);-webkit-transition: background-color linear 0.1s;-moz-transition: background-color linear 0.1s;-o-transition: background-color linear 0.1s;-ms-transition: background-color linear 0.1s;transition: background-color linear 0.1s;}
.sp-slideshow input:checked + label {background-color: #fff;background-color: rgba(255,255,255,0.9);}

.sp-selector-1, .button-label-1 {margin-left: -36px;}
.sp-selector-2, .button-label-2 { margin-left: -18px;}
.sp-selector-4, .button-label-4 {margin-left: 18px;}
.sp-selector-5, .button-label-5 {margin-left: 36px;}
.sp-arrow {position: absolute;top: 50%;width: 28px;height: 38px;margin-top: -19px;display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://i.imgur.com/KpT6GmT.png) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s;
transition: opacity linear 0.3s;}
.sp-arrow:hover{opacity: 1;}
.sp-arrow:active{margin-top: -18px;}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
 right: 15px;
display: block;
background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
 left: 15px;
display: block;
background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}

input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;background-color: #727b7f;}
input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0;background-color: #7f7276;}
input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;background-color: #737f72;}
input.sp-selector-4:checked ~ .sp-content {background-position: -300px 0;background-color: #79727f;}
input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0;background-color: #7d7f72;}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}

.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; }

.sp-slider > li {height: 100%;padding: 0 60px;float: left;text-align: center;opacity: 0.4; -webkit-transition: opacity ease-in 0.4s 0.8s;-moz-transition: opacity ease-in 0.4s 0.8s;-o-transition: opacity ease-in 0.4s 0.8s;-ms-transition: opacity ease-in 0.4s 0.8s;transition: opacity ease-in 0.4s 0.8s; }
.sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0 auto;padding: 40px 0 50px 0;max-height: 100%;max-width: 100%;}

input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;}
input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;}
input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;}
input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;}
input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){opacity: 1;}
input.forminput {display:block;}

/* SLIDES */
.slideone { width: 900px; height: 375px; padding:0px; background-image:url(http://i.imgur.com/1tRDJ0f.png); margin-left:-60px;}
.slidetwo { width: 900px; height: 375px; padding:0px; background-image:url(http://i.imgur.com/G8zY2nN.jpg); margin-left:-120px;}
.slidethree { width: 900px; height: 375px; padding:0px; background-image:url(http://i.imgur.com/OMPFZCf.jpg); margin-left:-120px;}
.slidefour { width: 900px; height: 375px; padding:0px; background-image:url(http://i.imgur.com/eVx1F9T.jpg); margin-left:-120px;}

/* CUSTOM */
.newstext span {display:none}
.newstext b {display:none;}
.maintitle span a { display:none; }
.toplinks {font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:9px;}
.toplinks a {font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:9px; text-decoration:none;}
.toplinks a:hover {text-decoration:none;}
.row4 b a { display:block; text-transform:uppercase; text-align:center; font-weight:normal; font-size:9px; font-family:times new roman; background-color:#e7e2ba; padding-top:2px; z-index:1001; position:relative; max-width:200px; div-align:center; padding-bottom:2px; margin-left:150px; margin-top:5px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}
.rowline { width:350px; height:1px; background-color:#191919; margin-top:-22px; }
.frmtxt { text-align:justify; width:300px; background-color:#fcfcfc; padding:5px; font-family: 'Open Sans Condensed', sans-serif; text-transform:lowercase; letter-spacing:1px; font-size:12px; line-height:97%; margin-top:-5px;}
.frmlinks { text-align:center; margin-top:-5px; }
.frmlinks a { background-color:#fcfcfc; font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:9px; padding:5px; color:#191919; border-top:1px solid #e7e2ba; border-bottom:1px solid #e7e2ba; margin-top:-15px; }
.subforums { display: none; }
td.row3 {background-color:#efefed;}
div#profilename {text-align:center; color:#191919; font-family:roboto slab; }
/* CREDIT */
.merccredit { font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; font-size:12px; letter-spacing:1px; color:#191919; display:box; background-color: #e7e2ba; }


DESCRIPTIONS
CODE

CODE
<center><div class="rowline"></div>
<div class="frmtxt"> yay a staff forum~ </div>
<div class="frmlinks"><a href="http://mercscodes.jfbs.net/index.php?act=idx">plot</a> <a href="http://mercscodes.jfbs.net/index.php?act=idx">rules</a> <a href="http://mercscodes.jfbs.net/index.php?act=idx">member groups</a> </div></center>


PMEmail
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
New Topic
New Poll


 


 


skinned by merc @ caution