Don't like ads? PRO users don't see any ads ;-)
Public Pastes

→ Film Table

By: lostmemento on Aug 23rd, 2012  |  syntax: None  |  size: 9.21 KB  |  hits: 8,225  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2. <head>
  3. <!---- FILM TABLE MADE BY: http://lostmemento.tumblr.com (lmthemes)
  4.  
  5.      TERMS OF USAGE:
  6.     - DO NOT REMOVE THE CREDIT
  7.     - DO NOT REDISTRIBUTE
  8.     - DO NOT CLAIM AS YOUR OWN
  9.     - DO NOT USE AS BASE
  10.        
  11. ----- TO INSTALL --------------------------------------------------------
  12. 1. Copy Code
  13. 2. Go to Customize Appearance
  14. 3. Create page
  15. 4. Make sure to select CUSTOM layout instead of Standard
  16.  
  17. ----- TO CUSTOMIZE -------------------------------------------------------
  18. Everything is pretty self explanatory in the /* comments */
  19. If you're not familiar with CSS stylings then you can go here:
  20. http://www.w3schools.com/css/default.asp
  21.  
  22. And then look under the STYLINGS section to figure things out.
  23.  
  24. ----- TO ADD FILMS -------------------------------------------------------
  25. Just copy the one film example I have from
  26. < ! - - - TITLE [00] - - - >
  27. TO
  28. < ! - - - END [00] - - - >
  29.  
  30. The [00] is there so you can put what number movie it is to keep track. B
  31. ut you don't have to do that if you don't want to.
  32.  
  33. If you want your most recent films at the top of the table, you need to make
  34. sure the most recent films are added to the top of the code instead of the
  35. bottom.
  36.  
  37. ----- NUMBER OF STARS  -------------------------------------------------
  38.  
  39. Where it has <div class="one"></div> is the number of stars which range
  40. from zero - five.
  41.  
  42. ----- IMPORTANT! -------------------------------------------------------
  43.  
  44. MAKE SURE THAT WHEN YOU ARE ADDING NEW FILMS TO YOUR TABLE THAT:
  45.  
  46. <a href="#?w=500" rel="00f" class="poplight">
  47.  
  48. <div id="00f" class="popup_block">
  49.  
  50. Where 00f is after rel and id that they are the SAME.
  51. BUT not the same as other films.
  52.  
  53. ---------------- EXAMPLE:
  54. Film 1
  55. <a href="#?w=500" rel="01f" class="poplight">
  56.  
  57. <div id="01f" class="popup_block">
  58.  
  59. Film 2
  60. <a href="#?w=500" rel="02f" class="poplight">
  61.  
  62. <div id="02f" class="popup_block">
  63.  
  64. You don't have  make them ##f if you don't want as long as they follow
  65. what I just said above.
  66.  
  67. --->
  68.  
  69.     <title>{Title}</title>
  70.     <link rel="shortcut icon" href="{Favicon}">
  71.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  72.     {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  73.     <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  74.        
  75. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  76. <script src="http://static.tumblr.com/xgofl0y/O7Fm1ufj3/jquery.style-my-tooltips.js" type="text/javascript"></script>
  77. <script>
  78. $().ready(function() {
  79.     $("[title]").style_my_tooltips({
  80.         tip_follows_cursor: "on", //on/off
  81.         tip_delay_time: 200 //milliseconds
  82.     });
  83. });
  84. </script>
  85. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  86. <script type="text/javascript" charset="utf-8">
  87. var $j = jQuery.noConflict();
  88. $j(function() {
  89. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  90. $j("img").lazyload({
  91. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  92. effect: "fadeIn",
  93. });
  94. });
  95. </script>
  96.  
  97. <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
  98.  
  99. <style type="text/css">
  100. body {font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  101.         margin:0px;
  102.                 padding:0px;
  103.                 font-size:0.9em;
  104.                 background-color:#fff;
  105.                 overflow-x: hidden;}   
  106.    
  107. a img, img {border: 0px;}
  108. a {text-decoration: none;}
  109.    
  110. ::-webkit-scrollbar-thumb:vertical {background-color: #eee; height: 10px;}
  111. ::-webkit-scrollbar-thumb:horizontal {background-color: #eee; height:10px!important;}
  112. ::-webkit-scrollbar {background-color: #fcfcfc; height:10px; width:5px;}
  113.  
  114. /* CHANGES THE DATE WATCHED TOOLTIP */
  115. #s-m-t-tooltip{
  116.         position:absolute;
  117.         z-index:90000;
  118.         display:inline-block;
  119.         padding: 1px 6px;
  120.         max-width:100px;
  121.         border: 0px;
  122.         word-wrap: break-word;
  123.         background-color: #fefefe;
  124.         color: #888;
  125.         font-size: 7px;
  126.         text-transform: uppercase;
  127.         font-style: italic;
  128.         letter-spacing: 1px;}
  129.  
  130. .yr {font-style: normal;}
  131.  
  132. /* CHANGES THE STARS
  133. - Just replace whatever is between the ()'s with your new stars images
  134. - Make sure to change the height and width accordingly */
  135.  
  136. .zero {height: 18px; width: 77px; background-image: url(http://i.imgur.com/jdxBG.png)}
  137. .one {height: 18px; width: 77px; background-image: url(http://i.imgur.com/853og.png)}
  138. .two {height: 18px; width: 77px; background-image: url(http://i.imgur.com/2uSQW.png)}
  139. .three {height: 18px; width: 77px; background-image: url(http://i.imgur.com/evk8r.png)}
  140. .four {height: 18px; width: 77px; background-image: url(http://i.imgur.com/ZwAON.png)}
  141. .five {height: 18px; width: 77px; background-image: url(http://i.imgur.com/NhhsG.png)}
  142.  
  143. #fade {display: none;
  144.         background: #000;
  145.         position: fixed;
  146.         left: 0;
  147.         top: 0;
  148.         width: 100%;
  149.         height: 100%;
  150.         opacity: .80;
  151.         z-index: 9999;}
  152.  
  153. /* CHANGES THE POP UP */
  154. .popup_block {display: none;
  155.         background: #FFFFFF;
  156.         padding: 20px;
  157.         position: fixed;
  158.         top: 50%;
  159.         left: 50%;
  160.         z-index: 10000;}
  161.  
  162. .popup_block td {text-align: justify;
  163.         vertical-align: top;}
  164.  
  165. /* CHANGES THE FILM TITLE IN THE POP UP */
  166. .popup_block .ti {text-align: center;
  167.         font-size: 14px;
  168.         font-family: 'Oswald';
  169.         color: #888; /* Changes the font color */ }
  170.  
  171. .til {padding: 0px 5px;
  172.         width: 70%;
  173.         border-bottom: 1px solid #888;
  174.         margin: auto;
  175.         padding-bottom: 3px;}
  176.  
  177. /* CHANGES THE FILM INFO IN THE POP UP */
  178. .ifo {padding: 10px;
  179.         height: 160px;
  180.         overflow: auto;
  181.         font-size: 11px; /* Changes the font size */
  182.         color: #888; /* Changes the font color */
  183.         font-family: arial, helvetica; /* Changes the font */ }
  184.  
  185. /* CHANGES THE SMALL TEXT IN THE POP UP IE. GENRE */
  186. .sm {font-family: calibri, arial, helvetica;
  187.         font-size: 8px;
  188.         text-transform: uppercase;
  189.         letter-spacing: 1px;
  190.         text-align: center;
  191.         margin: 10px 0px;}
  192.  
  193. img.btn_close {display: none;}
  194. *html #fade {position: absolute;}
  195. *html .popup_block {position: absolute;}
  196.  
  197. #container {width: 1000px; margin: auto;}
  198.  
  199. .fbox {
  200.     position:relative;
  201.         float:left;
  202.         width:200px;
  203.         height:290px;
  204.         text-align:center;}
  205.  
  206. .fsub{
  207.     padding:0px;
  208.         position:absolute;
  209.         top:5px;
  210.         left:5px;
  211.         right:5px;
  212.         bottom:5px;
  213.         background:#fbfbfb;
  214.         overflow:hidden;
  215.     -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
  216.         -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
  217.         box-shadow:1px 1px 2px rgba(0,0,0,0.2);}
  218.  
  219. .fsub img {width:190px; height: 280px}
  220.  
  221. .fbox:hover #ftitle {opacity: 1.0;
  222.         height: 50px;
  223.         transition-duration: 0.6s;  
  224.     -moz-transition-duration: 0.6s;  
  225.     -webkit-transition-duration: 0.6s;  
  226.     -o-transition-duration: 0.6s;}
  227.  
  228. /* THE TITLE THAT POPS UP OVER THE POSTER */
  229. #ftitle{
  230.     position: absolute;
  231.     right: 0px; bottom: -20px;
  232.     padding:4px 0px;
  233.     padding-top: 10px;
  234.         background: #fff; /* CHANGES THE BACKGROUND COLOR */
  235.     width: 190px;
  236.         text-align:center;
  237.         font-family: arial; /* CHANGES THE FONT */
  238.         font-style: italic;
  239.     opacity: 0.7;
  240.     height: 0px;
  241.     font-size: 7px;  /* CHANGES THE FONT SIZE */
  242.         text-transform: uppercase;
  243.         letter-spacing: 1px;
  244.     color: #555; /* CHANGE THE FONT COLOR */
  245.     z-index: 5;
  246.         transition-duration: 0.6s;  
  247.     -moz-transition-duration: 0.6s;  
  248.     -webkit-transition-duration: 0.6s;  
  249.     -o-transition-duration: 0.6s;}
  250.        
  251. h1 {font-family: 'Oswald';
  252.         font-weight: normal;
  253.         margin-top: 0px;
  254.         padding-top: 0px;}
  255.  
  256. /* CHANGES THE TOP INFO & LEGEND BOX */
  257. .leg {width: 960px;
  258.         margin: 50px auto;
  259.         padding: 80px 20px;
  260.         background-color: #fcfcfc; /* CHANGES THE BACKGROUND COLOR */
  261.         text-align: center;
  262.         color: #bbb; /* CHANGE THE FONT COLOR */
  263.         font-size: 10px;}
  264.        
  265. /* CHANGES THE TOP INFO & LEGEND BOX LINKS */
  266. .leg a {background-color: #000; /* CHANGES THE BACKGROUND COLOR */
  267.         color: #fff; /* CHANGE THE FONT COLOR */
  268.         padding: 2px 4px;
  269.         font-family: arial; /* CHANGE THE FONT */
  270.         font-style: italic;
  271.         font-size: 7px; /* CHANGE THE FONT SIZE */
  272.         text-transform: uppercase;
  273.         letter-spacing: 1px;}
  274. </style>
  275. </head>
  276.  
  277. <body>
  278. <div id="container">
  279.  
  280. <div class="leg"><h1>FILMS WATCHED IN 2013</h1>
  281.    
  282. YOUR LEGEND STUFF GOES HERE ie. * WATCHED IN THEATERS</p>
  283.  
  284. <a href="/">BACK</a> <a href="http://tumblr.com">DASHBOARD</a> <script type="text/javascript" src="http://static.tumblr.com/bkd4m5b/tHfm8xdsx/movietable.js"></script>
  285.  
  286. </div>
  287.  
  288.  
  289. <!--- TITLE HERE [01] --->
  290. <a href="#?w=500" rel="01f" class="poplight">
  291. <div class="fbox" title="DATE WATCHED HERE 2013"><div class="fsub">
  292. <img src="190X280POSTERIMGURLHERE">
  293. <div id="ftitle">TITLE <span class="yr">(YEAR)</span>
  294. <center><div class="one"></div></center></div></div></div></a>
  295.  
  296. <div id="01f" class="popup_block">
  297. <table><tr>
  298. <td colspan="2" class="ti">
  299. <div class="til">TITLE HERE (YEAR)</div></td></tr>
  300.  
  301. <tr><td width="250px">
  302. <div class="ifo"><div class="sm" style="margin-top: 0px;">DATE WATCHED HERE 2012<br>
  303. 000 min | Rated ?</div>
  304. <b>Director:</b> DIRECTOR HERE<br>
  305. <b>Starring:</b> STARRING HERE<br>
  306. <div class="sm">GENRE HERE</div>
  307.  
  308. <b>Summary:</b> SUMMARY HERE
  309. </div></td><td width="250px"><div class="ifo">
  310. <div class="sm" style="margin-top: 0px;">Review:</div>
  311. REVIEW HERE
  312. </div></td></tr></table></div>
  313. <!--- END [01] --->
  314.  
  315.  
  316. <!--- END FILM TABLE --->
  317.    
  318. </div>
  319. </body>
  320. </html>
create a new version of this paste RAW Paste Data