Difference between revisions of "Offer Templates"

From BakaBT Wiki
Jump to: navigation, search
m (Templates preview)
(Removed broken IE special case.)
 
(36 intermediate revisions by 6 users not shown)
Line 14: Line 14:
 
This is a temporary place for users to submit and use torrent templates, which hopefully will help make some lives easier. Please use the following template when submitting new templates:
 
This is a temporary place for users to submit and use torrent templates, which hopefully will help make some lives easier. Please use the following template when submitting new templates:
  
Most of these templates have been [http://www.BakaBT.com/template.php ported over to the BakaBT template page] for your convenience. As such, working templates will be removed from the Wiki, access them from the template page instead.
+
Most of these templates have been [http://bakabt.me/template.php ported over to the BakaBT template page] for your convenience. As such, working templates will be removed from the Wiki, access them from the template page instead.
  
 
=Submission Format=
 
=Submission Format=
Line 22: Line 22:
 
* Replace {curly-bracketed text} with the appropriate names/text.
 
* Replace {curly-bracketed text} with the appropriate names/text.
  
Templates submitted here may be ported over to [http://www.BakaBT.com/template.php BakaBT templates].
+
Templates submitted here may be ported over to [http://bakabt.me/template.php BakaBT templates].
  
 
===Sample Template===
 
===Sample Template===
Line 41: Line 41:
 
</pre>
 
</pre>
  
[http://wiki.BakaBT.com/index.php?title=Special:Userlogin Log in] to your BakaBT-Wiki account (Or [http://wiki.BakaBT.com/index.php?title=Special:Userlogin&type=signup register for one] if you don't have one yet). Click one of the links below.
+
[http://wiki.bakabt.me/index.php?title=Special:Userlogin Log in] to your BakaBT-Wiki account (Or [http://wiki.bakabt.me/index.php?title=Special:Userlogin&type=signup register for one] if you don't have one yet). Click one of the links below.
  
# [http://wiki.BakaBT.com/index.php?title=Offer_Templates&action=edit&section=3 Click here] to add your template to [[Offer Templates#Anime Templates| Anime Templates]].
+
# [http://wiki.bakabt.me/index.php?title=Offer_Templates&action=edit&section=3 Click here] to add your template to [[Offer Templates#Anime Templates| Anime Templates]].
# [http://wiki.BakaBT.com/index.php?title=Offer_Templates&action=edit&section=4 Click here] to add your template to [[Offer Templates#Manga Templates| Manga Templates]].
+
# [http://wiki.bakabt.me/index.php?title=Offer_Templates&action=edit&section=4 Click here] to add your template to [[Offer Templates#Manga Templates| Manga Templates]].
# [http://wiki.BakaBT.com/index.php?title=Offer_Templates&action=edit&section=5 Click here] to add your template to [[Offer Templates#OST Templates| OST Templates]].
+
# [http://wiki.bakabt.me/index.php?title=Offer_Templates&action=edit&section=5 Click here] to add your template to [[Offer Templates#OST Templates| OST Templates]].
  
 
Paste your code right at the bottom, then click 'Show Preview'. If you're satisfied that nothing is broken, click 'Save Page'.
 
Paste your code right at the bottom, then click 'Show Preview'. If you're satisfied that nothing is broken, click 'Save Page'.
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://www.bakabt.com/template.php?id=Simple%20HTML%20Anime%20Template Choose]||[http://www.bakabt.com/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Choose]||[http://www.bakabt.com/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 (original)!! 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.]]||[[File:JS_Alternative_Anime_Template_-_Editing_Friendly_Edition.jpg|thumb|center|alt=deysmacro|by deysmacro.]]||
 
|-
 
|[[Offer_Templates#Pure_CSS_Driven_Anime_Template_-_Alternative|Choose]]||[[Offer_Templates#JS_Alternative_Anime_Template_-_Editing_Friendly_Edition_.28original.29|Choose]]||[http://www.bakabt.com/template.php?id=JS-alternative%20%28edit-friendly%29%20Anime%20Template 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 !! HTML5 CSS3 Anime Template !
 
 
|-
 
|-
 +
| ||[[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:Html5_CSS3_anime_template_by_cvp.JPG|thumb|center|alt=CvP|by CvP.]]
+
|[[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]]||[[Offer_Templates#Twin_Alpha_Box_Description|Choose]]||[[Offer_Templates#HTML5_CSS3_Anime_Template|Choose]]
 
 
|-
 
|-
 
|}
 
|}
Line 101: Line 89:
 
===Simple HTML Anime Template===
 
===Simple HTML Anime Template===
 
----
 
----
[http://www.bakabt.com/template.php?id=Simple%20HTML%20Anime%20Template Click here] to use
+
[http://bakabt.me/template.php?id=Simple%20HTML%20Anime%20Template Click here] to use
  
 
===Simple ChalamiuS HTML Anime Template===
 
===Simple ChalamiuS HTML Anime Template===
 
----
 
----
[http://www.bakabt.com/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Click here] to use
+
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20Anime%20Template Click here] to use
  
 
===Simple BBCode Anime Template===
 
===Simple BBCode Anime Template===
 
----
 
----
[http://www.BakaBT.com/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://www.bakabt.com/user/816453/deysmacro.html
 
* Forum user link : http://forums.bakabt.com/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; }
a:hover {
+
.infobox {
color: #000000;
+
  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 {
/* --| end |----------------------------- */
+
  text-align: center;
/* --| paragraph styling control |-- */
+
  font-size: 150%;
 
+
  font-weight: bold;
p {
+
  padding-top: 5px;
text-align: justify;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
padding:20px;
 
border: #999999 1px solid;
 
 
 
 
}
 
}
 +
  </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]]
/* --| table content control |-- */
 
  
td {
+
Back to [[Offer_Templates#Templates_preview|top]].
vertical-align: left middle;
 
  
}
+
===Twin Alpha Box Description===
 +
----
  
/* --| end |---------------------------- */
+
Submitted by: miasmacloud
/* --| main title styling control |-- */
 
  
.title {
+
<pre>
font-family: Tahoma;
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
font-size: 22px;
+
<html xmlns="http://www.w3.org/1999/xhtml">
font-weight: bold;
+
<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;
 
text-align: center;
padding:10px;
+
font-size: 11pt;
background-color: #ffffff;
 
color: #000066;
 
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 
border: #999999 1px solid;
 
 
 
 
}
 
}
  
/* --| end |--------------------------- */
+
/* text bars */
/* --| picture content control |-- */
+
.bars{
 
+
width: 250px;
.pic2 {
+
margin: 0px 20px 0px 20px;
font-family: Tahoma;
+
}
font-size: 22px;
+
#centered{
font-weight: bold;
+
/* width: 580px; */
text-align: center;
+
margin: 0px auto;
padding:10px;
+
}
background-color: #2E2E2E;
+
#bar1{
color: #0F0F0F;
+
float: left;
border: #999999 1px solid;
+
}
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
#bar2{
 +
float: left;
 +
}
 +
.bg{
 +
background-image: url([bbtimg=668]);
 +
}
 +
.low{
 +
height: 100px;
 +
background-image: url([bbtimg=2881]);
 +
}
  
 +
/* inside the text bars */
 +
.content{
 +
padding: 10px;
 +
line-height: 12pt;
 +
text-shadow: 1px 1px 2px #000;
 +
text-align: justify;
 +
}
 +
.item{
 +
margin: 3px 0px 3px 0px;
 
}
 
}
  
/* --| end |------------------------------- */
+
/* right bar specific */
/* --| sub heading styling control |-- */
+
#show{
 
+
margin-bottom: 15px;
.heading {
 
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;
 
 
 
 
}
 
}
 +
</style>
 +
</head>
 +
<body>
  
/* --| end |---------------------- */
+
<div id="centered">
/* --| label styling control |-- */
+
<div id="bar1" class="bars">
 
+
<div class="bg">
.label {
+
<div class="content">
font-weight: bold;
+
<h1>
color: #0F0F0F;
+
[Insert]
width: 19%;
+
</h1>
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
<div class="item">
border: #999999 1px solid;
+
[Insert]
text-align: right;
+
</div>
 
+
</div>
*width: 22%;
+
</div>
 
+
<div class="low"></div>
}
+
</div>
 
+
<div id="bar2" class="bars">
/* --| end |-------------------------------- */
+
<div class="bg">
/* --| various text styling control |-- */
+
<div class="content">
 
+
<div id="show">
.text {
+
<h1>
width: 100%;
+
Show Information
color: #000066;
+
</h1>
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
<div class="item">
border: #999999 1px solid;
+
<b>Year:</b> [Insert]
 
+
</div>
}
+
<div class="item">
 
+
<b>Runtime:</b> [Insert] episodes
.text3 {
+
</div>
width: 100%;
+
<div class="item">
color: #9D9D9D;
+
<b>Categories:</b>
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
+
[Insert]
border: #999999 1px solid;
+
</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]]
  
.text6 {
+
Back to [[Offer_Templates#Templates_preview|top]].
color: #CC6600;
 
  
}
+
===Simple book with JS pages===
 +
----
  
.text7 {
+
Submitted by: remix85
color: #518ABF;
 
font-weight: bold;
 
  
}
+
<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;}
  
.text9 {
+
IMG {max-width: 340px; max-height: 480px; overflow: hidden;}
color: #000000;
 
font-weight: bold;
 
  
}
+
#book {width: 940px;}
 +
#book1 {padding: 0 40px 0 50px;}
 +
.title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;}
 +
.page {display: block;}
  
</style>
+
.hdr {display: none; text-align: center; border-bottom: solid 1px; width: 100%; margin: 0 0 5px 0; padding: 0;}
 +
#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;}
  
</head>
+
.box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;}
<body>
+
.box_left TABLE {width: 100%;}
 +
.box_left TABLE TR TH {font-size: 1.2em; text-align: center; width: 100%; color: #303030;}
  
 +
.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;}
  
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
+
.tbl_info {width: 100%;}
<tr>
+
.tbl_info TR {vertical-align: text-top;}
<td colspan="3">
+
.tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;}
<div><hr><br></div>
+
.tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;}
 +
</style>
  
 +
<script type="text/javascript" language="javascript">
 +
// <![CDATA[
  
<!-- the title heading -->
+
// small hack to show book layout only when JavaScript is enabled
<div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div>
+
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>');
  
<div><br><hr></div>
+
// Switch current page -> hide all pages, show current
</td>
+
function newpage(page_id)
</tr>
+
{
<tr>
+
page_id = '#' + page_id;
 +
if(!$(page_id).is(":visible"))
 +
{
 +
$("div.page").hide();
 +
$(page_id).fadeIn(600, function(){});
 +
}
 +
}
 +
// ]]>
 +
</script>
 +
</head>
  
 +
<body>
 +
<center>
  
<!-- rowspan number must be changed accordingly if you add/remove row -->
+
<div id="book"><div id="book1">
<td rowspan="20" >
+
<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>
  
 +
<div class="box_right"><div class="hdr">[TODO: small title]</div></div>
 +
 +
<!--
 +
TODO: put here elements that are always visible
 +
eg. move the image from page1 and use only "box_left" on all pages
 +
-->
  
<!-- 400px max width recommended -->
+
<div class="page" id="page1" style="display:block;">
<img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png">
+
<div class="box_right" style="text-align: center;">
 +
[TODO: image]
 +
<!--<img src="http://" alt="Image not found" />-->
 +
</div>
  
</td>
+
<div class="box_left">
</tr>
+
<table><tr><td>
<tr>
+
<div class="title">[TODO: title]</div>
<td colspan="3" style="padding-top: 0px;">
+
</td></tr></table><br />
<div class="heading">SERIES INFORMATION</div>
+
</div>
</td>
+
 
</tr>
+
<div class="box_left">
 +
<table><tr><th>- SERIES INFORMATION -</th></tr><tr><td>
 +
<table class="tbl_info">
 +
<tr><td>Aired:</td><td>[TODO: aired]</td></tr>
 +
<tr><td>Episodes:</td><td>[TODO: episodes]</td></tr>
 +
<tr><td>Categories:</td><td>[TODO: categories]</td></tr>
 +
<tr><td>Director:</td><td>[TODO: director]</td></tr>
 +
<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!
 +
-->
 +
  
 +
</div></div><!--book-->
  
<!-- edit the info accordingly -->
+
</center>
<tr>
+
</body>
<td class="label">Main Title:</td>
+
</html>
<td class="text">Panda Kopanda</td>
+
[url=http://wiki.bakabt.me/index.php/BBCode#Screenshots]TODO: Screenshots[/url]
</tr>
+
</pre>
<tr>
+
Sample template image: [http://wiki.bakabt.me/index.php/File:Book_of_gosick.png Book of Gosick]<br />
<td class="label">Official Title:</td>
+
Back to [[Offer_Templates#Templates_preview|top]].
<td class="text">Panda! Go Panda!</td>
 
</tr>
 
<tr>
 
<td class="label">Japanese Title:</td>
 
<td class="text">パンダコパンダ</td>
 
</tr>
 
<tr>
 
<td class="label">Year:</td>
 
<td class="text">1972 & 1973</td>
 
</tr>
 
<tr>
 
<td class="label">Episodes:</td>
 
<td class="text"><span class="text7">2 combined into 1</span></td>
 
</tr>
 
<tr>
 
<td class="label">Categories:</td>
 
<td class="text">Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy</td>
 
</tr>
 
<tr>
 
<td class="label">Director:</td>
 
<td class="text">Isao Takahata</td>
 
</tr>
 
<tr>
 
<td class="label">Production:</td>
 
<td class="text">Shunzo Kato</td>
 
</tr>
 
<tr>
 
<td class="label">References:</td>
 
<td class="text">
 
  
 +
=Manga Templates=
  
<!-- edit the info accordingly -->
+
===Byousoku 5cm Manga Template===
<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>
 
  
</td>
+
[http://bakabt.me/template.php?id=Simple%20HTML%20Manga%20Template Click here] to use
</tr>
 
<br><br><br>
 
  
<tr>
+
===Dille's Manga Template===
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div> </td>
+
----
</tr>
 
  
 +
[http://bakabt.me/template.php?id=Dille%27s%20Manga%20Template Click here] to use
  
<!-- edit the info accordingly -->
+
===Msm595's Manga Template===
<!-- change text3 to text if there is information -->
+
----
<tr>
 
<td class="label">FanSub by:</td>
 
<td class="text3">No Information</td>
 
</tr>
 
<tr>
 
<td class="label">Video:</td>
 
<td class="text"><span class="text7">DivX 6</span> [ <span class="text6">704x544 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 24000Hz stereo 48Kbps</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">1 hour 11 minutes</span> per episode</td>
 
</tr>
 
<tr>
 
<td class="label">Note:</td>
 
<td class="text">Please continue seeding as much as you can people. Thank you.</td>
 
</tr>
 
  
 +
Submitted by: kiiller_man1
  
<!-- edit the info accordingly -->
+
<pre>
<tr>
+
<!DOCTYPE html>
<td class="label">Related Anime:</td>
+
<html>
<td class="text">
+
<head>
> <a href="http://www.bakabt.com/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a>
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</td>
+
<title></title>
</tr>
+
<style type="text/css">
<tr>
+
    html, body, p, h1, ul {
<td class="label">Related OST:</td>
+
        margin: 0;
<td class="text3">No Information</td>
+
        padding: 0;
</tr>
+
    }
 +
    body {
 +
        font-size: 14px;
 +
        height: 580px;
 +
        width: 940px;
 +
        color: #333;
 +
        text-shadow: 1px 1px #ccc;
 +
        font-family: Helvetica, Arial, sans-serif;
 +
        background-color: #f9f9f9;
 +
    }
 +
    #header {
 +
        text-align: center;
 +
        margin: 0 0 18px;
 +
    }
 +
    h1 {
 +
        font-family: Georgia, serif;
 +
        font-size: 28px;
 +
        text-shadow: 1px 1px 2px #aaa;
 +
        color: #444;
 +
    }
 +
    #links li {
 +
        display: inline;
 +
        padding: 0 5px 0 10px;
 +
        border-left: 1px solid #ccc;
 +
    }
 +
    #links li.first {
 +
        border-left: none;
 +
    }
 +
    a {
 +
        color: #FFB000;
 +
        text-decoration: none;
 +
        font-size: 16px;
 +
        text-shadow: none;
 +
        font-weight: bold;
 +
    }
 +
    a:hover {
 +
        color: #00B0FF;
 +
    }
 +
    #bigPicture {
 +
        width: 350px;
 +
        float: left;
 +
        text-align: center;
 +
    }
 +
    #bigPicture img {
 +
        max-width: 350px;
 +
        max-height: 490px;
 +
        /*ie6 max- fixes. does anyone even use ie6 anymore? it's not even supported by microsoft now... lol*/
 +
        width: expression(this.width > 350 ? (this.height > 490 ? true : 350): true);
 +
        height: expression(this.height > 490 ? 490: true);
 +
    }
 +
    #info {
 +
        float: left;
 +
        width: 565px;
 +
        margin-left: 25px;
 +
    }
 +
    h2 {
 +
        margin: 0 0 3px 0;
 +
        text-align: center;
 +
        font-size: 22px;
 +
        color: #444;
 +
        text-shadow: 1px 1px 1px #aaa;
 +
    }
 +
    dl {
 +
        margin: 0 0 12px;
 +
    }
 +
    dt {
 +
        font-weight: bold;
 +
        margin-top: 5px;
 +
    }
 +
    dd {
 +
        margin-left: 18px;
 +
    }
 +
    #screens {
 +
        clear: both;
 +
        padding: 25px 25px 0;
 +
        text-align: center;
 +
    }
 +
    #screens a {
 +
        display: inline-block;
 +
        margin-right: 12px;
 +
        border: 1px solid #bbb;
 +
        height: 200px;
 +
        padding: 5px;
 +
        vertical-align: bottom;
 +
    }
 +
    #screens a:hover {
 +
        border: 1px solid #444;
 +
    }
 +
    #screens img {
 +
        max-height: 200px;
 +
        border: none;
 +
    }
 +
    ::-moz-selection{ background: #66A3D2; color:#fff; text-shadow: none; }
 +
    ::selection { background:#66A3D2; color:#fff; text-shadow: none; }
 +
</style>
 +
</head>  
 +
<body>  
 +
    <div id="header">  
 +
        <h1>Negative Happy Chain Saw Edge</h1>
 +
        <h2>ネガティブハッピー・チェーンソーエッヂ</h2>  
 +
        <ul id="links">  
 +
            <li class="first"><a href="http://www.mangaupdates.com/series.html?id=19674">Manga Updates</a></li>
 +
            <li><a href="http://myanimelist.net/manga/5674/Negative_Happy_Chainsaw_Edge">My Anime List</a></li>
 +
        </ul>
 +
    </div>
 +
   
 +
    <div id="bigPicture">
 +
        <img src="example/manga_cover.jpg" alt="Manga Picture" id="bigImage">
 +
    </div>
 +
   
 +
    <div id="info">  
 +
        <h2>Manga Information</h2>
 +
        <dl>
 +
            <dt>Year</dt>
 +
            <dd>2008</dd>
 +
            <dt>Volumes</dt>
 +
            <dd>2</dd>
 +
            <dt>Categories</dt>
 +
            <dd>Action, Ecchi, Romance, Shounen, Psychological</dd>
 +
            <dt>Artist</dt>
 +
            <dd>Saika, Junichi</dd>
 +
            <dt>Author</dt>
 +
            <dd>Takimoto, Tatsuhiko</dd>
 +
            <dt>Publisher</dt>
 +
            <dd>Shounen Ace</dd>
 +
            <dt>Scanlator</dt>
 +
            <dd>Moob</dd>
 +
            <dt>Comments</dt>
 +
            <dd>A great read :D</dd>
 +
        </dl>
 +
        <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>
 +
    </div>
 +
   
 +
    <div id="screens">
 +
        <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>  
 +
        <a href="example/manga_2.jpg" rel="lightbox"><img src="example/manga_2t.jpg" alt="manga screenshot"></a>  
 +
        <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>
 +
    </div>  
 +
   
 +
    <script type="text/javascript">  
 +
        var as=document.getElementById("screens").getElementsByTagName('a'),
 +
            img=document.getElementById('bigImage');
 +
           
 +
        for(var i=0;i<as.length;i++) {
 +
            as[i].onmouseover = function() {
 +
                var im = new Image();
 +
                im.onload = function() {
 +
                    img.height=img.height; //don't let the image get taller than the original
 +
                    img.src=this.src;
 +
                };
 +
                im.src = this.href;
 +
            };
 +
        }
 +
    </script>
 +
</body>
 +
</html>
 +
</pre>
  
<tr>
+
Sample template image: [http://i51.tinypic.com/dfzo6t.jpg Image link]
<td colspan="3" style="padding-top: 20px;"><div class="heading">SYNOPSIS</div>
 
  
<p>
+
=OST Templates=
<span class="text9">
 
  
 +
===OST Template 1===
 +
----
  
<!-- edit the info accordingly -->
+
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
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.  
 
  
</span>
+
===Show/hide Tracklist OST Template===
 +
----
  
</p>
+
[http://bakabt.me/template.php?id=Show/HideList%20OST%20Template Click here] to use
</td>
 
</tr>
 
<tr>
 
<td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td>
 
</tr>
 
</table>
 
  
 +
===Dropdown list OST Template===
 +
----
  
</body>
+
[http://bakabt.me/template.php?id=DropdownBox%20OST%20Template Click here] to use
</html>
 
  
 +
===Simple OST Template===
 +
----
  
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
[http://bakabt.me/template.php?id=Simple%20HTML%20OST%20Template Click here] to use
  
[screenshot]
+
===Boxed OST Template===
[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.com/index.php/File:Generic_Anime_Template_-_Light_Themed.png Click here for full preview].<br />
+
Submitted by: kureshii
Back to [[Offer_Templates#Templates_preview|top]].
 
===Generic Anime Template - Dark Themed===
 
----
 
  
Submitted by: deysmacro
+
'''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>
 
<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>
 
+
<title>[[Torrent Title]]</title>
 
<style type="text/css">
 
<style type="text/css">
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
+
body {
*
+
background-color: #ffffff;
* Please take note. The indentation should look correctly using Firefox.
+
text-align: left;
*
+
margin: auto;
* 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.
+
table {
*
+
display: table;
* Thank you for your understanding.
+
border-spacing: 10px;
*
+
font-family: Calibri, Helvetica, sans-serif;
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
+
font-size: medium;
*
+
}
* Main user link : http://www.bakabt.com/user/816453/deysmacro.html
+
tr {display: table-row;}
* Forum user link : http://forums.bakabt.com/index.php?action=profile;u=816453
+
td {
*
+
display: table-cell;
* I welcome all of you people to use this template at your convenience.
+
min-width: 430px;
* Do contact me via PM or email if you had anything to say.
+
padding: 10px;
*
+
border: solid 2px #000000;
* Email : deysmacro[at]gmail[dot]com
+
vertical-align: top;
*
+
}
* I also can help you guys with the template.
+
.album {max-width: 30em; margin: auto;}
* I will help whenever I can.
+
.vocal {max-width: 50em; margin: auto;}
*
+
.header1 {
* Originally Customized By : deysmacro
+
font-size: 140%;
* Re-Customized By : YOUR NICK HERE
+
font-weight: bold;
*
+
text-align: center;
* Template Version : v2.0.8.1 generic - dark themed
+
}
* Template Last Update On : July 21th, 2009 @ 13:28pm GMT+8
+
.header2 {
*
+
font-size: 115%;
* 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;
 
 
 
 
}
 
}
 
+
.header3 {
/* --| end |--------------------------- */
+
font-size: 66%;
/* --| http link styling control |-- */
+
font-style: italic;
 
+
font-weight: normal;
a {
 
text-decoration: none;
 
 
 
 
}
 
}
 
+
img {
a:hover {
+
margin: 8px;
color: #FF661A;
 
 
 
 
}
 
}
 
+
.imgborder {
/* --| end |----------------------------- */
+
border: 1px solid #666666;
/* --| paragraph styling control |-- */
+
height: 366px;
 
+
width: 366px;
p {
+
margin-left: auto;
text-align: justify;
+
margin-right: auto;
background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif);
+
margin-top: 5px;
padding:20px;
+
margin-bottom: 5px;
border: #999999 1px solid;
 
 
 
 
}
 
}
 +
.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>
 +
 +
Sample torrent: [http://bakabt.me/torrent/140104/Macross_Frontier_Music_Collection_(FLAC)_LonE.html Macross Frontier Music Collection]
  
/* --| end |----------------------- */
+
Go to: [http://bakabt.me/offer.php Offers Page]
/* --| table styling control |-- */
 
 
 
td {
 
vertical-align: left middle;
 
 
 
}
 
 
 
/* --| end |---------------------- */
 
/* --| title styling control |-- */
 
 
 
.title {
 
font-family: Tahoma;
 
font-size: 22px;
 
font-weight: bold;
 
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 {
+
===Javascript-based dropdown menu Template (Especially good for manga/OST collections)===
width: 100%;
+
----
color: #FFB856;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
  
}
+
Submitted by: shadowmaniac
  
.text3 {
+
'''Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.'''
width: 100%;
 
color: #9D9D9D;
 
background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png);
 
border: #999999 1px solid;
 
  
}
+
'''Note: Please don't use this template if you don't/can't understand what's going on.'''
  
.text6 {
+
<pre>
        color: #FFF0CC;
+
<html>
}
+
<head>
 +
<style type="text/css">
 +
hr
 +
{
 +
width: 80%;
 +
}
  
.text7 {
+
body
color: #00D4FF;
+
{
font-weight: bold;
+
align: center;
 +
                height: 500px;
 +
}
  
}
+
.tdtext
 +
{
 +
width: 30%;
 +
v-align: top;
 +
}
  
.text9 {
+
.wrapper
color: #FFB856;
+
{
font-weight: bold;
+
width: 800px;
 +
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
 +
***********************************************/
  
/* --| end |------------------------ */
+
//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
</style>
+
var iframeids=["myframe"]
  
</head>
+
//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
<body>
+
var iframehide="yes"
  
<table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%">
+
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 colspan="3">
 
<div><hr><br></div>
 
  
 +
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"
 +
}
 +
}
 +
}
  
<!-- main heading here -->
+
function resizeIframe(frameid){
<div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div>
+
var currentfr=document.getElementById(frameid)
 +
if (currentfr && !window.opera){
 +
currentfr.style.display="block"
 +
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
 +
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
 +
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
 +
currentfr.height = currentfr.Document.body.scrollHeight;
 +
if (currentfr.addEventListener)
 +
currentfr.addEventListener("load", readjustIframe, false)
 +
else if (currentfr.attachEvent){
 +
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
 +
currentfr.attachEvent("onload", readjustIframe)
 +
}
 +
}
 +
}
  
<div><br><hr></div>
+
function readjustIframe(loadevt) {
</td>
+
var crossevt=(window.event)? event : loadevt
</tr>
+
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
 +
if (iframeroot)
 +
resizeIframe(iframeroot.id);
 +
}
 +
 
 +
function loadintoIframe(iframeid, url){
 +
if (document.getElementById)
 +
document.getElementById(iframeid).src=url
 +
}
  
<tr>
+
if (window.addEventListener)
+
window.addEventListener("load", resizeCaller, false)
 +
else if (window.attachEvent)
 +
window.attachEvent("onload", resizeCaller)
 +
else
 +
window.onload=resizeCaller
 +
//#############################################
 +
//Don't change any of the code BEYOND this line
 +
//#############################################
  
<!-- if you add or remove row, rowspan number of 20 here must be adjusted accordingly; else the table would look weird -->
 
<!-- 400px max width recommended -->
 
<td rowspan="20" ><img class="pic2" src="http://img24.imageshack.us/img24/590/1086019.jpg"></td>
 
</tr>
 
  
<tr>
 
<td colspan="3" style="padding-top: 0px;"><div class="heading">SERIES INFORMATION</div></td>
 
</tr>
 
  
  
<!-- edit the info accordingly -->
+
//########################################
<tr>
+
//Modify the code below to suit your needs
<td class="label">Main Title:</td>
+
//########################################
<td class="text">Kaidoumaru</td>
+
function Show(selected_option)
</tr>
+
{
<tr>
+
  // get our iframe
<td class="label">Official Title:</td>
+
var testFrame = document.getElementById("myframe");
<td class="text">Kai Doh Maru</td>
+
var val;
</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>
 
  
 +
//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;
 +
}
  
<!-- edit the info accordingly -->
+
// now write out the new contents
<td class="text">
+
var doc = testFrame.contentDocument;
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=500" target="_blank">AniDB</a> |  
+
if (doc == undefined || doc == null)
<a href="http://www.animenfo.com/animetitle,888,lcvouh,kaidoumaru.html" target="_blank">AnimeNFO</a> |  
+
doc = testFrame.contentWindow.document;
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=306" target="_blank">ANN</a> |
+
doc.open();
<a href="http://www.sonymusic.co.jp/Animation/kaidohmaru/" target="_blank">Official Page</a>
+
doc.write(val);
</td>
+
doc.close();
</tr>
 
 
 
<tr>
 
<td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div></td>
 
</tr>
 
 
 
 
 
<!-- edit the info accordingly -->
 
<tr>
 
<td class="label">FanSub by:</td>
 
<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 -->
 
<tr>
 
<td class="label">Related Anime:</td>
 
<td class="text">
 
>  <a href="http://www.BakaBT.com/torrent/141617/Kai_Doh_Maru._DVDrip.html"  target="_blank">Kai Doh Maru.[DVDrip]</a><br>
 
>  <a href="http://www.BakaBT.com/torrent/129335/Kaidoumaru_-_OVA_a4e.html"  target="_blank">Kaidoumaru - OVA [a4e]</a>
 
</td>
 
</tr>
 
<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>
 
  
 +
  document.all.myFrame.style.visibility="visible";
 +
}
 +
//-->
 +
</script>
 +
</head>
  
<!-- edit the info accordingly -->
+
<body>
<p>
+
<center>
<span class="text9">
+
<div class="wrapper">
This story takes place during the Heian Period of Japan's history, when evil spirits still resided in the forests, mountains and rivers.
+
<br />
A girl, accompanied by her loved one, battles against these evil spirits, while she is disguised as man.
+
<form  id="form1">
This brave woman, aka "Kaidomaru", with a Chinese character "Flame" tatooed on her upper arm, was one of the "Four Devas".
+
<select name="dest" onchange="Show(this.options[this.selectedIndex].value)">
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>
 
</tr>
 
</table>
 
  
 +
<!-- Modify this part here -->
 +
<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 -->
  
 +
</select>
 +
</form>
 +
<iframe  id="myframe" frameborder="0"  vspace="0"  hspace="0"  marginwidth="0" marginheight="0" width="700" 
 +
  scrolling="no" style="overflow:visible; width:100%; display:none"></iframe>
 +
</div>
 +
    </center>
 
</body>
 
</body>
 
</html>
 
</html>
 +
</pre>
  
 +
Sample template image: [http://i369.photobucket.com/albums/oo133/shadowmaniac_2000/JSDropdown.jpg Sample image]
  
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
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]
 +
 
 +
===Simple ChalamiuS OST Template===
 +
----
 +
[http://bakabt.me/template.php?id=Simple%20ChalamiuS%20HTML%20OST%20Template Click here] to use
  
[screenshot]
+
Go to: [http://bakabt.me/offer.php Offers Page]
[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.com/index.php/File:Generic_Anime_Template_-_Dark_Themed.png Click here for full preview]<br />
+
=Outdated Templates=
Back to [[Offer_Templates#Templates_preview|top]].
+
<span style="color:red; font-size:18px;">Please don't use following templates anymore. They are outdated.</span>
  
===Generic Revision-2 Anime Template===
+
===HTML5 CSS3 Anime Template===
 
----
 
----
  
Submitted by: deysmacro
+
Submitted by: CvP
 +
[[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 />
  
<pre>
+
<blockquote>To use this template, you don't need to edit a single line of code.<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
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 />
 +
 
 +
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 />
 +
If you need any help customizing this template, you can post in the above link as well.<br />
 +
 
 +
'''Note''': It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).
 +
 
 +
[http://cvp.banglagamer.com/bakabt Click here] to use.<br />
 +
[http://bakabt.me/147902-fate-stay-night-1080p-anime-supreme.html Click here] for a live preview!<br /><br />
 +
Back to [[Offer_Templates#Templates_preview|top]].
 +
 
 +
===Generic Revision-2 Anime Template===
 +
----
 +
 
 +
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>
 
<html><head>
  
Line 900: Line 1,253:
 
/*  -| general info |-
 
/*  -| general info |-
 
*
 
*
*    Main user link  : http://www.bakabt.com/user/816453/deysmacro.html
+
*    Main user link  : http://bakabt.me/user/816453/deysmacro.html
*    Forum user link : http://forums.bakabt.com/index.php?action=profile;u=816453
+
*    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 welcome all of you people to use this template at your convenience.
Line 1,052: Line 1,405:
 
</pre>
 
</pre>
  
Sample template image: [http://wiki.bakabt.com/index.php/File:Generic_Revision-2_Anime_Template.png Click here for full preview]<br />
+
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]].
 
Back to [[Offer_Templates#Templates_preview|top]].
  
===Pure CSS Driven Anime Template - Alternative===
+
===JS Alternative Anime Template - Editing Friendly Edition===
 
----
 
----
  
Line 1,065: Line 1,418:
 
<head>
 
<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://www.bakabt.com/user/816453/deysmacro.html
 
* Forum user link : http://forums.bakabt.com/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 {
+
<script language="javascript" purpose="User definitions">
margin: 0px;
+
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
 +
 
 +
function dcw(input)
 +
  { document.write(input); }
 +
      useredit = new Object();
 +
      related = new Object();
 +
 
 +
      related.anime_list = new Array();
 +
      related.ost_list = new Array();
 +
      related.pics_list = new Array();
 +
 
 +
function add_related(type, title, href)
 +
  { 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();
 +
 
 +
        tmp_item.title = title;
 +
        tmp_item.href = href;
 +
 
 +
        target_list.push(tmp_item);
 +
  }
 +
 
 +
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
 +
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
  
}
 
  
/* --| end |---------------------------- */
+
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
/* --| whole table body control |-- */
 
  
table.file_info {
 
border-spacing: 0px;
 
margin-left: auto;
 
margin-right: auto;
 
margin-top: 5px;
 
width: auto;
 
  
*border-collapse: collapse;
+
useredit.maintitle="Panda Kopanda";
 +
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";
  
}
 
  
/* --| end |----------------------- */
+
/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
/* --| tootip hover control |-- */
+
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/";
  
td.info_label:hover {
 
z-index: 9;
 
cursor: help;
 
  
}
+
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.";
  
/* --| end |------------------------- */
 
/* --| tootip misc control |------ */
 
  
td.info_label span {
+
useredit.fansub="<b>No Information</b>";
display: none;  
+
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
 +
 
  
}
+
useredit.srcs_left="";
 +
useredit.srcs_right="DVD";
  
/* --| end |------------------------ */
 
/* --| tootip styling control |-- */
 
  
td.info_label:hover span {
+
useredit.vids_left="DIVX";
position: absolute;
+
useredit.vids_right="704X544";
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 */
 
*bottom: 16px;
 
*left: -80px;
 
*text-align: left;
 
  
}
+
useredit.auds_left="JP";
 +
useredit.auds_right="MP3  24KHZ";
  
/* --| end |---------------------------------------- */
 
/* --| individual left side content control |-- */
 
  
td.info_label {
+
useredit.subs_left="EN";
width: 20px;
+
useredit.subs_right="HARD";
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;
 
  
}
+
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>.";
  
/* --| end |------------------------------------------------- */
 
/* --| individual right side - left content control |-- */
 
  
td.info_a {
+
/* --> 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-color: #EEEEFF;
+
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");
border: #854C9E 2px solid;
+
add_related("anime", "Dummy link", "#");
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;
 
  
}
+
/* --> 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 |-- */
 +
add_related("ost", "No related link", "#");
 +
add_related("ost", "Dummy link", "#");
  
/* --| end |--------------------------------------------------- */
 
/* --| individual right side - right content control |-- */
 
  
td.info_b {
+
/* --> 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 |-- */
background-color: #EEEEFF;
+
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
border: #854C9E 2px solid;
+
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
border-left: 0px;  
+
add_related("pics", "#", "http://img39.imageshack.us/img39/280/pandakopanda.jpg");
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;
+
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
 +
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
 +
</script>
  
}
 
  
/* --| end |----------------------------------------------------- */
+
<!-- multi picture presentation scripting engine -->
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
  
/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
 
  
.note1 {
+
<style type="text/css">
font-family: "Trebuchet MS", sans-serif;
+
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
font-size: 11px;
+
* Thanks To        : kureshii, Jarudin
line-height: 16px;
+
* Thanks Also To : enginarc, DaggerLite, blubart
background-color: #FFFFCC;
+
*
background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
+
* Originally Customized By : deysmacro
background-position: 3px 50%;
+
* Re-Customized By            : PUT YOUR NICK HERE
background-repeat: no-repeat;
+
*
color: #777777;
+
* Template Version              : 3.2.2.1 js alternative - editing friendly edition
height: 16px;
+
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
width: auto;
+
*
border: 1px solid #999999;
+
* Please leave the credit intact if you plan to use this template.
margin: 0px;
+
* Your cooperation is highly appreciated.  
padding: 5px;
+
*
display: block;
+
* 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 |-- */
  
}
 
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| 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 |-- */
 +
 
  
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
+
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
/* --| top half container control |-- */
+
/* --| whole table positioning control |-- */
  
.divtop {
+
.button {
 
margin: 0px;
 
margin: 0px;
padding: 0px;
 
height: 410px; /* no need to adjust the height unless needed */
 
 
 
}
 
}
  
/* --| end |----------------------------- */
+
/* --| end |---------------------------- */
/* --| top left container control |-- */
+
/* --| whole table body control |-- */
  
.divtl {
+
table.file_info {
margin: 0px 0px 0px 10px;
+
border-spacing: 0px;
padding: 10px;
+
margin-left: auto;
width: 520px;  
+
margin-right: auto;
 +
margin-top: 6px;
 +
margin-bottom: 0px;
 +
width: auto;
  
 +
*border-collapse: collapse;
 
}
 
}
  
/* --| end |------------------------------- */
+
/* --| end |----------------------- */
/* --| top right container control |-- */
+
/* --| tootip hover control |-- */
 
 
.divtr {
 
margin: -415px 0px 0px 540px;
 
padding: 10px;
 
 
 
*margin: -410px 0px 0px 540px;
 
  
 +
td.info_label:hover {
 +
z-index: 9;
 +
cursor: help;
 
}
 
}
  
/* --| end |---------------------------------- */
+
/* --| end |------------------------- */
/* --| bottom half container control |-- */
+
/* --| tootip misc control |------ */
 
 
.divbottom {
 
margin: 5px 0px 0px 0px;
 
padding: 0px;
 
height: 340px; /* no need to adjust the height unless needed */
 
 
 
*margin: 0px;
 
*height: 335px; /* no need to adjust the height unless needed */
 
  
 +
td.info_label span {
 +
display: none;
 
}
 
}
  
/* --| end |---------------------------------- */
+
/* --| end |------------------------ */
/* --| bottom left container control |-- */
+
/* --| tootip styling control |-- */
  
.divbl {
+
td.info_label:hover span {
margin: 0px 0px 0px 10px;  
+
position: absolute;
padding: 10px;
+
bottom: 24px;
width: 520px;
+
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 |------------------------------------ */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
/* --| bottom right container control |-- */
+
 
 +
*width: 350px; /* for IE only - no need to adjust the tooltip width unless needed */
  
.divbr {
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
 
padding: 10px;
 
  
*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */
 
  
 +
*bottom: 16px;
 +
*left: -80px;
 +
*text-align: left;
 
}
 
}
  
/* --| end |------------------------------------ */
+
/* --| end |---------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* --| individual left side content control |-- */
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */
+
td.info_label {
 
+
width: 20px;
.div5 {
+
font-family: "Lucida Console", sans-serif;
margin: -10px 0px -10px -25px;
+
font-size: 7.7px;
 +
text-align: center;
 +
color: #D0D0F0;
 +
background-color: #854C9E;
 +
border: #854C9E 2px solid;
 +
position: relative;
  
*margin: -20px 0px -20px -25px;
+
*font-size: 9px;
 +
}
  
}
+
/* --| end |------------------------------------------------- */
 +
/* --| individual right side - left content control |-- */
  
li {
+
td.info_a {
text-align: justify;
+
background-color: #EEEEFF;
 +
border: #854C9E 2px solid;
 +
border-right: 0px;  
 
color: #854C9E;
 
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;
 
}
 
}
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* --| end |--------------------------------------------------- */
 +
/* --| individual right side - right content control |-- */
  
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
+
td.info_b {
/* --| body control |-- */
+
background-color: #EEEEFF;
 
+
border: #854C9E 2px solid;
body {
+
border-left: 0px;  
background: #131313;
+
color: #854C9E;
background:url('http://img15.imageshack.us/img15/9931/dangobg1.png'); /* want some fresh background? change it here */
+
font-family: "Lucida Console", sans-serif;
font-family: "Trebuchet MS", sans-serif;
+
font-size: 7.7px;
font-size: 11px;
+
text-align: right;
text-align: left;
+
width: 60px;
color: #854C9E; /* main font color */
+
padding: 0px 3px 0px 0px;
height:auto;
+
font-size: 7.7px;
  
 +
*font-size: 9px;
 
}
 
}
  
/* --| end |-------------------- */
+
/* --| end |----------------------------------------------------- */
/* --| paragraph control |-- */
+
/* ------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
 +
 
 +
 
 +
/* --| div which holds divpic and divtab |-- */  
 +
 
 +
.divwhole {
 +
        margin: 23px 0px 20px 0px;
 +
        padding: 0px;
 +
 
  
p {
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
text-align: justify;
 
color: #854C9E;
 
font-weight: bold;
 
  
}
+
        height: 460px; /* this height only need to be adjusted when necessary only */
  
/* --| end |-------------------- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
/* --| main table control |-- */
 
  
td {
 
vertical-align: left middle;
 
  
 +
        *margin: 35px 0px -5px 0px;
 
}
 
}
  
.table1 {
+
/* --| end |--------------------------- */
background-color: transparent;
+
/* --| div which holds the pics |-- */
cellpadding: 2px;
+
 
cellspacing: 0px;
+
.divpic {
height: 100%;
+
        margin: 0px 0px 0px 20px;
width: 100%;
+
        padding: 0px;
  
 +
        *margin: -25px -365px 0px 20px;
 
}
 
}
  
.table2 {
+
/* --| end |--------------------------------------- */
background-color: transparent;
+
/* --| div which holds the tab container |-- */
cellpadding: 0px;
 
cellspacing: 0px;
 
height: 100%;
 
width: 100%;
 
  
 +
.divtab {
 +
        margin: -450px 0px 0px 360px;
 +
        padding: 0px;
 +
        width: 560px;
 
}
 
}
  
/* --| end |--------------------------- */
+
/* --| end |------------ */  
/* --| headings styling control |-- */
+
/* --| body styling |-- */  
 +
 
 +
body {
 +
  background: #131313;
 +
 
  
.inner {
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
background-color:#EEEEFF;
+
 
padding: 10px;
+
  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 */
border: 1px solid #CCCFC8;
 
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
 
font-size: 22px;
 
font-weight: bold;
 
color: #854C9E;
 
  
}
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
  
.outer2 {
 
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;
 
  
 +
  font-family: "Trebuchet MS", sans-serif;
 +
  font-size: 11px;
 +
  text-align: left;
 +
  color: #854C9E;
 +
  height:auto;
 
}
 
}
  
.outer3 {
+
/* --| end |----------------- */
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 |------------------------- */
+
/* -----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| start |-- */
/* --| horizontal line control |-- */
+
/* --> 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 |-- */
  
hr {  
+
/* Layout helpers ----------------------------------*/
width: 93%;
+
.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); }
  
}
+
/* Component containers ----------------------------------*/
 +
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
 +
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
 +
.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; }
 +
.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; }
  
.hr1 {
+
/* Interaction states ----------------------------------*/
margin: 0px;
+
.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; }
  
*text-align: center;
+
/* 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; }
/* --| end |--------------------------- */
+
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
/* --| picture content control |-- */
+
.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; }
 +
 
 +
/* 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; }
  
.pics {
+
/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
height: auto;
 
width: auto;
 
padding: 0px;
 
margin: 0px;
 
overflow: hidden;
 
  
}
 
  
.pics img {
+
/* --| message bar positioning control |-- */
height: auto;
 
width: auto;
 
padding: 10px;
 
border: 1px solid #ccc;
 
background-color: #fff;
 
top: 0px;
 
left: 0px;
 
  
 +
.overlap1 {
 +
  height: 32px;
 +
  z-index: 2;
 +
  position: relative;
 +
  margin: 0px 0px -16px 0px;
 
}
 
}
  
 
/* --| end |---------------------- */
 
/* --| end |---------------------- */
/* --| label styling control |-- */
+
/* --| message bar styling |-- */  
 
 
.label {
 
color: #854C9E;
 
width: 26%;
 
text-align: right;
 
  
 +
.note {
 +
  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 0px 5px 0px;
 +
  padding: 5px;
 +
  display: block;
 
}
 
}
  
.label:hover {
+
.note1 {
color: blue;
+
  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 |--------------------- */
 
/* --| text styling control |-- */
 
 
.text {
 
color: #854C9E;
 
width: 74%;
 
  
 +
.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;
 
}
 
}
  
.text:hover {
+
/* --| end |-------------------------------------- */
color: red;
+
/* --| list styling |-- */
  
 +
li {
 +
  text-align: justify;
 +
  color: #854C9E;
 
}
 
}
  
/* --| end |--------------------------- */
+
.divlist {
/* --| label box styling control |-- */
+
  margin: -10px 0px -10px -25px;
 
 
.rounded1 {
 
background-color:#EEDDFF;
 
padding: 10px;
 
width: auto;
 
height: auto;
 
border: 1px solid #CCCFC8; 
 
  
 +
  *margin: -20px 0px -20px -25px;
 
}
 
}
  
/* --| end |--------------------------- */
+
/* --| end |------------ */  
/* --| text box styling control |-- */
+
/* --| http link styling |-- */  
 +
 
 +
a:hover {
 +
  color: #854C9E;
 +
}
  
.rounded2 {
+
/* --| end |------------------- */
background-color:#EEEEFF;
+
/* --| paragraph styling |-- */
padding: 10px;
 
width: auto;
 
height: auto;
 
border: 1px solid #CCCFC8; 
 
  
 +
p {
 +
  text-align: justify;
 +
  color: #854C9E;
 +
  font-weight: bold;
 
}
 
}
  
/* --| end |-------------------------------- */
+
/* --| end |------------- */  
/* --| synopsis box styling control |-- */
+
/* --| table styling |-- */  
 
 
.rounded3 {
 
background-color:#EEEEFF;
 
padding: 5px 10px 5px 10px;
 
width: auto;
 
height: auto;
 
border: 1px solid #CCCFC8; 
 
  
 +
td {
 +
  vertical-align: left middle;
 
}
 
}
  
/* --| end |-------------------------------- */
+
/* --| end |------------ */  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
+
/* --| label styling |-- */  
</style>
 
  
</head>
+
.label {
<body>
+
  color: #854C9E;
 +
  width: 17%;
 +
  text-align: right;
 +
}
  
<div class="outer2">
+
.label:hover {
 +
  color: blue;
 +
}
  
 +
/* --| end |------------ */
 +
/* --| text styling |-- */
  
<!-- the title heading -->
+
.text {
 +
  color: #854C9E;
 +
  width: 74%;
 +
}
  
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
 
  
<div class="button">
+
.text:hover {
<table class="file_info">
+
  color: red;
 +
}
  
 +
/* --| end |--------------------------- */
 +
/* --| headings styling control |-- */
  
<!-- tooltip and quick file summary area -->
+
.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;
 +
}
  
<tr>
+
.outer2 {
<td class="info_label"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the title source.</span><div>SRCS</div></td>
+
  z-index: 1;  
<td class="info_a"><div>&nbsp;</div></td>
+
  background-color: #EEDDFF;  
<td class="info_b"><div>DVD</div></td>
+
  margin: 0px;  
<td />
+
  padding: 6px;  
<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>
+
  width: 815px;  
<td class="info_a"><div>DIVX</div></td>
+
  position: relative;  
<td class="info_b"><div>704X544</div></td>
+
  border: 1px solid #CCCFC8;  
<td />
+
  text-align: center;
<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>
+
  margin-left: auto;
<td class="info_a"><div>JP</div></td>
+
  margin-right: auto;
<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>
+
.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;
 +
}
  
<div class="hr1"><hr></div>
+
/* --| end |------------------------- */
 +
/* --| horizontal line control |-- */
  
<div class="divtop">
+
hr {
 +
  width: 93%;
 +
}
  
<div class="divtl">
+
.hr1 {
<fieldset>
+
  margin: 0px;
  
<legend>| Series Information |</legend>
+
  *text-align: center;
 +
}
  
 +
/* --| end |--------------------------------------------- */
 +
/* --| pics holder styling |--------------------------- */
  
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
+
.pics {
<!-- edit the info accordingly -->
+
  height: auto;
 +
  width: auto;
 +
  padding: 0px;  
 +
  margin: 0px;
 +
  overflow: hidden
 +
}
  
<table class="table1">
+
.pics img {
<tr>
+
  height: auto;
<td class="label"><div class="rounded1">Main Title:</div> </td>
+
  width: auto;
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
+
  padding: 10px;
</tr>
+
  border: 1px solid #ccc;
<tr>
+
  background-color: #fff;
<td class="label"><div class="rounded1">Official Title:</div></td>
+
  top: 0px;
<td class="text"><div class="rounded2">Panda! Go Panda!</div></td>
+
  left: 0px;
</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">
 
  
 +
/* --| end |--------------------------------------------------- */
 +
/* --| background box styling |--------------------------- */
  
<!-- edit the info accordingly -->
+
/*
 +
.rounded1 {
 +
  background-color: #EEDDFF;
 +
  padding: 10px;
 +
  width: auto;
 +
  height: auto;
 +
  border: 1px solid #CCCFC8;
 +
}
 +
*/
  
<a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=530" target="_blank">AniDB</a> |
+
.rounded2 {
<a href="http://www.animenfo.com/animetitle,2379,stbesx,panda_kopanda.html" target="_blank">AnimeNFO</a> |
+
  background-color: #EEEEFF;
<a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352" target="_blank">ANN</a> |
+
  padding: 10px;
<a href="http://www.nausicaa.net/miyazaki/panda/" target="_blank">Official Page</a>
+
  width: auto;
</div>
+
  height: auto;
</td>
+
  border: 1px solid #CCCFC8;
</tr>
+
}
</table>
 
  
</fieldset>
+
.rounded3 {
</div>
+
  background-color: #EEEEFF;
+
  padding: 5px 10px 5px 10px;
<div class="divtr">
+
  width: auto;
<fieldset>
+
  height: auto;
 +
  border: 1px solid #CCCFC8;
  
<legend>| Main Picture |</legend>
+
  *padding: 0px 10px 0px 10px;
 +
}
 +
/* --| end |--------------------------------------------- */
  
<table class="table2">
+
</style>
<tr>
 
<td>
 
<div class="pics">
 
  
 +
<!-- multi picture presentation timing control -->
 +
<script type="text/javascript">
 +
$('#slideshow').cycle({
 +
    fx:    'all',
 +
    timeout: 5000,
 +
    speed:  1000
 +
});
 +
</script>
  
<!-- picture height should be 340px max; you may use your preferred height though -->
+
<!-- message bar timing control 1 of 3 -->
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  setTimeout(function(){
 +
  $("#note1").fadeOut("slow", function () {
 +
  $("#note1").remove();
 +
    });
  
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png" />
+
}, 5000);
</div>
+
  });
</td>
+
</script>
</tr>
 
</table>
 
  
</fieldset>
+
<!-- message bar timing control 2 of 3 -->
</div>
+
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  $('#note2').hide();
 +
  setTimeout(function(){
 +
  $("#note2").fadeIn("slow", function () {
 +
  $("#note2").show();
 +
      });
  
</div>
+
}, 4990);
 +
});
 +
</script>
  
<div class="divbottom">
+
<!-- message bar timing control 3 of 3 -->
 +
<script type="text/javascript">
 +
  $(document).ready(function(){
 +
  setTimeout(function(){
 +
  $("#note3").fadeOut("slow", function () {
 +
  $("#note3").remove();
 +
    });
  
<div class="divbl">
+
}, 10000);
<fieldset>
+
});
 +
</script>
  
<legend>| File Information |</legend>
+
<!-- tab container fx control -->
 +
<script type="text/javascript">
 +
  $(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 -->
  
<!-- 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 -->
 
  
<table class="table1">  
+
<div class="overlap1">
<tr>
+
<div id="note3">
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
+
<div id="note2" class="note">
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In case the pictures are not properly fetched/displayed, refresh this page to see if it helps.
</tr>
+
</div>
<tr>
+
</div>
<td class="label"><div class="rounded1">FanSub by:<br><br></div></td>
+
<div id="note1" class="note">
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>No Information.</i></div></div></td>
+
&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.  
</tr>
+
Enable Javascripts support and/or refresh this page to see if it helps.
<tr>
+
</div>
<td class="label"><div class="rounded1">Approx. Duration:</div></td>
+
</div>
<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">
+
<div class="outer2">
<li>
+
<div class="inner"><script>dcw(useredit.heading);</script></div>
  
 +
<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>
  
<!-- edit the info accordingly -->
+
<div class="hr1"><hr></div>
 
 
<a href="http://www.bakabt.com/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
 
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
 
</a>
 
</li>
 
</div>
 
 
 
</ul>
 
</div>
 
</td>
 
</tr>
 
<tr>
 
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
 
  
 +
<div class="divwhole">
  
<!-- edit the info accordingly -->
+
<div class="divpic">
 
+
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
+
<tr><td>
</tr>
+
<div id="slideshow" class="pics"></div>
</table>
+
<script language="javascript" purpose="Print related pics">
 
+
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
</fieldset>
+
</script>
 +
</td></tr>
 +
</table>
 
</div>
 
</div>
  
<div class="divbr">
+
<div class="divtab">
<fieldset>
+
<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>
  
<legend>| Synopsis |</legend>
+
<div id="tabs-1">
 
+
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
<table class="table2">
+
<tr>
<tr>
+
<td class="label"><div class="rounded1">Main Title:</div></td>
<td>
+
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
<div class="rounded3">
+
</tr>
 
+
<tr>
 
+
<td class="label"><div class="rounded1">Official Title:</div></td>
<!-- the <br> here is for break; not the same purpose as of above usage -->
+
<td class="text"><div class="rounded2"><script>dcw(useredit.officialtitle);</script></div></td>
<!-- edit the info accordingly -->
+
</tr>
 
+
<tr>
<p>
+
<td class="label"><div class="rounded1">Japanese Title:</div></td>
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.
+
<td class="text"><div class="rounded2"><script>dcw(useredit.japanesetitle);</script></div></td>
<br><br>
+
</tr>
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
+
<tr>
<br><br>
+
<td class="label"><div class="rounded1">Year:</div></td>
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.
+
<td class="text"><div class="rounded2"><script>dcw(useredit.year);</script></div></td>
<br><br>
+
</tr>
The literal translation of the title Panda Kopanda is "Panda, Baby Panda", but it's been released in North America as Panda Go Panda.
+
<tr>
</p>
+
<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>
  
</div>
+
<td class="text"><div class="rounded2">
</td>
+
<a id="link_anidb" target="_blank">AniDB</a> |
</tr>
+
<a id="link_animenfo" target="_blank">AnimeNFO</a> |
</table>
+
<a id="link_ann" target="_blank">ANN</a> |
 +
<a id="link_officialpage" target="_blank">Official Page</a>
 +
</div></td>
 +
</tr>
 +
</table>
 +
</div>
  
</fieldset>
+
<div id="tabs-2">
</div>
+
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
 +
<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>
  
</div>
+
<td class="text">
 
+
<div class="rounded2">
<div class="hr1"><hr></div>
+
<ul>
 
+
<div class="divlist">
<div class="outer3">
+
<script language="javascript" purpose="Print related anime">
<div class="inner">Screenshots</div>
+
for (i in related.anime_list)
</div>
+
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
 
+
</script>
 
+
</div>
</body>
+
</ul>
</html>
+
</div>
 
+
</td>
 
+
</tr>
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
+
<tr>
 
+
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
[screenshot]
+
<td class="text">
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
+
<div class="rounded2">
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
+
<ul>
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
+
<div class="divlist">
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
+
<script language="javascript" purpose="Print related ost">
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
+
for (i in related.ost_list)
[/screenshot]
+
{ document.write('<li><a href="'+related.ost_list[i].href +'" target="_blank">'+ related.ost_list[i].title + '</a></li>'); }
</pre>
+
</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>
  
Sample template image: [http://wiki.bakabt.com/index.php/File:Pure_CSS_Driven_Anime_Template_-_Alternative.png Click here for full preview]<br />
+
</div>
Back to [[Offer_Templates#Templates_preview|top]].
 
  
===JS Alternative Anime Template - Editing Friendly Edition (original)===
+
</div>
----
 
  
Submitted by: deysmacro
+
<div class="hr1"><hr></div>
  
<pre>
+
<div class="outer3">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
  <div class="inner">Screenshots</div>
<html>
+
</div>
<head>
 
  
 +
</body>
  
<script language="javascript" purpose="User definitions">
+
<!-- reference link text replacement engine -->
/* --| start |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------> nothing to edit here - go to edit info center instead <--| note |-- */
+
<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>
  
function dcw(input)
+
<!-- tab container scripting engine -->
  { document.write(input); }
+
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
      useredit = new Object();
 
      related = new Object();
 
  
      related.anime_list = new Array();
+
</html>
      related.ost_list = new Array();
 
      related.pics_list = new Array();
 
  
function add_related(type, title, href)
+
<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
  { var tmp_list;
+
[screenshot]
          switch (type) {
+
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
                case "anime": target_list = related.anime_list;
+
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
                    break;
+
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
                  case "ost"  : target_list = related.ost_list;
+
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
                      break;
+
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
                  case "pics": target_list = related.pics_list;
+
[/screenshot]
                      break; }
+
</pre>
  
        tmp_item = new Object();
+
Sample template image: [http://wiki.bakabt.me/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
 
+
Back to [[Offer_Templates#Templates_preview|top]].
        tmp_item.title = title;
 
        tmp_item.href = href;
 
  
        target_list.push(tmp_item);
+
===Pure CSS Driven Anime Template - Alternative===
  }
+
----
  
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| start |-- */
+
Submitted by: deysmacro
/* --> most user only need to edit the info here <--------------------------------------------------------------------------------------------------------------------------------------------------------------| note |-- */
 
  
 +
<pre>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html>
 +
<head>
  
useredit.heading="Panda Kopanda | Panda! Go Panda! [DivX][MP3]";
+
<style type="text/css">
 
+
/* --------------------------------------------------------------------------------------------------------------------------------------------| some note |-----
 
+
*
useredit.maintitle="Panda Kopanda";
+
* Please take note. The indentation should look correctly using Firefox.  
useredit.officialtitle="Panda! Go Panda";
+
*
useredit.japanesetitle="パンダコパンダ ";
+
* Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird.
useredit.year="1972 & 1973";
+
* When that happen, please use Firefox.
useredit.episodes="2 combined into 1";
+
*
useredit.categories="Adventure, Anthropomorphism, Comedy, Contemporary Fantasy, Fantasy";
+
* Thank you for your understanding.
useredit.director="Isao Takahata";
+
*
useredit.production="Shunzo Kato";
+
* --------------------------------------------------------------------------------------------------------------------------------------------| general info |-----
 
+
*
 
+
* Main user link : http://bakabt.me/user/816453/deysmacro.html
/* --> if any of the reference link is unavailable, just replace it with # <----------------------------------------------------------------------------------------------------------------------------------| note |-- */
+
* Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453
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";
+
* I welcome all of you people to use this template at your convenience.
useredit.ann = "http://www.animenewsnetwork.com/encyclopedia/anime.php?id=352";
+
* Do contact me via PM or email if you had anything to say.
useredit.officialpage = "http://www.nausicaa.net/miyazaki/panda/";
+
*
 
+
* Email : deysmacro[at]gmail[dot]com
 
+
*
useredit.synopsis=
+
* I also can help you guys with the template.
"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.";
+
* I will help whenever I can.
 
+
*
 
+
* Thanks To : kureshii, Jarudin, xchiamiov
useredit.fansub="<b>No Information</b>";
+
* Thanks Also To : DaggerLite, enginarc, mrdkreka, blubart
useredit.note="Please continue seeding as much as you can.<br>Thank you guys.";
+
*
 
+
* Originally Customized By : deysmacro
 
+
* Re-Customized By : YOUR NICK HERE
useredit.srcs_left="";
+
*
useredit.srcs_right="DVD";
+
* Template Version : 3.3.3.1 pure css driven - alternative
 
+
* Template Last Update On : July 20th, 2009 @ 23:28pm GMT+8
 
+
*
useredit.vids_left="DIVX";
+
* Please leave the credit intact if you plan to use this template.
useredit.vids_right="704X544";
+
* 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;
  
useredit.auds_left="JP";
+
}
useredit.auds_right="MP3  24KHZ";
 
  
 +
/* --| end |---------------------------- */
 +
/* --| whole table body control |-- */
  
useredit.subs_left="EN";
+
table.file_info {
useredit.subs_right="HARD";
+
border-spacing: 0px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-top: 5px;
 +
width: auto;
  
 +
*border-collapse: collapse;
  
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>.";
 
  
 +
/* --| end |----------------------- */
 +
/* --| tootip hover control |-- */
  
/* --> 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 |-- */
+
td.info_label:hover {
add_related("anime", "Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]", "http://www.bakabt.com/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html");
+
z-index: 9;
add_related("anime", "Dummy link", "#");
+
cursor: help;
  
 +
}
  
/* --> 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 |-- */
+
/* --| end |------------------------- */
add_related("ost", "No related link", "#");
+
/* --| tootip misc control |------ */
add_related("ost", "Dummy link", "#");
 
  
 +
td.info_label span {
 +
display: none;
  
/* --> 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 |------------------------ */
 +
/* --| tootip styling control |-- */
  
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit info center |--| end |-- */
+
td.info_label:hover span {
/* --| end |--| user-edit auto text replacement scripting engine |---------------------------------------------------------------------------------------------------------------------------------------------------- */
+
position: absolute;
</script>
+
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 */
 +
*bottom: 16px;
 +
*left: -80px;
 +
*text-align: left;
  
<!-- multi picture presentation scripting engine -->
+
}
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery.cycle.all.min.js" type="text/javascript"></script>
 
  
 +
/* --| end |---------------------------------------- */
 +
/* --| individual left side content control |-- */
  
<style type="text/css">
+
td.info_label {
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| general info section |--| start |---
+
width: 20px;
* Thanks To        : kureshii, Jarudin
+
font-family: "Lucida Console", sans-serif;
* Thanks Also To : enginarc, DaggerLite, blubart
+
font-size: 7.7px;
*
+
text-align: center;
* Originally Customized By : deysmacro
+
color: #D0D0F0;
* Re-Customized By            : PUT YOUR NICK HERE
+
background-color: #854C9E;
*
+
border: #854C9E 2px solid;
* Template Version              : 3.2.2.1 js alternative - editing friendly edition
+
position: relative;
* Template Last Update On : July 26th, 2009 @ 17:28pm GMT+8
+
 
*
+
*font-size: 9px;
* 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 |--
+
/* --| end |------------------------------------------------- */
   
+
/* --| individual right side - left content control |-- */
        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 |-- */
+
td.info_a {
 +
background-color: #EEEEFF;
 +
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;
  
/* ---------------------------------------------------------------------------------------------------------| quick file summary control center |----- */
 
/* --| whole table positioning control |-- */
 
 
.button {
 
margin: 0px;
 
 
}
 
}
  
/* --| end |---------------------------- */
+
/* --| end |--------------------------------------------------- */
/* --| whole table body control |-- */
+
/* --| individual right side - right content control |-- */
  
table.file_info {
+
td.info_b {
border-spacing: 0px;
+
background-color: #EEEEFF;
margin-left: auto;
+
border: #854C9E 2px solid;
margin-right: auto;
+
border-left: 0px;  
margin-top: 6px;
+
color: #854C9E;
margin-bottom: 0px;
+
font-family: "Lucida Console", sans-serif;
width: auto;
+
font-size: 7.7px;
 +
text-align: right;
 +
width: 60px;
 +
padding: 0px 3px 0px 0px;
 +
font-size: 7.7px;
  
*border-collapse: collapse;
+
*font-size: 9px;
}
 
  
/* --| end |----------------------- */
 
/* --| tootip hover control |-- */
 
 
td.info_label:hover {
 
z-index: 9;
 
cursor: help;
 
 
}
 
}
  
/* --| end |------------------------- */
+
/* --| end |----------------------------------------------------- */
/* --| tootip misc control |------ */
+
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
td.info_label span {
+
/* ---------------------------------------------------------------------------------------------------------------------------------| message bar styling control |---- */
display: none;
 
}
 
  
/* --| end |------------------------ */
+
.note1 {
/* --| tootip styling control |-- */
 
 
 
td.info_label:hover span {
 
position: absolute;
 
bottom: 24px;
 
 
font-family: "Trebuchet MS", sans-serif;
 
font-family: "Trebuchet MS", sans-serif;
 
font-size: 11px;
 
font-size: 11px;
Line 2,031: Line 2,527:
 
display: block;
 
display: block;
  
 +
}
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
*width: 350px; /* for IE only - no need to adjust the tooltip width unless needed */
+
/* ----------------------------------------------------------------------------------------------------------------------------------------------| container control |---- */
 +
/* --| top half container control |-- */
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 1 of 3 |---------- */
+
.divtop {
 +
margin: 0px;
 +
padding: 0px;
 +
height: 410px; /* no need to adjust the height unless needed */
  
 
*bottom: 16px;
 
*left: -80px;
 
*text-align: left;
 
 
}
 
}
  
/* --| end |---------------------------------------- */
+
/* --| end |----------------------------- */
/* --| individual left side content control |-- */
+
/* --| top left container control |-- */
  
td.info_label {
+
.divtl {
width: 20px;
+
margin: 0px 0px 0px 10px;
font-family: "Lucida Console", sans-serif;
+
padding: 10px;
font-size: 7.7px;
+
width: 520px;  
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 |-- */
+
/* --| top right container control |-- */
  
td.info_a {
+
.divtr {
background-color: #EEEEFF;
+
margin: -415px 0px 0px 540px;
border: #854C9E 2px solid;
+
padding: 10px;
border-right: 0px;  
+
 
color: #854C9E;
+
*margin: -410px 0px 0px 540px;
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;
 
 
}
 
}
  
/* --| end |--------------------------------------------------- */
+
/* --| end |---------------------------------- */
/* --| individual right side - right content control |-- */
+
/* --| bottom half container control |-- */
 +
 
 +
.divbottom {
 +
margin: 5px 0px 0px 0px;
 +
padding: 0px;
 +
height: 340px; /* no need to adjust the height unless needed */
  
td.info_b {
+
*margin: 0px;
background-color: #EEEEFF;
+
*height: 335px; /* no need to adjust the height unless needed */
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 |---- */
+
/* --| bottom left container control |-- */
  
 +
.divbl {
 +
margin: 0px 0px 0px 10px;
 +
padding: 10px;
 +
width: 520px;
  
/* --| div which holds divpic and divtab |-- */
+
}
  
.divwhole {
+
/* --| end |------------------------------------ */
        margin: 23px 0px 20px 0px;
+
/* --| bottom right container control |-- */
        padding: 0px;
 
  
 +
.divbr {
 +
margin: -330px 0px 0px 540px; /* no need to adjust the height unless needed */
 +
padding: 10px;
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
+
*margin: -320px 0px 0px 540px; /* no need to adjust the height unless needed */
  
        height: 460px; /* this height only need to be adjusted when necessary only */
+
}
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 2 of 3 |---------- */
+
/* --| end |------------------------------------ */
 +
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
  
 +
/* ---------------------------------------------------------------------------------------------------------------------------------------------| list styling control |---- */
  
        *margin: 35px 0px -5px 0px;
+
.div5 {
}
+
margin: -10px 0px -10px -25px;
  
/* --| end |--------------------------- */
+
*margin: -20px 0px -20px -25px;
/* --| div which holds the pics |-- */
 
  
.divpic {
 
        margin: 0px 0px 0px 20px;
 
        padding: 0px;
 
 
        *margin: -25px -365px 0px 20px;
 
 
}
 
}
  
/* --| end |--------------------------------------- */
+
li {
/* --| div which holds the tab container |-- */
+
text-align: justify;
 +
color: #854C9E;
  
.divtab {
 
        margin: -450px 0px 0px 360px;
 
        padding: 0px;
 
        width: 560px;
 
 
}
 
}
  
/* --| end |------------ */  
+
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
/* --| body styling |-- */  
+
 
 +
/* -------------------------------------------------------------------------------------------------------------------------------| whole content styling control |---- */
 +
/* --| body control |-- */
  
 
body {
 
body {
  background: #131313;
+
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;
  
 +
}
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
+
/* --| end |-------------------- */
 +
/* --| paragraph control |-- */
  
  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 */
+
p {
 +
text-align: justify;
 +
color: #854C9E;
 +
font-weight: bold;  
  
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| edit point 3 of 3 |---------- */
+
}
  
 +
/* --| end |-------------------- */
 +
/* --| main table control |-- */
 +
 +
td {
 +
vertical-align: left middle;
  
  font-family: "Trebuchet MS", sans-serif;
 
  font-size: 11px;
 
  text-align: left;
 
  color: #854C9E;
 
  height:auto;
 
 
}
 
}
  
/* --| end |----------------- */
+
.table1 {
 +
background-color: transparent;
 +
cellpadding: 2px;
 +
cellspacing: 0px;
 +
height: 100%;
 +
width: 100%;
 +
 
 +
}
  
 +
.table2 {
 +
background-color: transparent;
 +
cellpadding: 0px;
 +
cellspacing: 0px;
 +
height: 100%;
 +
width: 100%;
  
/* -----------------------------------------------------------------------------------------------------------------------------------------| 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 |-- */
 
  
/* Layout helpers ----------------------------------*/
+
/* --| end |--------------------------- */
.ui-helper-hidden { display: none; }
+
/* --| headings styling 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 ----------------------------------*/
+
.inner {
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
+
background-color:#EEEEFF;
.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: 10px;
.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; }
+
border: 1px solid #CCCFC8;
.ui-widget-content a { color: #333333; }
+
font-family: "Comic Sans MS", "Trebuchet MS", "Times New Roman";
.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; }
+
font-size: 22px;
.ui-widget-header a { color: #F6FAFD; }
+
font-weight: bold;
 +
color: #854C9E;
  
/* 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 ----------------------------------*/
+
.outer2 {
.ui-tabs { padding: .2em; zoom: 1; }
+
z-index: 1;  
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
+
background-color: #EEDDFF;  
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
+
margin: 10px 0px 0px 0px;  
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
+
padding: 6px; width: 815px;  
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
+
position: relative;  
.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; }
+
border: 1px solid #CCCFC8;  
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
+
text-align: center;
 +
margin-left: auto;
 +
margin-right: auto;
  
/* 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; }
+
.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;
  
/* ----------------------------------------------------------------------------------------------------------------------------------------| tabbed container settings center |--| end |-- */
+
}
  
 +
/* --| end |------------------------- */
 +
/* --| horizontal line control |-- */
  
/* --| message bar positioning control |-- */
+
hr {
 +
width: 93%;
  
.overlap1 {
 
  height: 32px;
 
  z-index: 2;
 
  position: relative;
 
  margin: 0px 0px -16px 0px;
 
 
}
 
}
  
/* --| end |---------------------- */
+
.hr1 {
/* --| message bar styling |-- */
+
margin: 0px;
 +
 
 +
*text-align: center;
 +
 
 +
}
  
.note {
+
/* --| end |--------------------------- */
  font-family: "Trebuchet MS", sans-serif;
+
/* --| picture content control |-- */
  font-size: 11px;
+
 
  line-height: 16px;
+
.pics {
  background-color: #FFFFCC;
+
height: auto;  
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');
+
width: auto;  
  background-position: 3px 50%;
+
padding: 0px;  
  background-repeat: no-repeat;
+
margin: 0px;  
  color: #777777;
+
overflow: hidden;
  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;
 
 
}
 
}
  
 
+
.pics img {  
.note2 {
+
height: auto;  
  font-family: "Trebuchet MS", sans-serif;
+
width: auto;  
  font-size: 11px;
+
padding: 10px;  
  line-height: 16px;
+
border: 1px solid #ccc;  
  background-color: #FFFFCC;
+
background-color: #fff;  
  background-image:url('http://img194.imageshack.us/img194/1986/helpm.png');  
+
top: 0px;  
  background-position: 3px 50%;
+
left: 0px;  
  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 |-- */  
+
/* --| label styling control |-- */
 +
 
 +
.label {
 +
color: #854C9E;
 +
width: 26%;
 +
text-align: right;
  
li {
 
  text-align: justify;
 
  color: #854C9E;
 
 
}
 
}
  
.divlist {
+
.label:hover {
  margin: -10px 0px -10px -25px;
+
color: blue;
  
  *margin: -20px 0px -20px -25px;
 
 
}
 
}
  
/* --| end |------------ */  
+
/* --| end |--------------------- */
/* --| http link styling |-- */  
+
/* --| text styling control |-- */
 +
 
 +
.text {
 +
color: #854C9E;
 +
width: 74%;
  
a:hover {
 
  color: #854C9E;
 
 
}
 
}
  
/* --| end |------------------- */
+
.text:hover {
/* --| paragraph styling |-- */
+
color: red;
  
p {
 
  text-align: justify;
 
  color: #854C9E;
 
  font-weight: bold;
 
 
}
 
}
  
/* --| end |------------- */  
+
/* --| end |--------------------------- */
/* --| table styling |-- */  
+
/* --| label box styling control |-- */
 +
 
 +
.rounded1 {
 +
background-color:#EEDDFF;
 +
padding: 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8; 
  
td {
 
  vertical-align: left middle;
 
 
}
 
}
  
/* --| end |------------ */  
+
/* --| end |--------------------------- */
/* --| label styling |-- */  
+
/* --| text box styling control |-- */
 +
 
 +
.rounded2 {
 +
background-color:#EEEEFF;
 +
padding: 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8; 
  
.label {
 
  color: #854C9E;
 
  width: 17%;
 
  text-align: right;
 
 
}
 
}
  
.label:hover {
+
/* --| end |-------------------------------- */
  color: blue;
+
/* --| synopsis box styling control |-- */
}
 
  
/* --| end |------------ */
+
.rounded3 {
/* --| text styling |-- */
+
background-color:#EEEEFF;
 +
padding: 5px 10px 5px 10px;
 +
width: auto;
 +
height: auto;
 +
border: 1px solid #CCCFC8; 
  
.text {
 
  color: #854C9E;
 
  width: 74%;
 
 
}
 
}
  
 +
/* --| end |-------------------------------- */
 +
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */
 +
</style>
  
.text:hover {
+
</head>
  color: red;
+
<body>
}
+
 
 +
<div class="outer2">
  
/* --| end |--------------------------- */
 
/* --| headings styling control |-- */
 
  
.inner {
+
<!-- the title heading -->
  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 {
+
<div class="inner">Panda Kopanda | Panda! Go Panda! [DivX][MP3]</div>
  z-index: 1;
 
  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 {
+
<div class="button">
  background-color: #EEDDFF;
+
<table class="file_info">
  margin: 0px 0px 10px 0px;
 
  padding: 6px;
 
  width: 815px;
 
  border: 1px solid #CCCFC8;
 
  text-align: center;
 
  margin-left: auto;
 
  margin-right: auto;
 
}
 
  
/* --| end |------------------------- */
 
/* --| horizontal line control |-- */
 
  
hr {
+
<!-- tooltip and quick file summary area -->
  width: 93%;
 
}
 
  
.hr1 {
+
<tr>
  margin: 0px;
+
<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>
  
  *text-align: center;
+
</div>
}
 
  
/* --| end |--------------------------------------------- */
+
<div class="hr1"><hr></div>
/* --| pics holder styling |--------------------------- */
 
  
.pics {
+
<div class="divtop">
  height: auto;
 
  width: auto;
 
  padding: 0px;
 
  margin: 0px;
 
  overflow: hidden
 
}
 
  
.pics img {
+
<div class="divtl">
  height: auto;
+
<fieldset>
  width: auto;
 
  padding: 10px;
 
  border: 1px solid #ccc;
 
  background-color: #fff;
 
  top: 0px;
 
  left: 0px;
 
}
 
  
/* --| end |--------------------------------------------------- */
+
<legend>| Series Information |</legend>
/* --| background box styling |--------------------------- */
 
  
/*
 
.rounded1 {
 
  background-color: #EEDDFF;
 
  padding: 10px;
 
  width: auto;
 
  height: auto;
 
  border: 1px solid #CCCFC8;
 
}
 
*/
 
  
.rounded2 {
+
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
  background-color: #EEEEFF;
+
<!-- edit the info accordingly -->
  padding: 10px;
+
 
  width: auto;
+
<table class="table1">
  height: auto;
+
<tr>
  border: 1px solid #CCCFC8;
+
<td class="label"><div class="rounded1">Main Title:</div> </td>
}
+
<td class="text"><div class="rounded2">Panda Kopanda</div></td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Official Title:</div></td>
 +
<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">
  
.rounded3 {
 
  background-color: #EEEEFF;
 
  padding: 5px 10px 5px 10px;
 
  width: auto;
 
  height: auto;
 
  border: 1px solid #CCCFC8;
 
  
  *padding: 0px 10px 0px 10px;
+
<!-- edit the info accordingly -->
}
 
/* --| end |--------------------------------------------- */
 
  
</style>
+
<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>
  
<!-- multi picture presentation timing control -->
+
</fieldset>
<script type="text/javascript">  
+
</div>
$('#slideshow').cycle({
+
    fx:    'all',
+
<div class="divtr">
    timeout: 5000,
+
<fieldset>
    speed:  1000
 
});
 
</script>  
 
  
<!-- message bar timing control 1 of 3 -->
+
<legend>| Main Picture |</legend>
<script type="text/javascript">
 
  $(document).ready(function(){
 
  setTimeout(function(){
 
  $("#note1").fadeOut("slow", function () {
 
  $("#note1").remove();
 
    });
 
  
}, 5000);
+
<table class="table2">
});
+
<tr>
</script>
+
<td>
 +
<div class="pics">
 +
 
 +
 
 +
<!-- picture height should be 340px max; you may use your preferred height though -->
  
<!-- message bar timing control 2 of 3 -->
+
<img src="http://img21.imageshack.us/img21/2401/pandakopanda1.png" />
<script type="text/javascript">
+
</div>
  $(document).ready(function(){
+
</td>
  $('#note2').hide();
+
</tr>
  setTimeout(function(){
+
</table>
  $("#note2").fadeIn("slow", function () {
 
  $("#note2").show();
 
      });
 
  
}, 4990);
+
</fieldset>
});
+
</div>
</script>
 
  
<!-- message bar timing control 3 of 3 -->
+
</div>
<script type="text/javascript">
 
  $(document).ready(function(){
 
  setTimeout(function(){
 
  $("#note3").fadeOut("slow", function () {
 
  $("#note3").remove();
 
    });
 
  
}, 10000);
+
<div class="divbottom">
});
 
</script>
 
  
<!-- tab container fx control -->
+
<div class="divbl">
<script type="text/javascript">
+
<fieldset>
  $(function() {
 
  $("#tabs").tabs({ fx: { opacity: 'toggle' } });
 
      var fx = $('.selector').tabs('slow', 'fx');
 
      });
 
</script>
 
  
</head>
+
<legend>| File Information |</legend>
<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 -->
 
  
  
<div class="overlap1">
+
<!-- add or remove <br> accordingly when you editing the info below; it is some sort of box height matching with the content -->
<div id="note3">
+
<!-- edit the info accordingly -->
<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">
+
<table class="table1">  
<div class="inner"><script>dcw(useredit.heading);</script></div>
+
<tr>
 
+
<td class="label"><div class="rounded1"><b>HINT</b>:</div></td>
<div class="button">
+
<td class="text"><div class="rounded2">Hover on the quick file summary for more information.</div></td>
<table class="file_info">
+
</tr>
<tr>
+
<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="label"><div class="rounded1">FanSub by:<br><br></div></td>
<td class="info_a"><div><script>dcw(useredit.srcs_left);</script></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>
<td class="info_b"><div><script>dcw(useredit.srcs_right);</script></div></td>
+
</tr>
<td />
+
<tr>
<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="label"><div class="rounded1">Approx. Duration:</div></td>
<td class="info_a"><div><script>dcw(useredit.vids_left);</script></div></td>
+
<td class="text"><div class="rounded2">~ 1 hour 11 minutes per episode</div></td>
<td class="info_b"><div><script>dcw(useredit.vids_right);</script></div></td>
+
</tr>
<td />
+
<tr>
<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="label"><div class="rounded1">Note:<br><br></div></td>
<td class="info_a"><div><script>dcw(useredit.auds_left);</script></div></td>
+
<td class="text"><div class="rounded2">Please continue seeding as much as you can.<br>Thank you guys.</div></td>
<td class="info_b"><div><script>dcw(useredit.auds_right);</script></div></td>
+
</tr>
<td />
+
<tr>
<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="label"><div class="rounded1">Related Anime:<br></div></td>
<td class="info_a"><div><script>dcw(useredit.subs_left);</script></div></td>
+
<td class="text">
<td class="info_b"><div><script>dcw(useredit.subs_right);</script></div></td>
+
<div class="rounded2">
</tr>
+
<ul>
</table>
 
</div>
 
</div>
 
  
<div class="hr1"><hr></div>
+
<div class="div5">
 +
<li>
  
<div class="divwhole">
 
  
<div class="divpic">
+
<!-- edit the info accordingly -->
<table style="background-color: transparent;" cellpadding="0" cellspacing="0" height="100%">
+
 
<tr><td>
+
<a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">
<div id="slideshow" class="pics"></div>
+
Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]
<script language="javascript" purpose="Print related pics">
+
</a>
for (i in related.pics_list) { document.getElementById("slideshow").innerHTML += '<img src="'+related.pics_list[i].href +'" />'; }
+
</li>
</script>
+
</div>
</td></tr>
+
 
</table>
+
</ul>
 +
</div>
 +
</td>
 +
</tr>
 +
<tr>
 +
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
 +
 
 +
 
 +
<!-- edit the info accordingly -->
 +
 
 +
<td class="text"><div class="rounded2"><div class="note1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i>None available</i>.</div></div></td>
 +
</tr>
 +
</table>
 +
 
 +
</fieldset>
 
</div>
 
</div>
  
<div class="divtab">
+
<div class="divbr">
<div id="tabs">
+
<fieldset>
<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>
 
  
<div id="tabs-1">
+
<legend>| Synopsis |</legend>
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
+
 
<tr>
+
<table class="table2">
<td class="label"><div class="rounded1">Main Title:</div></td>
+
<tr>
<td class="text"><div class="rounded2"><script>dcw(useredit.maintitle);</script></div></td>
+
<td>
</tr>
+
<div class="rounded3">
<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 <br> here is for break; not the same purpose as of above usage -->
<table style="background-color: transparent;" cellpadding="3" cellspacing="0" height="100%" width="100%">
+
<!-- edit the info accordingly -->
<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">
+
<p>
<div class="rounded2">
+
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.
<ul>
+
<br><br>
<div class="divlist">
+
The story is about a little girl, Mimiko, who was left alone while her Grandma was away.
<script language="javascript" purpose="Print related anime">
+
<br><br>
for (i in related.anime_list)
+
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.
{ document.write('<li><a href="'+related.anime_list[i].href +'" target="_blank">'+ related.anime_list[i].title + '</a></li>'); }
+
<br><br>
</script>
+
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>
+
</p>
</ul>
+
 
</div>
+
</div>
</td>
+
</td>
</tr>
+
</tr>
<tr>
+
</table>
<td class="label"><div class="rounded1">Related OST:<br><br></div></td>
+
 
<td class="text">
+
</fieldset>
<div class="rounded2">
+
</div>
<ul>
+
 
<div class="divlist">
+
</div>
<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>
 
 
 
</div>
 
 
 
</div>
 
  
 
<div class="hr1"><hr></div>
 
<div class="hr1"><hr></div>
  
 
<div class="outer3">
 
<div class="outer3">
  <div class="inner">Screenshots</div>
+
<div class="inner">Screenshots</div>
 
</div>
 
</div>
 +
  
 
</body>
 
</body>
 +
</html>
  
<!-- reference link text replacement engine -->
 
<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 -->
+
<!-- change your demo pic here; use png format only; box may be added or removed accordingly -->
<script src="http://deysmacro.uuuq.com/resources/bakabt/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
 
  
</html>
 
 
<!-- imgs block could be added or removed at will; recommended at least 4 blocks; use png format only -->
 
 
[screenshot]
 
[screenshot]
  [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
+
[img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img]
  [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
+
[img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img]
  [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
+
[img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img]
  [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
+
[img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img]
  [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
+
[img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img]
 
[/screenshot]
 
[/screenshot]
 
</pre>
 
</pre>
  
Sample template image: [http://wiki.bakabt.com/index.php/File:JS_Alternative_Anime_Template.png Click here for full preview]<br />
+
Sample template image: [http://wiki.bakabt.me/index.php/File:Pure_CSS_Driven_Anime_Template_-_Alternative.png Click here for full preview]<br />
 
Back to [[Offer_Templates#Templates_preview|top]].
 
Back to [[Offer_Templates#Templates_preview|top]].
  
===JS Alternative Anime Template - Editing Friendly Edition (templatized)===
+
===Generic Anime Template - Light Themed===
 
----
 
----
[http://www.bakabt.com/template.php?id=JS-alternative%20(edit-friendly)%20Anime%20Template Click here] to use
 
  
===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]].
+
<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.
 +
*
 +
* 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;
  
===Twin Alpha Box Description===
+
}
----
 
  
Submitted by: miasmacloud
+
/* --| end |--------------------------- */
 +
/* --| http link styling control |-- */
  
<pre>
+
a {
This is a simple description. It uses two bars for information.
+
color: #FF661A;
--------------------------------------------
+
text-decoration: none;
CTRL+F to find the spots you need to fill in.
 
REQUIRED1 - The background image
 
REQUIRED2 - Summary
 
REQUIRED3 - Show information
 
REQUIRED4 - File information
 
REQUIRED5 - Screenshots
 
--------------------------------------------
 
By default, this has two bars on the left side of the screen, but you can customize the positioning.
 
--------------------------------------------
 
To customize the bar positioning, find the part in the <style> where the following 3 entries are.
 
  
#centered{
 
/* width: 580px; */
 
margin: 0px auto;
 
 
}
 
}
#bar1{
+
 
float: left;
+
a:hover {
 +
color: #000000;
 +
 
 
}
 
}
#bar2{
+
 
float: left;
+
/* --| end |----------------------------- */
 +
/* --| paragraph styling control |-- */
 +
 
 +
p {
 +
text-align: justify;
 +
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 +
padding:20px;
 +
border: #999999 1px solid;
 +
 
 
}
 
}
  
- bar1 = where the summary appears, bar2 = where the show and file info appears
+
/* --| end |------------------------ */
- To make the two bars appear in the middle of the screen, remove the /* */ from the #centered
+
/* --| table content control |-- */
- To make both bars appear on the right side of the screen, change both float: left; to to float: right;
+
 
- To make one of the bars appear on the right, change one float: left to float: right;
+
td {
</pre>
+
vertical-align: left middle;
<pre>
+
 
<!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;
+
/* --| end |---------------------------- */
}
+
/* --| main title styling control |-- */
body{
+
 
background: #fff;
+
.title {
font-family: tahoma;
+
font-family: Tahoma;
font-size: 8pt;
+
font-size: 22px;
color: #fff;
+
font-weight: bold;
width: 940px;
 
background-repeat: no-repeat;
 
}
 
body{
 
background-image: url(http://dl.dropbox.com/u/6430958/template/example_bg.jpg);
 
/* REQUIRED1 ~ replace the URL with your own background image URL */
 
}
 
a:link,a:visited,a:active,a:hover{
 
text-decoration: underline;
 
color: #fff;
 
}
 
h1{
 
padding: 5px;
 
 
text-align: center;
 
text-align: center;
font-size: 11pt;
+
padding:10px;
 +
background-color: #ffffff;
 +
color: #000066;
 +
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 +
border: #999999 1px solid;
 +
 
 
}
 
}
  
/* text bars */
+
/* --| end |--------------------------- */
.bars{
+
/* --| picture content control |-- */
width: 250px;
+
 
margin: 0px 20px 0px 20px;
+
.pic2 {
}
+
font-family: Tahoma;
#centered{
+
font-size: 22px;
/* width: 580px; */
+
font-weight: bold;
margin: 0px auto;
+
text-align: center;
}
+
padding:10px;
#bar1{
+
background-color: #2E2E2E;
float: left;
+
color: #0F0F0F;
}
+
border: #999999 1px solid;
#bar2{
+
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
float: left;
+
 
}
 
.bg{
 
background-image: url(http://dl.dropbox.com/u/6430958/template/black_barbg.png);
 
}
 
.low{
 
height: 100px;
 
background-image: url(http://dl.dropbox.com/u/6430958/template/black_grad.png);
 
 
}
 
}
  
/* inside the text bars */
+
/* --| end |------------------------------- */
.content{
+
/* --| sub heading styling control |-- */
padding: 10px;
+
 
line-height: 12pt;
+
.heading {
text-shadow: 1px 1px 2px #000;
+
font-family: Tahoma;
text-align: justify;
+
font-size: 14px;
}
+
font-weight: bold;
.item{
+
text-align: center;
margin: 3px 0px 3px 0px;
+
color: #000066;
}
+
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
 +
padding: 8px 0px 8px 0px;
  
/* right bar specific */
 
#show{
 
margin-bottom: 15px;
 
 
}
 
}
</style>
 
</head>
 
<body>
 
  
<div id="centered">
+
/* --| end |---------------------- */
<div id="bar1" class="bars">
+
/* --| label styling control |-- */
<div class="bg">
+
 
<div class="content">
+
.label {
<h1>
+
font-weight: bold;
ef ~ tale of melodies
+
color: #0F0F0F;
</h1>
+
width: 19%;
<div class="item">
+
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
<!-- REQUIRED2 -->
+
border: #999999 1px solid;
The anime once again tells two stories. The first story takes place in the past.
+
text-align: right;
Himura Yuu meets a girl, Amamiya Yuuko who seems to know him, but he doesn't know her.
+
 
However, he soon remembers that she was a girl whom he knew from long ago.
+
*width: 22%;
Yuuko then tells him something which he never knew.
+
 
He was her first love since then, and her first love has not ended yet.
+
}
The second story takes place in the present, just after the events of ef - A Tale of Memories.
+
 
Shuuichi Kuze meets the cousin of Aso Renji, Hayama Mizuki and spends a lot of time with her.
+
/* --| end |-------------------------------- */
Unknown to Mizuki, Kuze had contracted a fatal illness and has little time left to live.
+
/* --| various text styling control |-- */
Kuze had decided to break all romantic ties, but things go bad when Mizuki tells him that she loves him.
+
 
</div>
+
.text {
</div>
+
width: 100%;
</div>
+
color: #000066;
<div class="low"></div>
+
background:url('http://img9.imageshack.us/img9/1772/homebgk.gif');
</div>
+
border: #99999