API tools faq
paste
lostmemento

→ Film Table (Simple)

lostmemento
Mar 6th, 2013
14,694
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.97 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <!--------------------------------------------
  4. SIMPLE FILM TABLE
  5. MADE BY: http://lostmemento.tumblr.com (lmthemes)
  6. ---------------------------------------------
  7.  
  8. TERMS OF USAGE:
  9. - DO NOT REMOVE THE CREDIT
  10. - DO NOT REDISTRIBUTE
  11. - DO NOT CLAIM AS YOUR OWN
  12. - DO NOT USE AS A BASE
  13.  
  14.  
  15. ----- TO INSTALL --------------------------------------------------------
  16. 1. Copy Code
  17. 2. Go to Customize Appearance
  18. 3. Create page
  19. 4. Make sure to select CUSTOM layout instead of Standard
  20.  
  21. ----- TO CUSTOMIZE -------------------------------------------------------
  22. Everything is pretty self explanatory in the /* comments */
  23. If you're not familiar with CSS stylings then you can go here:
  24. http://www.w3schools.com/css/default.asp
  25.  
  26. And then look under the STYLINGS section to figure things out.
  27.  
  28. ----- TO ADD FILMS -------------------------------------------------------
  29. Just copy the one film example I have from
  30. < ! - - - TITLE [00] - - - >
  31. TO
  32. < ! - - - END [00] - - - >
  33.  
  34. The [00] is there so you can put what number movie it is to keep track. B
  35. ut you don't have to do that if you don't want to.
  36.  
  37. If you want your most recent films at the top of the table, you need to make
  38. sure the most recent films are added to the top of the code instead of the
  39. bottom.
  40.  
  41. ----- NUMBER OF STARS -------------------------------------------------
  42.  
  43. Where it has <div class="one"></div> is the number of stars which range
  44. from zero - five.
  45.  
  46. ---------------------------------------------------------------------->
  47. <title>{Title}</title>
  48. <link rel="shortcut icon" href="{Favicon}">
  49. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  50. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  51. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  52.  
  53. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  54. <script src="http://static.tumblr.com/xgofl0y/O7Fm1ufj3/jquery.style-my-tooltips.js" type="text/javascript"></script>
  55. <script>
  56. $().ready(function() {
  57. $("[title]").style_my_tooltips({
  58. tip_follows_cursor: "on", //on/off
  59. tip_delay_time: 200 //milliseconds
  60. });
  61. });
  62. </script>
  63. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  64. <script type="text/javascript" charset="utf-8">
  65. var $j = jQuery.noConflict();
  66. $j(function() {
  67. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  68. $j("img").lazyload({
  69. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  70. effect: "fadeIn",
  71. });
  72. });
  73. </script>
  74.  
  75. <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
  76.  
  77. <style type="text/css">
  78. body {font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  79. margin:0px;
  80. padding:0px;
  81. font-size:0.9em;
  82. background-color:#fff;
  83. overflow-x: hidden;}
  84.  
  85. a img, img {border: 0px; display: block;}
  86. a {text-decoration: none;}
  87.  
  88. ::-webkit-scrollbar-thumb:vertical {background-color: #000; height: 10px;}
  89. ::-webkit-scrollbar-thumb:horizontal {background-color: #000; height:10px!important;}
  90. ::-webkit-scrollbar {background-color: #fff; height:10px; width:5px;}
  91.  
  92. /* CHANGES THE DATE WATCHED TOOLTIP */
  93. #s-m-t-tooltip{
  94. position:absolute;
  95. z-index:90000;
  96. display:inline-block;
  97. padding: 1px 6px;
  98. max-width:100px;
  99. border: 0px;
  100. word-wrap: break-word;
  101. background-color: #fefefe; /* CHANGES HOVER OVER DATE BACKGROUND COLOR */
  102. color: #888; /* CHANGES HOVER OVER DATE TEXT COLOR */
  103. font-size: 7px; /* CHANGES HOVER OVER DATE FONT SIZE */
  104. text-transform: uppercase;
  105. font-style: italic;
  106. letter-spacing: 1px;}
  107.  
  108. h1 {font-family: 'Oswald';
  109. font-weight: normal;
  110. margin-top: 0px;
  111. padding-top: 0px;}
  112.  
  113. /* CHANGES THE TOP INFO & LEGEND BOX */
  114. .leg {width: 100%;
  115. margin: auto;
  116. margin-bottom: 50px;
  117. padding: 80px 0px;
  118. background-color: #000; /* CHANGES THE BACKGROUND COLOR */
  119. text-align: center;
  120. color: #fff; /* CHANGE THE FONT COLOR */
  121. font-size: 10px;}
  122.  
  123. /* CHANGES THE TOP INFO & LEGEND BOX LINKS */
  124. .leg a {background-color: #000; /* CHANGES THE BACKGROUND COLOR */
  125. color: #fff; /* CHANGE THE FONT COLOR */
  126. padding: 2px 4px;
  127. font-family: arial; /* CHANGE THE FONT */
  128. font-style: italic;
  129. font-size: 7px; /* CHANGE THE FONT SIZE */
  130. text-transform: uppercase;
  131. letter-spacing: 1px;}
  132.  
  133. /* CHANGES THE STARS
  134. - Just replace whatever is between the ()'s with your new stars images
  135. - Make sure to change the height and width accordingly */
  136.  
  137. .zero, .half, .one, .onehalf, .two, .twohalf, .three, .threehalf, .four, .fourhalf, .five {height: 18px; width: 76px; margin: auto;}
  138.  
  139. .zero {background-image: url(http://static.tumblr.com/bkd4m5b/FLYmj96i8/zero.png)}
  140. .half {background-image: url(http://static.tumblr.com/bkd4m5b/Fgkmj96ix/half.png)}
  141. .one {background-image: url(http://static.tumblr.com/bkd4m5b/BUrmj96j9/one.png)}
  142. .onehalf {background-image: url(http://static.tumblr.com/bkd4m5b/7VTmj96jk/onehalf.png)}
  143. .two {background-image: url(http://static.tumblr.com/bkd4m5b/Z97mj96jw/two.png)}
  144. .twohalf {background-image: url(http://static.tumblr.com/bkd4m5b/VzQmj96k8/twohalf.png)}
  145. .three {background-image: url(http://static.tumblr.com/bkd4m5b/o2Jmj96kj/three.png)}
  146. .threehalf {background-image: url(http://static.tumblr.com/bkd4m5b/4dMmj96ku/threehalf.png)}
  147. .four {background-image: url(http://static.tumblr.com/bkd4m5b/Pr6mj96l6/four.png)}
  148. .fourhalf {background-image: url(http://static.tumblr.com/bkd4m5b/xEJmj96lr/fourhalf.png)}
  149. .five {background-image: url(http://static.tumblr.com/bkd4m5b/UeWmj96m2/five.png)}
  150.  
  151. #container {width: 1000px; margin: auto; padding-left: 10px;}
  152.  
  153. .f1 {float:left;
  154. box-shadow: 1px 1px 2px #777;
  155. -moz-box-shadow: 1px 1px 2px #777;
  156. -webkit-shadow: 1px 1px 2px #777;
  157. position: relative;
  158. width: 190px; height: 280px;
  159. overflow: hidden;
  160. margin-right: 10px;
  161. margin-bottom: 10px;}
  162.  
  163. .f2 {width: 190px;
  164. background-color: #fff; /* CHANGES FILM TITLE HOVER BACKGROUND COLOR */
  165. height: 25px;
  166. padding: 15px 0px;
  167. padding-bottom: 10px;
  168. position: absolute;
  169. bottom: -50px;
  170. text-align: center;
  171. font-family: arial; /* CHANGES FILM TITLE HOVER FONT */
  172. font-style: italic;
  173. font-size: 7px; /* CHANGES FILM TITLE HOVER FONT SIZE */
  174. text-transform: uppercase;
  175. letter-spacing:1px;
  176. color: #555; /* CHANGES FILM TITLE HOVER TEXT COLOR */
  177. transition-duration: 0.6s;
  178. -moz-transition-duration: 0.6s;
  179. -webkit-transition-duration: 0.6s;
  180. -o-transition-duration: 0.6s;}
  181.  
  182. .f2 a {color: #555;} /* CHANGES FILM TITLE HOVER LINK COLOR */
  183.  
  184. .f1:hover .f2 {bottom: 0px;
  185. transition-duration: 0.6s;
  186. -moz-transition-duration: 0.6s;
  187. -webkit-transition-duration: 0.6s;
  188. -o-transition-duration: 0.6s;}
  189.  
  190. .yr {font-style: normal;}
  191. </style>
  192. </head>
  193.  
  194. <body>
  195. <div class="leg"><h1>FILMS WATCHED IN 2013</h1>
  196.  
  197. LEGEND TEXT HERE</p>
  198.  
  199. <a href="/">BACK TO MY BLOG</a> <a href="http://tumblr.com">DASHBOARD</a> <script type="text/javascript" src="http://static.tumblr.com/bkd4m5b/tHfm8xdsx/movietable.js"></script>
  200. </div>
  201.  
  202. <div id="container">
  203.  
  204. <!--- BEGIN FILM TABLE --->
  205.  
  206. <!--- START [01] --->
  207. <div class="f1" title="DATE WATCHED GOES HERE">
  208. <img src="190x280px FILM POSTER URL">
  209. <div class="f2">FILM TITLE <span class="yr">(YEAR)</span>
  210. <div class="three"></div></div>
  211. </div>
  212. <!--- END [01] --->
  213.  
  214. <!--- START [02] --->
  215. <div class="f1" title="DATE WATCHED GOES HERE">
  216. <img src="190x280px FILM POSTER URL">
  217. <div class="f2">FILM TITLE <span class="yr">(YEAR)</span>
  218. <div class="threehalf"></div></div>
  219. </div>
  220. <!--- END [02] --->
  221.  
  222. <!--- START [02] --->
  223. <div class="f1" title="DATE WATCHED GOES HERE">
  224. <img src="190x280px FILM POSTER URL">
  225. <div class="f2">FILM TITLE <span class="yr">(YEAR)</span>
  226. <div class="four"></div></div>
  227. </div>
  228. <!--- END [02] --->
  229.  
  230. <!--- END FILM TABLE --->
  231.  
  232. </div>
  233. </body>
  234. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!