API tools faq
paste
Advertisement
alikimoko

alikimoko's BakaBT template with notes

alikimoko
Jul 8th, 2014
187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.40 KB | None | 0 0
raw download clone embed print report
  1. <!-- This is the template I (alikimoko) made for use on BakaBT. This version also contains some usefull notes for people who know little to no HTML or who haven't uploaded anything before. -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <!-- Style explanation: -->
  6. <!-- th - How the section text looks. Needed to make a diffrence between the category and content without continualy adding style statements. -->
  7. <!-- .main - How the album boxes look. Change when wanted for the series. -->
  8. <!-- .title - How the title looks, change when needed. -->
  9. <!-- .track - Display of the normal tracklist and information. -->
  10. <!-- button - Display of the menu buttons, change background collor to mach series "image". Use base collors like "red", "blue" or "green" with a name or hexadecimal RGB collors like "#F00 or #FF0000", "#0F0 or #00FF00" or "#00F of #0000FF". While 6 hexadecimals give more collor options, they may be displayed diffrent on diffrent screens. 3 hexadecimals are webcollors and are made to always have the same contrast to one another, meaning more collor certainty. -->
  11. <!-- .menu - Make sure this is the same as .main or it will look weard. Needed to make a diffrence between the menu and the content. -->
  12. <!-- a - Display of links. -->
  13. <!-- #div - Every div exept #div0 needs to go in here. Makes sure only the menu and the series info is open at the beginning. -->
  14. <style type="text/css">
  15. body { color:#667686; font-family: sans-serif; }
  16. th { min-width: 10em; font-weight: bold; text-align: right; }
  17. .main { border:1px solid #667686; width: 900px; margin: auto; }
  18. .column { float: left; margin: 5px; }
  19. .title {
  20.         font-family: serif;
  21.         font-size: 22px;
  22.         font-weight: bold;
  23.         text-align: center;
  24.         margin: 10px 0px;
  25.         clear: both;
  26. }
  27. .heading { font-size: 14px; font-weight: bold; }
  28. .footnote { clear: both; }
  29.  
  30. .track { text-align:center; font-family:Arial, Helvetica, sans-serif;}
  31. button { text-align:center; font-family:Arial, Helvetica, sans-serif; width:297px; background-color:#F60;}
  32. .menu { border:1px solid #667686; width: 900px; margin: auto; }
  33.  
  34. a:link          {color: blue;text-decoration:none;}
  35. a:visited       {color: blue;text-decoration:none;}
  36. a:hover         {color: red;text-decoration:none;}
  37. a:active        {color: red;text-decoration:none;}
  38.  
  39.  
  40. #div1,#div2,#div3,#div4,#div5 {
  41.         display:none;
  42. }
  43.  
  44. </style>
  45.  
  46. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
  47. </script>
  48. <script type="text/javascript">
  49. $(document).ready(function(){
  50.        
  51.         $("button").click(function(){
  52.                 button_id = $(this).attr("id");
  53.                 $("div.main").slideUp();
  54.                 $("#div"+button_id).slideDown();
  55.         });
  56.  
  57. });
  58. </script> <!-- Makes sure that when a button is pressed every content window is closed and opens the content you want to see. -->
  59. </head>
  60. <body>
  61. <!--menu start-->
  62. <div class="menu">
  63.         <!-- Don't put to much text in here or the button gets bigger in size, looks ugly. -->
  64.     <button id="0">Series info</button>
  65.     <button id="1">CD Album 1</button>
  66.     <button id="2">CD Album 2</button>
  67.     <button id="3">DVD/BD Album 1</button>
  68.     <button id="4">DVD/BD Album 2</button>
  69.     <button id="5">DVD/BD Album 3</button>
  70.     <!-- id needs to increse with every button, the content window it belongs to always needs an id that is div + the id of the button. Meaning 0 and div0, 1 and div1 etc. -->
  71.     <!-- Albums with short tracklists get a normal listing. Albums with long tracklists get dropdown listings. -->
  72.     <!-- Try to keep every image within the same limmits and don't make them to big, it makes the description messy if you don't. (I use 350 px as an example) -->
  73.     <!-- In case of FLAC, use encoding level. In case of MP3, use bitrate. -->
  74. </div>
  75. <!--menu end-->
  76. <!--info start-->
  77. <div id="div0" class="main">
  78.         <div class="title">Series info</div>
  79.     <table align="center"><tr>
  80.         <td><div class="column"><img class="img" src="https://lh4.googleusercontent.com/-PGCVtwXy2WY/U7xjdyjx7CI/AAAAAAAAFNI/bbY2NDC9Fbk/w280-h350-no/cover+sample+1.jpg" alt="Album Image" /></div></td><!-- The cover for the series goes here. Aspect ratio usualy 4:5 or 5:7 -->
  81.         <td width="400"><div class="column" align="center">
  82.                 <table>
  83.                 <tbody>
  84.                         <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  85.                         <tr><th>Director:</th><td>Director goes here</td></tr>
  86.                         <tr><th>Production:</th><td>Production/producer goes here</td></tr>
  87.             <tr><td colspan="2">&nbsp;</td></tr><!-- Put as much links as posible here: -->
  88.             <tr><td colspan="2" class="track"><a href="">AniDB</a></td></tr><!-- Link to Anime Database goes here. -->
  89.             <tr><td colspan="2" class="track"><a href="">MAL</a></td></tr><!-- Link to My Anime List goes here. -->
  90.             <tr><td colspan="2" class="track"><a href="">Anime-planet</a></td></tr><!-- Link to Anime-planet goes here. -->
  91.             <tr><td colspan="2" class="track"><a href="">ANN</a></td></tr><!-- Link to Anime News Network goes here. -->
  92.             <tr><td colspan="2">&nbsp;</td></tr>
  93.             <!-- Alternate configuration for multi-season anime:
  94.           <tr><td colspan="2" class="track">Season 1 <a href="">AniDB</a></td></tr>
  95.           <tr><td colspan="2" class="track">Season 2 <a href="">AniDB</a></td></tr>
  96.           -->
  97.             <!-- Alternate configuration for series with a game:
  98.                <tr><td colspan="2" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; text-align:center">Series</td></tr>
  99.                        <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  100.                        <tr><th>Director:</th><td>Director goes here</td></tr>
  101.                        <tr><th>Production:</th><td>Production/producer goes here</td></tr>
  102.           <tr><td colspan="2" class="track"><a href="">AniDB</a></td></tr>
  103.           <tr><td colspan="2">&nbsp;</td></tr>
  104.           <tr><td colspan="2" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; text-align:center">Game/Visual Novel</td></tr>
  105.                        <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  106.                        <tr><th>Production:</th><td>Production/producer goes here</td></tr>
  107.                        <tr><td colspan="2" class="track"><a href="">Official Site/VNDB (Visual Novel Database)</a></td></tr>
  108.           <tr><td colspan="2">&nbsp;</td></tr>
  109.           -->
  110.             <tr><td colspan="2" class="track"><a href="">Related on BakaBT</a></td></tr><!-- Link to BakaBT search result goes here. -->
  111.                 </tbody>
  112.                 </table>
  113.         </div></td>
  114.         <td><div class="column"><img class="img" src="https://lh6.googleusercontent.com/-gOhyY693yFc/U7xjeezYZcI/AAAAAAAAFNQ/6ReGSnDooaQ/w250-h350-no/cover+sample+2.jpg" alt="Album Image" /></div></td><!-- The cover for the series in case of a second season or game goes here. Aspect ratio usualy 4:5 or 5:7 -->
  115.     <!-- If the series happens to have more than two seasons or two seasons and a game, linkwise you can figure it out, but imagewise you're screwed. -->
  116.     </tr></table>
  117.         <div class="footnote">&nbsp;</div> <!--Do not delete!-->
  118. </div>
  119. <!--info end-->
  120. <!--Album 1 Start-->
  121. <div id="div1" class="main">
  122.         <div class="title">CD Album 1</div>
  123.         <div class="column"><img class="img" src="https://lh5.googleusercontent.com/-vyZoFAZWDLw/U7xjdywJorI/AAAAAAAAFNU/v6MbTbP7AgU/s350-no/album+cover+sample.jpg" alt="Album Image" /><!-- The album image goes here under src="link to image". --></div>
  124.         <div class="column">
  125.                 <table>
  126.                 <tbody>
  127.                         <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  128.                         <tr><th>Record Label:</th><td>Record Label goes here</td></tr>
  129.             <tr><th>CN:</th><td>Catalog number goes here</td></tr>
  130.             <tr><th>Artist:</th><td>Album artist goes here</td></tr><!-- OST albums often have one or two songs (the OP and ED) by other artists. -->
  131.                         <tr><th>Level/bitrate:</th><td>FLAC level or MP3 bitrate goes here.</td></tr>
  132.                         <tr><th>Ripper:</th><td>Ripper goes here</td></tr>
  133.             <tr><th>Track List:</th><td><div>
  134.                         <select><!-- Use in case of large tracklists. -->
  135.                         <option>20 tracks</option>
  136.                         <option>01 - track 1</option>
  137.                         <option>02 - track 2</option>
  138.                         <option>03 - track 3</option>
  139.                         <option>04 - track 4</option>
  140.                         <option>05 - track 5</option>
  141.                         <option>06 - track 6</option>
  142.                         <option>07 - track 7</option>
  143.                         <option>08 - track 8</option>
  144.                         <option>09 - track 9</option>
  145.                         <option>10 - track 10</option>
  146.                         <option>11 - track 11</option>
  147.                         <option>12 - track 12</option>
  148.                         <option>13 - track 13</option>
  149.                         <option>14 - track 14</option>
  150.                         <option>15 - track 15</option>
  151.                         <option>16 - track 16</option>
  152.                         <option>17 - track 17</option>
  153.                         <option>18 - track 18</option>
  154.                         <option>19 - track 19</option>
  155.                         <option>20 - track 20</option>
  156.                         </select>
  157.                 </ol>
  158.         </div></td></tr>
  159.                 </tbody>
  160.                 </table>
  161.         </div>
  162.         <div class="footnote">&nbsp;</div> <!--Do not delete!--> <!-- Makes sure the bottom of the div goes below all the content. -->
  163. </div>
  164. <!--Album 1 End-->
  165. <!--Album 2 Start-->
  166. <div id="div2" class="main">
  167.         <div class="title">CD Album 2</div>
  168.         <div class="column"><img class="img" src="https://lh5.googleusercontent.com/-vyZoFAZWDLw/U7xjdywJorI/AAAAAAAAFNU/v6MbTbP7AgU/s350-no/album+cover+sample.jpg" alt="Album Image" /></div>
  169.         <div class="column">
  170.                 <table>
  171.                 <tbody>
  172.                         <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  173.                         <tr><th>Record Label:</th><td>Record Label goes here</td></tr>
  174.             <tr><th>CN:</th><td>Catalog number goes here</td></tr>
  175.             <tr><th>Artist:</th><td>Album artist goes here</td></tr><!-- In case of many artists, use <br> for a new line or write "V.A. or Varius Artists". -->
  176.                         <tr><th>Level:</th><td>FLAC level goes here</td></tr><!-- FLAC level is often noted and is most often level 5 (range is 1-8). In case it isn't noted, it's probably level 5, so use that. -->
  177.                         <tr><th>Ripper:</th><td>Ripper goes here</td></tr>
  178.             <tr><td colspan="2">&nbsp;</td></tr>
  179.             <tr><td colspan="2" class="title">Tracklist</td></tr><!-- Use in case of small tracklists. -->
  180.             <tr><td colspan="2" class="track">01 - track 1</td></tr>
  181.             <tr><td colspan="2" class="track">02 - track 2</td></tr>
  182.             <tr><td colspan="2" class="track">03 - track 3</td></tr>
  183.             <tr><td colspan="2" class="track">04 - track 4</td></tr>
  184.                 </tbody>
  185.                 </table>
  186.         </div>
  187.         <div class="footnote">&nbsp;</div> <!--Do not delete!-->
  188. </div>
  189. <!--Album 2 End-->
  190. <!--Album 3 Start-->
  191. <div id="div3" class="main">
  192.         <div class="title">DVD/BD Album 1</div>
  193.         <div class="column"><img class="img" src="https://lh5.googleusercontent.com/-msoXbYuvqhA/U7xjd41Gw9I/AAAAAAAAFNA/8aooVc4-bLg/w280-h350-no/DVD+BD+album+cover+sample.jpg" alt="Album Image" /></div>
  194.         <div class="column">
  195.                 <table>
  196.                 <tbody>
  197.                         <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  198.                         <tr><th>Record Label:</th><td>Record Label goes here</td></tr>
  199.             <tr><th>CN:</th><td>Catalog number goes here</td></tr>
  200.             <tr><th>Artist:</th><td>Album artist goes here</td></tr><!-- Bonus albums are often by the characters of the series. Write: "the names of the voice actor", "the character name (CV: the name of the voice actor)" or "V.A. or Varius Artists". -->
  201.                         <tr><th>Level:</th><td>FLAC level goes here</td></tr>
  202.                         <tr><th>Ripper:</th><td>Ripper goes here</td></tr>
  203.             <tr><th>Converted by:</th><td>Converter goes here</td></tr><!-- Sometimes albums haven't been ripped by the big groups, users can convert them if a ripper made a .wav or something similar. -->
  204.             <tr><td colspan="2">&nbsp;</td></tr>
  205.             <tr><td colspan="2" class="title">Tracklist</td></tr>
  206.             <tr><td colspan="2" class="track">01 - track 1</td></tr>
  207.             <tr><td colspan="2" class="track">02 - track 2</td></tr>
  208.             <tr><td colspan="2" class="track">03 - track 3</td></tr>
  209.             <tr><td colspan="2" class="track">04 - track 4</td></tr>
  210.                 </tbody>
  211.                 </table>
  212.         </div>
  213.         <div class="footnote">&nbsp;</div> <!--Do not delete!-->
  214. </div>
  215. <!--Album 3 End-->
  216. <!--Album 4 Start-->
  217. <div id="div4" class="main">
  218.         <div class="title">DVD/BD Album 2</div>
  219.         <div class="column"><img class="img" src="https://lh5.googleusercontent.com/-msoXbYuvqhA/U7xjd41Gw9I/AAAAAAAAFNA/8aooVc4-bLg/w280-h350-no/DVD+BD+album+cover+sample.jpg" alt="Album Image" /></div>
  220.         <div class="column">
  221.                 <table>
  222.                 <tbody>
  223.                         <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  224.                         <tr><th>Record Label:</th><td>Record Label goes here</td></tr>
  225.             <tr><th>CN:</th><td>Catalog number goes here</td></tr>
  226.             <tr><th>Artist:</th><td>Album artist goes here</td></tr>
  227.                         <tr><th>Bitrate:</th><td>MP3 Bitrate goes here</td></tr><!-- Check the files for their bitrate. The information rippers give isn't always acurate. Most often 128 Kbps or 320 Kbps of which 320 Kbps is prefered. -->
  228.                         <tr><th>Ripper:</th><td>Ripper goes here</td></tr>
  229.             <tr><td colspan="2">&nbsp;</td></tr>
  230.             <tr><td colspan="2" class="title">Tracklist</td></tr>
  231.             <tr><td colspan="2" class="track">01 - track 1</td></tr>
  232.             <tr><td colspan="2" class="track">02 - track 2</td></tr>
  233.             <tr><td colspan="2" class="track">03 - track 3</td></tr>
  234.             <tr><td colspan="2" class="track">04 - track 4</td></tr>
  235.                 </tbody>
  236.                 </table>
  237.         </div>
  238.         <div class="footnote">&nbsp;</div> <!--Do not delete!-->
  239. </div>
  240. <!--Album 4 End-->
  241. <!--Album 5 Start-->
  242. <div id="div5" class="main">
  243.         <div class="title">DVD/BD Album 3</div>
  244.         <div class="column"><img class="img" src="https://lh5.googleusercontent.com/-msoXbYuvqhA/U7xjd41Gw9I/AAAAAAAAFNA/8aooVc4-bLg/w280-h350-no/DVD+BD+album+cover+sample.jpg" alt="Album Image" /></div>
  245.         <div class="column">
  246.                 <table>
  247.                 <tbody>
  248.                         <tr><th>Release Year:</th><td>Release year goes here</td></tr>
  249.                         <tr><th>Record Label:</th><td>Record Label goes here</td></tr>
  250.             <tr><th>CN:</th><td>Catalog number goes here</td></tr>
  251.             <tr><th>Artist:</th><td>Album artist goes here</td></tr>
  252.                         <tr><th>Bitrate:</th><td>MP3 Bitrate goes here</td></tr>
  253.                         <tr><th>Ripper:</th><td>Ripper goes here</td></tr>
  254.             <tr><th>Converted by:</th><td>Converter goes here</td></tr><!-- Sometimes albums haven't been ripped in high bitrate MP3, users can convert them if a ripper made a .wav or .flac or something similar. -->
  255.             <tr><td colspan="2">&nbsp;</td></tr>
  256.             <tr><td colspan="2" class="title">Tracklist</td></tr>
  257.             <tr><td colspan="2" class="track">01 - track 1</td></tr>
  258.             <tr><td colspan="2" class="track">02 - track 2</td></tr>
  259.             <tr><td colspan="2" class="track">03 - track 3</td></tr>
  260.             <tr><td colspan="2" class="track">04 - track 4</td></tr>
  261.                 </tbody>
  262.                 </table>
  263.         </div>
  264.         <div class="footnote">&nbsp;</div> <!--Do not delete!-->
  265. </div>
  266. <!--Album 5 End-->
  267. </body>
  268. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!