Offer 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 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
For template-makers:
- Follow the instructions given for submitting a template.
- Replace {curly-bracketed text} with the appropriate names/text.
Templates submitted here may be ported over to BakaBT templates.
Sample Template
Copy and paste the code below:
==={Template Name}=== ---- Submitted by: {your BakaBT username} <pre> {Source code goes here} </pre> Sample template image: [{Template Image URL} Image link]
Log in to your BakaBT-Wiki account (Or register for one if you don't have one yet). Click one of the links below.
- Click here to add your template to Anime Templates.
- Click here to add your template to Manga Templates.
- Click here to add your template to OST Templates.
Paste your code right at the bottom, then click 'Show Preview'. If you're satisfied that nothing is broken, click 'Save Page'.
If something breaks, don't worry, we can roll back changes :) If you need help, drop us a line at #bakabt-support.
Templates preview
Anime
Simple HTML Anime Template | Simple ChalamiuS HTML Anime Template | Simple BBCode Anime Template | Generic Anime Template - Light Themed | Generic Anime Template - Dark Themed ! |
---|---|---|---|---|
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
Choose | Choose | Choose | Choose | Choose |
Pure CSS Driven Anime Template - Alternative | JS Alternative Anime Template - Editing Friendly Edition | Simplest Tabled Anime Template |
---|---|---|
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
|
Choose | Choose | Choose |
Generic Revision-2 Anime Template | Twin Alpha Box Description | Simple book with JS pages |
---|---|---|
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
Error creating thumbnail: File missing |
Choose | Choose | Choose |
Manga
OST
Anime Templates
Simple HTML Anime Template
Click here to use
Simple ChalamiuS HTML Anime Template
Click here to use
Simple BBCode Anime Template
Click here to use
Generic Anime Template - Light Themed
Submitted by: deysmacro
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> /* --------------------------------------------------------------------------------------------------------------------------------------------| some note |----- * * Please take note. The indentation should look correctly using Firefox. * * Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird. * When that happen, please use Firefox. * * Thank you for your understanding. * * --------------------------------------------------------------------------------------------------------------------------------------------| general info |----- * * Main user link : http://bakabt.me/user/816453/deysmacro.html * Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453 * * I welcome all of you people to use this template at your convenience. * Do contact me via PM or email if you had anything to say. * * Email : deysmacro[at]gmail[dot]com * * I also can help you guys with the template. * I will help whenever I can. * * 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; } /* --| end |--------------------------- */ /* --| http link styling control |-- */ a { color: #FF661A; text-decoration: none; } a:hover { color: #000000; } /* --| end |----------------------------- */ /* --| paragraph styling control |-- */ p { text-align: justify; background:url('http://img9.imageshack.us/img9/1772/homebgk.gif'); padding:20px; border: #999999 1px solid; } /* --| end |------------------------ */ /* --| table content control |-- */ td { vertical-align: left middle; } /* --| end |---------------------------- */ /* --| main title styling control |-- */ .title { font-family: Tahoma; font-size: 22px; font-weight: bold; text-align: center; padding:10px; background-color: #ffffff; color: #000066; background:url('http://img9.imageshack.us/img9/1772/homebgk.gif'); border: #999999 1px solid; } /* --| end |--------------------------- */ /* --| picture content control |-- */ .pic2 { font-family: Tahoma; font-size: 22px; font-weight: bold; text-align: center; padding:10px; background-color: #2E2E2E; color: #0F0F0F; border: #999999 1px solid; background:url('http://img9.imageshack.us/img9/1772/homebgk.gif'); } /* --| end |------------------------------- */ /* --| sub heading styling control |-- */ .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; } /* --| end |---------------------- */ /* --| label styling control |-- */ .label { font-weight: bold; color: #0F0F0F; width: 19%; background:url('http://img9.imageshack.us/img9/1772/homebgk.gif'); border: #999999 1px solid; text-align: right; *width: 22%; } /* --| end |-------------------------------- */ /* --| various text styling control |-- */ .text { width: 100%; color: #000066; background:url('http://img9.imageshack.us/img9/1772/homebgk.gif'); border: #999999 1px solid; } .text3 { width: 100%; color: #9D9D9D; background:url('http://img9.imageshack.us/img9/1772/homebgk.gif'); border: #999999 1px solid; } .text6 { color: #CC6600; } .text7 { color: #518ABF; font-weight: bold; } .text9 { color: #000000; font-weight: bold; } </style> </head> <body> <table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%"> <tr> <td colspan="3"> <div><hr><br></div> <!-- the title heading --> <div class="title">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</div> <div><br><hr></div> </td> </tr> <tr> <!-- rowspan number must be changed accordingly if you add/remove row --> <td rowspan="20" > <!-- 400px max width recommended --> <img class="pic2" src="http://img200.imageshack.us/img200/4229/187611.png"> </td> </tr> <tr> <td colspan="3" style="padding-top: 0px;"> <div class="heading">SERIES INFORMATION</div> </td> </tr> <!-- edit the info accordingly --> <tr> <td class="label">Main Title:</td> <td class="text">Panda Kopanda</td> </tr> <tr> <td class="label">Official Title:</td> <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"> <!-- edit the info accordingly --> <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> </tr> <br><br><br> <tr> <td colspan="3" style="padding-top: 20px;"><div class="heading">FILE INFORMATION</div> </td> </tr> <!-- edit the info accordingly --> <!-- 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> <!-- edit the info accordingly --> <tr> <td class="label">Related Anime:</td> <td class="text"> > <a href="http://bakabt.me/torrent/10676/Panda_Kopanda_Panda_Go_Panda_DVD_DivX_MP3.html" target="_blank">Panda Kopanda | Panda! Go Panda! [DVD][DivX][MP3]</a> </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> <p> <span class="text9"> <!-- edit the info accordingly --> 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> </p> </td> </tr> <tr> <td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td> </tr> </table> </body> </html> <!-- change your demo pic here; use png format only; box may be added or removed accordingly --> [screenshot] [img]http://img24.imageshack.us/img24/9528/snapshot20090509131128j.png[/img] [img]http://img17.imageshack.us/img17/7907/snapshot20090509131221.png[/img] [img]http://img4.imageshack.us/img4/3651/snapshot20090509131238.png[/img] [img]http://img14.imageshack.us/img14/2361/snapshot20090509131248.png[/img] [img]http://img22.imageshack.us/img22/197/snapshot20090509131326.png[/img] [/screenshot]
Sample template image: Click here for full preview.
Back to top.
Generic Anime Template - Dark Themed
Submitted by: deysmacro
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> /* --------------------------------------------------------------------------------------------------------------------------------------------| some note |----- * * Please take note. The indentation should look correctly using Firefox. * * Although I have taken all possible steps that it should look correct, using IE will somehow still make it look a little bit weird. * When that happen, please use Firefox. * * Thank you for your understanding. * * --------------------------------------------------------------------------------------------------------------------------------------------| general info |----- * * Main user link : http://bakabt.me/user/816453/deysmacro.html * Forum user link : http://forums.bakabt.me/index.php?action=profile;u=816453 * * I welcome all of you people to use this template at your convenience. * Do contact me via PM or email if you had anything to say. * * Email : deysmacro[at]gmail[dot]com * * I also can help you guys with the template. * I will help whenever I can. * * Originally Customized By : deysmacro * Re-Customized By : YOUR NICK HERE * * Template Version : v2.0.8.1 generic - dark themed * Template Last Update On : July 21th, 2009 @ 13:28pm GMT+8 * * Please leave the credit intact if you plan to use this template. * Your cooperation is highly appreciated. Thank you. * * --------------------------------------------------------------------------------------------------------------------------------------------------------| SN |----- * SN: 2006 | 8733 | 53 | 8208 | 1602 | 5985 | 2009 | 07 | 19 | 0720 | d-ait | v2081 | 11 * ---------------------------------------------------------------------------------------------------------------------------------| Info you should know |----- * * Quick Reminder: * If you found any syntax with * siding with the syntax, it is targeted for IE only. * * * Example: * Assume "width" is the syntax... * * body { * width: 100px; <-- major browser support * * *width: 110px; <-- targeted for IE only * } * * * This is done as to make it IE compatible. It is not required if IE displays the generated page correctly. * Please take note of this when you are editing. * * -------------------------------------------------------------------------------------------------------------------------------------------| end |----- */ /* * Nothing much to change or edit about the template appearance since it is 99% ready out of the box. * I will put some edit guides at the critical point only. The rest doesn't need to be edited unless you know what are you doing or you just want to play with the settings. * * Hopefully you guys enjoy using this template. Good day people. */ /* ------------------------------------------------------------------------------------------------------------| general styling control area |----- */ /* --| body styling control |-- */ body { background: #131313; background-image:url('http://img11.imageshack.us/img11/6719/3784.gif'); /* want some fresh background? change it here */ font-family: Tahoma; font-size: 11px; } /* --| end |--------------------------- */ /* --| http link styling control |-- */ a { text-decoration: none; } a:hover { color: #FF661A; } /* --| end |----------------------------- */ /* --| paragraph styling control |-- */ p { text-align: justify; background-image:url(http://img179.imageshack.us/img179/4977/bgrepeater2hn2.gif); padding:20px; border: #999999 1px solid; } /* --| end |----------------------- */ /* --| 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 { width: 100%; color: #FFB856; background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png); border: #999999 1px solid; } .text3 { width: 100%; color: #9D9D9D; background-image:url(http://img358.imageshack.us/img358/4214/back2il5.png); border: #999999 1px solid; } .text6 { color: #FFF0CC; } .text7 { color: #00D4FF; font-weight: bold; } .text9 { color: #FFB856; font-weight: bold; } /* --| end |------------------------ */ /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------| end |---- */ </style> </head> <body> <table style="background-color: transparent;" cellpadding="6" cellspacing="6" height="100%"> <tr> <td colspan="3"> <div><hr><br></div> <!-- main heading here --> <div class="title">Kaidoumaru | Kai Doh Maru [DVD][XviD][MP3]</div> <div><br><hr></div> </td> </tr> <tr> <!-- 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> <td class="label">Main Title:</td> <td class="text">Kaidoumaru</td> </tr> <tr> <td class="label">Official Title:</td> <td class="text">Kai Doh Maru</td> </tr> <tr> <td class="label">Japanese Title:</td> <td class="text">怪童丸</td> </tr> <tr> <td class="label">Year:</td> <td class="text">2001</td> </tr> <tr> <td class="label">Episodes:</td> <td class="text"><span class="text7">1</span></td> </tr> <tr> <td class="label">Categories:</td> <td class="text">Action, Fantasy, Historical, Magic, Seinen</td> </tr> <tr> <td class="label">Director:</td> <td class="text">Kanji Wakabayashi</td> </tr> <tr> <td class="label">Production:</td> <td class="text">Production I.G</td> </tr> <tr> <td class="label">References:</td> <!-- edit the info accordingly --> <td class="text"> <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&aid=500" target="_blank">AniDB</a> | <a href="http://www.animenfo.com/animetitle,888,lcvouh,kaidoumaru.html" target="_blank">AnimeNFO</a> | <a href="http://www.animenewsnetwork.com/encyclopedia/anime.php?id=306" target="_blank">ANN</a> | <a href="http://www.sonymusic.co.jp/Animation/kaidohmaru/" target="_blank">Official Page</a> </td> </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://bakabt.me/torrent/141617/Kai_Doh_Maru._DVDrip.html" target="_blank">Kai Doh Maru.[DVDrip]</a><br> > <a href="http://bakabt.me/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> <!-- edit the info accordingly --> <p> <span class="text9"> This story takes place during the Heian Period of Japan's history, when evil spirits still resided in the forests, mountains and rivers. A girl, accompanied by her loved one, battles against these evil spirits, while she is disguised as man. This brave woman, aka "Kaidomaru", with a Chinese character "Flame" tatooed on her upper arm, was one of the "Four Devas". Kaidomaru fights for the honor of her lost love, Raikou Minamotono, who had sacrified his life in order to protect the capital Kyoto, from the evils deeds of a "princess" cursed by a malicious ogre. The princess, whom Kaidomaru used to play with as a child, has now become her ultimate enemy. </span> </p> </td> </tr> <tr> <td colspan="3" style="padding-top: 20px;"><div class="heading">SCREENSHOTS</div></td> </tr> </table> </body> </html> <!-- change your demo pic here; use png format only; box may be added or removed accordingly --> [screenshot] [img]http://img91.imageshack.us/img91/8154/snapshot20090503140650j.png[/img] [img]http://img397.imageshack.us/img397/945/snapshot20090503140744.png[/img] [img]http://img212.imageshack.us/img212/3776/snapshot20090503140822.png[/img] [img]http://img240.imageshack.us/img240/889/snapshot20090503140849.png[/img] [img]http://img142.imageshack.us/img142/8716/snapshot20090503141314.png[/img] [/screenshot]
Sample template image: Click here for full preview
Back to top.
Simplest Tabled Anime Template
<html> <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]
Back to top.
Twin Alpha Box Description
Submitted by: miasmacloud
Click here to use
Back to top.
Simple book with JS pages
Submitted by: remix85
<html> <head> <!-- * Template: Book v1.1 * by remix85 * * Feel free to rearange pages as You wish, just leave this comment. * Keep in mind that space is limited, so long descriptions will have to be split manualy to two boxes or more. * To find what should be done search for TODO in this template, but first copy it to sandbox and see how it works. * * Maximum image size is 340x480. Bigger images will be automatically clipped. * * I know that it's not quite edit-friendly. * Send me a PM if You have problems with editing this template, or there's something wrong. --> <style type="text/css"> BODY {background-color: #FFFFFF; font-family: Times New Roman; font-size: 13px;} TABLE {font-family: Times New Roman; font-size: 13px; color: #101010;} A {color: #808080;} A:hover {color: #000000;} IMG {max-width: 340px; max-height: 480px; overflow: hidden;} #book {width: 940px;} #book1 {padding: 0 40px 0 50px;} .title {font-size: 2em; font-weight: bold; text-align: center; color: #101010;} .page {display: block;} .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;} .box_left {color: #101010; float: left; clear: left; width: 340px; margin-left: 40px;} .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;} .tbl_info {width: 100%;} .tbl_info TR {vertical-align: text-top;} .tbl_info TR TD {text-align: left; padding: 0.2em 0 0.2em 0;} .tbl_info TR TD:first-child {text-align: right; font-weight: bold; max-width: 25%;} </style> <script type="text/javascript" language="javascript"> // <![CDATA[ // small hack to show book layout only when JavaScript is enabled document.writeln('<style type="text/css">'); document.writeln('#book {height: 582px; background-repeat: no-repeat; background-image: url("[bbtimg=1314]");}'); document.writeln('#book1 {overflow: hidden; max-height:500px; padding: 40px 40px 40px 50px;}'); document.writeln('.page {display: none;}'); document.writeln('.hdr {display: block;}'); document.writeln('</style>'); // Switch current page -> hide all pages, show current function newpage(page_id) { if(!$.browser.msie) { page_id = '#' + page_id; if(!$(page_id).is(":visible")) { $("div.page").hide(); $(page_id).fadeIn(600, function(){}); } } else // jQuery effects don't work too good in IE... { var alltags = document.getElementsByTagName("div"); for (i=0; i < alltags.length; i++) { if (alltags[i].className=="page") { alltags[i].style.display = "none"; } } document.getElementById(page_id).style.display = "block"; } } // ]]> </script> </head> <body> <center> <div id="book"><div id="book1"> <div class="box_left"><div class="hdr" id="tablist"><ul> <li onClick="newpage('page1');">Info</li> <li onClick="newpage('page2');">Summary</li> <!-- TODO: If needed, insert new tabs here --> <!-- something like <li onClick="newpage('tab_id');>Tab name</li> --> </ul><br /></div></div> <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 --> <div class="page" id="page1" style="display:block;"> <div class="box_right" style="text-align: center;"> [TODO: image] <!--<img src="http://" alt="Image not found" />--> </div> <div class="box_left"> <table><tr><td> <div class="title">[TODO: title]</div> </td></tr></table><br /> </div> <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--> </center> </body> </html> [url=http://wiki.bakabt.me/index.php/BBCode#Screenshots]TODO: Screenshots[/url]
Sample template image: Book of Gosick
Back to top.
Manga Templates
Byousoku 5cm Manga Template
Click here to use
Dille's Manga Template
Click here to use
Msm595's Manga Template
Submitted by: kiiller_man1
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <style type="text/css"> html, body, p, h1, ul { margin: 0; padding: 0; } 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>
Sample template image: Image link
OST Templates
OST Template 1
Click here to use
Show/hide Tracklist OST Template
Click here to use
Dropdown list OST Template
Click here to use
Simple OST Template
Click here to use
Boxed OST Template
---
Submitted by: kureshii
Note: All album images used must be the same size! Preferably ~350X350px, not too tall or wide. height and width values in "imgborder" class must be edited to fit the image. Other numbers in the CSS stylesheet may need to be tweaked for best effect.
<html> <head> <title>[[Torrent Title]]</title> <style type="text/css"> body { background-color: #ffffff; text-align: left; margin: auto; } table { display: table; border-spacing: 10px; font-family: Calibri, Helvetica, sans-serif; font-size: medium; } tr {display: table-row;} td { display: table-cell; min-width: 430px; padding: 10px; border: solid 2px #000000; vertical-align: top; } .album {max-width: 30em; margin: auto;} .vocal {max-width: 50em; margin: auto;} .header1 { font-size: 140%; font-weight: bold; text-align: center; } .header2 { font-size: 115%; } .header3 { font-size: 66%; font-style: italic; font-weight: normal; } img { margin: 8px; } .imgborder { border: 1px solid #666666; height: 366px; width: 366px; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px; } .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>
Sample torrent: Macross Frontier Music Collection
Go to: Offers Page
Submitted by: shadowmaniac
Note: A fixed body height, based on the max height of your longest description, has to be specified else, description will be truncated.
Note: Please don't use this template if you don't/can't understand what's going on.
<html> <head> <style type="text/css"> hr { width: 80%; } body { align: center; height: 500px; } .tdtext { width: 30%; v-align: top; } .wrapper { 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 ***********************************************/ //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height: //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none: var iframeids=["myframe"] //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended): var iframehide="yes" var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers 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" } } } function resizeIframe(frameid){ 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) } } } function readjustIframe(loadevt) { var crossevt=(window.event)? event : loadevt 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 } 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 //############################################# //######################################## //Modify the code below to suit your needs //######################################## function Show(selected_option) { // get our iframe var testFrame = document.getElementById("myframe"); var val; //selected_option refers to the "option" value provided in the HTML code switch(parseInt(selected_option)) { case 1: val = "<table align='center' border='1' width='100%'>"; val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>"; val += "<img src='[[img link here]]'></td></tr>"; val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 1]]</h2></td></tr>"; val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>"; val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>"; val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>"; val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>"; val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>"; val += "</table>"; break; case 2: val = "<table align='center' border='1' width='100%'>"; val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>"; val += "<img src='[[img link here]]'></td></tr>"; val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 2]]</h2></td></tr>"; val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>"; val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>"; val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>"; val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>"; val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>"; val += "</table>"; break; case 3: val = "<table align='center' border='1' width='100%'>"; val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>"; val += "<img src='[[img link here]]'></td></tr>"; val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 3]]</h2></td></tr>"; val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>"; val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>"; val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>"; val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>"; val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>"; val += "</table>"; break; case 4: val = "<table align='center' border='1' width='100%'>"; val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>"; val += "<img src='[[img link here]]'></td></tr>"; val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 4]]</h2></td></tr>"; val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>"; val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>"; val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>"; val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>"; val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>"; val += "</table>"; break; case 5: val = "<table align='center' border='1' width='100%'>"; val += "<tr><td rowspan='14' style='vertical-align:middle;' align='center'>"; val += "<img src='[[img link here]]'></td></tr>"; val += "<tr><td colspan='2' align='center'><h2>[[OST TITLE 5]]</h2></td></tr>"; val += "<tr><td class='text'><b>Ripper</b>: [[Ripper]]</td><td class='text'><b>Codec</b>: [[Codec(Bitrate)]]</td></tr>"; val += "<tr><td class='text'>[[Track list 1]]</td><td class='text'>[[Track list 5]]</td></tr>"; val += "<tr><td class='text'>[[Track list 2]]</td><td class='text'>[[Track list 6]]</td></tr>"; val += "<tr><td class='text'>[[Track list 3]]</td><td class='text'>[[Track list 7]]</td></tr>"; val += "<tr><td class='text'>[[Track list 4]]</td><td class='text'>[[Track list 8]]</td></tr>"; val += "</table>"; break; default: val = "<h2 align='center'>Choose an album/OST from the drop menu</h2><br />"; break; } // now write out the new contents var doc = testFrame.contentDocument; if (doc == undefined || doc == null) doc = testFrame.contentWindow.document; doc.open(); doc.write(val); doc.close(); document.all.myFrame.style.visibility="visible"; } //--> </script> </head> <body> <center> <div class="wrapper"> <br /> <form id="form1"> <select name="dest" onchange="Show(this.options[this.selectedIndex].value)"> <!-- 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> </html>
Sample template image: Sample image
Sample torrent (slightly modified template): KoiKoi7 - Song Shu Paradise & Character Mini Albums
Simple ChalamiuS OST Template
Click here to use
Go to: Offers Page
Outdated Templates
Please don't use following templates anymore. They are outdated.
HTML5 CSS3 Anime Template
Submitted by: CvP
This anime template utilizes HTML5 and CSS3.
It is compatible with latest IE9/Firefox/Chrome/Safari/Opera as much as possible.
To use this template, you don't need to edit a single line of code.
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.
This template (and the form) will be constantly updated for better compatibility and features. Please leave your feedback in here
If you need any help customizing this template, you can post in the above link as well.
Note: It is a good idea to use Firefox4 to view the form (The template should be ok on any newer browsers).
Click here to use.
Click here for a live preview!
Back to top.