API tools faq
paste
Advertisement
lostmemento

→ Film Table (Gifs)

lostmemento
Jan 19th, 2014
7,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.88 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <!--------------------------------------------
  4. FILM TABLE (GIFS)
  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.  
  16. <!--------------------------------------------
  17. STARS
  18. ---------------------------------------------
  19.  
  20. There are no star images just the symbol
  21. so you will have to copy and paste them
  22. as so.
  23.  
  24. /* whole stars */ &#9733;
  25. /* half stars */ &#189;
  26. /* empty stars */ &#9734;
  27.  
  28. You can also use 'block rating' instead
  29. if you want to be different and not use
  30. stars.
  31.  
  32. /* whole block */ <span></span>
  33. /* half block */ <span class="half"></span>
  34.  
  35.  
  36. --------------------------------------------->
  37.  
  38. <!--------------------------------------------
  39. IF YOU WANT TO CHANGE THE POSTER
  40. IMAGE SIZE INSTRUCTIONS
  41. ---------------------------------------------
  42. You will need to change every place
  43. where it says:
  44. height: 300px
  45. and
  46. width: 200px
  47. to your new heights and widths
  48.  
  49. EVERY TIME IT HAS THOSE TWO DIMENSIONS
  50. MAKE SURE ALL THE HEIGHTS AND WIDTHS
  51. MATCH aka
  52.  
  53. If you are changing it from
  54. 200 x 300px to 100 x 200px
  55. All the height: 300px need to be changed
  56. to height: 200px
  57. and all widths that were width: 200px
  58. need to be changed to width: 100px
  59.  
  60. !!! IMPORTANT !!!
  61. If you are changing the poster size
  62. you also much make sure to change the
  63. 200px to the new width where it says
  64. - hover over background color -
  65. Or else the hover over loading
  66. effect will stop short or be too much
  67. for the new width
  68.  
  69. --------------------------------------------->
  70.  
  71.  
  72. <title>{Title}</title>
  73. <link rel="shortcut icon" href="{Favicon}">
  74. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  75. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  76. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  77.  
  78.  
  79. <script type="text/javascript" src="http://static.tumblr.com/bkd4m5b/E25mlo9qc/1.7.2.jquery.min.js"></script>
  80.  
  81.  
  82. <script>
  83. $().ready(function() {
  84. $("[title]").style_my_tooltips({
  85. tip_follows_cursor: "on", //on/off
  86. tip_delay_time: 200 //milliseconds
  87. });
  88. });
  89. </script>
  90.  
  91. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  92. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  93. <script type="text/javascript" charset="utf-8">
  94. var $j = jQuery.noConflict();
  95. $j(function() {
  96. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  97. $j("img").lazyload({
  98. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  99. effect: "fadeIn",
  100. });
  101. });
  102. </script>
  103.  
  104.  
  105. <link href='http://fonts.googleapis.com/css?family=Oswald:300,400|Six+Caps' rel='stylesheet' type='text/css'>
  106.  
  107.  
  108. <style type="text/css">
  109. @font-face {font-family: 'Trump Gothic East';
  110. src: url('http://born4banned.googlecode.com/files/trumpgothiceastmedium.eot');
  111. src: url('http://born4banned.googlecode.com/files/trumpgothiceastmedium.woff') format('woff'),
  112. url('http://born4banned.googlecode.com/files/trumpgothiceastmedium.ttf') format('truetype');
  113. url('http://born4banned.googlecode.com/files/trumpgothiceastmedium.svg') format('svg');
  114. font-weight: bold; font-style: normal;}
  115.  
  116. body{
  117. font-family: calibri; /* changes overall font family */
  118. margin:0px;
  119. padding:0px;
  120. font-size: 11px; /* changes overall font size */
  121. line-height: 110%;
  122. background-color: #fff; /* changes background color - default white */
  123. color: #000; /* changes overall font color */}
  124.  
  125. a {text-decoration: none;
  126. transition-duration: 0.6s;
  127. -moz-transition-duration: 0.6s;
  128. -webkit-transition-duration: 0.6s;
  129. -o-transition-duration: 0.6s;}
  130.  
  131. a:-webkit-any-link {text-decoration: none;}
  132.  
  133. img {margin-bottom: -2px;}
  134.  
  135. ::-webkit-scrollbar-thumb:vertical {background-color: #f506a3; /* changes scrollbar color - default pink */
  136. border: 3px solid #35e7c3; /* changes scrollbar background color - default blue */
  137. height: 10px;}
  138.  
  139. ::-webkit-scrollbar-thumb:horizontal {background-color: #f506a3; /* changes scrollbar color - default pink */
  140. height:10px!important;
  141. border: 3px solid #35e7c3;} /* changes scrollbar background color - default blue */
  142.  
  143. ::-webkit-scrollbar {background-color: #35e7c3; /* changes scrollbar background color - default blue */
  144. height:10px; width:12px;}
  145.  
  146. #s-m-t-tooltip{
  147. position:absolute;
  148. z-index:90000;
  149. display:inline-block;
  150. background-color: #000; /* changes hover date background color - default black */
  151. color: #fff; /* changes hover date font color - default white */
  152. padding: 6px 10px;
  153. font-size: 8px; /* changes hover date font size */
  154. text-transform: uppercase;
  155. letter-spacing: 1px;
  156. word-wrap: break-word;
  157. word-break: break-all;
  158. line-height: 120%;}
  159.  
  160. img {display: block;}
  161.  
  162. #sb {color: transparent;}
  163.  
  164. #top {background-color: #000; /* changes top background color - default black */
  165. height: 150px; position: fixed; top: 0px; width: 100%; z-index: 1; display: table; padding: 20px 0px; -webkit-backface-visibility: hidden;}
  166.  
  167. .topc {display: table-cell; vertical-align: middle;}
  168.  
  169. .tc {width: 280px; margin: auto;
  170. background-color: #000;} /* NEEDS TO MATCH TOP BACKGROUND COLOR - default black */
  171. .tc img {display: inline-block; height: 50px; margin-right: 10px;}
  172.  
  173. .tlnks {margin-top: 5px;
  174. color: #999; /* changes top font color - default gray */
  175. font-size: 8px; /* changes top font size */
  176. text-transform: uppercase;
  177. letter-spacing: 1px; }
  178.  
  179. .tlnks a {color: #fff; /* changes top links font color - default white */
  180. margin-right: 8px; padding-bottom: 2px; position: relative;}
  181.  
  182. .tlnks a:after {
  183. position: absolute;
  184. top: 100%;
  185. left: 0;
  186. width: 100%;
  187. height: 1px;
  188. background-color: #fff; /* NEEDS TO MATCH TOP LINKS FONT COLOR - default white */
  189. content: "";
  190. opacity: 0;
  191. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  192. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  193. transition: opacity 0.3s, transform 0.3s;
  194. -webkit-transform: translateY(5px);
  195. -moz-transform: translateY(5px);
  196. transform: translateY(5px);
  197. }
  198.  
  199. .tlnks a:hover:after,
  200. .tlnks a:focus:after {
  201. opacity: 1;
  202. -webkit-transform: translateY(0px);
  203. -moz-transform: translateY(0px);
  204. transform: translateY(0px);}
  205.  
  206. .ptil {font-family: 'Trump Gothic East'; /* top title font family */
  207. color: #fff; /* changes top title font color - default white */
  208. font-size: 64px; /* changes top title font size */
  209. text-shadow: 3px 1px #35e7c3, 5px 1px #f506a3;} /* remove line other than } to remove 3d effect */
  210.  
  211. #container {
  212. width: 1010px;
  213. margin: auto;
  214. margin-top: 200px;}
  215.  
  216.  
  217. .film {width: 200px;
  218. height: 300px;
  219. background-color: white; /* poster background color if no film - default white */
  220. position: relative; float: left; margin-right: 2px; margin-bottom: 2px;}
  221.  
  222. .film img {width: 200px;
  223. height: 300px;
  224. opacity: 1.0;}
  225.  
  226. .film:hover img {opacity: 0.5;
  227. transition-duration: 0.6s;
  228. -moz-transition-duration: 0.6s;
  229. -webkit-transition-duration: 0.6s;
  230. -o-transition-duration: 0.6s;}
  231.  
  232.  
  233. .fo {opacity: 0.0;
  234. position: absolute;
  235. display: table;
  236. width: 200px;
  237. height: 300px;
  238. top: 0px;
  239. left: 0px;
  240. transition-duration: 0.6s;
  241. -moz-transition-duration: 0.6s;
  242. -webkit-transition-duration: 0.6s;
  243. -o-transition-duration: 0.6s;}
  244.  
  245. .fbg {width: 200px;
  246. height: 300px;
  247. background-color: transparent;
  248. opacity: 0.9;
  249. position: absolute;
  250. z-index: 1;}
  251.  
  252. .film:hover .fbg {box-shadow:inset 200px 0px #000; /* hover over background color - default black */
  253. -webkit-box-shadow:inset 200px 0px #000; /* hover over background color - default black */
  254. transition-duration: 0.6s;
  255. -moz-transition-duration: 0.6s;
  256. -webkit-transition-duration: 0.6s;
  257. -o-transition-duration: 0.6s;}
  258.  
  259. .foc {display: table-cell; vertical-align: middle;
  260. position: relative; z-index: 5; text-align: center;
  261. padding: 10px;}
  262.  
  263. .film .foc img {max-width: 150px; /* max width of the gif */
  264. margin: auto;
  265. height: auto;
  266. opacity: 1.0;
  267. margin-bottom: 10px;
  268. border: 5px solid #fff;} /* border around gif - default white */
  269.  
  270. .film:hover .fo {opacity: 1.0;
  271. transition-duration: 0.6s;
  272. -moz-transition-duration: 0.6s;
  273. -webkit-transition-duration: 0.6s;
  274. -o-transition-duration: 0.6s;}
  275.  
  276. .til {font-family: 'Trump Gothic East','Oswald'; /* movie title font family */
  277. font-size: 14px; /* movie title font size */
  278. line-height: 110%;
  279. letter-spacing: 1px;
  280. color: #fff; /* movie title font color - default white */
  281. text-transform: uppercase;
  282. margin-bottom: 2px;}
  283.  
  284. .stars {color: #35e7c3; /* stars color - default blue */
  285. font-size: 11px; /* stars size */
  286. text-shadow: 1px 1px #f506a3;} /* stars 3d effect color - default pink */
  287.  
  288. .stars span {width: 5px; height: 5px;
  289. background-color: #35e7c3; /* rating blocks - default blue */
  290. display: inline-block;}
  291.  
  292. .stars .half {width: 2px; height: 5px;
  293. background-color: #35e7c3; /* NEEDS TO MATCH RATING BLOCKS - default blue */
  294. display: inline-block;}
  295.  
  296. .ifo {font-size: 8px; /* extra info font size */
  297. text-transform: uppercase;
  298. margin-top: 10px;
  299. color: #888; /* extra info font color - default gray ie. where i have the genre */
  300. text-align: center} /* extra info text alignment */
  301.  
  302. sup {font-style: italic;}
  303.  
  304. {CustomCSS}
  305. </style>
  306. </head>
  307. <body>
  308.  
  309. <div id="top"><div class="topc"><div class="tc">
  310. <img src="{PortraitURL-64}"> <span class="ptil">FILMS 2014</span>
  311.  
  312. <div class="tlnks">
  313. <a href="/">BACK</a>
  314. <a href="http://tumblr.com">DASHBOARD</a>
  315. <a href="http://lmthemes.tumblr.com">CREDIT</a>
  316.  
  317. Any legend stuff you want goes here.
  318.  
  319. </div></div></div></div>
  320.  
  321. <div id="container">
  322.  
  323. <!------------------- START MOVIE COPY ------------------->
  324. <div class="film" title="DATE WATCHED HERE">
  325. <img src="MOVIE POSTER URL HERE">
  326.  
  327. <div class="fo"><div class="fbg"></div><div class="foc">
  328. <a href="GIF MAKER URL HERE"><img src="GIF URL HERE"></a>
  329. <div class="til">MOVIE TITLE HERE (YEAR)</div>
  330. <div class="stars"> &#9733; &#9733; &#9733; &#189; &#9734; </div>
  331. <div class="ifo">Genre, legend stuff, or a small blurb.</div>
  332. </div></div></div>
  333. <!------------------- END MOVIE COPY ------------------->
  334.  
  335.  
  336. <!------------------- START MOVIE COPY ------------------->
  337. <div class="film" title="JUN 03">
  338. <img src="http://static.tumblr.com/bkd4m5b/nyMmyr9z8/05.png">
  339.  
  340. <div class="fo"><div class="fbg"></div><div class="foc">
  341. <img src="http://25.media.tumblr.com/790920d7b3372f6bbff2b9614fd2a68f/tumblr_mvfmn8HkR61qmoz1zo7_250.gif">
  342. <div class="til">X-men: days of future past (2014)</div>
  343. <div class="stars">&#9733; &#9733; &#9733; &#189; &#9734;</div>
  344. <div class="ifo">ACTION | adventure | fantasy</div>
  345. </div></div></div>
  346. <!------------------- END MOVIE COPY ------------------->
  347.  
  348.  
  349. <!------------------- START MOVIE COPY ------------------->
  350. <div class="film" title="DATE WATCHED HERE">
  351. <img src="MOVIE POSTER URL HERE">
  352.  
  353. <div class="fo"><div class="fbg"></div><div class="foc">
  354. <a href="GIF MAKER URL HERE"><img src="GIF URL HERE"></a>
  355. <div class="til">MOVIE TITLE HERE (YEAR)</div>
  356. <div class="stars"> <span></span> <span></span> <span class="half"></span></div>
  357. <div class="ifo">Genre, legend stuff, or a small blurb.</div>
  358. </div></div></div>
  359. <!------------------- END MOVIE COPY ------------------->
  360.  
  361.  
  362.  
  363. <!------------------- DON'T COPY/PASTE ANYTHING PAST HERE ------------------->
  364. </div></body></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!