API tools faq
paste
Advertisement
thanksamber

Theme 002

thanksamber
Mar 15th, 2014
1,617
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>{Title}</title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10. <meta name="image:Sidebar" content="http://static.tumblr.com/j2tdnxz/knVn2h3a8/jlaw.png">
  11.  
  12. <meta name="image:Background" content="http://static.tumblr.com/j2tdnxz/afln24vzj/crossword.png">
  13.  
  14. <meta name="if:Grayscale" content="1">
  15. <meta name="if:Captions" content="1">
  16.  
  17. <meta name="color:Background1" content="#fff">
  18. <meta name="color:Background2" content="#151515">
  19. <meta name="color:Background Hover" content="#000">
  20. <meta name="color:Text" content="#000">
  21. <meta name="color:Description Text" content="#fff">
  22. <meta name="color:Links" content="#64a0ef">
  23. <meta name="color:Hover" content="#000">
  24. <meta name="color:Title" content="#000">
  25.  
  26. <meta name="text:Link1" content="/">
  27. <meta name="text:Link1 Title" content="link 1">
  28. <meta name="text:Link2" content="/">
  29. <meta name="text:Link2 Title" content="link 2">
  30. <meta name="text:Link3" content="/">
  31. <meta name="text:Link3 Title" content="link 3">
  32. <meta name="text:Link4" content="/">
  33. <meta name="text:Link4 Title" content="link 4">
  34. <meta name="text:Link5" content="/">
  35. <meta name="text:Link5 Title" content="link 5">
  36.  
  37. <meta name="text:Nav Label" content="Navigation">
  38.  
  39. <link rel="shortcut icon" href="{Favicon}">
  40.  
  41. <link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Condensed' rel='stylesheet' type='text/css'>
  42.  
  43. <!-- HTML5 Shiv -->
  44. <!--[if lt IE 9]>
  45. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  46. <![endif]-->
  47.  
  48. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  49. <script>
  50.  
  51. $(document).ready(function(){
  52.  
  53. $("#navlinks").hide();
  54.  
  55. $("#nav").click(function() {
  56. $("#navlinks").slideToggle('slow');
  57. $("#description").slideToggle('slow');
  58. });
  59. });
  60.  
  61. </script>
  62. <style>
  63.  
  64. body {
  65. background-color: {color:Background1};
  66. background-image: url('{image:Background}');
  67. background-repeat: repeat;
  68. color: {color:Text};
  69. font-size: 11px;
  70. font-family: 'Calibri', sans-serif;
  71. line-height: 18px;
  72. }
  73.  
  74. a {
  75. color: {color:Links};
  76. text-decoration: none;
  77. -moz-transition: all 0.5s ease;
  78. -o-transition: all 0.5s ease;
  79. -webkit-transition: all 0.5s ease;
  80. transition: all 0.5s ease;
  81. }
  82.  
  83. a:hover {
  84. color: {color:Hover};
  85. }
  86.  
  87. blockquote {
  88. border-left: 3px solid {color:Text};
  89. padding-left: 10px;
  90. }
  91.  
  92. img {
  93. {block:ifGrayscale}
  94. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  95. filter: gray; /* IE6-9 */
  96. -webkit-filter: grayscale(100%);
  97. {/block:ifGrayscale}
  98. -moz-transition: all 0.5s ease;
  99. -o-transition: all 0.5s ease;
  100. -webkit-transition: all 0.5s ease;
  101. transition: all 0.5s ease;
  102. }
  103.  
  104. img:hover {
  105. {block:ifGrayscale}
  106. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  107. -webkit-filter: grayscale(0%);
  108. {/block:ifGrayscale}
  109. }
  110.  
  111. .clear {
  112. clear: both;
  113. }
  114.  
  115. /** CREDIT */
  116.  
  117. #credit {
  118. height: 20px;
  119. width: 20px;
  120. padding: 5px;
  121. position: fixed;
  122. bottom: 2%;
  123. right: 2%;
  124. background-color: {color:Background2};
  125. text-align: center;
  126. color: {color:Description Text};
  127. font-family: 'Stint Ultra Condensed', cursive;
  128. font-size: 16px;
  129. }
  130.  
  131.  
  132.  
  133. /** SIDEBAR */
  134.  
  135. #sidebar {
  136. position: fixed;
  137. height: 100%;
  138. margin: 30px 0 0 50px;
  139. width: 250px;
  140. }
  141.  
  142.  
  143. #sidepic {
  144. width: 200px;
  145. height: 290px;
  146. padding: 15px;
  147. margin: 0 0 10px -5px;
  148. border: 5px solid {color:Background2};
  149. }
  150.  
  151. #sidepic img {
  152. width: 200px;
  153. height: 290px;
  154. }
  155.  
  156.  
  157. #description {
  158. width: 210px;
  159. padding: 10px;
  160. height: 180px;
  161. background-color: {color:Background2};
  162. color: {color:Description Text};
  163. margin-bottom: 10px;
  164. overflow: hidden;
  165. text-align: justify;
  166. }
  167.  
  168. #nav {
  169. width: 230px;
  170. height: 30px;
  171. background-color: {color:Background2};
  172. margin-bottom: 10px;
  173. font-family: 'Stint Ultra Condensed', cursive;
  174. color: {color:Description Text};
  175. font-size: 18px;
  176. text-align: center;
  177. text-transform: uppercase;
  178. line-height: 30px;
  179. -moz-transition: all 0.5s ease;
  180. -o-transition: all 0.5s ease;
  181. -webkit-transition: all 0.5s ease;
  182. transition: all 0.5s ease;
  183. }
  184.  
  185. #nav:hover {
  186. background-color: {color:Background Hover};
  187. }
  188.  
  189. #navlinks {
  190. margin-left: 5px;
  191. width: 220px;
  192. }
  193.  
  194. #navlinks ul {
  195.  
  196. margin-left: -40px;
  197. }
  198.  
  199. #navlinks ul li {
  200. list-style: none;
  201. margin: 5px 0 5px -5px;
  202. width: 230px;
  203. padding: 5px 0 5px 0;
  204. text-align: center;
  205. background-color: {color:Background2};
  206. text-transform: uppercase
  207. }
  208.  
  209. /** POSTS */
  210.  
  211.  
  212. #column {
  213. position: absolute;
  214. width: 700px;
  215. height: 800px;
  216. margin: 80px 0 0 400px;
  217. }
  218.  
  219. .post {
  220. width: 700px;
  221. border-bottom: 5px solid {color:Background2};
  222. }
  223.  
  224. .post img {
  225. max-width: 400px;
  226. }
  227.  
  228. .content {
  229. width: 400px;
  230. margin-left: 150px;
  231. padding-bottom: 20px;
  232. text-align: justify;
  233. }
  234.  
  235. .title2 {
  236. font-family: 'Stint Ultra Condensed', cursive;
  237. font-size: 24px;
  238. text-align: center;
  239. margin-bottom: 15px;
  240. color:{color:Title};
  241. }
  242.  
  243. .title2 a {
  244. color: {color:Title};
  245. }
  246.  
  247. .title2 a:hover {
  248. color: {color:Links};
  249. }
  250.  
  251. .photoset {
  252. {block:ifGrayscale}
  253. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  254. filter: gray; /* IE6-9 */
  255. -webkit-filter: grayscale(100%);
  256. {/block:ifGrayscale}
  257. -moz-transition: all 0.5s ease;
  258. -o-transition: all 0.5s ease;
  259. -webkit-transition: all 0.5s ease;
  260. transition: all 0.5s ease;
  261. }
  262.  
  263. .photoset:hover {
  264. {block:ifGrayscale}
  265. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  266. -webkit-filter: grayscale(0%);
  267. {/block:ifGrayscale}
  268. }
  269.  
  270. .source {
  271. text-align: center;
  272. }
  273.  
  274. .label {
  275. font-weight: bold;
  276. text-transform: uppercase;
  277. display: inline-block;
  278. margin-right: 3px;
  279. }
  280.  
  281.  
  282. .chat ul {
  283. margin-left: -40px;
  284. }
  285.  
  286. .chat ul li {
  287. list-style-type: none;
  288. padding-bottom: 5px;
  289. }
  290.  
  291. .playerbox {
  292. width: 50px;
  293. height: 50px;
  294. padding: 20px;
  295. border: 5px solid {color:Background2};
  296. float: left;
  297. }
  298.  
  299. .playerbox img {
  300. position: absolute;
  301. width: 50px;
  302. height: 50px;
  303. }
  304.  
  305. .playerbox img:hover {
  306. {block:ifGrayscale}
  307. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  308. filter: gray; /* IE6-9 */
  309. -webkit-filter: grayscale(100%);
  310. {/block:ifGrayscale}
  311. }
  312.  
  313. .player {
  314. margin: 10px;
  315. width: 30px;
  316. height: 30px;
  317. overflow: hidden;
  318. opacity: 0.2;
  319. }
  320.  
  321. .playerbox:hover > img {
  322. opacity: 0.4;
  323. }
  324.  
  325. .playerbox:hover > .player {
  326. opacity: 1.0;
  327. }
  328.  
  329. .audio {
  330. width: 310px;
  331. float: left;
  332. text-align: center;
  333. margin: -70px 0 0 90px;
  334. }
  335.  
  336. .track {
  337. font-family: 'Stint Ultra Condensed', cursive;
  338. text-transform: uppercase;
  339. font-size: 14px;
  340. }
  341.  
  342. .artist {
  343. text-transform: uppercase;
  344. }
  345.  
  346. .ask {
  347. width: 400px;
  348. padding: 20px 0 20px 0;
  349. border-bottom: 5px solid {color:Background2};
  350. }
  351.  
  352. .icon {
  353. width: 50px;
  354. height: 50px;
  355. padding: 20px;
  356. border: 5px solid {color:Background2};
  357. float: left;
  358. margin-right: 10px;
  359. }
  360.  
  361. .icon img {
  362. width: 50px;
  363. height: 50px;
  364. }
  365.  
  366. .question {
  367.  
  368. }
  369.  
  370. .asker {
  371. font-family: 'Stint Ultra Condensed', cursive;
  372. text-transform: uppercase;
  373. font-size: 14px;
  374. }
  375.  
  376. .answer {
  377. margin-top: 20px;
  378. }
  379.  
  380. .notes {
  381. width: 400px;
  382. text-align: center;
  383. text-transform: uppercase;
  384. font-size: 10px;
  385. margin: 0 0 100px 150px;
  386. }
  387.  
  388. .notes a {
  389. color: {color:Text};
  390. }
  391.  
  392. .notes a:hover {
  393. color: {color:Links};
  394. }
  395.  
  396. .postnotes img {
  397. margin-right: 20px;
  398. }
  399.  
  400. .postnotes ul {
  401. width: 400px;
  402. margin-left: -80px;
  403. }
  404.  
  405. .postnotes ul li {
  406. list-style-type: none;
  407. text-align: left;
  408. }
  409.  
  410.  
  411. /** PAGINATION */
  412.  
  413. #pagcontainer {
  414. top: 6%;
  415. right: 2%;
  416. position: fixed;
  417. }
  418.  
  419. .pag {
  420. margin-bottom: 15px;
  421. height: 20px;
  422. width: 20px;
  423. padding: 5px;
  424. background-color: {color:Background2};
  425. text-align: center;
  426. color: {color:Description Text};
  427. font-family: 'Stint Ultra Condensed', cursive;
  428. font-size: 16px;
  429. }
  430.  
  431. </style>
  432. </head>
  433. <body>
  434. <!-- CREDIT -->
  435. <a href="http://macfustythemes.tumblr.com/"><div id="credit">TA</div></a>
  436. <!-- SIDEBAR -->
  437. <div id="sidebar">
  438. <div id="sidepic"><a href="/"><img src="{image:Sidebar}"></a></div>
  439. <div id="description">{Description}</div>
  440. <div id="nav">{text:Nav Label}</div>
  441. <div id="navlinks">
  442. <ul>
  443. <a href="/ask"><li>Message</li></a>
  444. {block:ifLink1}
  445. <a href="{text:Link1}"><li>{text:Link1 Title}</li></a>
  446. {/block:ifLink1}
  447. {block:ifLink2}
  448. <a href="{text:Link2}"><li>{text:Link2 Title}</li></a>
  449. {/block:ifLink2}
  450. {block:ifLink3}
  451. <a href="{text:Link3}"><li>{text:Link3 Title}</li></a>
  452. {/block:ifLink3}
  453. {block:ifLink4}
  454. <a href="{text:Link4}"><li>{text:Link4 Title}</li></a>
  455. {/block:ifLink4}
  456. {block:ifLink5}
  457. <a href="{text:Link5}"><li>{text:Link5 Title}</li></a>
  458. {/block:ifLink5}
  459. </ul>
  460. </div>
  461. </div>
  462.  
  463. <!-- PAGINATION -->
  464.  
  465. <div id="pagcontainer">
  466. {block:Pagination}
  467. {block:NextPage}
  468. <a href="{NextPage}"><div class="pag">&rarr;</div></a>
  469. {/block:NextPage}
  470. {block:PreviousPage}
  471. <a href="{PreviousPage}"><div class="pag">&larr;</div></a>
  472. {/block:PreviousPage}
  473. {/block:Pagination}
  474. </div>
  475.  
  476. <!-- POSTS -->
  477. <div id="column">
  478. {block:Posts}
  479. <div class="post">
  480. {block:Text}
  481.  
  482. <div class="content">
  483. {block:Title}
  484. <div class="title2">{Title}</div>
  485. {/block:Title}
  486. {Body}
  487. </div>
  488. {/block:Text}
  489.  
  490. {block:Photo}
  491. <div class="content">
  492. <img src="{PhotoUrl-400}">
  493. {block:ifCaptions}
  494. {block:Caption}
  495. <p>{Caption}</p>
  496. {/block:Caption}
  497. {/block:ifCaptions}
  498. </div>
  499. {/block:Photo}
  500.  
  501. {block:Photoset}
  502. <div class="content">
  503. <div class="photoset">{Photoset}</div>
  504. {block:ifCaptions}
  505. {block:Caption}
  506. <p>{Caption}</p>
  507. {/block:Caption}
  508. {/block:ifCaptions}
  509. </div>
  510. {/block:Photoset}
  511.  
  512. {block:Quote}
  513. <div class="content">
  514. <div class="title2">{Quote}</div>
  515. {block:Source}
  516. <div class="source">{Source}</div>
  517. {/block:Source}
  518. </div>
  519. {/block:Quote}
  520.  
  521. {block:Link}
  522. <div class="content">
  523. <div class="title2">
  524. <a href="{URL}">{Name}</a>
  525. </div>
  526. {block:Description}
  527. <p>{Description}</p>
  528. {/block:Description}
  529. </div>
  530. {/block:Link}
  531.  
  532. {block:Chat}
  533. <div class="content">
  534. {block:Title}
  535. <div class="title2">{Title}</div>
  536. {/block:Title}
  537. <div class="chat">
  538. <ul>
  539. {block:Lines}
  540. <li>{block:Label}
  541. <div class="label">{Label}</div>
  542. {/block:Label}
  543. {Line}</li>
  544. {/block:Lines}
  545. </ul>
  546. </div>
  547. </div>
  548. {/block:Chat}
  549.  
  550. {block:Audio}
  551. <div class="content">
  552. <div class="playerbox">
  553. {block:AlbumArt}
  554. <img src="{AlbumArtUrl}">
  555. {/block:AlbumArt}
  556. <div class="player">
  557. {AudioPlayerBlack}</div>
  558. </div>
  559. <div class="audio">
  560. {block:TrackName}
  561. <div class="track">{TrackName}</div>
  562. {/block:TrackName}
  563. {block:Artist}
  564. <div class="artist">{Artist}</div>
  565. {/block:Artist}
  566. </div>
  567. <div class="clear"></div>
  568. {block:Caption}
  569. <p>{Caption}</p>
  570. {/block:Caption}
  571. </div>
  572. {/block:Audio}
  573.  
  574. {block:Video}
  575. <div class="content">
  576. {Video-400}
  577. {block:ifCaptions}
  578. {block:Caption}
  579. <p>{Caption}</p>
  580. {/block:Caption}
  581. {/block:ifCaptions}
  582. </div>
  583. {/block:Video}
  584.  
  585. {block:Answer}
  586. <div class="content">
  587. <div class="ask">
  588. <div class="icon"><img src="{AskerPortraitUrl-64}"></div>
  589. <div class="question">
  590. <div class="asker">{Asker} said: </div>
  591. {Question}
  592. </div>
  593. <div class="clear"></div>
  594. </div>
  595. <div class="answer">{Answer}</div>
  596. </div>
  597. {/block:Answer}
  598. </div>
  599. <div class="notes">
  600. {block:Date}
  601. <a href="{Permalink}">Posted on {DayofWeek} {DayofMonth}{DayofMonthSuffix} {Month} {Year} at {12Hour}:{Minutes} {AmPm} with {NoteCountWithLabel}.</a>
  602. {/block:Date}
  603. </div>
  604. {block:PostNotes}
  605. <div class="postnotes">
  606. <ul>
  607. <li>{PostNotes-16}</li>
  608. </ul>
  609. </div>
  610. {/block:PostNotes}
  611. {/block:Posts}
  612. </div>
  613. </body>
  614. </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!