Difference between revisions of "Offer Templates"

From BakaBT Wiki
Jump to: navigation, search
m (moved to outdated)
(Removed broken IE special case.)
 
(15 intermediate revisions by 2 users not shown)
Line 58: Line 58:
 
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 
|-
 
|-
! Simple HTML Anime Template !! Simple ChalamiuS HTML Anime Template !! Simple BBCode Anime Template !! Generic Anime Template - Light Themed !! Generic Anime Template - Dark Themed !
+
! Simple HTML Anime Template !! Simple ChalamiuS HTML Anime Template !! Simple BBCode Anime Template
 
|-
 
|-
 +
|[[File:Simple_HTML_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii.]]||[[File:Simple_ChalamiuS_HTML_Anime_Template.jpg|thumb|center|alt=ChalamiuS|by ChalamiuS.]]||[[File:Simple_BBCode_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii.]]
 
|-
 
|-
|[[File:Simple_HTML_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii.]]||[[File:Simple_ChalamiuS_HTML_Anime_Template.jpg|thumb|center|alt=ChalamiuS|by ChalamiuS.]]||[[File:Simple_BBCode_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii.]]||[[File:Generic_Anime_Template_-_Light_Themed.png|thumb|center|alt=deysmacro|by deysmacro.]]||[[File:Generic_Anime_Template_-_Dark_Themed.png|thumb|center|alt=deysmacro|by deysmacro.]]
+
|[http://bakabt.me/template.php?id=Simple%20HTML%20Anime%20Template Choose]||[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Choose]||[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Choose]
|-
 
|[http://bakabt.me/template.php?id=Simple%20HTML%20Anime%20Template Choose]||[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Choose]||[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Choose]||[[Offer_Templates#Generic_Anime_Template_-_Light_Themed|Choose]]||[[Offer_Templates#Generic_Anime_Template_-_Dark_Themed|Choose]]
 
 
|-
 
|-
 
|}
 
|}
Line 70: Line 69:
 
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 
|-
 
|-
! Pure CSS Driven Anime Template - Alternative !! JS Alternative Anime Template - Editing Friendly Edition !! Simplest Tabled Anime Template
+
! Simplest Tabled Anime Template !! Infobox Anime Template !! Twin Alpha Box Description !! Simple book with JS pages
|-
 
|[[File:Pure_CSS_Driven_Anime_Template_-_Alternative.png|thumb|center|alt=deysmacro|by deysmacro.]]||[[File:JS_Alternative_Anime_Template.png|thumb|center|alt=deysmacro|by deysmacro.]]||
 
|-
 
|[[Offer_Templates#Pure_CSS_Driven_Anime_Template_-_Alternative|Choose]]||[[Offer_Templates#JS_Alternative_Anime_Template_-_Editing_Friendly_Edition|Choose]]||[[Offer_Templates#Simplest_Tabled_Anime_Template|Choose]]
 
|-
 
|}
 
 
 
{|class="wikitable" border="1" cellspacing="0" style="font-size: 90%;"
 
|-
 
! Generic Revision-2 Anime Template !! Twin Alpha Box Description !! Simple book with JS pages
 
 
|-
 
|-
 +
| ||[[File:Infobox_Anime_Template.jpg|thumb|center|alt=kureshii|by kureshii]]||[[File:Twin_Alpha_Box_Description.jpg|thumb|center|alt=miasmacloud|by miasmacloud]]||[[File:Book_of_gosick.png|thumb|center|alt=book|by remix85]]
 
|-
 
|-
|[[File:Generic_Revision-2_Anime_Template.png|thumb|center|alt=deysmacro|by deysmacro.]]||[[File:Twin_Alpha_Box_Description.jpg|thumb|center|alt=miasmacloud|by miasmacloud.]]||[[File:Book_of_gosick.png|thumb|center|alt=book|by remix85]]
+
|[[Offer_Templates#Simplest_Tabled_Anime_Template|Choose]]||[[Offer_Templates#Infobox_Anime_Template|Choose]]||[[Offer_Templates#Twin_Alpha_Box_Description|Choose]]||[[Offer_Templates#Simple_book_with_JS_pages|Choose]]
|-
 
|[[Offer_Templates#Generic_Revision-2_Anime_Template|Choose]]||[http://bakabt.me/template.php?id=Twin%20Alpha%20Box%20Anime%20Template Choose]||[[Offer_Templates#Simple_book_with_JS_pages|Choose]]
 
 
|-
 
|-
 
|}
 
|}
Line 111: Line 99:
 
[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Click here] to use
 
[http://bakabt.me/template.php?id=Simple%20BBCode%20Anime%20Template Click here] to use
  
===Generic Anime Template - Light Themed===
+
===Simplest Tabled Anime Template===
 
----
 
----
 
Submitted by: deysmacro
 
 
 
<pre>
 
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<html>
 
<html>
 
<head>
 
<head>
 +
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 +
</head>
 +
<body>
 +
<h1></h1>
 +
<h3><a href="ANN URL" target="_blank">ANN</a> / <a href="AniDB URL" target="_blank">AniDB</a></h3>
 +
    <table cellspacing="4">
 +
    <tr valign="top">
 +
        <td>
 +
            <h2>Series Information</h2>
 +
                <ul>
 +
                    <table cellspacing="3">
 +
                        <tr><td style="font-size:15px">Year</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Episodes</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Categories</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Director</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Production</td><td>[Insert]</td></tr>
 +
                    </table>
 +
                </ul>
 +
                <h2>File Information</h2>
 +
                <ul>
 +
                    <table cellspacing="3">
 +
                        <tr><td style="font-size:15px">Ripper</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Video</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Audio</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Subtitle</td><td>[Insert]</td></tr>
 +
                        <tr><td style="font-size:15px">Comments</td><td>[Insert]</td></tr>
 +
                    </table>
 +
</ul>
 +
                <h2>Related Torrents</h2>
 +
                <ul>
 +
                    [Insert]
 +
                </ul>
 +
                <h2>Summary/Description</h2>
 +
                <ul>
 +
    [Insert]
 +
</ul>
 +
            </td>
 +
            <td><img src="[Insert SUMMARY IMAGE URL]" alt="Image" /></td>
 +
        </tr>
 +
    </table>
 +
    <h2>Screenshots</h2>
 +
</body>
 +
</html>
 +
[screenshot]
 +
[IMG]http://i50.tinypic.com/1znly1j.png[/IMG]
 +
[IMG]http://i46.tinypic.com/m0mc3.png[/IMG]
 +
[IMG]http://i46.tinypic.com/1z2ln4h.png[/IMG]
 +
[/screenshot]
 +
</pre>
 +
 +
Back to [[Offer_Templates#Templates_preview|top]].
 +
 +
===Infobox Anime Template===
 +
----
  
<style type="text/css">
+
Submitted by: kureshii
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
 
*
 
* Please take note. The indentation should look correctly using Firefox.
 
*
 
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
 
* When that happen, please use Firefox.
 
*
 
* Thank you for your understanding.
 
*
 
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
 
*
 
* Main user link : http://bakabt.me/user/816453/deysmacro.html
 
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
 
*
 
* I welcome all of you people to use this template at your convenience.
 
* Do contact me via PM or email if you had anything to say.
 
*
 
* Email : deysmacro[at]gmail[dot]com
 
*
 
* I also can help you guys with the template.
 
* I will help whenever I can.
 
*
 
* Originally Customized By : deysmacro
 
* Re-Customized By : YOUR NICK HERE
 
*
 
* Template Version : v2.0.9.1 generic - light themed
 
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
 
*
 
* Please leave the credit intact if you plan to use this template.
 
* Your cooperation is highly appreciated. Thank you.
 
*
 
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
 
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2091 | 17
 
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
 
*
 
* Quick Reminder:
 
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
 
*
 
*
 
* Example:
 
* Assume "width" is the syntax...
 
*
 
* body {
 
* width: 100px; <-- major browser support
 
*
 
* *width: 110px; <-- targeted for IE only
 
* }
 
*
 
*
 
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 
* Please take note of this when you are editing.
 
*
 
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
 
/*
 
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
 
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
 
*
 
* Hopefully you guys enjoy using this template. Good day people.
 
*/
 
/* ------------------------------------------------------------------------------------------------------------------------------| general styling area |----- */
 
/* --| body styling control |-- */
 
 
 
body {
 
background: #131313;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
font-family: Tahoma;
 
font-size: 11px;
 
text-align: justify;
 
color: #0F0F0F;
 
  
 +
<pre>
 +
<!--User must provide own background image for use. The infoboxes are positioned using CSS float. There is thus limited flexibility with regards to the layout.-->
 +
<html>
 +
<head>
 +
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 +
  <style type="text/css">
 +
  body { font-family: sans-serif; font-size: 14px; margin: 0px; }
 +
a { text-decoration: none; }
 +
a:link { color: #b62400; }
 +
a:visited { color: #444444; }
 +
.main {
 +
  background: url([Insert]) no-repeat;
 +
  border-style: solid 2px;
 +
  width: 940px;
 +
  height: 720px;
 
}
 
}
 
+
.links {
/* --| end |--------------------------- */
+
  font-size: 150%;
/* --| http link styling control |-- */
+
  font-weight: bold;
 
+
  font-variant: small-caps;
a {
+
  text-align: right;
color: #FF661A;
+
  float: right;
text-decoration: none;
+
}
 
+
.titlediv { font-size: 24px bold; float: center; }
 +
.infobox {
 +
  background: #FFFFFF; /*Change infobox colour if desired. Transclucent white color creates lightening of background image effect*/
 +
  filter: alpha(opacity=60); /*for IE*/
 +
  opacity: 0.50;
 +
  width: 220px; /*Adjust infobox width as required*/
 +
  float: right;
 +
  clear: right;
 +
  padding: 2px 10px;
 +
  margin: 10px 20px;
 
}
 
}
 
+
.header {
a:hover {
+
  text-align: center;
color: #000000;
+
  font-size: 150%;
 
+
  font-weight: bold;
 +
  padding-top: 5px;
 
}
 
}
 +
  </style>
 +
</head>
 +
<body>
 +
  <div class="main">
 +
    <div class="titlediv">[Insert]</div>
 +
    <div class="infobox">
 +
      <div class="header">SERIES INFO</div>
 +
      <div class="info">
 +
        <b>[Insert]</b> ([Insert])<br>
 +
        [Insert]<br>
 +
        Directed by <b>[Insert]</b><br>
 +
        Produced by <b>[Insert]</b>
 +
      </div>
 +
    </div>
 +
    <div class="links">
 +
      <a href="[Insert]" target="_blank">Anime News Network</a><br>
 +
      <a href="[Insert]" target="_blank">Anime-Planet</a><br>
 +
      <a href="[Insert]">AniDB</a>
 +
    </div>
 +
    <div class="infobox">
 +
      <div class="header">FILE INFO</div>
 +
      <div class="info">
 +
        Encoded and translated by <b><a href="[Insert]" target="_blank">[Insert]</a></b><br>
 +
        [Insert]<br>
 +
        [Insert]<br>
 +
        [Insert]
 +
      </div>
 +
    </div>
 +
    <div class="infobox" style="line-height: normal;">
 +
      <div class="header">DESCRIPTION</div>
 +
      <div class="info">[Insert]</div>
 +
    </div>
 +
  </div>
 +
</body>
 +
</html>
 +
[screenshot]
 +
<!--duplicate the line below to add more screenshots-->
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[/screenshot]
 +
</pre>
  
/* --| end |----------------------------- */
+
[[Media:Infobox Anime Template.jpg|Sample]]
/* --| paragraph styling control |-- */
 
  
p {
+
Back to [[Offer_Templates#Templates_preview|top]].
text-align: justify;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
padding:20px;
 
border: #999999 1px solid;
 
  
}
+
===Twin Alpha Box Description===
 +
----
  
/* --| end |------------------------ */
+
Submitted by: miasmacloud
/* --| table content control |-- */
 
  
td {
+
<pre>
vertical-align: left middle;
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head profile="http://gmpg.org/xfn/11">
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<title> Template </title>
 +
<style type="text/css" media="screen">
 +
/* main */
 +
*{
 +
padding: 0px;
 +
margin: 0px;
 +
}
 +
*:focus{
 +
outline: none;
 +
}
 +
body{
 +
background: #fff;
 +
font-family: tahoma;
 +
font-size: 8pt;
 +
color: #fff;
 +
/* size the body so the background image doesn't get cut off */
 +
height: [Insert]px;
 +
width: 940px;
 +
background-repeat: no-repeat;
 +
}
 +
body{
 +
background-image: url([Insert]);
 +
}
 +
a:link,a:visited,a:active,a:hover{
 +
text-decoration: underline;
 +
color: #fff;
 +
}
 +
h1{
 +
padding: 5px;
 +
text-align: center;
 +
font-size: 11pt;
 +
}
  
 +
/* text bars */
 +
.bars{
 +
width: 250px;
 +
margin: 0px 20px 0px 20px;
 +
}
 +
#centered{
 +
/* width: 580px; */
 +
margin: 0px auto;
 +
}
 +
#bar1{
 +
float: left;
 +
}
 +
#bar2{
 +
float: left;
 +
}
 +
.bg{
 +
background-image: url([bbtimg=668]);
 +
}
 +
.low{
 +
height: 100px;
 +
background-image: url([bbtimg=2881]);
 
}
 
}
  
/* --| end |---------------------------- */
+
/* inside the text bars */
/* --| main title styling control |-- */
+
.content{
 
+
padding: 10px;
.title {
+
line-height: 12pt;
font-family: Tahoma;
+
text-shadow: 1px 1px 2px #000;
font-size: 22px;
+
text-align: justify;
font-weight: bold;
+
}
text-align: center;
+
.item{
padding:10px;
+
margin: 3px 0px 3px 0px;
background-color: #ffffff;
+
}
color: #000066;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
border: #999999 1px solid;
 
  
 +
/* right bar specific */
 +
#show{
 +
margin-bottom: 15px;
 
}
 
}
 +
</style>
 +
</head>
 +
<body>
  
/* --| end |--------------------------- */
+
<div id="centered">
/* --| picture content control |-- */
+
<div id="bar1" class="bars">
 
+
<div class="bg">
.pic2 {
+
<div class="content">
font-family: Tahoma;
+
<h1>
font-size: 22px;
+
[Insert]
font-weight: bold;
+
</h1>
text-align: center;
+
<div class="item">
padding:10px;
+
[Insert]
background-color: #2E2E2E;
+
</div>
color: #0F0F0F;
+
</div>
border: #999999 1px solid;
+
</div>
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
<div class="low"></div>
 +
</div>
 +
<div id="bar2" class="bars">
 +
<div class="bg">
 +
<div class="content">
 +
<div id="show">
 +
<h1>
 +
Show Information
 +
</h1>
 +
<div class="item">
 +
<b>Year:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>Runtime:</b> [Insert] episodes
 +
</div>
 +
<div class="item">
 +
<b>Categories:</b>
 +
[Insert]
 +
</div>
 +
<div class="item">
 +
<b>Director:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>Production:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>More:</b>
 +
<a target="_blank" title="Anime News Network" href="[Insert]">ANN</a>,
 +
<a target="_blank" title="AniDB" href="[Insert]">AniDB</a>,
 +
<a target="_blank" title="Anime Planet" href="[Insert]">Anime-Planet</a>
 +
</div>
 +
</div>
 +
<div id="file">
 +
<h1>
 +
File Information
 +
</h1>
 +
<div class="item">
 +
<b>Group:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>Video:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>Audio:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>Subtitles:</b> [Insert]
 +
</div>
 +
<div class="item">
 +
<b>Related:</b> [Insert]
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="low"></div>
 +
</div>
 +
</div>
 +
</body>
 +
</html>
 +
[screenshot]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[img][Insert][/img]
 +
[/screenshot]
 +
</pre>
  
}
+
[[Media:Twin Alpha Box Description.jpg|Sample]]
  
/* --| end |------------------------------- */
+
Back to [[Offer_Templates#Templates_preview|top]].
/* --| sub heading styling control |-- */
 
  
.heading {
+
===Simple book with JS pages===
font-family: Tahoma;
+
----
font-size: 14px;
 
font-weight: bold;
 
text-align: center;
 
color: #000066;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
padding: 8px 0px 8px 0px;
 
  
}
+
Submitted by: remix85
  
/* --| end |---------------------- */
+
<pre>
/* --| label styling control |-- */
+
<html>
 
+
<head>
.label {
+
<!--
font-weight: bold;
+
* Template: Book v1.1
color: #0F0F0F;
+
*          by remix85
width: 19%;
+
*
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
* Feel free to rearange pages as You wish, just leave this comment.
border: #999999 1px solid;
+
* Keep in mind that space is limited, so long descriptions will have to be split manualy to two boxes or more.
text-align: right;
+
* To find what should be done search for TODO in this template, but first copy it to sandbox and see how it works.
 +
*
 +
* Maximum image size is 340x480. Bigger images will be automatically clipped.
 +
*
 +
* I know that it's not quite edit-friendly.
 +
* Send me a PM if You have problems with editing this template, or there's something wrong.
 +
-->
 +
<style type="text/css">
 +
BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;}
 +
TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;}
 +
A {color: #808080;}
 +
A:hover {color: #000000;}
  
*width: 22%;
+
IMG {max-width: 340px; max-height: 480px; overflow: hidden;}
  
}
+
#book {width: 940px;}
 +
#book1 {padding: 0 40px 0 50px;}
 +
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
 +
.page {display: block;}
  
/* --| end |-------------------------------- */
+
.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
/* --| various text styling control |-- */
+
#tablist > UL {text-align: center; list-style: none; padding: 0; margin: 0;}
 +
#tablist > UL > LI {float: left; background-color: transparent; border: solid #000000; border-width: 1px 1px 0 1px; color: #808080; margin: 0 0 0 0.5em; padding: 0 0.75em 0 0.75em; cursor: pointer;}
 +
#tablist > UL > LI:hover {color: #000000;}
  
.text {
+
.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
width: 100%;
+
.box_left TABLE {width: 100%;}
color: #000066;
+
.box_left TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
border: #999999 1px solid;
 
  
}
+
.box_right {color: #101010; float: right; clear: right; width: 340px; margin-right: 60px;}
 +
.box_right TABLE {width: 100%;}
 +
.box_right TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}
  
.text3 {
+
.tbl_info {width: 100%;}
width: 100%;
+
.tbl_info TR {vertical-align: text-top;}
color: #9D9D9D;
+
.tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;}
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
.tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;}
border: #999999 1px solid;
+
</style>
  
}
+
<script type="text/javascript" language="javascript">
 +
// <![CDATA[
  
.text6 {
+
// small hack to show book layout only when JavaScript is enabled
color: #CC6600;
+
document.writeln('<style type="text/css">');
 +
document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}');
 +
document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}');
 +
document.writeln('.page {display: none;}');
 +
document.writeln('.hdr {display: block;}');
 +
document.writeln('</style>');
  
 +
// Switch current page -> hide all pages, show current
 +
function newpage(page_id)
 +
{
 +
page_id = '#' + page_id;
 +
if(!$(page_id).is(":visible"))
 +
{
 +
$("div.page").hide();
 +
$(page_id).fadeIn(600, function(){});
 +
}
 
}
 
}
 +
// ]]>
 +
</script>
 +
</head>
  
.text7 {
+
<body>
color: #518ABF;
+
<center>
font-weight: bold;
 
  
}
+
<div id="book"><div id="book1">
 +
<div class="box_left"><div class="hdr" id="tablist"><ul>
 +
<li onClick="newpage('page1');">Info</li>
 +
<li onClick="newpage('page2');">Summary</li>
 +
<!-- TODO: If needed, insert new tabs here -->
 +
<!-- something like <li onClick="newpage('tab_id');>Tab name</li> -->
 +
</ul><br /></div></div>
  
.text9 {
+
<div class="box_right"><div class="hdr">[TODO: small title]</div></div>
color: #000000;
+
font-weight: bold;
+
<!--
 +
TODO: put here elements that are always visible
 +
eg. move the image from page1 and use only "box_left" on all pages
 +
-->
  
}
+
<div class="page" id="page1" style="display:block;">
 +
<div class="box_right" style="text-align: center;">
 +
[TODO: image]
 +
<!--<img src="http://" alt="Image not found" />-->
 +
</div>
  
</style>
+
<div class="box_left">
 +
<table><tr><td>
 +
<div class="title">[TODO: title]</div>
 +
</td></tr></table><br />
 +
</div>
  
</head>
+
<div class="box_left">
<body>
+
<table><tr><th>- SERIES INFORMATION -</th></tr><tr><td>
 
+
<table class="tbl_info">
 
+
<tr><td>Aired:</td><td>[TODO: aired]</td></tr>
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
+
<tr><td>Episodes:</td><td>[TODO: episodes]</td></tr>
<tr>
+
<tr><td>Categories:</td><td>[TODO: categories]</td></tr>
<td colspan="3">
+
<tr><td>Director:</td><td>[TODO: director]</td></tr>
<div><hr><br></div>
+
<tr><td>Production:</td><td>[TODO: producer]</td></tr>
 +
<tr><td>References:</td><td><a href="http://anidb.net/">AniDB</a>, <a href="http://www.animenewsnetwork.com/">ANN</a>, [TODO: sources]
 +
</table>
 +
</td></tr></table><br />
 +
</div>
 +
<div class="box_left">
 +
<table><tr><th>- FILE INFORMATION -</th></tr><tr><td>
 +
<table class="tbl_info">
 +
<tr><td>Group:</td><td>[TODO: group]</td></tr>
 +
<tr><td>Video:</td><td>[TODO: video]</td></tr>
 +
<tr><td>Audio:</td><td>[TODO: audio]</td></tr>
 +
<tr><td>Subtitle:</td><td>[TODO: subs]</td></tr>
 +
<tr><td>Comments:</td><td>- none -<br />[TODO: some comments?]</td></tr>
 +
<tr><td>Related:</td><td>[TODO: related]</td></tr>
 +
</table>
 +
</td></tr></table><br />
 +
</div>
 +
</div><!--page1-->
  
 +
<div class="page" id="page2">
 +
<div class="box_left">
 +
<table><tr><th>- SUMMARY -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
 +
[TODO: summary]
 +
</td></tr></table><br />
 +
</div>
 +
<div class="box_right">
 +
<table><tr><td style="text-align: justify; text-indent: 1em;">
 +
[TODO: add more summary or move image outside page1 and delete this div]
 +
</td></tr></table>
 +
</div>
 +
</div><!--page2-->
 +
 +
<!--
 +
TODO: more pages? Why not! Just insert
 +
<div class="page" id="tab_id">
 +
<div class="box_left"> or <div class="box_right">
 +
<table><tr><th>- [Box title] -</th></tr><tr><td style="text-align: justify; text-indent: 1em;">
 +
[content]
 +
</td></tr></table><br /></div>
 +
</div>
 +
</div>
 +
and that's all!
 +
Don't forget to name your new page (eg. id="page3") and add new tab.
 +
Remember to check if it doesn't overflow the page and split content if necessary!
 +
-->
 +
  
<!-- the title heading -->
+
</div></div><!--book-->
<div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div>
 
  
<div><br><hr></div>
+
</center>
</td>
+
</body>
</tr>
+
</html>
<tr>
+
[url=http://wiki.bakabt.me/index.php/BBCode#Screenshots]TODO: Screenshots[/url]
 +
</pre>
 +
Sample template image: [http://wiki.bakabt.me/index.php/File:Book_of_gosick.png Book of Gosick]<br />
 +
Back to [[Offer_Templates#Templates_preview|top]].
  
 +
=Manga Templates=
  
<!-- rowspan number must be changed accordingly if you add/remove row -->
+
===Byousoku 5cm Manga Template===
<td rowspan="20" >
+
----
 +
 
 +
[http://bakabt.me/template.php?id=Simple%20HTML%20Manga%20Template Click here] to use
  
 +
===Dille's Manga Template===
 +
----
  
<!-- 400px max width recommended -->
+
[http://bakabt.me/template.php?id=Dille%27s%20Manga%20Template Click here] to use
<img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png">
 
  
</td>
+
===Msm595's Manga Template===
</tr>
+
----
<tr>
 
<td colspan="3" style="padding-top: 0px;">
 
<div class="heading">SERIES INFORMATION</div>
 
</td>
 
</tr>
 
  
 +
Submitted by: kiiller_man1
  
<!-- edit the info accordingly -->
+
<pre>
<tr>
+
<!DOCTYPE html>  
<td class="label">Main Title:</td>
+
<html>  
<td class="text">Panda Kopanda</td>
+
<head>  
</tr>
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<tr>
+
<title></title>  
<td class="label">Official Title:</td>
+
<style type="text/css">  
<td class="text">Panda! Go Panda!</td>
+
    html, body, p, h1, ul {
</tr>
+
        margin: 0;
<tr>
+
        padding: 0;
<td class="label">Japanese Title:</td>
+
    }
<td class="text">パンダコパンダ</td>
+
    body {
</tr>
+
        font-size: 14px;
<tr>
+
        height: 580px;
<td class="label">Year:</td>
+
        width: 940px;
<td class="text">1972 & 1973</td>
+
        color: #333;
</tr>
+
        text-shadow: 1px 1px #ccc;
<tr>
+
        font-family: Helvetica, Arial, sans-serif;
<td class="label">Episodes:</td>
+
        background-color: #f9f9f9;
<td class="text"><span class="text7">2 combined into 1</span></td>
+
    }
</tr>
+
    #header {
<tr>
+
        text-align: center;
<td class="label">Categories:</td>
+
        margin: 0 0 18px;
<td class="text">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</td>
+
    }
</tr>
+
    h1 {
<tr>
+
        font-family: Georgia, serif;
<td class="label">Director:</td>
+
        font-size: 28px;
<td class="text">Isao Takahata</td>
+
        text-shadow: 1px 1px 2px #aaa;
</tr>
+
        color: #444;
<tr>
+
    }
<td class="label">Production:</td>
+
    #links li {
<td class="text">Shunzo Kato</td>
+
        display: inline;
</tr>
+
        padding: 0 5px 0 10px;
<tr>
+
        border-left: 1px solid #ccc;
<td class="label">References:</td>
+
    }
<td class="text">
+
    #links li.first {
 
+
        border-left: none;
 
+
    }
<!-- edit the info accordingly -->
+
    a {
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
+
        color: #FFB000;
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
+
        text-decoration: none;
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
+
        font-size: 16px;
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
+
        text-shadow: none;
 
+
        font-weight: bold;
</td>
+
    }
</tr>
+
    a:hover {
<br><br><br>
+
        color: #00B0FF;
 
+
    }
<tr>
+
    #bigPicture {
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div> </td>
+
        width: 350px;
</tr>
+
        float: left;
 
+
        text-align: center;
 
+
    }
<!-- edit the info accordingly -->
+
    #bigPicture img {
<!-- change text3 to text if there is information -->
+
        max-width: 350px;
<tr>
+
        max-height: 490px;
<td class="label">FanSub by:</td>
+
        /*ie6 max- fixes. does anyone even use ie6 anymore? it's not even supported by microsoft now... lol*/
<td class="text3">No Information</td>
+
        width: expression(this.width > 350 ? (this.height > 490 ? true : 350): true);
</tr>
+
        height: expression(this.height > 490 ? 490: true);
<tr>
+
    }
<td class="label">Video:</td>
+
    #info {
<td class="text"><span class="text7">DivX 6</span> [ <span class="text6">704x544 29.97fps</span> ]</td>
+
        float: left;
</tr>
+
        width: 565px;
<tr>
+
        margin-left: 25px;
<td class="label">Audio:</td>
+
    }
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 24000Hz stereo 48Kbps</span> ]</td>
+
    h2 {
</tr>
+
        margin: 0 0 3px 0;
<tr>
+
        text-align: center;
<td class="label">Subtitles:</td>
+
        font-size: 22px;
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
+
        color: #444;
</tr>
+
        text-shadow: 1px 1px 1px #aaa;
<tr>
+
    }
<td class="label">Approx. Duration:</td>
+
    dl {
<td class="text">~ <span class="text7">1 hour 11 minutes</span> per episode</td>
+
        margin: 0 0 12px;
</tr>
+
    }
<tr>
+
    dt {
<td class="label">Note:</td>
+
        font-weight: bold;
<td class="text">Please continue seeding as much as you can people. Thank you.</td>
+
        margin-top: 5px;
</tr>
+
    }
 
+
    dd {
 
+
        margin-left: 18px;
<!-- edit the info accordingly -->
+
    }
<tr>
+
    #screens {
<td class="label">Related Anime:</td>
+
        clear: both;
<td class="text">
+
        padding: 25px 25px 0;
> <a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a>
+
        text-align: center;
</td>
+
    }
</tr>
+
    #screens a {
<tr>
+
        display: inline-block;
<td class="label">Related OST:</td>
+
        margin-right: 12px;
<td class="text3">No Information</td>
+
        border: 1px solid #bbb;
</tr>
+
        height: 200px;
 
+
        padding: 5px;
<tr>
+
        vertical-align: bottom;
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
+
    }
 
+
    #screens a:hover {
<p>
+
        border: 1px solid #444;
<span class="text9">
+
    }
 
+
    #screens img {
 
+
        max-height: 200px;
<!-- edit the info accordingly -->
+
        border: none;
Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.
+
    }
<br><br>
+
    ::-moz-selection{ background: #66A3D2; color:#fff; text-shadow: none; }
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
+
    ::selection { background:#66A3D2; color:#fff; text-shadow: none; }
<br><br>
+
</style>  
A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
+
</head>  
<br><br>
+
<body>
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
+
    <div id="header">  
 
+
        <h1>Negative Happy Chain Saw Edge</h1>  
</span>
+
        <h2>ネガティブハッピー・チェーンソーエッヂ</h2>  
 
+
        <ul id="links">  
</p>
+
            <li class="first"><a href="http://www.mangaupdates.com/series.html?id=19674">Manga Updates</a></li>  
</td>
+
            <li><a href="http://myanimelist.net/manga/5674/Negative_Happy_Chainsaw_Edge">My Anime List</a></li>  
</tr>
+
        </ul>  
<tr>
+
    </div>  
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
+
   
</tr>
+
    <div id="bigPicture">
</table>
+
        <img src="example/manga_cover.jpg" alt="Manga Picture" id="bigImage">  
 
+
    </div>  
 
+
   
</body>
+
    <div id="info">  
</html>
+
        <h2>Manga Information</h2>
 
+
        <dl>  
 
+
            <dt>Year</dt>  
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
            <dd>2008</dd>
 
+
            <dt>Volumes</dt>  
[screenshot]
+
            <dd>2</dd>
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
+
            <dt>Categories</dt>  
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
+
            <dd>Action, Ecchi, Romance, Shounen, Psychological</dd>
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
+
            <dt>Artist</dt>
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
+
            <dd>Saika, Junichi</dd>  
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
+
            <dt>Author</dt>
[/screenshot]
+
            <dd>Takimoto, Tatsuhiko</dd>  
</pre>
+
            <dt>Publisher</dt>  
 
+
            <dd>Shounen Ace</dd>  
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Anime_Template_-_Light_Themed.png Click here for full preview].<br />
+
            <dt>Scanlator</dt>  
Back to [[Offer_Templates#Templates_preview|top]].
+
            <dd>Moob</dd>
===Generic Anime Template - Dark Themed===
+
            <dt>Comments</dt>  
----
+
            <dd>A great read :D</dd>  
 
+
        </dl>  
Submitted by: deysmacro
+
        <h2>Summary</h2>  
 
+
        <p>Eri Yukizaki is a girl who fights. She is a “pretty soldier.” Her foe is the evil Chainsaw-man, who doesn’t die even after being slashed. If he isn’t defeated, the world will have no future. I was wrapped into this battle, and my life has changed completely… A “non-stop” negative youth story! - MAL</p>
<pre>
+
    </div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
   
<html>
+
    <div id="screens">
<head>
+
        <a href="example/manga_cover.jpg" rel="lightbox"><img src="example/manga_covert.jpg" alt="manga screenshot"></a>
 
+
        <a href="example/manga_1.jpg" rel="lightbox"><img src="example/manga_1t.jpg" alt="manga screenshot"></a>
<style type="text/css">
+
        <a href="example/manga_2.jpg" rel="lightbox"><img src="example/manga_2t.jpg" alt="manga screenshot"></a>
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
+
        <a href="example/manga_3.jpg" rel="lightbox"><img src="example/manga_3t.jpg" alt="manga screenshot"></a>  
*
+
        <a href="example/manga_4.jpg" rel="lightbox"><img src="example/manga_4t.jpg" alt="manga screenshot"></a>
* Please take note. The indentation should look correctly using Firefox.
+
    </div>  
*
+
   
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
+
    <script type="text/javascript">
* When that happen, please use Firefox.
+
        var as=document.getElementById("screens").getElementsByTagName('a'),
*
+
            img=document.getElementById('bigImage');
* Thank you for your understanding.
+
           
*
+
        for(var i=0;i<as.length;i++) {
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
+
            as[i].onmouseover = function() {
*
+
                var im = new Image();
* Main user link : http://bakabt.me/user/816453/deysmacro.html
+
                im.onload = function() {
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
+
                    img.height=img.height; //don't let the image get taller than the original
*
+
                    img.src=this.src;
* I welcome all of you people to use this template at your convenience.
+
                };
* Do contact me via PM or email if you had anything to say.
+
                im.src = this.href;
*
+
            };
* Email : deysmacro[at]gmail[dot]com
+
        }
*
+
    </script>
* I also can help you guys with the template.
+
</body>
* I will help whenever I can.
+
</html>
*
+
</pre>
* Originally Customized By : deysmacro
+
 
* Re-Customized By : YOUR NICK HERE
+
Sample template image: [http://i51.tinypic.com/dfzo6t.jpg Image link]
*
+
 
* Template Version : v2.0.8.1 generic - dark themed
+
=OST Templates=
* Template Last Update On : July 21th, 2009 @ 13:28pm GMT+8
 
*
 
* Please leave the credit intact if you plan to use this template.
 
* Your cooperation is highly appreciated. Thank you.
 
*
 
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
 
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2081 | 11
 
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
 
*
 
* Quick Reminder:
 
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
 
*
 
*
 
* Example:
 
* Assume "width" is the syntax...
 
*
 
* body {
 
* width: 100px; <-- major browser support
 
*
 
* *width: 110px; <-- targeted for IE only
 
* }
 
*
 
*
 
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 
* Please take note of this when you are editing.
 
*
 
* -------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
 
/*
 
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
 
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
 
*
 
* Hopefully you guys enjoy using this template. Good day people.
 
*/
 
/* ------------------------------------------------------------------------------------------------------------| general styling control area |----- */
 
/* --| body styling control |-- */
 
 
 
body {
 
background: #131313;
 
background-image:url('http://img11.imageshack.us/img11/6719/3784.gif'); /* want some fresh background? change it here */
 
font-family: Tahoma;
 
font-size: 11px;
 
  
 +
===OST Template 1===
 +
----
 +
 +
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
 +
 +
===Show/hide Tracklist OST Template===
 +
----
 +
 +
[http://bakabt.me/template.php?id=Show/HideList%20OST%20Template Click here] to use
 +
 +
===Dropdown list OST Template===
 +
----
 +
 +
[http://bakabt.me/template.php?id=DropdownBox%20OST%20Template Click here] to use
 +
 +
===Simple OST Template===
 +
----
 +
 +
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
 +
 +
===Boxed OST Template===
 +
---
 +
 +
Submitted by: kureshii
 +
 +
'''Note: All album images used must be the same size! Preferably ~350X350px, not too tall or wide. height and width values in "imgborder" class must be edited to fit the image. Other numbers in the CSS stylesheet may need to be tweaked for best effect.'''
 +
 +
<pre>
 +
<html>
 +
<head>
 +
<title>[[Torrent Title]]</title>
 +
<style type="text/css">
 +
body {
 +
background-color: #ffffff;
 +
text-align: left;
 +
margin: auto;
 +
}
 +
table {
 +
display: table;
 +
border-spacing: 10px;
 +
font-family: Calibri, Helvetica, sans-serif;
 +
font-size: medium;
 
}
 
}
 
+
tr {display: table-row;}
/* --| end |--------------------------- */
+
td {
/* --| http link styling control |-- */
+
display: table-cell;
 
+
min-width: 430px;
a {
+
padding: 10px;
text-decoration: none;
+
border: solid 2px #000000;
 
+
vertical-align: top;
 
}
 
}
 
+
.album {max-width: 30em; margin: auto;}
a:hover {
+
.vocal {max-width: 50em; margin: auto;}
color: #FF661A;
+
.header1 {
 
+
font-size: 140%;
 +
font-weight: bold;
 +
text-align: center;
 
}
 
}
 
+
.header2 {
/* --| end |----------------------------- */
+
font-size: 115%;
/* --| paragraph styling control |-- */
 
 
 
p {
 
text-align: justify;
 
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
 
padding:20px;
 
border: #999999 1px solid;
 
 
 
 
}
 
}
 
+
.header3 {
/* --| end |----------------------- */
+
font-size: 66%;
/* --| table styling control |-- */
+
font-style: italic;
 
+
font-weight: normal;
td {
+
}
vertical-align: left middle;
+
img {
 
+
margin: 8px;
 
}
 
}
 
+
.imgborder {
/* --| end |---------------------- */
+
border: 1px solid #666666;
/* --| title styling control |-- */
+
height: 366px;
 
+
width: 366px;
.title {
+
margin-left: auto;
font-family: Tahoma;
+
margin-right: auto;
font-size: 22px;
+
margin-top: 5px;
font-weight: bold;
+
margin-bottom: 5px;
text-align: center;
 
padding:10px;
 
background-color: #2E2E2E;
 
color: #FFB856;
 
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
 
border: #999999 1px solid;
 
 
 
}
 
 
 
/* --| end |-------------------------- */
 
/* --| picture styling control |-- */
 
 
 
.pic2 {
 
font-family: Tahoma;
 
font-size: 22px;
 
font-weight: bold;
 
text-align: center;
 
padding:10px;
 
background-color: #2E2E2E;
 
color: #FFB856;
 
border: #999999 1px solid;
 
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
 
 
 
}
 
 
 
/* --| end |-------------------------- */
 
/* --| heading styling control |-- */
 
 
 
.heading {
 
font-family: Tahoma;
 
font-size: 14px;
 
font-weight: bold;
 
text-align: center;
 
color: #FF661A;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
padding: 8px 0px 8px 0px;
 
 
 
}
 
 
 
/* --| end |---------------------- */
 
/* --| label styling control |-- */
 
 
 
.label {
 
width: 18%;
 
text-align: right;
 
font-weight: bold;
 
color: #FFFFFF;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
 
 
*width: 22%;
 
 
 
}
 
 
 
/* --| end |-------------------------------- */
 
/* --| various text styling control |-- */
 
 
 
.text {
 
width: 100%;
 
color: #FFB856;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
 
 
}
 
 
 
.text3 {
 
width: 100%;
 
color: #9D9D9D;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
 
 
}
 
 
 
.text6 {
 
        color: #FFF0CC;
 
 
}
 
}
 +
.footer {position: relative;}
 +
</style></head>
 +
<body>
 +
<table>
 +
    <tr>
 +
      <td>
 +
      <div class="header1">[[Album 1 Description: OST/Single/OP/ED/etc]]<br>
 +
      <div class="header2">[[Album 1 Title]]<br>
 +
      <div class="header3">[[Artist(s) info]]</div></div></div>
 +
      <div class="imgborder"><img src="[[Album 1 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
 +
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
 +
      <b>Compression:</b> [[File codec/format]]<br>
 +
      <b>Album Release Date:</b> [[Album 1 Release Date]]<br>
 +
      <br>
 +
      <b>Tracklist:</b><br>
 +
1. [[Track 1]]<br>
 +
2. [[Track 2]]<br>
 +
3. [[Track 3]]<br>
 +
4. [[Track 4]]<br>
 +
<br>
 +
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
 +
Booklet scans included ([[Number of album 1 scans]] files).</div></div>
 +
      </td>
 +
      <td>
 +
      <div class="header1">[[Album 2 Description: OST/Single/OP/ED/etc]]<br>
 +
      <div class="header2">[[Album 2 Title]]<br>
 +
      <div class="header3">[[Artist(s) info]]</div></div></div>
 +
      <div class="imgborder"><img src="[[Album 2 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
 +
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
 +
      <b>Compression:</b> [[File codec/format]]<br>
 +
      <b>Album Release Date:</b> [[Album 2 Release Date]]<br>
 +
      <br>
 +
      <b>Tracklist:</b><br>
 +
1. [[Track 1]]<br>
 +
2. [[Track 2]]<br>
 +
3. [[Track 3]]<br>
 +
4. [[Track 4]]<br>
 +
<br>
 +
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
 +
Booklet scans included ([[Number of album 2 scans]] files).</div></div>
 +
      </td>
 +
    </tr>
 +
    <tr>
 +
      <td>
 +
      <div class="header1">[[Album 3 Description: OST/Single/OP/ED/etc]]<br>
 +
      <div class="header2">[[Album 3 Title]]<br>
 +
      <div class="header3">[[Artist(s) info]]</div></div></div>
 +
      <div class="imgborder"><img src="[[Album 3 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
 +
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
 +
      <b>Compression:</b> [[File codec/format]]<br>
 +
      <b>Album Release Date:</b> [[Album 3 Release Date]]<br>
 +
      <br>
 +
      <b>Tracklist:</b><br>
 +
1. [[Track 1]]<br>
 +
2. [[Track 2]]<br>
 +
3. [[Track 3]]<br>
 +
4. [[Track 4]]<br>
 +
<br>
 +
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
 +
Booklet scans included ([[Number of album 3 scans]] files).</div></div>
 +
      </td>
 +
      <td>
 +
      <div class="header1">[[Album 4 Description: OST/Single/OP/ED/etc]]<br>
 +
      <div class="header2">[[Album 4 Title]]<br>
 +
      <div class="header3">[[Artist(s) info]]</div></div></div>
 +
      <div class="imgborder"><img src="[[Album 4 Image URL (note: update image height&width in imgborder CSS class!)]]"></div>
 +
      <div class="album"><b>Catalog No.:</b> [[Catalog No.]]<br>
 +
      <b>Compression:</b> [[File codec/format]]<br>
 +
      <b>Album Release Date:</b> [[Album 4 Release Date]]<br>
 +
      <br>
 +
      <b>Tracklist:</b><br>
 +
1. [[Track 1]]<br>
 +
2. [[Track 2]]<br>
 +
3. [[Track 3]]<br>
 +
4. [[Track 4]]<br>
 +
<br>
 +
<div class="footer">[[FLAC/MP3/WV (choose 1)]] files from [[Insert Ripper name here]]<br>
 +
Booklet scans included ([[Number of album 4 scans]] files).</div></div>
 +
      </td>
 +
    </tr>
 +
</table>
 +
</div>
 +
</body></html>
 +
</pre>
  
.text7 {
+
Sample torrent: [http://bakabt.me/torrent/140104/Macross_Frontier_Music_Collection_(FLAC)_LonE.html Macross Frontier Music Collection]
color: #00D4FF;
 
font-weight: bold;
 
  
}
+
Go to: [http://bakabt.me/offer.php Offers Page]
  
.text9 {
 
color: #FFB856;
 
font-weight: bold;
 
  
}
 
  
/* --| end |------------------------ */
+
===Javascript-based dropdown menu Template (Especially good for manga/OST collections)===
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
----
</style>
 
  
</head>
+
Submitted by: shadowmaniac
<body>
 
  
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
+
'''Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.'''
<tr>
 
<td colspan="3">
 
<div><hr><br></div>
 
  
 +
'''Note: Please don't use this template if you don't/can't understand what's going on.'''
  
<!-- main heading here -->
+
<pre>
<div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div>
+
<html>
 +
<head>
 +
<style type="text/css">
 +
hr
 +
{
 +
width: 80%;
 +
}
  
<div><br><hr></div>
+
body
</td>
+
{
</tr>
+
align: center;
 +
                height: 500px;
 +
}
  
<tr>
+
.tdtext
+
{
 +
width: 30%;
 +
v-align: top;
 +
}
  
<!-- if you add or remove row, rowspan number of 20 here must be adjusted accordingly; else the table would look weird -->
+
.wrapper
<!-- 400px max width recommended -->
+
{
<td rowspan="20" ><img class="pic2" src="http://img24.imageshack.us/img24/590/1086019.jpg"></td>
+
width: 800px;
</tr>
+
align: center; border-width: 2px;
 +
border-style: solid;
 +
border-color: #000;
 +
overflow: auto;
 +
text-align: center;
 +
}
 +
</style>
 +
 
 +
<script  language="javascript">
 +
<!--
 +
//############################################
 +
//Don't change any of the code BELOW this line
 +
//############################################
 +
/***********************************************
 +
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
 +
* Visit DynamicDrive.com for hundreds of original DHTML scripts
 +
* This notice must stay intact for legal use
 +
***********************************************/
  
<tr>
+
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
<td colspan="3" style="padding-top: 0px;"><div class="heading">SERIES INFORMATION</div></td>
+
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
</tr>
+
var iframeids=["myframe"]
  
 +
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
 +
var iframehide="yes"
  
<!-- edit the info accordingly -->
+
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
<tr>
+
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
<td class="label">Main Title:</td>
 
<td class="text">Kaidoumaru</td>
 
</tr>
 
<tr>
 
<td class="label">Official Title:</td>
 
<td class="text">Kai Doh Maru</td>
 
</tr>
 
<tr>
 
<td class="label">Japanese Title:</td>
 
<td class="text">怪童丸</td>
 
</tr>
 
<tr>
 
<td class="label">Year:</td>
 
<td class="text">2001</td>
 
</tr>
 
<tr>
 
<td class="label">Episodes:</td>
 
<td class="text"><span class="text7">1</span></td>
 
</tr>
 
<tr>
 
<td class="label">Categories:</td>
 
<td class="text">Action, Fantasy, Historical, Magic, Seinen</td>
 
</tr>
 
<tr>
 
<td class="label">Director:</td>
 
<td class="text">Kanji Wakabayashi</td>
 
</tr>
 
<tr>
 
<td class="label">Production:</td>
 
<td class="text">Production I.G</td>
 
</tr>
 
<tr>
 
<td class="label">References:</td>
 
  
 +
function resizeCaller() {
 +
var dyniframe=new Array()
 +
for (i=0; i<iframeids.length; i++){
 +
if (document.getElementById)
 +
resizeIframe(iframeids[i])
 +
//reveal iframe for lower end browsers? (see var above):
 +
if ((document.all || document.getElementById) && iframehide=="no"){
 +
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
 +
tempobj.style.display="block"
 +
}
 +
}
 +
}
  
<!-- edit the info accordingly -->
+
function resizeIframe(frameid){
<td class="text">
+
var currentfr=document.getElementById(frameid)
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=500" target="_blank">AniDB</a> |
+
if (currentfr && !window.opera){
<a href="http://www.animenfo.com/animetitle,888,lcvouh,kaidoumaru.html" target="_blank">AnimeNFO</a> |
+
currentfr.style.display="block"
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=306" target="_blank">ANN</a> |
+
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
<a href="http://www.sonymusic.co.jp/Animation/kaidohmaru/" target="_blank">Official Page</a>
+
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
</td>
+
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
</tr>
+
currentfr.height = currentfr.Document.body.scrollHeight;
 
+
if (currentfr.addEventListener)
<tr>
+
currentfr.addEventListener("load", readjustIframe, false)
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div></td>
+
else if (currentfr.attachEvent){
</tr>
+
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
 +
currentfr.attachEvent("onload", readjustIframe)
 +
}
 +
}
 +
}
  
 +
function readjustIframe(loadevt) {
 +
var crossevt=(window.event)? event : loadevt
 +
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
 +
if (iframeroot)
 +
resizeIframe(iframeroot.id);
 +
}
  
<!-- edit the info accordingly -->
+
function loadintoIframe(iframeid, url){
<tr>
+
if (document.getElementById)
<td class="label">FanSub by:</td>
+
document.getElementById(iframeid).src=url
<td class="text3">No Information</td>
+
}
</tr>
 
<tr>
 
<td class="label">Video:</td>
 
<td class="text"><span class="text7">XviD</span> [ <span class="text6">720x400 29.97fps</span> ]</td>
 
</tr>
 
<tr>
 
<td class="label">Audio:</td>
 
<td class="text"><span class="text7">Japanese</span> [ <span class="text6">MPEG Audio Layer 3 48000Hz stereo 130Kbps</span> ]</td>
 
</tr>
 
<tr>
 
<td class="label">Subtitles:</td>
 
<td class="text"><span class="text7">English</span> [ <span class="text6">Hard-Subbed</span> ]</td>
 
</tr>
 
<tr>
 
<td class="label">Approx. Duration:</td><td class="text">~ <span class="text7">46</span> minutes per episode</td>
 
</tr>
 
<tr>
 
<td class="label">Note:</td><td class="text">Please continue seeding as much as you can.<br>Thank you guys.</td>
 
</tr>
 
 
 
  
<!-- edit the info accordingly -->
+
if (window.addEventListener)
<tr>
+
window.addEventListener("load", resizeCaller, false)
<td class="label">Related Anime:</td>
+
else if (window.attachEvent)
<td class="text">
+
window.attachEvent("onload", resizeCaller)
>  <a href="http://bakabt.me/torrent/141617/Kai_Doh_Maru._DVDrip.html" target="_blank">Kai Doh Maru.[DVDrip]</a><br>
+
else
>  <a href="http://bakabt.me/torrent/129335/Kaidoumaru_-_OVA_a4e.html"  target="_blank">Kaidoumaru - OVA [a4e]</a>
+
window.onload=resizeCaller
</td>
+
//#############################################
</tr>
+
//Don't change any of the code BEYOND this line
<tr>
+
//#############################################
<td class="label">Related OST:</td>
 
<td class="text3">No Information</td>
 
</tr>
 
  
<tr>
 
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
 
  
  
<!-- edit the info accordingly -->
 
<p>
 
<span class="text9">
 
This story takes place during the Heian Period of Japan's history, when evil spirits still resided in the forests, mountains and rivers.
 
A girl, accompanied by her loved one, battles against these evil spirits, while she is disguised as man.
 
This brave woman, aka "Kaidomaru", with a Chinese character "Flame" tatooed on her upper arm, was one of the "Four Devas".
 
Kaidomaru fights for the honor of her lost love, Raikou Minamotono, who had sacrified his life in order to protect the capital Kyoto, from the evils deeds of a "princess" cursed by a malicious ogre.
 
The princess, whom Kaidomaru used to play with as a child, has now become her ultimate enemy.
 
</span>
 
</p>
 
</td>
 
</tr>
 
  
<tr>
+
//########################################
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
+
//Modify the code below to suit your needs
</tr>
+
//########################################
</table>
+
function Show(selected_option)
 +
{
 +
  // get our iframe
 +
var testFrame = document.getElementById("myframe");
 +
var val;
  
 +
//selected_option refers to the "option" value provided in the HTML code
 +
switch(parseInt(selected_option))
 +
{
 +
case 1:
 +
val = "<table align='center' border='1' width='100%'>";
 +
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
 +
val += "<img src='[[img link here]]'></td></tr>";
 +
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 1]]</h2></td></tr>";
 +
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
 +
val += "</table>";
 +
  break;
 +
case 2:
 +
val = "<table align='center' border='1' width='100%'>";
 +
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
 +
val += "<img src='[[img link here]]'></td></tr>";
 +
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 2]]</h2></td></tr>";
 +
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
 +
val += "</table>";
 +
  break;
 +
case 3:
 +
val = "<table align='center' border='1' width='100%'>";
 +
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
 +
val += "<img src='[[img link here]]'></td></tr>";
 +
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 3]]</h2></td></tr>";
 +
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
 +
val += "</table>";
 +
  break;
 +
case 4:
 +
val = "<table align='center' border='1' width='100%'>";
 +
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
 +
val += "<img src='[[img link here]]'></td></tr>";
 +
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 4]]</h2></td></tr>";
 +
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
 +
val += "</table>";
 +
  break;
 +
case 5:
 +
val = "<table align='center' border='1' width='100%'>";
 +
val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>";
 +
val += "<img src='[[img link here]]'></td></tr>";
 +
val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 5]]</h2></td></tr>";
 +
val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>";
 +
val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>";
 +
val += "</table>";
 +
  break;
 +
default:
 +
  val = "<h2 align='center'>Choose an album/OST from the drop menu</h2><br />";
 +
  break;
 +
}
 +
 +
// now write out the new contents
 +
var doc = testFrame.contentDocument;
 +
if (doc == undefined || doc == null)
 +
doc = testFrame.contentWindow.document;
 +
doc.open();
 +
doc.write(val);
 +
doc.close();
  
</body>
+
  document.all.myFrame.style.visibility="visible";
</html>
+
}
 
+
//-->
 
+
</script>
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
</head>
 
 
[screenshot]
 
[img]http://img91.imageshack.us/img91/8154/snapshot20090503140650j.png[/img]
 
[img]http://img397.imageshack.us/img397/945/snapshot20090503140744.png[/img]
 
[img]http://img212.imageshack.us/img212/3776/snapshot20090503140822.png[/img]
 
[img]http://img240.imageshack.us/img240/889/snapshot20090503140849.png[/img]
 
[img]http://img142.imageshack.us/img142/8716/snapshot20090503141314.png[/img]
 
[/screenshot]                                                   
 
</pre>
 
 
 
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Anime_Template_-_Dark_Themed.png Click here for full preview]<br />
 
Back to [[Offer_Templates#Templates_preview|top]].
 
 
 
===Pure CSS Driven Anime Template - Alternative===
 
----
 
 
 
Submitted by: deysmacro
 
 
 
<pre>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
 
 
 
<style type="text/css">
 
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
 
*
 
* Please take note. The indentation should look correctly using Firefox.
 
*
 
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
 
* When that happen, please use Firefox.
 
*
 
* Thank you for your understanding.
 
*
 
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
 
*
 
* Main user link : http://bakabt.me/user/816453/deysmacro.html
 
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
 
*
 
* I welcome all of you people to use this template at your convenience.
 
* Do contact me via PM or email if you had anything to say.
 
*
 
* Email : deysmacro[at]gmail[dot]com
 
*
 
* I also can help you guys with the template.
 
* I will help whenever I can.
 
*
 
* Thanks To : kureshii, Jarudin, xchiamiov
 
* Thanks Also To : DaggerLite, enginarc, mrdkreka, blubart
 
*
 
* Originally Customized By : deysmacro
 
* Re-Customized By : YOUR NICK HERE
 
*
 
* Template Version : 3.3.3.1 pure css driven - alternative
 
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
 
*
 
* Please leave the credit intact if you plan to use this template.
 
* Your cooperation is highly appreciated. Thank you.
 
*
 
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
 
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v3331 | 13
 
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
 
*
 
* Quick Reminder:
 
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
 
*
 
*
 
* Example:
 
* Assume "width" is the syntax...
 
*
 
* body {
 
* width: 100px; <-- major browser support
 
*
 
* *width: 110px; <-- targeted for IE only
 
* }
 
*
 
*
 
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 
* Please take note of this when you are editing.
 
*
 
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
 
/*
 
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
 
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
 
*
 
* Hopefully you guys enjoy using this template. Good day people.
 
*/
 
/* ------------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
 
/* --| whole table positioning control |-- */
 
 
 
.button {
 
margin: 0px;
 
  
}
+
<body>
 +
<center>
 +
<div class="wrapper">
 +
<br />
 +
<form  id="form1">
 +
<select name="dest" onchange="Show(this.options[this.selectedIndex].value)">
  
/* --| end |---------------------------- */
+
<!-- Modify this part here -->
/* --| whole table body control |-- */
+
<option value="0">Choose an album/OST</option>
 +
<option value="1">[[OST 1]]</option>
 +
<option value="2">[[OST 2]]</option>
 +
<option value="3">[[OST 3]]</option>
 +
<option value="4">[[OST 4]]</option>
 +
<option value="5">[[OST 5]]</option>
 +
<!-- No need for modification beyond this point -->
  
table.file_info {
+
</select>
border-spacing: 0px;
+
</form>
margin-left: auto;
+
<iframe  id="myframe" frameborder="0"  vspace="0"  hspace="0"  marginwidth="0" marginheight="0" width="700" 
margin-right: auto;
+
  scrolling="no" style="overflow:visible; width:100%; display:none"></iframe>
margin-top: 5px;
+
</div>
width: auto;
+
    </center>
 +
</body>
 +
</html>
 +
</pre>
  
*border-collapse: collapse;
+
Sample template image: [http://i369.photobucket.com/albums/oo133/shadowmaniac_2000/JSDropdown.jpg Sample image]
  
}
+
Sample torrent (slightly modified template): [http://bakabt.me/torrent/143278/KoiKoi7_-_Song_Shu_Paradise_Character_Mini_Albums.html KoiKoi7 - Song Shu Paradise & Character Mini Albums]
  
/* --| end |----------------------- */
+
===Simple ChalamiuS OST Template===
/* --| tootip hover control |-- */
+
----
 +
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20OST%20Template Click here] to use
  
td.info_label:hover {
+
Go to: [http://bakabt.me/offer.php Offers Page]
z-index: 9;
 
cursor: help;
 
  
}
+
=Outdated Templates=
 +
<span style="color:red; font-size:18px;">Please don't use following templates anymore. They are outdated.</span>
  
/* --| end |------------------------- */
+
===HTML5 CSS3 Anime Template===
/* --| tootip misc control |------ */
+
----
  
td.info_label span {
+
Submitted by: CvP
display: none;
+
[[File:Html5_CSS3_anime_template_by_cvp.JPG|thumb|300px|Full Sized Screenshot]]
 +
This anime template utilizes HTML5 and CSS3.
 +
It is compatible with latest IE9/Firefox/Chrome/Safari/Opera as much as possible.<br /><br />
  
}
+
<blockquote>To use this template, you don't need to edit a single line of code.<br />
 +
All you need to do is
 +
*'''fill up the form with all the data and hit submit.'''
 +
*'''Once template is loaded, right click > "view source" > select all > copy.'''
 +
*'''Now go to offer page and paste the code'''.
 +
It is that simple.</blockquote><br />
  
/* --| end |------------------------ */
+
This template (and the form) will be constantly updated for better compatibility and features. Please leave your feedback in [http://forums.bakabt.me/index.php?topic=26922.0 here]<br />
/* --| tootip styling control |-- */
+
If you need any help customizing this template, you can post in the above link as well.<br />
  
td.info_label:hover span {
+
'''Note''': It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).
position: absolute;
 
bottom: 24px;
 
font-family: "Trebuchet MS", sans-serif;
 
font-size: 11px;
 
line-height: 16px;
 
background-color: #FFFFCC;
 
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 
background-position: 3px 50%;
 
background-repeat: no-repeat;
 
color: #777777;
 
height: 16px;
 
width: auto;
 
border: 1px solid #999999;
 
margin: 0px;
 
padding: 5px;
 
display: block;
 
  
*width: 350px; /* no need to adjust the tooltip width unless needed */
+
[http://cvp.banglagamer.com/bakabt Click here] to use.<br />
*bottom: 16px;
+
[http://bakabt.me/147902-fate-stay-night-1080p-anime-supreme.html Click here] for a live preview!<br /><br />
*left: -80px;
+
Back to [[Offer_Templates#Templates_preview|top]].
*text-align: left;
 
  
}
+
===Generic Revision-2 Anime Template===
 +
----
  
/* --| end |---------------------------------------- */
+
Submitted by: deysmacro
/* --| individual left side content control |-- */
 
  
td.info_label {
+
<pre>
width: 20px;
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
font-family: "Lucida Console", sans-serif;
+
<html><head>
font-size: 7.7px;
 
text-align: center;
 
color: #D0D0F0;
 
background-color: #854C9E;
 
border: #854C9E 2px solid;
 
position: relative;
 
  
*font-size: 9px;
+
<script src="http://www.yourjavascript.com/1103491011/NFLightBox.js" type="text/javascript"></script>
 +
<script type="text/javascript">
 +
    $(function() {
 +
        var settings = {
 +
            imageLoading: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.loading.gif',
 +
            imageBtnPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.prev.png',
 +
            imageBtnNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.next.png',
 +
            imageBtnClose: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.close.png',
 +
            imageBlank: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.blank.gif',
 +
            imageBtnBottomPrev: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.prev.gif',
 +
            imageBtnBottomNext: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.btm.next.gif',
 +
            imageBtnPlay: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.start.png',
 +
            imageBtnStop: 'http://www.notesfor.net/samples/jquery/notesforlightbox/images/white/nf.pause.png',
 +
            containerResizeSpeed: 350 };
 +
        $('#gallery a').lightBox(settings);
 +
    });  
 +
</script>
  
}
+
<style type="text/css">
 +
/*  -| general info |-
 +
*
 +
*    Main user link  : http://bakabt.me/user/816453/deysmacro.html
 +
*    Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
 +
*
 +
*    I welcome all of you people to use this template at your convenience.
 +
*    I also can help you guys with the template. I will help whenever I can.
 +
*    Please leave the credit intact if you plan to use this template.
 +
*    Your cooperation is highly appreciated. Thank you.
 +
*    Do contact me via PM or email if you had anything to say.
 +
*
 +
*    Email : deysmacro[at]gmail[dot]com
 +
*
 +
*
 +
*    Originally Customized By : deysmacro
 +
*    Re-Customized By            : PUT YOUR NICK HERE
 +
*
 +
*    Template Version              : 1.0.12 generic revision-2 anime template
 +
*    Template Last Update On : Jan 7th, 2010 @ 11:28am GMT+8
 +
*
 +
*
 +
*    SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2010 | 01 | 07 | g-r2-at | v1.0.12
 +
*
 +
* -| end |- */
  
/* --| end |------------------------------------------------- */
+
/* -| Info you should know |-
/* --| individual right side - left content control |-- */
+
*
 +
*    Quick Reminder:
 +
*    If you found any syntax with * siding with the syntax, it is targeted for IE only.
 +
*
 +
*
 +
*    Example:
 +
*          Assume "width" is the syntax...
 +
*
 +
*    body {
 +
*          width: 100px;    <-- major browser support
 +
*
 +
*          *width: 110px;    <-- targeted for IE only
 +
*    }
 +
*
 +
*
 +
*    This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 +
*    Please take note of this when you are editing.
 +
*
 +
* -| end |- */
  
td.info_a {
+
#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
background-color: #EEEEFF;
+
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
border: #854C9E 2px solid;
+
#jquery-lightbox a img { border: none; }
border-right: 0px;  
+
#lightbox-container-image-box-top { width: 100%; }
color: #854C9E;
+
#lightbox-container-image-box-top-left { width: 10%; height: 1px; position: relative; margin: 0 auto; float: left; z-index: 10; display: inline; text-align: left; }
font-family: "Lucida Console", sans-serif;
+
#lightbox-container-image-box-top-middle { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; z-index: 5; display: inline; }
font-size: 7.7px;
+
#lightbox-container-image-box-top-middle div.progress { width: 80%; padding-top: 5px; height: 5px; position: relative; margin: 0 auto 0 0px; float: left; background-color: #e4e4e4; z-index: 5; display: inline; }
text-align: left;
+
#lightbox-container-image-box-top-right { width: 10%; height: 1px; position: relative; margin: 0 auto; float: right; text-align: right; z-index: 10; display: inline; }
width: 50px;
+
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
padding: 0px 0px 0px 3px;
+
#lightbox-container-image { height: 100%; padding: 10px; }
font-size: 7.7px;
+
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
 +
#lightbox-nav { position: absolute; top: 32px; left: 0; height: 100%; width: 100%; z-index: 10; }
 +
#lightbox-container-image-box > #lightbox-nav { left: 0; }
 +
#lightbox-nav a { outline: none; }
 +
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; }
 +
#lightbox-nav-btnPrev { left: 0; float: left; }
 +
#lightbox-nav-btnNext { right: 0; float: right; }
 +
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; text-align: left; }
 +
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }
 +
#lightbox-image-details-caption { font-weight: bold; display: block; height: 25px; line-height: 25px; vertical-align: middle; }
 +
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em; display: inline; height: 16px; line-height: 16px; vertical-align: middle; }
 +
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image, #lightbox-image-details-next-text
 +
{ display: inline; height: 25px; line-height: 25px; vertical-align: middle; cursor: pointer; cursor: hand; }
  
*font-size: 9px;
+
p { text-align: justify; background-color: #F5E8E0; text-shadow: #CEB0D6 2px 2px 2px; }
  
}
+
.div1 { text-align: center; padding: 5px 10px 5px 10px; *padding: -25px 10px -25px 10px; margin:0px; *margin: 5px 10px 5px 10px; background-color: #F5E8E0; border:1px solid #EFD5BE; }
 +
.div2 { margin-top: 15px; }
 +
.div3 { margin-top: 10px; }
 +
.div4 { *padding: 10px; }
  
/* --| end |--------------------------------------------------- */
+
fieldset { border: 1px solid #CEB0D6; }
/* --| individual right side - right content control |-- */
 
  
td.info_b {
+
.legend1 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid #CEB0D6; padding: 5px 250px; *padding: 5px 270px; padding: 5px 193px;] }
background-color: #EEEEFF;
+
.legend2 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 255px; *padding: 5px 275px; padding: 5px 200px;] }
border: #854C9E 2px solid;
+
.legend3 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 144px; padding: 5px 142px;] }
border-left: 0px;  
+
.legend4 { color: #710000; text-align: center; text-shadow: #fff -2px -2px 2px; font-weight: bold; background: #E2D5E6; border: 1px solid  #CEB0D6; padding: 5px 235px; padding: 5px 222px;] }
color: #854C9E;
 
font-family: "Lucida Console", sans-serif;
 
font-size: 7.7px;
 
text-align: right;
 
width: 60px;
 
padding: 0px 3px 0px 0px;
 
font-size: 7.7px;
 
  
*font-size: 9px;
+
#img1 { padding:15px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin: 10px; }
 +
#img2 { padding:10px; text-align:center; border:1px solid #EFD5BE; background-color:#fff; margin-left: 4px; }
  
}
+
body {  background-color: #FCF3F4; }
  
/* --| end |----------------------------------------------------- */
+
.tr1 { background-color:#F5E8E0; }
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
.td1 { border:1px solid #EFD5BE; text-align:right; width:19%; text-shadow: #CEB0D6 2px 2px 2px; }
 +
.td2 { border:1px solid #EFD5BE; text-shadow: #CEB0D6 2px 2px 2px; }
  
/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
+
</style>
  
.note1 {
+
</head>
font-family: "Trebuchet MS", sans-serif;
+
<body>
font-size: 11px;
+
<table width='100%'>
line-height: 16px;
+
    <tr>
background-color: #FFFFCC;
+
          <td ><img id='img1' src='http://img693.imageshack.us/img693/330/imgcm.jpg' /></td>
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
+
          <td>
background-position: 3px 50%;
+
              <fieldset><legend class=legend1>SERIES INFORMATION</legend>
background-repeat: no-repeat;
+
                    <table width=100% cellpadding=5px cellspacing=5px>
color: #777777;
+
                        <tr class=tr1><td class=td1>Main Title:</td><td class=td2>Misutenaide Daisy</td></tr>
height: 16px;
+
                        <tr class=tr1><td class=td1>Official Title:</td><td class=td2>Don`t Leave Me Alone, Daisy</td></tr>
width: auto;
+
                        <tr class=tr1><td class=td1>Japanese Title:</td><td class=td2>みすてないで デイジー</td></tr>
border: 1px solid #999999;
+
                        <tr class=tr1><td class=td1>Year:</td><td class=td2>03.07.1997 till 18.09.1997</td></tr>
margin: 0px;
+
                        <tr class=tr1><td class=td1>Episodes:</td><td class=td2>12</td></tr>
padding: 5px;
+
                        <tr class=tr1><td class=td1>Categories:</td><td class=td2>Comedy, Cyborgs, Mecha, Sci-Fi, Shounen, Slapstick</td></tr>
display: block;
+
                        <tr class=tr1><td class=td1>Director:</td><td class=td2>Yuji Mutoh</td></tr>
 +
                        <tr class=tr1><td class=td1>Production:</td><td class=td2>BeSTACK, d-rights</td></tr>
 +
                        <tr class=tr1><td class=td1>References:</td>
 +
                              <td class=td2>
 +
                                  <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=2022" target="_blank">AniDB</a> |
 +
                                  <a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=137" target="_blank">ANN</a> |
 +
                                  <a href="http://www.animenfo.com/animetitle,711,ubabvw,misutenaide_dai.html" target="_blank">AnimeNFO</a>
 +
                              </td></tr>
 +
                    </table>
 +
          </fieldset>
 +
          <div class=div2>
 +
          <fieldset><legend class=legend2>FILE INFORMATION</legend>
 +
              <table width=100% cellpadding=5px cellspacing=5px>
 +
                    <tr class=tr1><td class=td1>FanSub By:</td><td class=td2><b>A-Et</b></td></tr>
 +
                    <tr class=tr1><td class=td1>Video:</td><td class=td2><b>DivX 5</b> [ 560x420 29.97fps ]</td></tr>
 +
                    <tr class=tr1><td class=td1>Audio:</td><td class=td2><b>Japanese</b> [ MPEG Audio Layer 3 48000Hz stereo 113kbps ]</td></tr>
 +
                    <tr class=tr1><td class=td1>Subtitles:</td><td class=td2><b>English</b> [ Hard-Subbed ]</td></tr>
 +
              </table>
 +
          </fieldset>
 +
          </div>
 +
          </td>
 +
    </tr>
 +
    <tr>
 +
          <td width=30%>
 +
          <div class=div3>
 +
          <fieldset><legend class=legend3>SYNOPSIS</legend>
 +
              <div class=div1><p>Surrounded only by his inventions, Techno doesn't really interact with other people much. However, one day, a girl attempts to "break into" his fortress. This hapless passerby, a girl named Hitomi, becomes the object of his affection. Techno decides to name her "Daisy," and begins planning to make her his, but can Annie and Yamakawa X protect Hitomi or will the science nerd Techno win Hitomi's heart?</p></div>
 +
          </fieldset>
 +
          </div>
 +
          </td>
 +
          <td>
 +
          <div class=div3>
 +
          <fieldset><legend class=legend4>SCREENSHOTS</legend><div class=div4><div id=gallery>
 +
              <a href='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img706.imageshack.us/img706/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
 +
              <a href='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img687.imageshack.us/img687/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
 +
              <a href='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.png' ><img id=img2 src='http://img192.imageshack.us/img192/5193/dontleavemealonedaisy01.th.png' border='0'/></a>
 +
          </div></div></fieldset>
 +
          </div>
 +
          </td>
 +
    </tr>
 +
</table>
  
}
+
</body></html>
 +
</pre>
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
Sample template image: [http://wiki.bakabt.me/index.php/File:Generic_Revision-2_Anime_Template.png Click here for full preview]<br />
 +
Back to [[Offer_Templates#Templates_preview|top]].
  
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
+
===JS Alternative Anime Template - Editing Friendly Edition===
/* --| top half container control |-- */
+
----
  
.divtop {
+
Submitted by: deysmacro
margin: 0px;
 
padding: 0px;
 
height: 410px; /* no need to adjust the height unless needed */
 
  
}
+
<pre>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html>
 +
<head>
  
/* --| end |----------------------------- */
 
/* --| top left container control |-- */
 
  
.divtl {
+
<script language="javascript" purpose="User definitions">
margin: 0px 0px 0px 10px;
+
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
padding: 10px;
 
width: 520px;
 
  
}
+
function dcw(input)
 +
  { document.write(input); }
 +
      useredit = new Object();
 +
      related = new Object();
  
/* --| end |------------------------------- */
+
      related.anime_list = new Array();
/* --| top right container control |-- */
+
      related.ost_list = new Array();
 +
      related.pics_list = new Array();
  
.divtr {
+
function add_related(type, title, href)
margin: -415px 0px 0px 540px;
+
  { var tmp_list;
padding: 10px;
+
          switch (type) {
 +
                case "anime": target_list = related.anime_list;
 +
                    break;
 +
                  case "ost"  : target_list = related.ost_list;
 +
                      break;
 +
                  case "pics": target_list = related.pics_list;
 +
                      break; }
  
*margin: -410px 0px 0px 540px;
+
        tmp_item = new Object();
 +
 
 +
        tmp_item.title = title;
 +
        tmp_item.href = href;
  
}
+
        target_list.push(tmp_item);
 +
  }
  
/* --| end |---------------------------------- */
+
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
/* --| bottom half container control |-- */
+
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
  
.divbottom {
 
margin: 5px 0px 0px 0px;
 
padding: 0px;
 
height: 340px; /* no need to adjust the height unless needed */
 
  
*margin: 0px;
+
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
*height: 335px; /* no need to adjust the height unless needed */
 
  
}
 
  
/* --| end |---------------------------------- */
+
useredit.maintitle="Panda Kopanda";
/* --| bottom left container control |-- */
+
useredit.officialtitle="Panda! Go Panda";
 +
useredit.japanesetitle="パンダコパンダ ";
 +
useredit.year="1972 & 1973";
 +
useredit.episodes="2 combined into 1";
 +
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
 +
useredit.director="Isao Takahata";
 +
useredit.production="Shunzo Kato";
  
.divbl {
 
margin: 0px 0px 0px 10px;
 
padding: 10px;
 
width: 520px;
 
  
}
+
/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
 +
useredit.anidb = "http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530";
 +
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
 +
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
 +
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
  
/* --| end |------------------------------------ */
 
/* --| bottom right container control |-- */
 
  
.divbr {
+
useredit.synopsis=
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
+
"Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.<br><br>The story is about a little girl, Mimiko, who was left alone while her Grandma was away.<br><br>A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie. <br><br>The literal translation of the title Panda Kopanda is 'Panda, Baby Panda', but it's been released in North America as Panda Go Panda.";
padding: 10px;
+
 
 +
 
 +
useredit.fansub="<b>No Information</b>";
 +
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
  
*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */
 
  
}
+
useredit.srcs_left="";
 +
useredit.srcs_right="DVD";
  
/* --| end |------------------------------------ */
 
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
 
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */
+
useredit.vids_left="DIVX";
 +
useredit.vids_right="704X544";
  
.div5 {
 
margin: -10px 0px -10px -25px;
 
  
*margin: -20px 0px -20px -25px;
+
useredit.auds_left="JP";
 +
useredit.auds_right="MP3  24KHZ";
  
}
 
  
li {
+
useredit.subs_left="EN";
text-align: justify;
+
useredit.subs_right="HARD";
color: #854C9E;
 
  
}
 
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
 +
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
 +
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";
  
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
 
/* --| body control |-- */
 
  
body {
+
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
background: #131313;
+
add_related("anime", "Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]", "http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some fresh background? change it here */
+
add_related("anime", "Dummy link", "#");
font-family: "Trebuchet MS", sans-serif;
 
font-size: 11px;
 
text-align: left;
 
color: #854C9E; /* main font color */
 
height:auto;
 
  
}
 
  
/* --| end |-------------------- */
+
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
/* --| paragraph control |-- */
+
add_related("ost", "No related link", "#");
 +
add_related("ost", "Dummy link", "#");
  
p {
 
text-align: justify;
 
color: #854C9E;
 
font-weight: bold;
 
  
}
+
/* --> this is an array of pics; means that the pics could be add or remove at your will; the pics here would be dynamically generated accordingly; 320px max width if possible; use jpg format for loading performance <| note |-- */
 +
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
 +
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
 +
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
  
/* --| end |-------------------- */
 
/* --| main table control |-- */
 
  
td {
+
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
vertical-align: left middle;
+
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
 +
</script>
  
}
 
  
.table1 {
+
<!-- multi picture presentation scripting engine -->
background-color: transparent;
+
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
cellpadding: 2px;
 
cellspacing: 0px;
 
height: 100%;
 
width: 100%;
 
  
}
 
  
.table2 {
+
<style type="text/css">
background-color: transparent;
+
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
cellpadding: 0px;
+
* Thanks To        : kureshii, Jarudin
cellspacing: 0px;
+
* Thanks Also To : enginarc, DaggerLite, blubart
height: 100%;
+
*
width: 100%;
+
* Originally Customized By : deysmacro
 
+
* Re-Customized By            : PUT YOUR NICK HERE
}
+
*
 
+
* Template Version              : 3.2.2.1 js alternative - editing friendly edition
/* --| end |--------------------------- */
+
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
/* --| headings styling control |-- */
+
*
 
+
* Please leave the credit intact if you plan to use this template.
.inner {
+
* Your cooperation is highly appreciated.
background-color:#EEEEFF;
+
*
padding: 10px;
+
* Hopefully you enjoy using this template
border: 1px solid #CCCFC8;
+
* Thank you for your time and good day.
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
+
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
font-size: 22px;
+
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 26 | 0720 | d-ait | v3221 | 36
font-weight: bold;
+
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
color: #854C9E;
+
* Quick Reminder:
 +
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
 +
*
 +
* Example:
 +
* Assume "width" is the syntax...
 +
*
 +
* body {
 +
* width: 100px;       <-- major browser support
 +
*
 +
* *width: 110px;       <-- targeted for IE only
 +
* }
 +
*
 +
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 +
* Please take note of this when you are editing.
 +
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| end |-- */
 +
 
 +
 
 +
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| start |--
 +
   
 +
        Note:
 +
        1. This template is pretty much already ready out of the box and usually doesn't need to be customized anymore.
 +
        2. I will put edit hint at critical point only where the edit usually doesn't need to be done unless the generated page is somehow not quite right.
 +
        3. Just find any 'edit point xx of xx' for quick edit target.
 +
        4. Other settings which have no edit point or edit hint is meant to be left as it is and for advanced user only.
 +
        5. Advanced user may edit the settings but I highly not recommended as it should be fine without to be customized.
 +
        6. Go directly to bottom to edit the screenshot img links.
 +
 
 +
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| end |-- */
 +
 
 +
 
 +
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
 +
/* --| whole table positioning control |-- */
  
 +
.button {
 +
margin: 0px;
 
}
 
}
  
.outer2 {
+
/* --| end |---------------------------- */
z-index: 1;
+
/* --| whole table body control |-- */
background-color: #EEDDFF;
+
 
margin: 10px 0px 0px 0px;
+
table.file_info {
padding: 6px; width: 815px;
+
border-spacing: 0px;
position: relative;
 
border: 1px solid #CCCFC8;
 
text-align: center;
 
 
margin-left: auto;
 
margin-left: auto;
 
margin-right: auto;
 
margin-right: auto;
 +
margin-top: 6px;
 +
margin-bottom: 0px;
 +
width: auto;
  
 +
*border-collapse: collapse;
 
}
 
}
  
.outer3 {
+
/* --| end |----------------------- */
background-color: #EEDDFF;
+
/* --| tootip hover control |-- */
margin: 0px 0px 10px 0px;
 
padding: 6px;
 
width: 815px;
 
border: 1px solid #CCCFC8;
 
text-align: center;
 
margin-left: auto;
 
margin-right: auto;
 
  
 +
td.info_label:hover {
 +
z-index: 9;
 +
cursor: help;
 
}
 
}
  
 
/* --| end |------------------------- */
 
/* --| end |------------------------- */
/* --| horizontal line control |-- */
+
/* --| tootip misc control |------ */
 
 
hr {
 
width: 93%;
 
  
 +
td.info_label span {
 +
display: none;
 
}
 
}
  
.hr1 {
+
/* --| end |------------------------ */
 +
/* --| tootip styling control |-- */
 +
 
 +
td.info_label:hover span {
 +
position: absolute;
 +
bottom: 24px;
 +
font-family: "Trebuchet MS", sans-serif;
 +
font-size: 11px;
 +
line-height: 16px;
 +
background-color: #FFFFCC;
 +
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 +
background-position: 3px 50%;
 +
background-repeat: no-repeat;
 +
color: #777777;
 +
height: 16px;
 +
width: auto;
 +
border: 1px solid #999999;
 
margin: 0px;
 
margin: 0px;
 +
padding: 5px;
 +
display: block;
 +
  
*text-align: center;
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
  
}
+
*width: 350px; /* for IE only - no need to adjust the tooltip width unless needed */
  
/* --| end |--------------------------- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
/* --| picture content control |-- */
 
  
.pics {
 
height: auto;
 
width: auto;
 
padding: 0px;
 
margin: 0px;
 
overflow: hidden;
 
  
 +
*bottom: 16px;
 +
*left: -80px;
 +
*text-align: left;
 
}
 
}
  
.pics img {  
+
/* --| end |---------------------------------------- */
height: auto;  
+
/* --| individual left side content control |-- */
width: auto;  
+
 
padding: 10px;  
+
td.info_label {
border: 1px solid #ccc;  
+
width: 20px;
background-color: #fff;  
+
font-family: "Lucida Console", sans-serif;
top: 0px;  
+
font-size: 7.7px;
left: 0px;  
+
text-align: center;
 +
color: #D0D0F0;
 +
background-color: #854C9E;
 +
border: #854C9E 2px solid;
 +
position: relative;
  
 +
*font-size: 9px;
 
}
 
}
  
/* --| end |---------------------- */
+
/* --| end |------------------------------------------------- */
/* --| label styling control |-- */
+
/* --| individual right side - left content control |-- */
  
.label {
+
td.info_a {
 +
background-color: #EEEEFF;
 +
border: #854C9E 2px solid;
 +
border-right: 0px;
 
color: #854C9E;
 
color: #854C9E;
width: 26%;  
+
font-family: "Lucida Console", sans-serif;
text-align: right;
+
font-size: 7.7px;
 +
text-align: left;
 +
width: 50px;
 +
padding: 0px 0px 0px 3px;
 +
font-size: 7.7px;
  
 +
*font-size: 9px;
 
}
 
}
  
.label:hover {
+
/* --| end |--------------------------------------------------- */
color: blue;
+
/* --| individual right side - right content control |-- */
  
}
+
td.info_b {
 
+
background-color: #EEEEFF;
/* --| end |--------------------- */
+
border: #854C9E 2px solid;
/* --| text styling control |-- */
+
border-left: 0px;
 
 
.text {
 
 
color: #854C9E;
 
color: #854C9E;
width: 74%;  
+
font-family: "Lucida Console", sans-serif;
 +
font-size: 7.7px;
 +
text-align: right;
 +
width: 60px;
 +
padding: 0px 3px 0px 0px;
 +
font-size: 7.7px;
  
 +
*font-size: 9px;
 
}
 
}
  
.text:hover {
+
/* --| end |----------------------------------------------------- */
color: red;
+
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
}
 
  
/* --| end |--------------------------- */
+
/* --| div which holds divpic and divtab |-- */  
/* --| label box styling control |-- */
 
  
.rounded1 {
+
.divwhole {
background-color:#EEDDFF;  
+
        margin: 23px 0px 20px 0px;
padding: 10px;
+
        padding: 0px;
width: auto;
 
height: auto;
 
border: 1px solid #CCCFC8; 
 
  
}
 
  
/* --| end |--------------------------- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
/* --| text box styling control |-- */
 
  
.rounded2 {
+
        height: 460px; /* this height only need to be adjusted when necessary only */
background-color:#EEEEFF;  
 
padding: 10px;
 
width: auto;
 
height: auto;
 
border: 1px solid #CCCFC8; 
 
  
}
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
  
/* --| end |-------------------------------- */
 
/* --| synopsis box styling control |-- */
 
 
.rounded3 {
 
background-color:#EEEEFF;
 
padding: 5px 10px 5px 10px;
 
width: auto;
 
height: auto;
 
border: 1px solid #CCCFC8; 
 
  
 +
        *margin: 35px 0px -5px 0px;
 
}
 
}
  
/* --| end |-------------------------------- */
+
/* --| end |--------------------------- */  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* --| div which holds the pics |-- */  
</style>
 
  
</head>
+
.divpic {
<body>
+
        margin: 0px 0px 0px 20px;
 +
        padding: 0px;
  
<div class="outer2">
+
        *margin: -25px -365px 0px 20px;
 +
}
  
 +
/* --| end |--------------------------------------- */
 +
/* --| div which holds the tab container |-- */
  
<!-- the title heading -->
+
.divtab {
 +
        margin: -450px 0px 0px 360px;
 +
        padding: 0px;
 +
        width: 560px;
 +
}
  
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
+
/* --| end |------------ */
 +
/* --| body styling |-- */  
  
<div class="button">
+
body {
<table class="file_info">
+
  background: #131313;
  
  
<!-- tooltip and quick file summary area -->
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
  
<tr>
+
  background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some new and fresh background? change it here; use jpg format for loading performance */
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
 
<td class="info_a"><div>&nbsp;</div></td>
 
<td class="info_b"><div>DVD</div></td>
 
<td />
 
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.</span><div>VIDS</div></td>
 
<td class="info_a"><div>DIVX</div></td>
 
<td class="info_b"><div>704X544</div></td>
 
<td />
 
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.</span><div>AUDS</div></td>
 
<td class="info_a"><div>JP</div></td>
 
<td class="info_b"><div>MP3  24KHZ</div></td>
 
<td />
 
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been <b>hard-subbed</b>.</span><div>SUBS</div></td>
 
<td class="info_a"><div>EN</div></td>
 
<td class="info_b"><div>HARD</div></td>
 
</tr>
 
</table>
 
</div>
 
  
</div>
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
  
<div class="hr1"><hr></div>
 
  
<div class="divtop">
+
  font-family: "Trebuchet MS", sans-serif;
 +
  font-size: 11px;
 +
  text-align: left;
 +
  color: #854C9E;
 +
  height:auto;
 +
}
  
<div class="divtl">
+
/* --| end |----------------- */
<fieldset>
 
  
<legend>| Series Information |</legend>
 
  
 +
/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
 +
/* --> the tab container settings are not meant to be adjusted unless you know what are you doing or you are just want to play with the settings <-----| note |-- */
  
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
+
/* Layout helpers ----------------------------------*/
<!-- edit the info accordingly -->
+
.ui-helper-hidden { display: none; }
 +
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
 +
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
 +
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 +
.ui-helper-clearfix { display: inline-block; }
 +
/* required comment for clearfix to work in Opera \*/
 +
* html .ui-helper-clearfix { height:1%; }
 +
.ui-helper-clearfix { display:block; }
 +
/* end clearfix */
 +
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
  
<table class="table1">
+
/* Component containers ----------------------------------*/
<tr>
+
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
<td class="label"><div class="rounded1">Main Title:</div> </td>
+
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
+
.ui-widget-content { border: 1px solid #dddddd; background: #F6FAFD url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #eeeeee; }
</tr>
+
.ui-widget-content a { color: #333333; }
<tr>
+
.ui-widget-header { border: 1px solid #CCCCCC; background: #EEEEFF url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #F6FAFD; font-weight: bold; }
<td class="label"><div class="rounded1">Official Title:</div></td>
+
.ui-widget-header a { color: #F6FAFD; }
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Japanese Title:</div></td>
 
<td class="text"><div class="rounded2">パンダコパンダ</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Year:</div></td>
 
<td class="text"><div class="rounded2">1972 & 1973</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Episodes:</div></td>
 
<td class="text"><div class="rounded2">2 combined into 1</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
 
<td class="text"><div class="rounded2">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Director:</div></td>
 
<td class="text"><div class="rounded2">Isao Takahata</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Production:</div></td>
 
<td class="text"><div class="rounded2">Shunzo Kato</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">References:</div></td>
 
<td class="text">
 
<div class="rounded2">
 
  
 +
/* Interaction states ----------------------------------*/
 +
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
 +
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
 +
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
 +
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
 +
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #CCCCCC; background: #F6FAFD url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
 +
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }
  
<!-- edit the info accordingly -->
+
/* Tabs ----------------------------------*/
 +
.ui-tabs { padding: .2em; zoom: 1; }
 +
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
 +
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
 +
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
 +
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
 +
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
 +
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
  
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
+
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
+
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
+
.ui-tabs .ui-tabs-hide { display: none !important; }
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
 
</div>
 
</td>
 
</tr>
 
</table>
 
  
</fieldset>
+
/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
</div>
 
 
<div class="divtr">
 
<fieldset>
 
  
<legend>| Main Picture |</legend>
 
  
<table class="table2">
+
/* --| message bar positioning control |-- */
<tr>
 
<td>
 
<div class="pics">
 
  
 +
.overlap1 {
 +
  height: 32px;
 +
  z-index: 2;
 +
  position: relative;
 +
  margin: 0px 0px -16px 0px;
 +
}
  
<!-- picture height should be 340px max; you may use your preferred height though -->
+
/* --| end |---------------------- */
 +
/* --| message bar styling |-- */
  
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png"  />
+
.note {
</div>
+
  font-family: "Trebuchet MS", sans-serif;
</td>
+
  font-size: 11px;
</tr>
+
  line-height: 16px;
</table>
+
  background-color: #FFFFCC;
 +
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 +
  background-position: 3px 50%;
 +
  background-repeat: no-repeat;
 +
  color: #777777;
 +
  height: 16px;
 +
  width: auto;
 +
  border: 1px solid #999999;
 +
  margin: 0px 0px 5px 0px;
 +
  padding: 5px;
 +
  display: block;
 +
}
  
</fieldset>
+
.note1 {
</div>
+
  font-family: "Trebuchet MS", sans-serif;
 
+
  font-size: 11px;
</div>
+
  line-height: 16px;
 
+
  background-color: #FFFFCC;
<div class="divbottom">
+
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 
+
  background-position: 3px 50%;
<div class="divbl">
+
  background-repeat: no-repeat;
<fieldset>
+
  color: #777777;
 +
  height: 16px;
 +
  width: auto;
 +
  border: 1px solid #999999;
 +
  margin: 0px;
 +
  padding: 5px;
 +
  display: block;
 +
}
  
<legend>| File Information |</legend>
 
  
 +
.note2 {
 +
  font-family: "Trebuchet MS", sans-serif;
 +
  font-size: 11px;
 +
  line-height: 16px;
 +
  background-color: #FFFFCC;
 +
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 +
  background-position: 3px 50%;
 +
  background-repeat: no-repeat;
 +
  color: #777777;
 +
  height: 16px;
 +
  width: auto;
 +
  border: 1px solid #999999;
 +
  margin: 5px 0px 0px 0px;
 +
  padding: 5px;
 +
  display: block;
 +
}
  
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
+
/* --| end |-------------------------------------- */
<!-- edit the info accordingly -->
+
/* --| list styling |-- */
  
<table class="table1">
+
li {
<tr>
+
  text-align: justify;
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
+
  color: #854C9E;
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
+
}
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
 
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>No Information.</i></div></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Approx. Duration:</div></td>
 
<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Note:<br><br></div></td>
 
<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
 
<td class="text">
 
<div class="rounded2">
 
<ul>
 
  
<div class="div5">
+
.divlist {
<li>
+
  margin: -10px 0px -10px -25px;
  
 +
  *margin: -20px 0px -20px -25px;
 +
}
  
<!-- edit the info accordingly -->
+
/* --| end |------------ */
 +
/* --| http link styling |-- */
  
<a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
+
a:hover {
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
+
  color: #854C9E;
</a>
+
}
</li>
 
</div>
 
  
</ul>
+
/* --| end |------------------- */  
</div>
+
/* --| paragraph styling |-- */  
</td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
 
  
 +
p {
 +
  text-align: justify;
 +
  color: #854C9E;
 +
  font-weight: bold;
 +
}
  
<!-- edit the info accordingly -->
+
/* --| end |------------- */
 +
/* --| table styling |-- */
  
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
+
td {
</tr>
+
  vertical-align: left middle;
</table>
+
}
  
</fieldset>
+
/* --| end |------------ */
</div>
+
/* --| label styling |-- */
  
<div class="divbr">
+
.label {
<fieldset>
+
  color: #854C9E;
 +
  width: 17%;
 +
  text-align: right;
 +
}
  
<legend>| Synopsis |</legend>
+
.label:hover {
 +
  color: blue;
 +
}
  
<table class="table2">
+
/* --| end |------------ */
<tr>
+
/* --| text styling |-- */
<td>
 
<div class="rounded3">
 
  
 +
.text {
 +
  color: #854C9E;
 +
  width: 74%;
 +
}
  
<!-- the <br> here is for break; not the same purpose as of above usage -->
 
<!-- edit the info accordingly -->
 
  
<p>
+
.text:hover {
Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.
+
  color: red;
<br><br>
+
}
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
 
<br><br>
 
A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie.
 
<br><br>
 
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
 
</p>
 
  
</div>
+
/* --| end |--------------------------- */  
</td>
+
/* --| headings styling control |-- */
</tr>
 
</table>
 
  
</fieldset>
+
.inner {
</div>
+
  background-color: #EEEEFF;
 
+
  padding: 10px;
</div>
+
  border: 1px solid #CCCFC8;
 
+
  font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
<div class="hr1"><hr></div>
+
  font-size: 22px;
 +
  font-weight: bold;
 +
  color: #854C9E;
 +
}
  
<div class="outer3">
+
.outer2 {
<div class="inner">Screenshots</div>
+
  z-index: 1;
</div>
+
  background-color: #EEDDFF;
 +
  margin: 0px;
 +
  padding: 6px;
 +
  width: 815px;
 +
  position: relative;
 +
  border: 1px solid #CCCFC8;
 +
  text-align: center;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
  
 +
.outer3 {
 +
  background-color: #EEDDFF;
 +
  margin: 0px 0px 10px 0px;
 +
  padding: 6px;
 +
  width: 815px;
 +
  border: 1px solid #CCCFC8;
 +
  text-align: center;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
  
</body>
+
/* --| end |------------------------- */
</html>
+
/* --| horizontal line control |-- */
  
 +
hr {
 +
  width: 93%;
 +
}
  
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
.hr1 {
 +
  margin: 0px;
  
[screenshot]
+
  *text-align: center;
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
+
}
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
 
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
 
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
 
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
 
[/screenshot]
 
</pre>
 
  
Sample template image: [http://wiki.bakabt.me/index.php/File:Pure_CSS_Driven_Anime_Template_-_Alternative.png Click here for full preview]<br />
+
/* --| end |--------------------------------------------- */
Back to [[Offer_Templates#Templates_preview|top]].
+
/* --| pics holder styling |--------------------------- */
  
===JS Alternative Anime Template - Editing Friendly Edition===
+
.pics {
----
+
  height: auto;
 +
  width: auto;
 +
  padding: 0px;
 +
  margin: 0px;
 +
  overflow: hidden
 +
}
  
Submitted by: deysmacro
+
.pics img {
 +
  height: auto;
 +
  width: auto;
 +
  padding: 10px;
 +
  border: 1px solid #ccc;
 +
  background-color: #fff;
 +
  top: 0px;
 +
  left: 0px;
 +
}
  
<pre>
+
/* --| end |--------------------------------------------------- */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
/* --| background box styling |--------------------------- */
<html>
 
<head>
 
  
 +
/*
 +
.rounded1 {
 +
  background-color: #EEDDFF;
 +
  padding: 10px;
 +
  width: auto;
 +
  height: auto;
 +
  border: 1px solid #CCCFC8;
 +
}
 +
*/
  
<script language="javascript" purpose="User definitions">
+
.rounded2 {
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
+
  background-color: #EEEEFF;
 +
  padding: 10px;
 +
  width: auto;
 +
  height: auto;
 +
  border: 1px solid #CCCFC8;
 +
}
  
function dcw(input)
+
.rounded3 {
   { document.write(input); }
+
  background-color: #EEEEFF;
      useredit = new Object();
+
  padding: 5px 10px 5px 10px;
      related = new Object();
+
   width: auto;
 +
  height: auto;
 +
  border: 1px solid #CCCFC8;  
  
      related.anime_list = new Array();
+
  *padding: 0px 10px 0px 10px;
      related.ost_list = new Array();
+
}
      related.pics_list = new Array();
+
/* --| end |--------------------------------------------- */
  
function add_related(type, title, href)
+
</style>
  { var tmp_list;
 
          switch (type) {
 
                case "anime": target_list = related.anime_list;
 
                    break;
 
                  case "ost"  : target_list = related.ost_list;
 
                      break;
 
                  case "pics": target_list = related.pics_list;
 
                      break; }
 
  
        tmp_item = new Object();
+
<!-- multi picture presentation timing control -->
 
+
<script type="text/javascript">
        tmp_item.title = title;
+
$('#slideshow').cycle({
        tmp_item.href = href;
+
    fx:    'all',
 +
    timeout: 5000,
 +
    speed:  1000
 +
});  
 +
</script>
  
        target_list.push(tmp_item);
+
<!-- message bar timing control 1 of 3 -->
  }
+
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  setTimeout(function(){
 +
  $("#note1").fadeOut("slow", function () {
 +
  $("#note1").remove();
 +
    });
  
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
+
}, 5000);
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
+
});
 +
</script>
  
 +
<!-- message bar timing control 2 of 3 -->
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  $('#note2').hide();
 +
  setTimeout(function(){
 +
  $("#note2").fadeIn("slow", function () {
 +
  $("#note2").show();
 +
      });
  
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
+
}, 4990);
 
+
});
 +
</script>
  
useredit.maintitle="Panda Kopanda";
+
<!-- message bar timing control 3 of 3 -->
useredit.officialtitle="Panda! Go Panda";
+
<script type="text/javascript">
useredit.japanesetitle="パンダコパンダ ";
+
  $(document).ready(function(){
useredit.year="1972 & 1973";
+
  setTimeout(function(){
useredit.episodes="2 combined into 1";
+
  $("#note3").fadeOut("slow", function () {
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
+
  $("#note3").remove();
useredit.director="Isao Takahata";
+
    });
useredit.production="Shunzo Kato";
 
  
 +
}, 10000);
 +
});
 +
</script>
  
/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
+
<!-- tab container fx control -->
useredit.anidb = "http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530";
+
<script type="text/javascript">
useredit.animenfo = "http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html";
+
  $(function() {
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
+
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
+
      var fx = $('.selector').tabs('slow', 'fx');
 +
      });
 +
</script>
  
 +
</head>
 +
<body>
 +
<!-- advanced user only - body section - NO EDIT GUIDES as i have made it to the point where it is already ready out of the box; basically there is no need to further customized it anymore -->
  
useredit.synopsis=
 
"Panda Kopanda (Panda! Go Panda!) is a 30 minute movie made in 1972. Miyazaki created the original idea, the script, the layouts, and did key animation, and Takahata directed the film.<br><br>The story is about a little girl, Mimiko, who was left alone while her Grandma was away.<br><br>A 1973 sequel, Panda Kopanda: Amefuri Saakasu no Maki (Panda! Go Panda! & the Rainy-day Circus), continues the story and was made by the same people who made the first movie. <br><br>The literal translation of the title Panda Kopanda is 'Panda, Baby Panda', but it's been released in North America as Panda Go Panda.";
 
  
 +
<div class="overlap1">
 +
<div id="note3">
 +
<div id="note2" class="note">
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In case the pictures are not properly fetched/displayed, refresh this page to see if it helps.
 +
</div>
 +
</div>
 +
<div id="note1" class="note">
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If this message does not go away, means that Javascripts support is disabled or this page loads improperly.
 +
Enable Javascripts support and/or refresh this page to see if it helps.
 +
</div>
 +
</div>
  
useredit.fansub="<b>No Information</b>";
+
<div class="outer2">
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
+
<div class="inner"><script>dcw(useredit.heading);</script></div>
 
 
 
 
useredit.srcs_left="";
 
useredit.srcs_right="DVD";
 
 
 
 
 
useredit.vids_left="DIVX";
 
useredit.vids_right="704X544";
 
  
 +
<div class="button">
 +
<table class="file_info">
 +
<tr>
 +
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
 +
<td class="info_a"><div><script>dcw(useredit.srcs_left);</script></div></td>
 +
<td class="info_b"><div><script>dcw(useredit.srcs_right);</script></div></td>
 +
<td />
 +
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_vids);</script></span><div>VIDS</div></td>
 +
<td class="info_a"><div><script>dcw(useredit.vids_left);</script></div></td>
 +
<td class="info_b"><div><script>dcw(useredit.vids_right);</script></div></td>
 +
<td />
 +
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_auds);</script></span><div>AUDS</div></td>
 +
<td class="info_a"><div><script>dcw(useredit.auds_left);</script></div></td>
 +
<td class="info_b"><div><script>dcw(useredit.auds_right);</script></div></td>
 +
<td />
 +
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_subs);</script></span><div>SUBS</div></td>
 +
<td class="info_a"><div><script>dcw(useredit.subs_left);</script></div></td>
 +
<td class="info_b"><div><script>dcw(useredit.subs_right);</script></div></td>
 +
</tr>
 +
</table>
 +
</div>
 +
</div>
  
useredit.auds_left="JP";
+
<div class="hr1"><hr></div>
useredit.auds_right="MP3  24KHZ";
 
  
 +
<div class="divwhole">
  
useredit.subs_left="EN";
+
<div class="divpic">
useredit.subs_right="HARD";
+
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
 +
<tr><td>
 +
<div id="slideshow" class="pics"></div>
 +
<script language="javascript" purpose="Print related pics">
 +
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
 +
</script>
 +
</td></tr>
 +
</table>
 +
</div>
  
 +
<div class="divtab">
 +
<div id="tabs">
 +
<ul>
 +
<li><a href="#tabs-1">Series Information</a></li>
 +
<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
 +
<li><a href="#tabs-3">Synopsis</a></li>
 +
</ul>
  
useredit.tooltip_label_vids="This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.";
+
<div id="tabs-1">
useredit.tooltip_label_auds="This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.";
+
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
useredit.tooltip_label_subs="This title has been <b>hard-subbed</b>.";
+
<tr>
 +
<td class="label"><div class="rounded1">Main Title:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Official Title:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Japanese Title:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Year:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Episodes:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.episodes);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.categories);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Director:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.director);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Production:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.production);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">References:</div></td>
  
 +
<td class="text"><div class="rounded2">
 +
<a id="link_anidb" target="_blank">AniDB</a> |
 +
<a id="link_animenfo" target="_blank">AnimeNFO</a> |
 +
<a id="link_ann" target="_blank">ANN</a> |
 +
<a id="link_officialpage" target="_blank">Official Page</a>
 +
</div></td>
 +
</tr>
 +
</table>
 +
</div>
  
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
+
<div id="tabs-2">
add_related("anime", "Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]", "http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
+
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
add_related("anime", "Dummy link", "#");
+
<tr>
 +
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
 +
<td class="text"><br>Hover on the quick file summary for more information.<br><br></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">FanSub by:</div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.fansub);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Note:<br><br></div></td>
 +
<td class="text"><div class="rounded2"><script>dcw(useredit.note);</script></div></td>
 +
</tr>
 +
<tr>
 +
<td><br>&nbsp;<br></td>
 +
<td><br><hr><br></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
  
 +
<td class="text">
 +
<div class="rounded2">
 +
<ul>
 +
<div class="divlist">
 +
<script language="javascript" purpose="Print related anime">
 +
for (i in related.anime_list)
 +
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
 +
</script>
 +
</div>
 +
</ul>
 +
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
 +
<td class="text">
 +
<div class="rounded2">
 +
<ul>
 +
<div class="divlist">
 +
<script language="javascript" purpose="Print related ost">
 +
for (i in related.ost_list)
 +
{ document.write('<li><a href="'+related.ost_list[i].href +'" target="_blank">'+ related.ost_list[i].title + '</a></li>'); }
 +
</script>
 +
</div>
 +
</ul>
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 +
 +
<div id="tabs-3">
 +
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
 +
<tr>
 +
<td><div class="rounded3">
 +
<p>
 +
<script>dcw(useredit.synopsis);</script>
 +
</p>
 +
</div></td>
 +
</tr>
 +
</table>
 +
</div>
 +
</div>
  
/* --> this is an array of links; means that the link could be add or remove at your will; the link here would be dynamically generated accordingly <-------------------------------------| note |-- */
+
</div>
add_related("ost", "No related link", "#");
 
add_related("ost", "Dummy link", "#");
 
 
 
 
 
/* --> this is an array of pics; means that the pics could be add or remove at your will; the pics here would be dynamically generated accordingly; 320px max width if possible; use jpg format for loading performance <| note |-- */
 
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
 
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
 
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
 
 
 
 
 
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
 
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
 
</script>
 
 
 
 
 
<!-- multi picture presentation scripting engine -->
 
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
 
 
 
 
 
<style type="text/css">
 
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
 
* Thanks To        : kureshii, Jarudin
 
* Thanks Also To : enginarc, DaggerLite, blubart
 
*
 
* Originally Customized By : deysmacro
 
* Re-Customized By            : PUT YOUR NICK HERE
 
*
 
* Template Version              : 3.2.2.1 js alternative - editing friendly edition
 
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
 
*
 
* Please leave the credit intact if you plan to use this template.
 
* Your cooperation is highly appreciated.
 
*
 
* Hopefully you enjoy using this template
 
* Thank you for your time and good day.
 
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
 
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 26 | 0720 | d-ait | v3221 | 36
 
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
 
* Quick Reminder:
 
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
 
*
 
* Example:
 
* Assume "width" is the syntax...
 
*
 
* body {
 
* width: 100px;      <-- major browser support
 
*
 
* *width: 110px;      <-- targeted for IE only
 
* }
 
*
 
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 
* Please take note of this when you are editing.
 
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| end |-- */
 
 
 
  
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| start |--
+
</div>
   
 
        Note:
 
        1. This template is pretty much already ready out of the box and usually doesn't need to be customized anymore.
 
        2. I will put edit hint at critical point only where the edit usually doesn't need to be done unless the generated page is somehow not quite right.
 
        3. Just find any 'edit point xx of xx' for quick edit target.
 
        4. Other settings which have no edit point or edit hint is meant to be left as it is and for advanced user only.
 
        5. Advanced user may edit the settings but I highly not recommended as it should be fine without to be customized.
 
        6. Go directly to bottom to edit the screenshot img links.
 
  
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| read first before carry on --| end |-- */
+
<div class="hr1"><hr></div>
  
 +
<div class="outer3">
 +
  <div class="inner">Screenshots</div>
 +
</div>
  
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
+
</body>
/* --| whole table positioning control |-- */
 
  
.button {
+
<!-- reference link text replacement engine -->
margin: 0px;
+
<script language="javascript">
}
+
document.getElementById('link_anidb').href= useredit.anidb;
 +
document.getElementById('link_animenfo').href= useredit.animenfo;
 +
document.getElementById('link_ann').href= useredit.ann;
 +
document.getElementById('link_officialpage').href= useredit.officialpage;
 +
</script>
  
/* --| end |---------------------------- */
+
<!-- tab container scripting engine -->
/* --| whole table body control |-- */
+
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
  
table.file_info {
+
</html>
border-spacing: 0px;
 
margin-left: auto;
 
margin-right: auto;
 
margin-top: 6px;
 
margin-bottom: 0px;
 
width: auto;
 
  
*border-collapse: collapse;
+
<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
}
+
[screenshot]
 +
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
 +
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
 +
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
 +
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
 +
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
 +
[/screenshot]
 +
</pre>
  
/* --| end |----------------------- */
+
Sample template image: [http://wiki.bakabt.me/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
/* --| tootip hover control |-- */
+
Back to [[Offer_Templates#Templates_preview|top]].
  
td.info_label:hover {
+
===Pure CSS Driven Anime Template - Alternative===
z-index: 9;
+
----
cursor: help;
 
}
 
  
/* --| end |------------------------- */
+
Submitted by: deysmacro
/* --| tootip misc control |------ */
 
  
td.info_label span {
+
<pre>
display: none;  
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
}
+
<html>
 +
<head>
 +
 
 +
<style type="text/css">
 +
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
 +
*
 +
* Please take note. The indentation should look correctly using Firefox.
 +
*
 +
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
 +
* When that happen, please use Firefox.
 +
*
 +
* Thank you for your understanding.
 +
*
 +
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
 +
*
 +
* Main user link : http://bakabt.me/user/816453/deysmacro.html
 +
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
 +
*
 +
* I welcome all of you people to use this template at your convenience.
 +
* Do contact me via PM or email if you had anything to say.
 +
*
 +
* Email : deysmacro[at]gmail[dot]com
 +
*
 +
* I also can help you guys with the template.
 +
* I will help whenever I can.
 +
*
 +
* Thanks To : kureshii, Jarudin, xchiamiov
 +
* Thanks Also To : DaggerLite, enginarc, mrdkreka, blubart
 +
*
 +
* Originally Customized By : deysmacro
 +
* Re-Customized By : YOUR NICK HERE
 +
*
 +
* Template Version : 3.3.3.1 pure css driven - alternative
 +
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
 +
*
 +
* Please leave the credit intact if you plan to use this template.
 +
* Your cooperation is highly appreciated. Thank you.
 +
*
 +
* --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |-----
 +
* SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v3331 | 13
 +
* ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |-----
 +
*
 +
* Quick Reminder:
 +
* If you found any syntax with * siding with the syntax, it is targeted for IE only.
 +
*
 +
*
 +
* Example:
 +
* Assume "width" is the syntax...
 +
*
 +
* body {
 +
* width: 100px; <-- major browser support
 +
*
 +
* *width: 110px; <-- targeted for IE only
 +
* }
 +
*
 +
*
 +
* This is done as to make it IE compatible. It is not required if IE displays the generated page correctly.
 +
* Please take note of this when you are editing.
 +
*
 +
* ---------------------------------------------------------------------------------------------------------------------------------------------------| end |----- */
 +
/*
 +
* Nothing much to change or edit about the template appearance since it is 99% ready out of the box.
 +
* I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings.
 +
*
 +
* Hopefully you guys enjoy using this template. Good day people.
 +
*/
 +
/* ------------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
 +
/* --| whole table positioning control |-- */
 +
 
 +
.button {
 +
margin: 0px;
  
/* --| end |------------------------ */
 
/* --| tootip styling control |-- */
 
 
td.info_label:hover span {
 
position: absolute;
 
bottom: 24px;
 
font-family: "Trebuchet MS", sans-serif;
 
font-size: 11px;
 
line-height: 16px;
 
background-color: #FFFFCC;
 
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 
background-position: 3px 50%;
 
background-repeat: no-repeat;
 
color: #777777;
 
height: 16px;
 
width: auto;
 
border: 1px solid #999999;
 
margin: 0px;
 
padding: 5px;
 
display: block;
 
 
 
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
 
 
*width: 350px; /* for IE only - no need to adjust the tooltip width unless needed */
 
 
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
 
 
 
*bottom: 16px;
 
*left: -80px;
 
*text-align: left;
 
 
}
 
}
  
/* --| end |---------------------------------------- */
+
/* --| end |---------------------------- */
/* --| individual left side content control |-- */
+
/* --| whole table body control |-- */
 +
 
 +
table.file_info {
 +
border-spacing: 0px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-top: 5px;
 +
width: auto;
  
td.info_label {
+
*border-collapse: collapse;
width: 20px;
 
font-family: "Lucida Console", sans-serif;
 
font-size: 7.7px;
 
text-align: center;
 
color: #D0D0F0;
 
background-color: #854C9E;
 
border: #854C9E 2px solid;
 
position: relative;
 
  
*font-size: 9px;
 
 
}
 
}
  
/* --| end |------------------------------------------------- */
+
/* --| end |----------------------- */
/* --| individual right side - left content control |-- */
+
/* --| tootip hover control |-- */
 +
 
 +
td.info_label:hover {
 +
z-index: 9;
 +
cursor: help;
 +
 
 +
}
  
td.info_a {
+
/* --| end |------------------------- */
background-color: #EEEEFF;
+
/* --| tootip misc control |------ */
border: #854C9E 2px solid;
 
border-right: 0px;
 
color: #854C9E;
 
font-family: "Lucida Console", sans-serif;
 
font-size: 7.7px;
 
text-align: left;
 
width: 50px;
 
padding: 0px 0px 0px 3px;
 
font-size: 7.7px;
 
  
*font-size: 9px;
+
td.info_label span {
}
+
display: none;  
 
 
/* --| end |--------------------------------------------------- */
 
/* --| individual right side - right content control |-- */
 
 
 
td.info_b {
 
background-color: #EEEEFF;
 
border: #854C9E 2px solid;
 
border-left: 0px;
 
color: #854C9E;
 
font-family: "Lucida Console", sans-serif;
 
font-size: 7.7px;
 
text-align: right;
 
width: 60px;
 
padding: 0px 3px 0px 0px;
 
font-size: 7.7px;
 
  
*font-size: 9px;
 
 
}
 
}
  
/* --| end |----------------------------------------------------- */
+
/* --| end |------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* --| tootip styling control |-- */
  
 +
td.info_label:hover span {
 +
position: absolute;
 +
bottom: 24px;
 +
font-family: "Trebuchet MS", sans-serif;
 +
font-size: 11px;
 +
line-height: 16px;
 +
background-color: #FFFFCC;
 +
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 +
background-position: 3px 50%;
 +
background-repeat: no-repeat;
 +
color: #777777;
 +
height: 16px;
 +
width: auto;
 +
border: 1px solid #999999;
 +
margin: 0px;
 +
padding: 5px;
 +
display: block;
  
/* --| div which holds divpic and divtab |-- */  
+
*width: 350px; /* no need to adjust the tooltip width unless needed */
 
+
*bottom: 16px;
.divwhole {
+
*left: -80px;
        margin: 23px 0px 20px 0px;
+
*text-align: left;
        padding: 0px;
 
 
 
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
+
}
  
        height: 460px; /* this height only need to be adjusted when necessary only */
+
/* --| end |---------------------------------------- */
 +
/* --| individual left side content control |-- */
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
+
td.info_label {
 +
width: 20px;
 +
font-family: "Lucida Console", sans-serif;
 +
font-size: 7.7px;
 +
text-align: center;
 +
color: #D0D0F0;
 +
background-color: #854C9E;
 +
border: #854C9E 2px solid;
 +
position: relative;
  
 +
*font-size: 9px;
  
        *margin: 35px 0px -5px 0px;
 
 
}
 
}
  
/* --| end |--------------------------- */  
+
/* --| end |------------------------------------------------- */
/* --| div which holds the pics |-- */  
+
/* --| individual right side - left content control |-- */
  
.divpic {
+
td.info_a {
        margin: 0px 0px 0px 20px;
+
background-color: #EEEEFF;
        padding: 0px;
+
border: #854C9E 2px solid;
 +
border-right: 0px;
 +
color: #854C9E;
 +
font-family: "Lucida Console", sans-serif;
 +
font-size: 7.7px;
 +
text-align: left;
 +
width: 50px;
 +
padding: 0px 0px 0px 3px;
 +
font-size: 7.7px;
  
        *margin: -25px -365px 0px 20px;
+
*font-size: 9px;
}
 
  
/* --| end |--------------------------------------- */
 
/* --| div which holds the tab container |-- */
 
 
.divtab {
 
        margin: -450px 0px 0px 360px;
 
        padding: 0px;
 
        width: 560px;
 
 
}
 
}
  
/* --| end |------------ */  
+
/* --| end |--------------------------------------------------- */
/* --| body styling |-- */  
+
/* --| individual right side - right content control |-- */
  
body {
+
td.info_b {
  background: #131313;
+
background-color: #EEEEFF;
 
+
border: #854C9E 2px solid;
 
+
border-left: 0px;
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
+
color: #854C9E;
 +
font-family: "Lucida Console", sans-serif;
 +
font-size: 7.7px;
 +
text-align: right;
 +
width: 60px;
 +
padding: 0px 3px 0px 0px;
 +
font-size: 7.7px;
  
  background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some new and fresh background? change it here; use jpg format for loading performance */
+
*font-size: 9px;
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
+
}
  
 +
/* --| end |----------------------------------------------------- */
 +
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
  font-family: "Trebuchet MS", sans-serif;
+
/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
  font-size: 11px;
 
  text-align: left;
 
  color: #854C9E;
 
  height:auto;
 
}
 
  
/* --| end |----------------- */
+
.note1 {
 +
font-family: "Trebuchet MS", sans-serif;
 +
font-size: 11px;
 +
line-height: 16px;
 +
background-color: #FFFFCC;
 +
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 +
background-position: 3px 50%;
 +
background-repeat: no-repeat;
 +
color: #777777;
 +
height: 16px;
 +
width: auto;
 +
border: 1px solid #999999;
 +
margin: 0px;
 +
padding: 5px;
 +
display: block;
  
 +
}
  
/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
/* --> the tab container settings are not meant to be adjusted unless you know what are you doing or you are just want to play with the settings <-----| note |-- */
 
  
/* Layout helpers ----------------------------------*/
+
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
.ui-helper-hidden { display: none; }
+
/* --| top half container control |-- */
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
 
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
 
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 
.ui-helper-clearfix { display: inline-block; }
 
/* required comment for clearfix to work in Opera \*/
 
* html .ui-helper-clearfix { height:1%; }
 
.ui-helper-clearfix { display:block; }
 
/* end clearfix */
 
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
 
  
/* Component containers ----------------------------------*/
+
.divtop {
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
+
margin: 0px;
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
+
padding: 0px;
.ui-widget-content { border: 1px solid #dddddd; background: #F6FAFD url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #eeeeee; }
+
height: 410px; /* no need to adjust the height unless needed */
.ui-widget-content a { color: #333333; }
 
.ui-widget-header { border: 1px solid #CCCCCC; background: #EEEEFF url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #F6FAFD; font-weight: bold; }
 
.ui-widget-header a { color: #F6FAFD; }
 
  
/* Interaction states ----------------------------------*/
+
}
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; outline: none; }
 
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none; }
 
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; outline: none; }
 
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; outline: none; }
 
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #CCCCCC; background: #F6FAFD url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; outline: none; }
 
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; outline: none; text-decoration: none; }
 
  
/* Tabs ----------------------------------*/
+
/* --| end |----------------------------- */
.ui-tabs { padding: .2em; zoom: 1; }
+
/* --| top left container control |-- */
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
+
 
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
+
.divtl {
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
+
margin: 0px 0px 0px 10px;
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
+
padding: 10px;
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+
width: 520px;  
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
 
  
/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+
}
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
 
.ui-tabs .ui-tabs-hide { display: none !important; }
 
  
/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
+
/* --| end |------------------------------- */
 +
/* --| top right container control |-- */
  
 +
.divtr {
 +
margin: -415px 0px 0px 540px;
 +
padding: 10px;
  
/* --| message bar positioning control |-- */
+
*margin: -410px 0px 0px 540px;
  
.overlap1 {
 
  height: 32px;
 
  z-index: 2;
 
  position: relative;
 
  margin: 0px 0px -16px 0px;
 
 
}
 
}
  
/* --| end |---------------------- */
+
/* --| end |---------------------------------- */
/* --| message bar styling |-- */  
+
/* --| bottom half container control |-- */
  
.note {
+
.divbottom {
  font-family: "Trebuchet MS", sans-serif;
+
margin: 5px 0px 0px 0px;
  font-size: 11px;
+
padding: 0px;
  line-height: 16px;
+
height: 340px; /* no need to adjust the height unless needed */
  background-color: #FFFFCC;
+
 
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
+
*margin: 0px;
  background-position: 3px 50%;
+
*height: 335px; /* no need to adjust the height unless needed */
  background-repeat: no-repeat;
 
  color: #777777;
 
  height: 16px;
 
  width: auto;
 
  border: 1px solid #999999;
 
  margin: 0px 0px 5px 0px;
 
  padding: 5px;
 
  display: block;
 
}
 
  
.note1 {
 
  font-family: "Trebuchet MS", sans-serif;
 
  font-size: 11px;
 
  line-height: 16px;
 
  background-color: #FFFFCC;
 
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 
  background-position: 3px 50%;
 
  background-repeat: no-repeat;
 
  color: #777777;
 
  height: 16px;
 
  width: auto;
 
  border: 1px solid #999999;
 
  margin: 0px;
 
  padding: 5px;
 
  display: block;
 
 
}
 
}
  
 +
/* --| end |---------------------------------- */
 +
/* --| bottom left container control |-- */
 +
 +
.divbl {
 +
margin: 0px 0px 0px 10px;
 +
padding: 10px;
 +
width: 520px;
  
.note2 {
 
  font-family: "Trebuchet MS", sans-serif;
 
  font-size: 11px;
 
  line-height: 16px;
 
  background-color: #FFFFCC;
 
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
 
  background-position: 3px 50%;
 
  background-repeat: no-repeat;
 
  color: #777777;
 
  height: 16px;
 
  width: auto;
 
  border: 1px solid #999999;
 
  margin: 5px 0px 0px 0px;
 
  padding: 5px;
 
  display: block;
 
 
}
 
}
  
/* --| end |-------------------------------------- */  
+
/* --| end |------------------------------------ */
/* --| list styling |-- */  
+
/* --| bottom right container control |-- */
  
li {
+
.divbr {
  text-align: justify;
+
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
  color: #854C9E;
+
padding: 10px;
}
 
  
.divlist {
+
*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */
  margin: -10px 0px -10px -25px;
 
  
  *margin: -20px 0px -20px -25px;
 
 
}
 
}
  
/* --| end |------------ */  
+
/* --| end |------------------------------------ */
/* --| http link styling |-- */  
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
a:hover {
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */
  color: #854C9E;
 
}
 
  
/* --| end |------------------- */
+
.div5 {
/* --| paragraph styling |-- */
+
margin: -10px 0px -10px -25px;
  
p {
+
*margin: -20px 0px -20px -25px;
  text-align: justify;
 
  color: #854C9E;
 
  font-weight: bold;  
 
}
 
  
/* --| end |------------- */
 
/* --| table styling |-- */
 
 
td {
 
  vertical-align: left middle;
 
 
}
 
}
  
/* --| end |------------ */
+
li {
/* --| label styling |-- */
+
text-align: justify;
 +
color: #854C9E;
  
.label {
 
  color: #854C9E;
 
  width: 17%;
 
  text-align: right;
 
 
}
 
}
  
.label:hover {
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  color: blue;
 
}
 
  
/* --| end |------------ */  
+
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
/* --| text styling |-- */  
+
/* --| body control |-- */
 +
 
 +
body {
 +
background: #131313;
 +
background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some fresh background? change it here */
 +
font-family: "Trebuchet MS", sans-serif;
 +
font-size: 11px;
 +
text-align: left;
 +
color: #854C9E; /* main font color */
 +
height:auto;
  
.text {
 
  color: #854C9E;
 
  width: 74%;
 
 
}
 
}
  
 +
/* --| end |-------------------- */
 +
/* --| paragraph control |-- */
 +
 +
p {
 +
text-align: justify;
 +
color: #854C9E;
 +
font-weight: bold;
  
.text:hover {
 
  color: red;
 
 
}
 
}
  
/* --| end |--------------------------- */  
+
/* --| end |-------------------- */
/* --| headings styling control |-- */
+
/* --| main table control |-- */
 +
 
 +
td {
 +
vertical-align: left middle;
  
.inner {
 
  background-color: #EEEEFF;
 
  padding: 10px;
 
  border: 1px solid #CCCFC8;
 
  font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
 
  font-size: 22px;
 
  font-weight: bold;
 
  color: #854C9E;
 
 
}
 
}
  
.outer2 {
+
.table1 {
  z-index: 1;  
+
background-color: transparent;
  background-color: #EEDDFF;  
+
cellpadding: 2px;
  margin: 0px;  
+
cellspacing: 0px;
  padding: 6px;  
+
height: 100%;
  width: 815px;
+
width: 100%;
  position: relative;
 
  border: 1px solid #CCCFC8;
 
  text-align: center;
 
  margin-left: auto;
 
  margin-right: auto;
 
}
 
  
.outer3 {
 
  background-color: #EEDDFF;
 
  margin: 0px 0px 10px 0px;
 
  padding: 6px;
 
  width: 815px;
 
  border: 1px solid #CCCFC8;
 
  text-align: center;
 
  margin-left: auto;
 
  margin-right: auto;
 
 
}
 
}
  
/* --| end |------------------------- */
+
.table2 {
/* --| horizontal line control |-- */
+
background-color: transparent;
 +
cellpadding: 0px;
 +
cellspacing: 0px;
 +
height: 100%;
 +
width: 100%;
  
hr {
 
  width: 93%;
 
 
}
 
}
  
.hr1 {
+
/* --| end |--------------------------- */
  margin: 0px;
+
/* --| headings styling control |-- */
 +
 
 +
.inner {
 +
background-color:#EEEEFF;
 +
padding: 10px;
 +
border: 1px solid #CCCFC8;
 +
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
 +
font-size: 22px;
 +
font-weight: bold;
 +
color: #854C9E;
  
  *text-align: center;
 
 
}
 
}
  
/* --| end |--------------------------------------------- */
+
.outer2 {
/* --| pics holder styling |--------------------------- */
+
z-index: 1;
 +
background-color: #EEDDFF;
 +
margin: 10px 0px 0px 0px;
 +
padding: 6px; width: 815px;
 +
position: relative;
 +
border: 1px solid #CCCFC8;
 +
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
  
.pics {
 
  height: auto;
 
  width: auto;
 
  padding: 0px;
 
  margin: 0px;
 
  overflow: hidden
 
 
}
 
}
  
.pics img {  
+
.outer3 {
  height: auto;  
+
background-color: #EEDDFF;  
  width: auto;  
+
margin: 0px 0px 10px 0px;
  padding: 10px;  
+
padding: 6px;
  border: 1px solid #ccc;  
+
width: 815px;  
  background-color: #fff;  
+
border: 1px solid #CCCFC8;  
  top: 0px;  
+
text-align: center;
  left: 0px;
+
margin-left: auto;
 +
margin-right: auto;
 +
 
 
}
 
}
  
/* --| end |--------------------------------------------------- */
+
/* --| end |------------------------- */
/* --| background box styling |--------------------------- */
+
/* --| horizontal line control |-- */
 +
 
 +
hr {
 +
width: 93%;
  
/*
 
.rounded1 {
 
  background-color: #EEDDFF;
 
  padding: 10px;
 
  width: auto;
 
  height: auto;
 
  border: 1px solid #CCCFC8;
 
 
}
 
}
*/
 
  
.rounded2 {
+
.hr1 {
  background-color: #EEEEFF;  
+
margin: 0px;
  padding: 10px;
 
  width: auto;
 
  height: auto;
 
  border: 1px solid #CCCFC8;
 
}
 
  
.rounded3 {
+
*text-align: center;
  background-color: #EEEEFF;
 
  padding: 5px 10px 5px 10px;
 
  width: auto;
 
  height: auto;
 
  border: 1px solid #CCCFC8;  
 
  
  *padding: 0px 10px 0px 10px;
 
 
}
 
}
/* --| end |--------------------------------------------- */
 
  
</style>
+
/* --| end |--------------------------- */
 +
/* --| picture content control |-- */
  
<!-- multi picture presentation timing control -->
+
.pics {  
<script type="text/javascript">
+
height: auto;
$('#slideshow').cycle({  
+
width: auto;
    fx:     'all',
+
padding: 0px;
    timeout: 5000,
+
margin: 0px;  
    speed:   1000
+
overflow: hidden;
});  
 
</script>
 
  
<!-- message bar timing control 1 of 3 -->
+
}
<script type="text/javascript">
 
  $(document).ready(function(){
 
  setTimeout(function(){
 
  $("#note1").fadeOut("slow", function () {
 
  $("#note1").remove();
 
    });
 
  
}, 5000);
+
.pics img {
});
+
height: auto;
</script>
+
width: auto;
 +
padding: 10px;
 +
border: 1px solid #ccc;  
 +
background-color: #fff;  
 +
top: 0px;
 +
left: 0px;
  
<!-- message bar timing control 2 of 3 -->
+
}
<script type="text/javascript">
 
  $(document).ready(function(){
 
  $('#note2').hide();
 
  setTimeout(function(){
 
  $("#note2").fadeIn("slow", function () {
 
  $("#note2").show();
 
      });
 
  
}, 4990);
+
/* --| end |---------------------- */
});
+
/* --| label styling control |-- */
</script>
 
  
<!-- message bar timing control 3 of 3 -->
+
.label {
<script type="text/javascript">
+
color: #854C9E;
  $(document).ready(function(){
+
width: 26%;  
  setTimeout(function(){
+
text-align: right;
  $("#note3").fadeOut("slow", function () {
 
  $("#note3").remove();
 
    });
 
  
}, 10000);
+
}
});
 
</script>
 
  
<!-- tab container fx control -->
+
.label:hover {
<script type="text/javascript">
+
color: blue;
  $(function() {
 
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
 
      var fx = $('.selector').tabs('slow', 'fx');
 
      });
 
</script>
 
  
</head>
+
}
<body>
+
 
<!-- advanced user only - body section - NO EDIT GUIDES as i have made it to the point where it is already ready out of the box; basically there is no need to further customized it anymore -->
+
/* --| end |--------------------- */
 +
/* --| text styling control |-- */
 +
 
 +
.text {
 +
color: #854C9E;
 +
width: 74%;
 +
 
 +
}
  
 +
.text:hover {
 +
color: red;
  
<div class="overlap1">
+
}
<div id="note3">
 
<div id="note2" class="note">
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In case the pictures are not properly fetched/displayed, refresh this page to see if it helps.
 
</div>
 
</div>
 
<div id="note1" class="note">
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If this message does not go away, means that Javascripts support is disabled or this page loads improperly.
 
Enable Javascripts support and/or refresh this page to see if it helps.
 
</div>
 
</div>
 
  
<div class="outer2">
+
/* --| end |--------------------------- */
<div class="inner"><script>dcw(useredit.heading);</script></div>
+
/* --| label box styling control |-- */
  
<div class="button">
+
.rounded1 {
<table class="file_info">
+
background-color:#EEDDFF;  
<tr>
+
padding: 10px;
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
+
width: auto;
<td class="info_a"><div><script>dcw(useredit.srcs_left);</script></div></td>
+
height: auto;
<td class="info_b"><div><script>dcw(useredit.srcs_right);</script></div></td>
+
border: 1px solid #CCCFC8;  
<td />
+
 
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_vids);</script></span><div>VIDS</div></td>
+
}
<td class="info_a"><div><script>dcw(useredit.vids_left);</script></div></td>
 
<td class="info_b"><div><script>dcw(useredit.vids_right);</script></div></td>
 
<td />
 
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_auds);</script></span><div>AUDS</div></td>
 
<td class="info_a"><div><script>dcw(useredit.auds_left);</script></div></td>
 
<td class="info_b"><div><script>dcw(useredit.auds_right);</script></div></td>
 
<td />
 
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>dcw(useredit.tooltip_label_subs);</script></span><div>SUBS</div></td>
 
<td class="info_a"><div><script>dcw(useredit.subs_left);</script></div></td>
 
<td class="info_b"><div><script>dcw(useredit.subs_right);</script></div></td>
 
</tr>
 
</table>
 
</div>
 
</div>
 
  
<div class="hr1"><hr></div>
+
/* --| end |--------------------------- */
 +
/* --| text box styling control |-- */
  
<div class="divwhole">
+
.rounded2 {
 +
background-color:#EEEEFF;
 +
padding: 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8; 
  
<div class="divpic">
+
}
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
+
 
<tr><td>
+
/* --| end |-------------------------------- */
<div id="slideshow" class="pics"></div>
+
/* --| synopsis box styling control |-- */
<script language="javascript" purpose="Print related pics">
+
 
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
+
.rounded3 {
</script>
+
background-color:#EEEEFF;  
</td></tr>
+
padding: 5px 10px 5px 10px;
</table>
+
width: auto;
</div>
+
height: auto;
 +
border: 1px solid #CCCFC8; 
 +
 
 +
}
  
<div class="divtab">
+
/* --| end |-------------------------------- */
<div id="tabs">
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
<ul>
+
</style>
<li><a href="#tabs-1">Series Information</a></li>
 
<li><a href="#tabs-2">File Information - Related Anime - Related OST</a></li>
 
<li><a href="#tabs-3">Synopsis</a></li>
 
</ul>
 
  
<div id="tabs-1">
+
</head>
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
+
<body>
<tr>
+
 
<td class="label"><div class="rounded1">Main Title:</div></td>
+
<div class="outer2">
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Official Title:</div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Japanese Title:</div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Year:</div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Episodes:</div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.episodes);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.categories);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Director:</div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.director);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Production:</div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.production);</script></div></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">References:</div></td>
 
  
<td class="text"><div class="rounded2">
 
<a id="link_anidb" target="_blank">AniDB</a> |
 
<a id="link_animenfo" target="_blank">AnimeNFO</a> |
 
<a id="link_ann" target="_blank">ANN</a> |
 
<a id="link_officialpage" target="_blank">Official Page</a>
 
</div></td>
 
</tr>
 
</table>
 
</div>
 
  
<div id="tabs-2">
+
<!-- the title heading -->
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
+
 
<tr>
+
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
+
 
<td class="text"><br>Hover on the quick file summary for more information.<br><br></td>
+
<div class="button">
</tr>
+
<table class="file_info">
<tr>
+
 
<td class="label"><div class="rounded1">FanSub by:</div></td>
+
 
<td class="text"><div class="rounded2"><script>dcw(useredit.fansub);</script></div></td>
+
<!-- tooltip and quick file summary area -->
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Note:<br><br></div></td>
 
<td class="text"><div class="rounded2"><script>dcw(useredit.note);</script></div></td>
 
</tr>
 
<tr>
 
<td><br>&nbsp;<br></td>
 
<td><br><hr><br></td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
 
  
<td class="text">
+
<tr>
<div class="rounded2">
+
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
<ul>
+
<td class="info_a"><div>&nbsp;</div></td>
<div class="divlist">
+
<td class="info_b"><div>DVD</div></td>
<script language="javascript" purpose="Print related anime">
+
<td />
for (i in related.anime_list)
+
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been encoded with <b>DivX 6 - 704 x 544 29.97fps</b>.</span><div>VIDS</div></td>
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
+
<td class="info_a"><div>DIVX</div></td>
</script>
+
<td class="info_b"><div>704X544</div></td>
</div>
+
<td />
</ul>
+
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title utilized <b>MPEG Audio Layer 3 24000Hz stereo 48Kbps</b>.</span><div>AUDS</div></td>
</div>
+
<td class="info_a"><div>JP</div></td>
</td>
+
<td class="info_b"><div>MP3  24KHZ</div></td>
</tr>
+
<td />
<tr>
+
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This title has been <b>hard-subbed</b>.</span><div>SUBS</div></td>
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
+
<td class="info_a"><div>EN</div></td>
<td class="text">
+
<td class="info_b"><div>HARD</div></td>
<div class="rounded2">
+
</tr>
<ul>
+
</table>
<div class="divlist">
 
<script language="javascript" purpose="Print related ost">
 
for (i in related.ost_list)
 
{ document.write('<li><a href="'+related.ost_list[i].href +'" target="_blank">'+ related.ost_list[i].title + '</a></li>'); }
 
</script>
 
</div>
 
</ul>
 
</div>
 
</td>
 
</tr>
 
</table>
 
 
</div>
 
</div>
+
 
<div id="tabs-3">
 
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
 
<tr>
 
<td><div class="rounded3">
 
<p>
 
<script>dcw(useredit.synopsis);</script>
 
</p>
 
</div></td>
 
</tr>
 
</table>
 
</div>
 
</div>
 
 
 
</div>
 
 
 
 
</div>
 
</div>
  
 
<div class="hr1"><hr></div>
 
<div class="hr1"><hr></div>
  
<div class="outer3">
+
<div class="divtop">
  <div class="inner">Screenshots</div>
 
</div>
 
  
</body>
+
<div class="divtl">
 +
<fieldset>
  
<!-- reference link text replacement engine -->
+
<legend>| Series Information |</legend>
<script language="javascript">
 
document.getElementById('link_anidb').href= useredit.anidb;
 
document.getElementById('link_animenfo').href= useredit.animenfo;
 
document.getElementById('link_ann').href= useredit.ann;
 
document.getElementById('link_officialpage').href= useredit.officialpage;
 
</script>
 
  
<!-- tab container scripting engine -->
 
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
 
  
</html>
+
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
 +
<!-- edit the info accordingly -->
  
<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
+
<table class="table1">
[screenshot]
+
<tr>
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
+
<td class="label"><div class="rounded1">Main Title:</div> </td>
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
+
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
+
</tr>
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
+
<tr>
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
+
<td class="label"><div class="rounded1">Official Title:</div></td>
[/screenshot]
+
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
</pre>
+
</tr>
 
+
<tr>
Sample template image: [http://wiki.bakabt.me/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
+
<td class="label"><div class="rounded1">Japanese Title:</div></td>
Back to [[Offer_Templates#Templates_preview|top]].
+
<td class="text"><div class="rounded2">パンダコパンダ</div></td>
 
+
</tr>
===Simplest Tabled Anime Template===
+
<tr>
<pre>
+
<td class="label"><div class="rounded1">Year:</div></td>
<html>
+
<td class="text"><div class="rounded2">1972 & 1973</div></td>
<head>
+
</tr>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
<tr>
</head>
+
<td class="label"><div class="rounded1">Episodes:</div></td>
<body>
+
<td class="text"><div class="rounded2">2 combined into 1</div></td>
<h1></h1>
+
</tr>
<h3><a href="ANN URL" target="_blank">ANN</a> / <a href="AniDB URL" target="_blank">AniDB</a></h3>
+
<tr>
    <table cellspacing="4">
+
<td class="label"><div class="rounded1">Categories:<br><br></div></td>
    <tr valign="top">
+
<td class="text"><div class="rounded2">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</div></td>
        <td>
+
</tr>
            <h2>Series Information</h2>
+
<tr>
                <ul>
+
<td class="label"><div class="rounded1">Director:</div></td>
                    <table cellspacing="3">
+
<td class="text"><div class="rounded2">Isao Takahata</div></td>
                        <tr><td style="font-size:15px">Year</td><td>[Insert]</td></tr>
+
</tr>
                        <tr><td style="font-size:15px">Episodes</td><td>[Insert]</td></tr>
+
<tr>
                        <tr><td style="font-size:15px">Categories</td><td>[Insert]</td></tr>
+
<td class="label"><div class="rounded1">Production:</div></td>
                        <tr><td style="font-size:15px">Director</td><td>[Insert]</td></tr>
+
<td class="text"><div class="rounded2">Shunzo Kato</div></td>
                        <tr><td style="font-size:15px">Production</td><td>[Insert]</td></tr>
+
</tr>
                    </table>
+
<tr>
                </ul>
+
<td class="label"><div class="rounded1">References:</div></td>
                <h2>File Information</h2>
+
<td class="text">
                <ul>
+
<div class="rounded2">
                    <table cellspacing="3">
+
 
                        <tr><td style="font-size:15px">Ripper</td><td>[Insert]</td></tr>
+
 
                        <tr><td style="font-size:15px">Video</td><td>[Insert]</td></tr>
+
<!-- edit the info accordingly -->
                        <tr><td style="font-size:15px">Audio</td><td>[Insert]</td></tr>
 
                        <tr><td style="font-size:15px">Subtitle</td><td>[Insert]</td></tr>
 
                        <tr><td style="font-size:15px">Comments</td><td>[Insert]</td></tr>
 
                    </table>
 
</ul>
 
                <h2>Related Torrents</h2>
 
                <ul>
 
                    [Insert]
 
                </ul>
 
                <h2>Summary/Description</h2>
 
                <ul>
 
    [Insert]
 
</ul>
 
            </td>
 
            <td><img src="[Insert SUMMARY IMAGE URL]" alt="Image" /></td>
 
        </tr>
 
    </table>
 
    <h2>Screenshots</h2>
 
</body>
 
</html>
 
[screenshot]
 
[IMG]http://i50.tinypic.com/1znly1j.png[/IMG]
 
[IMG]http://i46.tinypic.com/m0mc3.png[/IMG]
 
[IMG]http://i46.tinypic.com/1z2ln4h.png[/IMG]
 
[/screenshot]
 
</pre>
 
  
Back to [[Offer_Templates#Templates_preview|top]].
+
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |  
 +
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
 +
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
 +
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
 +
 
 +
</fieldset>
 +
</div>
 +
 +
<div class="divtr">
 +
<fieldset>
 +
 
 +
<legend>| Main Picture |</legend>
 +
 
 +
<table class="table2">
 +
<tr>
 +
<td>
 +
<div class="pics">
  
===Twin Alpha Box Description===
 
----
 
  
Submitted by: miasmacloud
+
<!-- picture height should be 340px max; you may use your preferred height though -->
  
[http://bakabt.me/template.php?id=Twin%20Alpha%20Box%20Anime%20Template Click here] to use
+
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png"  />
 +
</div>
 +
</td>
 +
</tr>
 +
</table>
  
 +
</fieldset>
 +
</div>
  
Back to [[Offer_Templates#Templates_preview|top]].
+
</div>
  
 +
<div class="divbottom">
  
===Simple book with JS pages===
+
<div class="divbl">
----
+
<fieldset>
  
Submitted by: remix85
+
<legend>| File Information |</legend>
  
<pre>
 
<html>
 
<head>
 
<!--
 
* Template: Book v1.1
 
*          by remix85
 
*
 
* Feel free to rearange pages as You wish, just leave this comment.
 
* Keep in mind that space is limited, so long descriptions will have to be split manualy to two boxes or more.
 
* To find what should be done search for TODO in this template, but first copy it to sandbox and see how it works.
 
*
 
* Maximum image size is 340x480. Bigger images will be automatically clipped.
 
*
 
* I know that it's not quite edit-friendly.
 
* Send me a PM if You have problems with editing this template, or there's something wrong.
 
-->
 
<style type="text/css">
 
BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;}
 
TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;}
 
A {color: #808080;}
 
A:hover {color: #000000;}
 
  
IMG {max-width: 340px; max-height: 480px; overflow: hidden;}
+
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
 +
<!-- edit the info accordingly -->
  
#book {width: 940px;}
+
<table class="table1">
#book1 {padding: 0 40px 0 50px;}
+
<tr>
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
+
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
.page {display: block;}
+
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
 
+
</tr>
.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
+
<tr>
#tablist > UL {text-align: center; list-style: none; padding: 0; margin: 0;}
+
<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
#tablist > UL > LI {float: left; background-color: transparent; border: solid #000000; border-width: 1px 1px 0 1px; color: #808080; margin: 0 0 0 0.5em; padding: 0 0.75em 0 0.75em; cursor: pointer;}
+
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>No Information.</i></div></div></td>
#tablist > UL > LI:hover {color: #000000;}
+
</tr>
 
+
<tr>
.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
+
<td class="label"><div class="rounded1">Approx. Duration:</div></td>
.box_left TABLE {width: 100%;}
+
<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
.box_left TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}
+
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Note:<br><br></div></td>
 +
<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Related Anime:<br></div></td>
 +
<td class="text">
 +
<div class="rounded2">
 +
<ul>
  
.box_right {color: #101010; float: right; clear: right; width: 340px; margin-right: 60px;}
+
<div class="div5">
.box_right TABLE {width: 100%;}
+
<li>
.box_right TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}
 
  
.tbl_info {width: 100%;}
 
.tbl_info TR {vertical-align: text-top;}
 
.tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;}
 
.tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;}
 
</style>
 
  
<script type="text/javascript" language="javascript">
+
<!-- edit the info accordingly -->
// <![CDATA[
 
  
// small hack to show book layout only when JavaScript is enabled
+
<a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
document.writeln('<style type="text/css">');
+
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}');
+
</a>
document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}');
+
</li>
document.writeln('.page {display: none;}');
+
</div>
document.writeln('.hdr {display: block;}');
 
document.writeln('</style>');
 
  
// Switch current page -> hide all pages, show current
+
</ul>
function newpage(page_id)
+
</div>
{
+
</td>
if(!$.browser.msie)
+
</tr>
{
+
<tr>
page_id = '#' + page_id;
+
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
if(!$(page_id).is(":visible"))
 
{
 
$("div.page").hide();
 
$(page_id).fadeIn(600, function(){});
 
}
 
}
 
else // jQuery effects don't work too good in IE...
 
{
 
var alltags = document.getElementsByTagName("div");
 
  
for (i=0; i < alltags.length; i++)
 
{
 
if (alltags[i].className=="page")
 
{
 
alltags[i].style.display = "none";
 
}
 
}
 
document.getElementById(page_id).style.display = "block";
 
}
 
}
 
// ]]>
 
</script>
 
</head>
 
  
<body>
+
<!-- edit the info accordingly -->
<center>
 
  
<div id="book"><div id="book1">
+
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
<div class="box_left"><div class="hdr" id="tablist"><ul>
+
</tr>
<li onClick="newpage('page1');">Info</li>
+
</table>
<li onClick="newpage('page2');">Summary</li>
 
<!-- TODO: If needed, insert new tabs here -->
 
<!-- something like <li onClick="newpage('tab_id');>Tab name</li> -->
 
</ul><br /></div></div>
 
  
<div class="box_right"><div class="hdr">[TODO: small title]</div></div>
+
</fieldset>
+
</div>
<!--
+
 
TODO: put here elements that are always visi