API tools faq
paste
Advertisement
foundcas

Theme 5: Grace

foundcas
Jun 15th, 2014
560
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--Don't steal and all that jazz. Any problems just tell me and I'll try to fix it. I honestly don't care if you move the credit or change the styling to suit your tastes, just don't put it on a separate page // foundcas.tumblr.com-->
  5.  
  6. <title>{Title}</title>
  7. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10.  
  11. <meta name="color:Background" content="#fff">
  12. <meta name="color:Text" content="#aaa">
  13. <meta name="color:Header Border" content="#e3e3e3"/>
  14. <meta name="color:Description" content="#aaa">
  15. <meta name="color:Header Links BG" content="#000">
  16. <meta name="color:Header Links Text" content="#444">
  17. <meta name="color:Link" content="#aaa">
  18. <meta name="color:Link Hover" content="#000"/>
  19. <meta name="color:Chat Odd" content="#000"/>
  20. <meta name="color:Chat Even" content="#a8a8a8"/>
  21. <meta name="color:Post Info Border" content="#eee"/>
  22.  
  23. <meta name="text:link 1" content="">
  24. <meta name="text:link 1 url" content="">
  25. <meta name="text:Link 1 title" content="hover title here"/>
  26. <meta name="text:link 2" content="">
  27. <meta name="text:link 2 url" content="">
  28. <meta name="text:link 2 title" content="">
  29. <meta name="text:link 3" content="">
  30. <meta name="text:link 3 url" content="">
  31. <meta name="text:link 3 title" content="">
  32. <meta name="text:link 4" content="">
  33. <meta name="text:link 4 url" content="">
  34. <meta name="text:link 4 title" content="">
  35. <meta name="text:link 5" content="">
  36. <meta name="text:link 5 url" content="">
  37. <meta name="text:link 5 title" content="">
  38.  
  39. <meta name="if:ShowStopBullyingLogo" content="1"/>
  40. <meta name="if:Link1" content="1"/>
  41. <meta name="if:Link2" content="1"/>
  42. <meta name="if:Link3" content="1"/>
  43. <meta name="if:Link4" content="1"/>
  44. <meta name="if:Link5" content="1"/>
  45.  
  46. <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
  47.  
  48. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  49.  
  50. <style>
  51. div#qTip {
  52. padding: 3.5px;
  53. display: none;
  54. text-align: center;
  55. position: absolute;
  56. margin-top:-40px;
  57. margin-left:-42px;
  58. font-size:8.5px;
  59. line-height:9px;
  60. font-family:courier;
  61. z-index: 1000;
  62. background-color:{color:Header Links BG};
  63. border: 1px solid #eee;
  64. color: {color:Background};
  65. text-transform:uppercase;
  66. letter-spacing: 1px;
  67. }
  68. pre, code {
  69. padding:10px;
  70. box-sizing:border-box;
  71. -moz-box-sizing:border-box;
  72. webkit-box-sizing:border-box;
  73. display:block;
  74. white-space: pre-wrap;
  75. white-space: -moz-pre-wrap;
  76. white-space: -pre-wrap;
  77. white-space: -o-pre-wrap;
  78. word-wrap: break-word;
  79. width:100%; overflow-x:auto;
  80. background:#eee;
  81. }
  82. ul{
  83. list-style-type:square;
  84. }
  85. ol{
  86. list-style-type:lower-roman;
  87. }
  88. body {
  89. background-color:{color:Background};
  90. color:{color:Text};
  91. font-family: times;
  92. font-size:12px;
  93. line-height:100%;
  94. word-wrap:break-word;
  95. }
  96.  
  97. a {
  98. text-decoration:none;
  99. color:{color:Link};
  100. -webkit-transition:0.5s;
  101. -moz-transition:0.5s;
  102. -ms-transition:0.5s;
  103. -o-transition:0.5s;
  104. }
  105.  
  106. a:hover {
  107. color:{color:Link Hover};
  108. }
  109.  
  110.  
  111. blockquote {
  112. border-left:1px solid #e3e3e3;
  113. padding-left:10px;
  114. }
  115.  
  116. h1,h2,h3 {
  117. line-height:18px;
  118. text-transform:uppercase;
  119. text-align:right;
  120. }
  121.  
  122. /*HEADER*/
  123. #header {
  124. width:300px;
  125. font-family: 'Maven Pro', sans-serif;
  126. text-align:center;
  127. margin-top:50px;
  128. margin-left:auto;
  129. margin-right:auto;
  130. margin-bottom:100px;
  131. border-bottom:1px solid {color:Header Border};
  132. padding-bottom:5px;
  133. -webkit-filter:grayscale(.7);
  134. -webkit-transition: all 0.8s ease;
  135. -moz-transition: all 0.8s ease;
  136. -o-transition: all 0.8s ease;
  137. }
  138. #header:hover{
  139. -webkit-filter:grayscale(0);
  140. -webkit-transition: all 0.8s ease;
  141. -moz-transition: all 0.8s ease;
  142. -o-transition: all 0.8s ease;
  143. }
  144. #title {
  145. text-transform:uppercase;
  146. letter-spacing:5px;
  147. font-size:20px;
  148. text-align:center;
  149. padding-bottom:5px;
  150. color:{color:Title};
  151. -webkit-transition: all 0.8s ease;
  152. -moz-transition: all 0.8s ease;
  153. -o-transition: all 0.8s ease;
  154. }
  155. #title a:hover{
  156. letter-spacing:20px;
  157. -webkit-transform:rotate(360deg);
  158. -moz-transform:rotate(360deg);
  159. -o-transform:rotate(360deg);
  160. -webkit-transition: all 0.8s ease;
  161. -moz-transition: all 0.8s ease;
  162. -o-transition: all 0.8s ease;
  163. }
  164. #description {
  165. width:300px;
  166. padding:10px;
  167. text-align:center;
  168. font-size:10px;
  169. opacity:1;
  170. color:{color:Description};
  171. }
  172. #pag{
  173. bottom:0px;
  174. position:fixed;
  175. font-size:11px;
  176. width:470px;
  177. padding:15px;
  178. margin-left:417px;
  179. text-align:center;
  180. word-spacing:2px;
  181. letter-spacing:1px;
  182. text-transform:uppercase;
  183. background:{color:Background};
  184. opacity:.7;
  185. z-index:999;
  186. }
  187. #beepme{
  188. position:fixed;
  189. margin-top:5px;
  190. visibility:hidden;
  191. text-align:center;
  192. width:40px;
  193. -webkit-transition: all 0.4s ease;
  194. -moz-transition: all 0.4s ease;
  195. -o-transition: all 0.4s ease;
  196. color:{color:Header Links Text};
  197. }
  198. #links{
  199. display:block;
  200. width:300px;
  201. padding-top:5px;
  202. }
  203. #links a{
  204. display:inline-block;
  205. letter-spacing:1px;
  206. text-transform:uppercase;
  207. font-size:8px;
  208. width:40px;
  209. padding:2px;
  210. background:{color:Header Links BG};
  211. }
  212. #links a:hover{
  213. background:{color:Link Hover}
  214. }
  215. #links a:hover #beepme{
  216. -webkit-transition: all 0.4s ease;
  217. -moz-transition: all 0.4s ease;
  218. -o-transition: all 0.4s ease;
  219. visibility:visible;
  220. margin-top:-15px;
  221. }
  222. /*POSTS*/
  223. #postage {
  224. width:500px;
  225. margin-left:auto;
  226. margin-right:auto;
  227. margin-top:30px;
  228. margin-bottom:40px;
  229. }
  230.  
  231. /*TEXT*/
  232. #text {
  233. text-align:left;
  234. }
  235. #text img{
  236. max-width:350px;
  237. }
  238. .written{
  239. -webkit-transition: all 0.9s ease;
  240. -moz-transition: all 0.9s ease;
  241. -o-transition: all 0.9s ease;
  242. }
  243. .written:hover{
  244. text-decoration:underline;
  245. -webkit-transition: all 0.9s ease;
  246. -moz-transition: all 0.9s ease;
  247. -o-transition: all 0.9s ease;
  248. }
  249. /*PHOTO*/
  250. #photo {
  251. text-align:left;
  252. }
  253.  
  254. /*PHOTOSET*/
  255. #photoset {
  256. text-align:left;
  257. }
  258.  
  259. /*QUOTE*/
  260. #words {
  261. font-style:italic;
  262. line-height:18px;
  263. font-size:15px;
  264. text-align:justify;
  265. }
  266.  
  267. .source {
  268. text-align:center;
  269. font-weight:bold;
  270. }
  271.  
  272. /*LINK*/
  273. #linkpost {
  274. text-align:justify;
  275. }
  276.  
  277. .linkety {
  278. text-transform:uppercase;
  279. text-align:right;
  280. font-size:15px;
  281. }
  282.  
  283. /*CHAT*/
  284. #chat ul {
  285. margin-left:-40px;
  286. list-style:none;
  287. margin-bottom:0px;
  288. }
  289. #chat li:last-child{
  290. border:none;
  291. }
  292. #chat .odd{
  293. color:{color:Chat Odd};
  294. padding-top:5px;
  295. padding-bottom:5px;
  296. border-bottom:1px solid {color:Header Border};
  297. }
  298. #chat .even{
  299. color:{color:Chat Even};
  300. padding-top:5px;
  301. padding-bottom:5px;
  302. border-bottom:1px solid {color:Header Border};
  303. }
  304. /*VIDEO*/
  305. #video {
  306. text-align:left;
  307. }
  308.  
  309. /*AUDIO*/
  310. #audioplayer {
  311. width:27px;
  312. height:30px;
  313. overflow:hidden;
  314. position:absolute;
  315. margin-top:20px;
  316. margin-left:17px;
  317. opacity:0.7;
  318. z-index:9;
  319. }
  320.  
  321. #albumart {
  322. width:60px;
  323. height:60px;
  324. background-color:#e3e3e3;
  325. -webkit-filter:grayscale(.7);
  326. }
  327. /*ASKS*/
  328. #asker {
  329. padding:20px;
  330. font-family:cambria;
  331. letter-spacing:1px;
  332. font-style:italic;
  333. margin-left:0px;
  334. background-color:#eee;
  335. }
  336.  
  337. .aski img{
  338. position:absolute;
  339. padding:3px;
  340. margin-top:-5px;
  341. margin-left:-10px;
  342. }
  343.  
  344. #quest{
  345. margin-left:35px;
  346. }
  347.  
  348. /*POST INFO*/
  349. .info {
  350. text-align:left;
  351. text-transform:uppercase;
  352. font-size:9px;
  353. border-top:1px solid {color:Post Info Border};
  354. }
  355.  
  356. .info a {
  357. color:{color:Post Info};
  358. }
  359.  
  360. .tags a{
  361. font-size:8.5px;
  362. text-transform:none;
  363. font-style:italic;
  364. margin-bottom:50px;
  365. margin-left:-100px;
  366. opacity:0;
  367. -webkit-transition: all 0.8s ease;
  368. -moz-transition: all 0.8s ease;
  369. -o-transition: all 0.8s ease;
  370. }
  371. #postage:hover .tags a{
  372. opacity:1;
  373. margin-left:0px;
  374. -webkit-transition: all 0.8s ease;
  375. -moz-transition: all 0.8s ease;
  376. -o-transition: all 0.8s ease;
  377. }
  378. .where{
  379. text-align:center;
  380. }
  381. ol.notes li.note img.avatar {
  382. width:20px;
  383. height:20px;
  384. border-radius:100%;
  385. }
  386. .notes ol{
  387. list-style-type:upper-roman;
  388. }
  389. .notes li.note{
  390. padding:3px;
  391. border-bottom:1px solid {color:Header Border};
  392. }
  393. /*CREDIT*/
  394. #credit {
  395. right:10px;
  396. bottom:10px;
  397. font-size:12px;
  398. text-transform:uppercase;
  399. text-align:center;
  400. position:fixed;
  401. padding:5px;
  402. -webkit-transition: all 0.8s ease;
  403. -moz-transition: all 0.8s ease;
  404. -o-transition: all 0.8s ease;
  405. }
  406.  
  407. #credit:hover {
  408. -webkit-transition: all 0.8s ease;
  409. -moz-transition: all 0.8s ease;
  410. -o-transition: all 0.8s ease;
  411. background:black;
  412. border-radius:100%;
  413. opacity:0;
  414. }
  415. {CustomCSS}
  416. </style>
  417. </head>
  418. <body>
  419.  
  420. <div id="header">
  421. <div id="title"><a href="/">{Title}</a></div>
  422. <div id="links">
  423. {block:iflink1}<a title="{text:Link 1 Title}" href="{text:link 1 url}"><div id="beepme">{text:link 1}</div></a>{/block:iflink1}
  424. {block:iflink2}<a title="{text:Link 2 Title}" href="{text:link 2 url}"><div id="beepme">{text:link 2}</div></a>{/block:iflink2}
  425. {block:iflink3}<a title="{text:Link 3 Title}" href="{text:link 3 url}"><div id="beepme">{text:link 3}</div></a>{/block:iflink3}
  426. {block:iflink4}<a title="{text:Link 4 Title}" href="{text:link 4 url}"><div id="beepme">{text:link 4}</div></a>{/block:iflink4}
  427. {block:iflink5}<a title="{text:Link 5 Title}" href="{text:link 5 url}"><div id="beepme">{text:link 5}</div></a>{/block:iflink5}
  428. </div>
  429. <div id="description">{Description}</div>
  430. </div>
  431.  
  432. {block:Posts}
  433. <div id="postage">
  434.  
  435. {block:Text}
  436. <div id="text">
  437. <h2><a href="{Permalink}"><span class="written" style="text-transform:lowercase;font-style:italic;">{Title}</a></h2>
  438. {Body}
  439. </div> <!--text post-->
  440. {/block:Text}
  441.  
  442. {block:Photo}
  443. <div id="photo">
  444. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  445. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  446. </div> <!--photo post-->
  447. {/block:Photo}
  448.  
  449. {block:Panorama}
  450. <div id="panorama">
  451. {LinkOpenTag}
  452. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  453. {LinkCloseTag}
  454. {block:Caption}
  455. <div class="caption">{Caption}</div>
  456. {/block:Caption}
  457. </div> <!--panorama post-->
  458. {/block:Panorama}
  459.  
  460. {block:Photoset}
  461. <div id="photoset">
  462. {Photoset-500}
  463. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  464. </div> <!--photoset-->
  465. {/block:Photoset}
  466.  
  467. {block:Quote}
  468. <div id="quote">
  469. <div id="words">"{Quote}"</div>
  470. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  471. </div> <!--quote-->
  472. {/block:Quote}
  473.  
  474. {block:Link}
  475. <div id="linkpost">
  476. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  477. <a href="{URL}" class="linkety" {Target}>{Name}</a>
  478. {block:Description}
  479. <div class="linkdesc">{Description}</div>
  480. {/block:Description}
  481. </div> <!--link-->
  482. {/block:Link}
  483.  
  484. {block:Chat}
  485. <div id="chat">
  486. <h2><a href="{Permalink}">{Title}</a></h2>
  487. <ul>
  488. {block:Lines}
  489. <li class="{Alt} user_{UserNumber}">
  490. {block:Label}
  491. <span class="label">{Label}</span>
  492. {/block:Label}{Line}
  493. </li>
  494. {/block:Lines}
  495. </ul>
  496. </div> <!--chat-->
  497. {/block:Chat}
  498.  
  499. {block:Video}
  500. <div id="video">
  501. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  502. {Video-500}
  503. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  504. </div> <!--video-->
  505. {/block:Video}
  506.  
  507. {block:Audio}
  508. <div id="audio">
  509. <table style="padding:5px; background-color:#fff;margin-bottom:5px;">
  510. <tr>
  511. <td style="vertical-align:top;padding-right:10px;"><div id="audioplayer">{AudioPlayerWhite}</div>
  512. <div id="albumart">
  513. {block:AlbumArt}
  514. <img src="{AlbumArtURL}" style="width:60px;height:60px">
  515. {/block:AlbumArt}</div></td>
  516. <td style="vertical-align:middle; font-size:11px; line-height:12px"> {block:TrackName}<i>Title:</i> {TrackName} <br />{/block:TrackName}
  517. {block:Artist}<i>Artist:</i> {Artist} <br />{/block:Artist}
  518. {block:Album}<i>Album:</i> {Album} <br />{/block:Album}
  519. {block:PlayCount}<i>Played:</i> {FormattedPlayCount} times{/block:PlayCount}
  520. </td>
  521. </tr>
  522. </table>
  523. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  524. </div> <!--audio-->
  525. {/block:Audio}
  526.  
  527. {block:Answer}<div id="asker"><div class="aski"><img src="{AskerPortraitURL-24}"/></div><div id="quest"><span style="font-family:cambria;font-size:9px;font-style:italic;text-transform:uppercase;text-decoration:underline;color:{color:Link}">{Asker} whispered:</span> {Question}</div></div><left><font face="cambria">{Answer}</font>{/block:Answer}
  528.  
  529. <div class="info">
  530. ( <a title="{TimeAgo}//{Year}" href="{Permalink}">{DayofMonth}{DayOfMonthSuffix} <span style="font-size:7.5px">of</span> {Month}</a> / <a href="{Permalink}">{NoteCountWithLabel}</a> ) <a style="float:right" title="reblog this?" href="{ReblogURL}">reblog</a> <div class="where">{block:RebloggedFrom}<a href="{ReblogParentURL}">via</a> {/block:RebloggedFrom} {block:ContentSource}/ <a href="{SourceURL}">src</a>{/block:ContentSource}</div>
  531. {block:HasTags}
  532. <div class="tags">{block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}</div>
  533. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  534. </div>
  535. {/block:Posts}
  536.  
  537. {block:Pagination}
  538. <div id="pag">
  539. {block:PreviousPage}<a href="{PreviousPage}">&larr; retreat</a>{/block:PreviousPage}
  540. {block:JumpPagination length="5"}
  541. {block:CurrentPage}<span class="curpag">{PageNumber}</span>{/block:CurrentPage}
  542. {block:JumpPage}<a class="jump2" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  543. {/block:JumpPagination}
  544. {block:NextPage}<a href="{NextPage}">advance &rarr;</a>{/block:NextPage}
  545. </div>
  546. {/block:Pagination}
  547.  
  548. {block:IfShowStopBullyingLogo}
  549. <div style="bottom:10px; left:10px; width:auto; height:auto; position:fixed; display:block; z-index:9999999; background-color:transparent"><a href="http://stop-bullies.tumblr.com"><img src=" http://i43.tinypic.com/2w585e1.png" width="90"></div>
  550. {/block:IfShowStopBullyingLogo}
  551.  
  552. <div id="credit"><a href="http://foundcas.tumblr.com">fc</a></div>
  553. </body>
  554. </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!