API tools faq
paste
Advertisement
Guest User

theme 16: to break you; by primrosetylers

a guest
Apr 19th, 2014
2,593
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. theme 16: to break you;
  7. coded from scratch
  8. by irma at primrosetylers.tumblr.com
  9. do not steal, remove the credit, or use as a base
  10.  
  11. -->
  12.  
  13. <title>{Title}</title>
  14. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18. <!-- meta stuffs go here -->
  19.  
  20. <meta name="color:background" content="#fff">
  21. <meta name="color:description" content="#aaa">
  22. <meta name="color:section header" content="#aaa">
  23. <meta name="color:section header hover" content="#000">
  24. <meta name="color:tooltip" content="#aaa">
  25. <meta name="color:link text" content="#000">
  26. <meta name="color:link bg hover" content="#aaa">
  27. <meta name="color:link text hover" content="#fff">
  28. <meta name="color:pagination" content="#000">
  29. <meta name="color:pagination hover" content="#aaa">
  30. <meta name="color:post text" content="#000">
  31. <meta name="color:post info" content="#000">
  32. <meta name="color:post info hover" content="#aaa">
  33. <meta name="color:posts link" content="#aaa">
  34. <meta name="color:posts link hover" content="#000">
  35.  
  36. <meta name="if:500px posts" content="1">
  37. <meta name="if:400px posts" content="0">
  38. <meta name="if:250px posts" content="0">
  39. <meta name="if:tiny cursor" content="1">
  40.  
  41. <meta name="image:sidebar" content="http://static.tumblr.com/d9787cd5e7d72e7889572c9d13f89b2d/kdcwkh7/B4Fn3jeqi/tumblr_static_arrows.png">
  42.  
  43. <meta name="font:posts" content="Gibson">
  44.  
  45. <meta name="text:section title 1" content="title 1">
  46. <meta name="text:section title 2" content="title 2">
  47. <meta name="text:section title 3" content="title 3">
  48. <meta name="text:link 1" content="index">
  49. <meta name="text:link 1 url" content="/">
  50. <meta name="text:link 2" content="mssg">
  51. <meta name="text:link 2 url" content="/ask">
  52. <meta name="text:link 3" content="">
  53. <meta name="text:link 3 url" content="/">
  54. <meta name="text:link 4" content="">
  55. <meta name="text:link 4 url" content="/">
  56. <meta name="text:link 5" content="">
  57. <meta name="text:link 5 url" content="/">
  58. <meta name="text:link 6" content="">
  59. <meta name="text:link 6 url" content="/">
  60. <meta name="text:link 7" content="">
  61. <meta name="text:link 7 url" content="/">
  62. <meta name="text:link 8" content="">
  63. <meta name="text:link 8 url" content="/">
  64.  
  65. <!-- metas end-->
  66.  
  67. <!-- tooltip script-->
  68.  
  69. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  70.  
  71. <!-- click effect script -->
  72.  
  73. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
  74. </script>
  75. <script>
  76. $(document).ready(function(){
  77. $("#clicky").click(function(){
  78. $("#displaybx").slideToggle();
  79. });
  80. });
  81. </script>
  82.  
  83. <script>
  84. $(document).ready(function(){
  85. $("#clicky1").click(function(){
  86. $("#displaybx1").slideToggle();
  87. });
  88. });
  89. </script>
  90.  
  91. <script>
  92. $(document).ready(function(){
  93. $("#clicky2").click(function(){
  94. $("#displaybx2").slideToggle();
  95. });
  96. });
  97. </script>
  98.  
  99. <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  100.  
  101. <style>
  102.  
  103. /*tooltip css*/
  104. div#qTip {
  105. padding: 3px;
  106. display: none;
  107. text-align: center;
  108. position: absolute;
  109. font-size:8px;
  110. line-height:9px;
  111. font-family:{font:posts};
  112. z-index: 1000;
  113. background-color:#fff;
  114. border:1px solid {color:tooltip};
  115. color: {color:tooltip};
  116. text-transform:uppercase;
  117. letter-spacing: 1px;
  118. }
  119.  
  120. iframe#tumblr_controls {
  121. top: 0% !important;
  122. right:0% !important;
  123. opacity:0.3;
  124. position: fixed !important;
  125. filter:alpha(opacity=30);
  126. -webkit-transition: all 0.7s ease;
  127. -moz-transition: all 0.7s ease;
  128. -o-transition: all 0.7s ease;
  129. }
  130. iframe#tumblr_controls:hover{
  131. top:0% !important;
  132. right:0% !important;
  133. opacity:0.8;
  134. position: fixed !important;
  135. filter:alpha(opacity=80);
  136. -webkit-transition: all 0.7s ease;
  137. -moz-transition: all 0.7s ease;
  138. -o-transition: all 0.7s ease;
  139. }
  140.  
  141. body {
  142. background-color:{color:background};
  143. font-family:{font:posts};
  144. color:{color:post text};
  145. font-size:11px;
  146. }
  147.  
  148. a {
  149. text-decoration:none;
  150. color:{color:posts link};
  151. -webkit-transition:0.5s;
  152. -moz-transition:0.5s;
  153. -ms-transition:0.5s;
  154. -o-transition:0.5s;
  155. }
  156.  
  157. blockquote {
  158. border-left:1px solid #000;
  159. padding-left:10px;
  160. }
  161.  
  162. .hidden {display: none;}
  163.  
  164. a:hover {
  165. color:{color:posts link hover};
  166. }
  167.  
  168. h2 {
  169. text-align:center;
  170. }
  171.  
  172. /*sidebar*/
  173.  
  174. .cthrough {
  175. font-size:20px;
  176. text-transform:uppercase;
  177. display:block;
  178. text-align:center;
  179. margin-bottom:12px;
  180. padding-right:3px;
  181. width:200px;
  182. transition:all 0.5s ease;
  183. letter-spacing:0;
  184. color:{color:section header};
  185. }
  186.  
  187. .cthrough:hover {
  188. letter-spacing:4px;
  189. color:{color:section header hover};
  190. }
  191.  
  192. #description {
  193. color:{color:description};
  194. margin-top:-4px;
  195. }
  196.  
  197. #sidebar {
  198. width:200px;
  199. text-align:center;
  200. position:fixed;
  201. top:170px;
  202. left:220px;
  203. font-family:'Raleway', calibri;
  204. font-size:10px;
  205. }
  206.  
  207. #sidebar img {
  208. width:150px;
  209. margin-bottom:8px;
  210. }
  211.  
  212. #links {
  213. font-size:11px;
  214. text-transform:uppercase;
  215. margin-top:4px;
  216. margin-bottom:8px;
  217. }
  218.  
  219. #links a {
  220. padding-left:2px;
  221. padding-right:2px;
  222. margin:4px;
  223. color:{color:link text};
  224. }
  225.  
  226. #links a:hover {
  227. background-color:{color:link bg hover};
  228. color:{color:link text hover};
  229. }
  230.  
  231. #pag {
  232. text-transform:uppercase;
  233. position:fixed;
  234. text-align:center;
  235. background-color:#fff;
  236. bottom:0;
  237. padding-bottom:8px;
  238. padding-top:4px;
  239. font-size:12px;
  240. {block:If500pxPosts}left:1045px;{/block:If500pxPosts}
  241. {block:If400pxPosts}left:945px;{/block:if400pxPosts}
  242. {block:If250pxPosts}left:795px;{/block:if250pxPosts}
  243.  
  244. }
  245.  
  246. #pag a {color:{color:pagination}; letter-spacing:0;}
  247. #pag a:hover {color:{color:pagination hover}; letter-spacing:2px;}
  248.  
  249. /*posts*/
  250.  
  251. #postage {
  252. {block:If500pxPosts}width:500px;{/block:If500pxPosts}
  253. {block:If400pxPosts}width:400px;{/block:if400pxPosts}
  254. {block:If250pxPosts}width:250px;{/block:if250pxPosts}
  255. margin-left:490px;
  256. margin-top:30px;
  257. margin-bottom:30px;
  258. }
  259.  
  260. #words {
  261. font-style:italic;
  262. font-size:15px;
  263. }
  264.  
  265. .source {
  266. text-align:right;
  267. padding-right:5px;
  268. }
  269.  
  270. #linkpost {
  271. text-align:center;
  272. font-size:11px;
  273. }
  274.  
  275. .linkety {
  276. font-size:15px;
  277. }
  278.  
  279. #chat ul {
  280. list-style:none;
  281. font-family:consolas, {font:posts};
  282. margin-left:-30px;
  283. }
  284.  
  285. .label {
  286. text-transform:uppercase;
  287. font-weight:bold;
  288. }
  289.  
  290. #audioplayer {
  291. width:30px;
  292. height:30px;
  293. overflow:hidden;
  294. position:absolute;
  295. margin-top:35px;
  296. margin-left:35px;
  297. opacity:0.7;
  298. }
  299.  
  300. #albumart {
  301. width:100px;
  302. height:100px;
  303. background-color:#e3e3e3;
  304. }
  305.  
  306. #ask img {
  307. margin-right:4px;
  308. margin-top:4px;
  309. float:left;
  310. }
  311.  
  312. #ask span {
  313. font-style:italic;
  314. }
  315.  
  316. .info {
  317. text-align:center;
  318. text-transform:uppercase;
  319. {block:If500pxPosts}width:500px;{/block:If500pxPosts}
  320. {block:If400pxPosts}width:400px;{/block:if400pxPosts}
  321. {block:If250pxPosts}width:250px;{/block:if250pxPosts}
  322. margin-bottom:50px;
  323. font-size:10px;
  324. opacity:1;
  325. -webkit-transition:0.6s;
  326. -moz-transition:0.6s;
  327. -ms-transition:0.6s;
  328. -o-transition:0.6s;
  329. }
  330.  
  331. .info a {
  332. color:{color:post info};
  333. }
  334.  
  335. .info a:hover {
  336. color:{color:post info hover};
  337. }
  338.  
  339. .tags {
  340. font-size:10px;
  341. text-transform:none;
  342. opacity:0.7;
  343. }
  344.  
  345. #credit {
  346. right:10px;
  347. bottom:15px;
  348. font-size:18px;
  349. padding:0 5px 2px 5px;
  350. text-transform:uppercase;
  351. text-align:center;
  352. background-color:#000;
  353. position:fixed;
  354. font-family:calibri;
  355. }
  356.  
  357. #credit:hover {
  358. text-shadow:0 0 2px #fff;
  359. colOR:transparent;
  360. }
  361.  
  362. {block:IfTinyCursor}
  363. /* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;} /* End http://www.cursors-4u.com */
  364. {/block:IfTinyCursor}
  365.  
  366. {CustomCSS}
  367. </style>
  368. </head>
  369. <body>
  370.  
  371. <div id="sidebar">
  372.  
  373. <img src="{image:sidebar}"/>
  374.  
  375. <a title="about" id="clicky" class="cthrough">{text:section title 1}</a>
  376. <div id="displaybx" class="hidden">
  377. <div id="description">
  378. <p>{Description}</p>
  379. </div>
  380. </div>
  381.  
  382. <a title="links" id="clicky1" class="cthrough">{text:section title 2}</a>
  383. <div id="displaybx1" class="hidden">
  384. <div id="links">
  385. {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1}
  386. {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2}
  387. {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}
  388. {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{/block:iflink4}
  389. {block:iflink5}<a href="{text:link 5 url}">{text:link 5}</a>{/block:iflink5}
  390. {block:iflink6}<a href="{text:link 6 url}">{text:link 6}</a>{/block:iflink6}
  391. {block:iflink7}<a href="{text:link 7 url}">{text:link 7}</a>{/block:iflink7}
  392. {block:iflink8}<a href="{text:link 8 url}">{text:link 8}</a>{/block:iflink8}
  393. </div> <!--links-->
  394. </div>
  395.  
  396. <a title="updates" id="clicky2" class="cthrough">{text:section title 3}</a>
  397. <div id="displaybx2" class="hidden">
  398. <div id="description">
  399. <!-- SECTION THREE TEXT -->
  400. <p>You can put whatever you want here. Updates, stats, a quote, song lyrics, whatever. To change this text, you'll have to hit "edit html" and use the ctrl + f feature to find "section three text." Then you should change what goes between the two p's in the brackets.</p>
  401. </div>
  402. </div>
  403.  
  404.  
  405. </div> <!--sidebar-->
  406.  
  407. {block:Posts}
  408. <div id="postage">
  409.  
  410. {block:Text}
  411. <div id="text">
  412. <h2><a href="{Permalink}">{Title}</a></h2>
  413. {Body}
  414. </div> <!--text post-->
  415. {/block:Text}
  416.  
  417. {block:Photo}
  418. <div id="photo">
  419. {block:If500pxPosts}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{/block:If500pxPosts}
  420. {block:If400pxPosts}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{/block:if400pxPosts}
  421. {block:If250pxPosts}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{/block:if250pxPosts}
  422. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  423. </div> <!--photo post-->
  424. {/block:Photo}
  425.  
  426. {block:Panorama}
  427. <div id="panorama">
  428. {LinkOpenTag}
  429. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  430. {LinkCloseTag}
  431. {block:Caption}
  432. <div class="caption">{Caption}</div>
  433. {/block:Caption}
  434. </div> <!--panorama post-->
  435. {/block:Panorama}
  436.  
  437. {block:Photoset}
  438. <div id="photoset">
  439. {block:If500pxPosts}{Photoset-500}{/block:If500pxPosts}
  440. {block:If400pxPosts}{Photoset-400}{/block:if400pxPosts}
  441. {block:If250pxPosts}{Photoset-250}{/block:if250pxPosts}
  442. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  443. </div> <!--photoset-->
  444. {/block:Photoset}
  445.  
  446. {block:Quote}
  447. <div id="quote">
  448. <div id="words">{Quote}</div>
  449. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  450. </div> <!--quote-->
  451. {/block:Quote}
  452.  
  453. {block:Link}
  454. <div id="linkpost">
  455. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  456. <a href="{URL}" class="linkety" {Target}>{Name}</a>
  457. {block:Description}
  458. <div class="linkdesc">{Description}</div>
  459. {/block:Description}
  460. </div> <!--link-->
  461. {/block:Link}
  462.  
  463. {block:Chat}
  464. <div id="chat">
  465. <h2><a href="{Permalink}">{Title}</a></h2>
  466. <ul>
  467. {block:Lines}
  468. <li class="{Alt} user_{UserNumber}">
  469. {block:Label}
  470. <span class="label">{Label}</span>
  471. {/block:Label}{Line}
  472. </li>
  473. {/block:Lines}
  474. </ul>
  475. </div> <!--chat-->
  476. {/block:Chat}
  477.  
  478. {block:Video}
  479. <div id="video">
  480. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  481. {block:If500pxPosts}{Video-500}{/block:If500pxPosts}
  482. {block:If400pxPosts}{Video-400}{/block:if400pxPosts}
  483. {block:If250pxPosts}{Video-250}{/block:if250pxPosts}
  484. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  485. </div> <!--video-->
  486. {/block:Video}
  487.  
  488. {block:Audio}
  489. <div id="audio">
  490. <table style="padding:5px; background-color:#fff;margin-bottom:5px;">
  491. <tr>
  492. <td style="vertical-align:top;padding-right:10px;"><div id="audioplayer">{AudioPlayerWhite}</div>
  493. <div id="albumart">
  494. {block:AlbumArt}
  495. <img src="{AlbumArtURL}" style="width:100px;">
  496. {/block:AlbumArt}</div></td>
  497. <td style="vertical-align:top; font-size:11px; line-height:12px"> {block:TrackName}<i>title:</i> {TrackName} <br />{/block:TrackName}
  498. {block:Artist}<i>artist:</i> {Artist} <br />{/block:Artist}
  499. {block:Album}<i>album:</i> {Album} <br />{/block:Album}
  500. {block:PlayCount}<i>played:</i> {FormattedPlayCount} times{/block:PlayCount}
  501. </td>
  502. </tr>
  503. </table>
  504. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  505. </div> <!--audio-->
  506. {/block:Audio}
  507.  
  508. {block:Answer}
  509. <div id="ask">
  510. <p><img src="{AskerPortraitURL-16}"><span>{Asker}</span> asked: {Question}</p>
  511. <p>{block:Answerer}<span>{Answerer}</span> replied: {/block:Answerer}{Answer}</p>
  512. </div> <!--ask-->
  513. {/block:Answer}
  514.  
  515. <div class="info">
  516. <a href="{Permalink}">{TimeAgo}</a> - <a href="{Permalink}">{NoteCountWithLabel}</a> <br />
  517. {block:RebloggedFrom}<a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} {block:ContentSource} - <a title="{SourceTitle}" href="{SourceURL}">src</a>{/block:ContentSource} - <a href="{ReblogURL}" target="_blank">reblog</a>
  518. {block:HasTags}
  519. <div class="tags">
  520. tagged {block:Tags} - <a href="{TagURL}">{Tag}</a>{/block:Tags}
  521. </div>
  522. {/block:HasTags}
  523. </div> <!--info-->
  524.  
  525. {block:PermalinkPage}
  526. {PostNotes}
  527. {/block:PermalinkPage}
  528.  
  529. </div> <!--postage-->
  530. {/block:Posts}
  531.  
  532. {block:Pagination}
  533. <div id="pag">
  534. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} {block:NextPage} - <a href="{NextPage}">forth</a>{/block:NextPage}
  535. </div>
  536. {/block:Pagination}
  537.  
  538.  
  539. <div id="credit"><a href="http://primrosetylers.tumblr.com">✿</a></div>
  540. </body>
  541. </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!