API tools faq
paste
Advertisement
Alliecatisallama

PAGE #10 - CURRENTLY DOING #2

Alliecatisallama
Apr 29th, 2013
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--CURRENTLY WATCHING/READING table (page #10) by Alliecatisallama/Ygritties.
  4. This page requires some understanding of HTML code but there are little things to show you how to change bits towards the bottom of the code -->
  5.  
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8.  
  9. <head>
  10.  
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  14.  
  15. <meta name="description" content="" />
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Lora:400italic' rel='stylesheet' type='text/css'>
  18.  
  19.  
  20.  
  21. <style type="text/css">
  22.  
  23.  
  24.  
  25. ::-webkit-scrollbar-thumb:vertical {background-color: #000; height: 10px;}
  26. ::-webkit-scrollbar-thumb:horizontal {background-color: #000; height:10px!important;}
  27. ::-webkit-scrollbar {background-color: #fff; height:10px; width:5px;}
  28.  
  29.  
  30.  
  31. body {
  32. background: #fcfcfc;
  33. font-size: 16px;
  34. color: #000;
  35. font-family: calibri;
  36.  
  37. }
  38.  
  39.  
  40. a:link, a:active, a:visited {
  41. color: #050505;
  42. text-decoration: none;
  43. -moz-transition-duration:0.6s;
  44. -webkit-transition-duration:0.6s;
  45. -o-transition-duration:0.6s;
  46. }
  47.  
  48. a:hover {
  49. color: #ffffff;
  50. text-decoration: none;
  51. -moz-transition-duration:0.6s;
  52. -webkit-transition-duration:0.6s;
  53. -o-transition-duration:0.6s;
  54. }
  55.  
  56. b {
  57. color: #101010;
  58. }
  59.  
  60. #container1 {
  61. position: relative;
  62. margin-left:280px;
  63. margin-top:100px;
  64. background-color: #ffffff;
  65. width: 200px;
  66. height:420px;
  67. text-align: justify;
  68. padding: 10px;
  69. }
  70.  
  71. #container2 {
  72. position: relative;
  73. margin-left:550px;
  74. margin-top:-440px;
  75. background-color: #ffffff;
  76. width: 200px;
  77. height:420px;
  78. text-align: justify;
  79. padding: 10px;
  80. }
  81.  
  82. #container3 {
  83. position: relative;
  84. margin-left:820px;
  85. margin-top:-440px;
  86. background-color: #ffffff;
  87. width: 200px;
  88. height:420px;
  89. text-align: justify;
  90. padding: 10px;
  91. }
  92.  
  93. #stuff{
  94. letter-spacing:1px;
  95. }
  96.  
  97. #stuff img{
  98. width:150px;
  99. height:75px;
  100. }
  101.  
  102.  
  103.  
  104. #stuff wa{
  105. font-family:'calibri';
  106. text-transform:uppercase;
  107. font-size:9px;
  108. text-align:center;
  109. width:5px;
  110. height:25px;
  111. padding:5px;
  112. display:inline-block;
  113. background:#50de41;
  114. color:#ffffff;
  115. vertical-align:top;
  116. margin-top:2px;
  117. }
  118.  
  119. #stuff st{
  120. font-family:'calibri';
  121. text-transform:uppercase;
  122. font-size:9px;
  123. text-align:center;
  124. width:5px;
  125. height:25px;
  126. padding:5px;
  127. display:inline-block;
  128. background:#fab124;
  129. color:#ffffff;
  130. vertical-align:top;
  131. margin-top:2px;
  132. }
  133.  
  134. #stuff tw{
  135. font-family:'calibri';
  136. text-transform:uppercase;
  137. font-size:9px;
  138. text-align:center;
  139. width:5px;
  140. height:25px;
  141. padding:5px;
  142. display:inline-block;
  143. background:#d42323;
  144. color:#ffffff;
  145. vertical-align:top;
  146. margin-top:2px;
  147. }
  148.  
  149.  
  150.  
  151. #stuff p{
  152. font-family:'lora';
  153. font-style: italic;
  154. font-size:9px;
  155. background:#fafafa;
  156. padding:5px;
  157. width:130px;
  158. height:25px;
  159. line-height:12px;
  160. display:inline-block;
  161. vertical-align:top;
  162. margin-top:2px;
  163. }
  164.  
  165. #stuff status{
  166. font-family:'calibri';
  167. text-transform:uppercase;
  168. font-size:10px;
  169. text-align:center;
  170. width:14px;
  171. height:14px;
  172. padding:10px;
  173. display:inline-block;
  174. background:#000000;
  175. color:#ffffff;
  176. vertical-align:top;
  177. margin-top:2px;}
  178.  
  179. #titlebox {
  180. position: relative;
  181. margin:20px auto auto auto;
  182. background-color: #ffffff;
  183. width: 360px;
  184. height:25px;
  185. text-align: justify;
  186. padding: 10px;
  187. font-family:'lora';
  188. font-size:10px;}
  189.  
  190.  
  191. h3{
  192. margin:-10px 0 0px;
  193. background:#fcfcfc;
  194. position:absolute;
  195. color:#000;
  196. font: italic 12px 'lora';
  197. text-transform: lowercase;
  198. letter-spacing: 3px;
  199. padding:2px 0px 2px 7px;
  200. }
  201.  
  202. h3 i{
  203. background:#fcfcfc;
  204. color:#000;
  205. padding:2px 5px;
  206. margin:-2px 0px 0px px;
  207. font: italic 9px 'lora';
  208. text-transform: lowercase;
  209. letter-spacing: 4px;
  210. }
  211.  
  212. h3 tw{
  213. color:#d42323;
  214. padding:2px 5px;
  215. margin:-2px 0px 0px px;
  216. font: italic 9px 'lora';
  217. text-transform: lowercase;
  218. letter-spacing: 4px;
  219. }
  220.  
  221.  
  222. h3 wa{
  223. color:#50de41;
  224. padding:2px 5px;
  225. margin:-2px 0px 0px px;
  226. font: italic 9px 'lora';
  227. text-transform: lowercase;
  228. letter-spacing: 4px;
  229. }
  230.  
  231. h3 st{
  232. color:#fab124;
  233. padding:2px 5px;
  234. margin:-2px 0px 0px px;
  235. font: italic 9px 'lora';
  236. text-transform: lowercase;
  237. letter-spacing: 4px;
  238. }
  239.  
  240.  
  241.  
  242. </style>
  243.  
  244. </head>
  245.  
  246. <!-- STATUS INFORMATION.
  247.  
  248. wa= WATCHING/READING
  249. st= STALLED/HIATUS
  250. tw= TO WATCH/READ
  251.  
  252. Weird letters but it works
  253.  
  254. ACTUAL STATUS INFORMATION.
  255. As well as the wa, st and tw options there is the status option of having the episode you're up to or something like that.
  256. To change this you just need to input the episode number out of the amount of episodes or use it for something else like a rating
  257.  
  258. TO CHANGE COLOURS.
  259.  
  260. You need to find the colour you want to change, to do this you will need to find the H3 for either wa, st or tw and also the "stuff" option for that. then you need to replace the background colour with the colour you want for both of those, the colours for the tw, st and wa for both H3 and stuff need to be the same otherwise the key at the top is useless.-->
  261.  
  262. <body>
  263.  
  264. <div id="titlebox"><h3 style="position:absolute;text-align:center;top:-10px;left: 50px; display:inline;">currently watching & reading</h3>
  265. you can have a little description in here but don't make it longer than two lines.
  266. <br><br>
  267. <h3 style="position:absolute;top:55px;display:inline;"><wa>watching/reading</wa></h3>
  268. <h3 style="position:absolute;left:300px;top:55px;display:inline;"><st>todo</st></h3>
  269. <h3 style="position:absolute;left:170px;top:55px;display:inline;"><tw>to read/watch</tw></h3>
  270. </div></div></div>
  271.  
  272. <div id="container1">
  273. <h3 style="position:absolute;left:10px;top:-10px;display:inline;">reading</h3>
  274. <div id="stuff">
  275. <!-- START -->
  276. <!-- STATUS (Just change the letters according to status-->
  277. <wa></wa>
  278. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  279. <p>TITLE<br>AUTHOR.</p>
  280. <status>EG</status><br>
  281. <!-- END-->
  282.  
  283. <!-- START -->
  284. <!-- STATUS (Just change the letters according to status-->
  285. <tw></tw>
  286. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  287. <p>TITLE<br>AUTHOR.</p>
  288. <status>EG</status><br>
  289. <!-- END-->
  290.  
  291. <!-- START -->
  292. <!-- STATUS (Just change the letters according to status-->
  293. <st></st>
  294. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  295. <p>TITLE<br>AUTHOR.</p>
  296. <status>EG</status><br>
  297. <!-- END-->
  298.  
  299. <!-- START -->
  300. <!-- STATUS (Just change the letters according to status-->
  301. <wa></wa>
  302. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  303. <p>TITLE<br>AUTHOR.</p>
  304. <status>EG</status><br>
  305. <!-- END-->
  306.  
  307. <!-- START -->
  308. <!-- STATUS (Just change the letters according to status-->
  309. <st></st>
  310. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  311. <p>TITLE<br>AUTHOR.</p>
  312. <status>EG</status><br>
  313. <!-- END-->
  314.  
  315. <!-- START -->
  316. <!-- STATUS (Just change the letters according to status-->
  317. <wa></wa>
  318. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  319. <p>TITLE<br>AUTHOR.</p>
  320. <status>EG</status><br>
  321. <!-- END-->
  322.  
  323. <!-- START -->
  324. <!-- STATUS (Just change the letters according to status-->
  325. <wa></wa>
  326. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  327. <p>TITLE<br>AUTHOR.</p>
  328. <status>EG</status><br>
  329. <!-- END-->
  330.  
  331. <!-- START -->
  332. <!-- STATUS (Just change the letters according to status-->
  333. <tw></tw>
  334. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  335. <p>TITLE<br>AUTHOR.</p>
  336. <status>EG</status><br>
  337. <!-- END-->
  338.  
  339. <!-- START -->
  340. <!-- STATUS (Just change the letters according to status-->
  341. <tw></tw>
  342. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  343. <p>TITLE<br>AUTHOR.</p>
  344. <status>EG</status><br>
  345. <!-- END-->
  346.  
  347.  
  348.  
  349.  
  350.  
  351. </div> </div>
  352.  
  353. <div id="container2">
  354. <h3 style="position:absolute;left:10px;top:-10px;display:inline;"> example - watching</h3>
  355. <div id="stuff">
  356. <!-- START -->
  357. <!-- STATUS (Just change the letters according to status-->
  358. <wa></wa>
  359. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  360. <p>GAME OF THRONES<br>2011.</p>
  361. <status>S3</status><br>
  362. <!-- END-->
  363.  
  364. <!-- START -->
  365. <!-- STATUS (Just change the letters according to status-->
  366. <tw></tw>
  367. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  368. <p>MISFITS<br>2009.</p>
  369. <status>N/A</status><br>
  370. <!-- END-->
  371.  
  372. <!-- START -->
  373. <!-- STATUS (Just change the letters according to status-->
  374. <st></st>
  375. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  376. <p>LOST<br>2004.</p>
  377. <status>S6</status><br>
  378. <!-- END-->
  379. <a href="/"><h3 style="position:absolute;left:-7px;bottom:-20px;display:inline;"><i>my blog</i></h3></a><br>
  380. <a href="http://alliecatisallama.tumblr.com/"><h3 style="position:absolute;right:0px;bottom:-20px;display:inline;"><i>credit</i></h3></a><br>
  381.  
  382.  
  383.  
  384. </div> </div>
  385.  
  386.  
  387. <div id="container3">
  388. <h3 style="position:absolute;left:10px;top:-10px;display:inline;">info</h3>
  389. <div id="stuff"><!-- START -->
  390. <!-- STATUS (Just change the letters according to status-->
  391. <wa></wa>
  392. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  393. <p>you can have a total of<br>9 things per type</p>
  394. <status>EG</status><br>
  395. <!-- END-->
  396.  
  397. <!-- START -->
  398. <!-- STATUS (Just change the letters according to status-->
  399. <tw></tw>
  400. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  401. <p>so this mainly functions<br>as a watching list</p>
  402. <status>EG</status><br>
  403. <!-- END-->
  404.  
  405. <!-- START -->
  406. <!-- STATUS (Just change the letters according to status-->
  407. <st></st>
  408. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  409. <p>but it works as both<br>so have fun</p>
  410. <status>EG</status><br>
  411. <!-- END-->
  412.  
  413. <!-- START -->
  414. <!-- STATUS (Just change the letters according to status-->
  415. <st></st>
  416. <!-- INFO: It can only be two lines unless you want to change the coding to make it longer-->
  417. <p>there is some info in<br>the code for help</p>
  418. <status>EG</status><br>
  419. <!-- END-->
  420.  
  421.  
  422.  
  423. </div>
  424.  
  425. </div>
  426.  
  427. </body>
  428. </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!