API tools faq
paste
Advertisement
Guest User

theme code

a guest
Oct 23rd, 2017
433
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7. <!--
  8.  
  9. Theme «chamomile» by felinum
  10.  
  11. Last update: 25.08.2016
  12.  
  13. Rules:
  14. 1. Don't claim any part of the code as your own.
  15. 2. Don't redistribute it on other sites.
  16. 3. Don't implement parts of my code into your themes w/o permission.
  17. 4. Leave the credit intact and visible (don't move it to secondary pages).
  18. 5. You may edit the theme, but not beyond recognition.
  19.  
  20.  
  21. Notes:
  22.  
  23. 1) If you enable the Right Sidebar, make sure to disable the Left Sidebar and vice versa.
  24. 2) If you insert a number higher than 1 in the "Number of Columns" text field, don't forget to type in a value bigger than 0 in the "Post Side Margin" text field as well, otherwise the posts will have no spacing.
  25.  
  26.  
  27.  
  28. Credits:
  29. - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  30. - Masonry with Infinite Scroll and PXU Photosets: @ shythemes (http://shythemes.tumblr.com/post/148791415248/)
  31. - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  32. - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  33. - Masonry: David DeSandro (http://masonry.desandro.com/)
  34. - Like Button with Infinite Scroll: @ magnusthemes (http://magnusthemes.tumblr.com/post/132530444620)
  35. - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  36.  
  37.  
  38. -->
  39.  
  40.  
  41. <title>{Title}</title>
  42. <link rel="shortcut icon" href="{Favicon}">
  43. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  44. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  45. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  46. <link href='https://fonts.googleapis.com/css?family=Karla|Muli:400,400italic|Roboto:400,400italic,500,500italic|Hind|Lato|Source+Sans+Script|Lily+Script+One' rel='stylesheet' type='text/css'>
  47. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  48. <link rel="stylesheet" href="http://static.tumblr.com/0cdn90j/3lyocfhe5/felinum.css">
  49.  
  50. <meta name="image:Background" content=""/>
  51. <meta name="image:Sidebar Icon" content="http://static.tumblr.com/0cdn90j/GkRo6o3dp/untitled-1.png"/>
  52. <meta name="color:Background" content="#fff"/>
  53. <meta name="color:Text" content="#b6b6b6"/>
  54. <meta name="color:Link" content="#000"/>
  55. <meta name="color:Link Hover" content="#000"/>
  56. <meta name="color:Posts BG" content="#fff"/>
  57. <meta name="color:Italic" content="#a0acc9"/>
  58. <meta name="color:Bold" content="#56585b"/>
  59. <meta name="color:boldglow" content=""/>
  60.  
  61. <meta name="color:Sidebar Title" content="#000"/>
  62. <meta name="color:titleglow" content=""/>
  63. <meta name="color:Sidebar BG" content="#fff"/>
  64. <meta name="color:Navigation Links" content="#a2b1c9"/>
  65. <meta name="color:Navigation Links Hover" content="#cecece"/>
  66.  
  67. <meta name="color:Post Info" content="#000"/>
  68. <meta name="color:Post Info Hover" content="#ccc"/>
  69. <meta name="color:Like Reblog Buttons" content="#4f4f4f"/>
  70. <meta name="color:Like Reblog Buttons Hover" content="#b3b3b3"/>
  71. <meta name="color:Like Button Liked" content="#c9d1dc"/>
  72. <meta name="color:Tags" content="#a5a5a5"/>
  73. <meta name="color:Tags Hover" content="#c9d1dc"/>
  74.  
  75. <meta name="color:Text Post Title" content="#000"/>
  76. <meta name="color:Text Post Title Hover" content="#dcdcdc"/>
  77. <meta name="color:Blockquote Border" content="#ededed"/>
  78. <meta name="color:Quote" content="#333"/>
  79. <meta name="color:Chat Label" content="#a3aeb6"/>
  80. <meta name="color:Question" content="#474747"/>
  81. <meta name="color:Audio Caption" content="#f5f6f7"/>
  82. <meta name="color:Track Title" content="#000"/>
  83. <meta name="color:Track Artist" content="#ccc"/>
  84.  
  85. <meta name="color:Back to Top Text" color="#000"/>
  86. <meta name="color:Back to Top BG" content="#fbfbfb"/>
  87. <meta name="color:Selection BG" content="#e2eff5"/>
  88. <meta name="color:Selection Text" content="#000"/>
  89. <meta name="color:Tooltip Text" content="#363636"/>
  90. <meta name="color:Tooltip BG" content="#fff"/>
  91. <meta name="color:Tooltip Border" content="#dfdfdf"/>
  92.  
  93. <meta name="select:Body Font Size" content="10" title="10px"/>
  94. <meta name="select:Body Font Size" content="11" title="11px"/>
  95. <meta name="select:Body Font Size" content="12" title="12px"/>
  96.  
  97. <meta name="select:Body Font Family" content="Karla" title="Karla">
  98. <meta name="select:Body Font Family" content="Roboto" title="Roboto"/>
  99. <meta name="select:Body Font Family" content="Hind" title="Hind"/>
  100. <meta name="select:Body Font Family" content="Inconsolata" title="Inconsolata"/>
  101. <meta name="select:Body Font Family" content="Muli" title="Muli"/>
  102. <meta name="select:Body Font Family" content="Source Code Pro" title="Source Code Pro"/>
  103. <meta name="select:Body Font Family" content="Lato" title="Lato"/>
  104.  
  105. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  106. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  107. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  108. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  109.  
  110. <meta name="select:Sidebar Icon Shape" content="32" title="round"/>
  111. <meta name="select:Sidebar Icon Shape" content="4" title="rounded corners"/>
  112. <meta name="select:Sidebar Icon Shape" content="0" title="square"/>
  113.  
  114. <meta name="select:Asker Avatar Shape" content="4" title="rounded corners"/>
  115. <meta name="select:Asker Avatar Shape" content="15" title="round"/>
  116. <meta name="select:Asker Avatar Shape" content="0" title="square"/>
  117.  
  118. <meta name="select:Audio Image Shape" content="4" title="rounded corners"/>
  119. <meta name="select:Audio Image Shape" content="25" title="round"/>
  120. <meta name="select:Audio Image Shape" content="0" title="square"/>
  121.  
  122.  
  123.  
  124. <meta name="if:Fade In On Refresh" content="1"/>
  125. <meta name="if:Left Sidebar" content="1"/>
  126. <meta name="if:Right Sidebar" content="0"/>
  127. <meta name="if:Infinite Scroll" content="0"/>
  128. <meta name="if:Show Caption" content="1"/>
  129. <meta name="if:Second Description" content="1"/>
  130.  
  131. <meta name="text:Post Size" content="300"/>
  132. <meta name="text:Permalink Post Size" content="540"/>
  133. <meta name="text:Number of Columns" content="1"/>
  134. <meta name="text:Post Side Padding" content="0"/>
  135. <meta name="text:Post Side Margin" content="0"/>
  136. <meta name="text:Sidebar Top Margin" content="0"/>
  137. <meta name="text:Sub Title" content="sub title"/>
  138. <meta name="text:Second Description" content="second description: scroll down your Theme Options panel to edit or disable this section (via the toggle button)"/>
  139.  
  140. <meta name="text:Link 1 URL" content="/"/>
  141. <meta name="text:Link 1" content="home"/>
  142. <meta name="text:Link 2 URL" content="/ask"/>
  143. <meta name="text:Link 2" content="mssg"/>
  144. <meta name="text:Link 3 URL" content="/archive"/>
  145. <meta name="text:Link 3" content="map"/>
  146. <meta name="text:Link 4 URL" content="/"/>
  147. <meta name="text:Link 4" content="link 4"/>
  148. <meta name="text:Link 5 URL" content="/"/>
  149. <meta name="text:Link 5" content="link 5"/>
  150. <meta name="text:Link 6 URL" content="/"/>
  151. <meta name="text:Link 6" content="link 6"/>
  152. <meta name="text:Link 7 URL" content="/"/>
  153. <meta name="text:Link 7" content="link 7"/>
  154.  
  155. <style type="text/css">
  156.  
  157. /* general */
  158.  
  159. *:not(#s-m-t-tooltip):not(a):not(.tmblr-iframe), *:not(#s-m-t-tooltip):not(a):not(.tmblr-iframe):hover {transition-duration:.5s;}
  160. a, a:hover, .tmblr-iframe, .tmblr-iframe:hover, #audio_player_container, #audio_player_bg_container, #audio_player_container:hover #audio_player_bg_container, .posts:hover #like_reblog, #post_source, .posts:hover #post_source {transition-duration:.5s;}
  161.  
  162. ::-webkit-scrollbar {width:11px; height:11px;}
  163.  
  164. ::-webkit-scrollbar-thumb {
  165. border:5px solid rgba(0, 0, 0, 0);
  166. background-clip:padding-box;
  167. background-color:rgba(0, 0, 0, 1);
  168. }
  169.  
  170. ::-webkit-scrollbar-track {border:5px solid {color:Background}; background-color:#eee;}
  171.  
  172. #s-m-t-tooltip {
  173. margin:15px 14px 7px 12px;
  174. padding:5px;
  175. max-width:300px;
  176. z-index:9999999;
  177. text-shadow:none;
  178. font-style:italic;
  179. border:1px solid {color:Tooltip Border};
  180. background:{color:Tooltip BG};
  181. color:{color:Tooltip Text};
  182. }
  183.  
  184. #scrolltotop {
  185. position:fixed;
  186. top:50%;
  187. right:-70px;
  188. padding:10px 6px 10px 10px;
  189. width:50px;
  190. height:auto;
  191. z-index:99999;
  192. cursor:pointer;
  193. text-transform:lowercase;
  194. font:italic 10px roboto;
  195. border:1px solid #f5f5f5;
  196. background-color:{color:Back to Top BG};
  197. color:{color:Back to Top Text};
  198. }
  199.  
  200.  
  201. .tmblr-iframe {
  202. position:fixed;
  203. top:10px !important;
  204. right:5px !important;
  205. z-index:900000000000000000000000000000;
  206. }
  207.  
  208.  
  209. ::selection {background:{color:Selection BG}; color:{color:Selection Text};}
  210. ::-moz-selection {background:{color:Selection BG}; color:{color:Selection Text};}
  211.  
  212. body {
  213. opacity:1;
  214. transition:.5s opacity;
  215. font:{select:Body Font Size}px {select:Body Font Family}, calibri, sans-serif;
  216. background:{color:Background} url('{image:Background}') repeat fixed center;
  217. color:{color:Text};
  218. overflow-wrap:break-word;
  219. word-wrap:break-word;
  220. }
  221.  
  222. body.fade-out {opacity:0; transition:none;}
  223.  
  224. a {text-decoration:none;}
  225. a:link, a:visited {color:{color:Link};}
  226. a:hover {color:{color:Link Hover};}
  227. a:active {color:{color:Link};}
  228.  
  229. b, strong {
  230. color:{color:bold};
  231. text-transform:uppercase;
  232. font-family: 'Montserrat', sans-serif;
  233. text-shadow: 0 0 5px {color:boldglow}, 0 0 8px {color:boldglow};
  234. }
  235.  
  236. i, em {
  237. color: {color:italic};
  238. font-family: 'PT Sans Narrow', sans-serif;
  239. font-size:13px;
  240. letter-spacing:1.2px;
  241. }
  242.  
  243.  
  244.  
  245. pre {
  246. font-family:inherit !important;
  247. white-space:pre-wrap;
  248. white-space:-moz-pre-wrap;
  249. white-space:-o-pre-wrap;
  250. white-space:-pre-wrap;
  251. word-wrap:break-word;
  252. }
  253.  
  254. h6, small, big, sup, sub {font-size:1em;}
  255. h4, h5, h6 {margin:6px 0;}
  256. h5 {font-size:1.1em;}
  257. h4 {font-size:1.2em;}
  258. h3 {font-size:1.3em;}
  259. h2 {font-size:1.4em;}
  260. h1 {font-size:1.5em;}
  261.  
  262. blockquote {
  263. margin:0;
  264. padding:0 10px;
  265. border-left:1px solid {color:Blockquote Border};
  266. }
  267.  
  268. ul {margin:0 0 0 -35px; list-style-type:none;}
  269. ol {margin-left:-25px; }
  270. ul li:not(.like):not(.reblog):before {
  271. content:'▪';
  272. display:inline-block;
  273. margin-right:5px;
  274. color:{color:Blockquote Border};
  275. }
  276.  
  277. img {max-width:100%; height:auto;}
  278.  
  279. /* posts */
  280.  
  281. #posts_container {
  282. {block:IndexPage}width:calc(({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns});{/block:IndexPage}
  283. {block:Permalink}
  284. width:calc((400px - 4px + 2 * (0px + 10px)) * {text:Number of Columns});
  285. {/block:Permalink}
  286. margin:0 auto;
  287. left:-120px;
  288. right:auto;
  289. margin-top:70px;
  290. margin-bottom:70px;
  291. }
  292.  
  293. .posts {
  294. {block:IndexPage}
  295. margin-left:{text:Post Side Margin}px;
  296. margin-right:{text:Post Side Margin}px;
  297. opacity:0;
  298. z-index:-1;
  299. {/block:IndexPage}
  300. margin-bottom:100px;
  301. padding:{text:Post Side Padding}px;
  302. background-color:{color:Posts BG};
  303. text-align:justify;
  304. }
  305.  
  306. .vertebrae {
  307. margin:auto;
  308. overflow:hidden;
  309. {block:Permalink}width:calc({text:Permalink Post Size}px - 4px);{/block:Permalink}
  310. {block:IndexPage}width:calc({text:Post Size}px - 4px);{/block:IndexPage}
  311. }
  312.  
  313. .photo-slideshow .count-1, .pancake {
  314. {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  315. {block:IndexPage}width:{text:Post Size}px;{/block:IndexPage}
  316. }
  317.  
  318. .photo-slideshow {position:relative;}
  319. .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  320. .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  321. .photo-slideshow .count-3:last-child {float:right;}
  322. .photo-slideshow .count-3:nth-child(2) {
  323. max-width:178px;
  324. position:absolute;
  325. left:50%;
  326. transform: translateX(-50%);
  327. -webkit-transform: translateX(-50%)
  328. }
  329.  
  330. /* photoset lightbox */
  331.  
  332. .vignette, #vignette {opacity:0;}
  333.  
  334. .lightbox-image, #tumblr_lightbox img {
  335. box-shadow:none !important;
  336. max-width:none;
  337. -moz-box-sizing:border-box;
  338. box-sizing:border-box;
  339. }
  340.  
  341. .tmblr-lightbox, #tumblr_lightbox {
  342. position:absolute;
  343. z-index:99999999999999999999999999999 !important;
  344. background-color:rgba(255,255,255,.9) !important;
  345. }
  346.  
  347. /* text / caption */
  348.  
  349. .text {padding:10px;}
  350.  
  351. .audio {padding:1px 10px 12px 10px; background:{color:Audio Caption};}
  352.  
  353. .appel a {display:inline-block;}
  354. .appel a:after {
  355. content:'';
  356. display:block;
  357. width:0;
  358. height:1px;
  359. margin-top:1px;
  360. background:transparent;
  361. transition:width 1s ease, background-color 1s ease;
  362. }
  363.  
  364. .appel a:hover:after {width:100%; background:{color:Link Hover};}
  365.  
  366. .text_post_title {
  367. padding:10px 10px 0 10px;
  368. text-transform:uppercase;
  369. font-weight:bold;
  370. font-size:14px;
  371. text-align:center;
  372. text-shadow: 0 0 5px {color:boldglow}, 0 0 8px {color:boldglow}
  373. }
  374.  
  375. .text_post_title a:link, .text_post_title a:visited {color:{color:Text Post Title};}
  376. .text_post_title a:hover {color:{color:Text Post Title Hover};}
  377.  
  378. /* question */
  379.  
  380. #ask_post {padding:7px 7px 0 7px; }
  381.  
  382. #asker_avatar {
  383. display:inline-block;
  384. padding-right:5px;
  385. height:30px;
  386. width:30px;
  387. vertical-align:middle;
  388. }
  389.  
  390. #asker_avatar img {border-radius:{select:Asker Avatar Shape}px;}
  391. #asker_avatar img:hover {opacity:.6;}
  392.  
  393. #a {font-weight:bold;}
  394.  
  395. #asker {
  396. letter-spacing:1px;
  397. text-transform:uppercase;
  398. font-size:10px;
  399. display:inline-block;
  400. margin-bottom:20px;
  401. }
  402.  
  403. #question {padding-top:5px; color:{color:Question}; display: inline-block; }
  404.  
  405. /* quote */
  406.  
  407. #quote_post {
  408. margin-top:30px;
  409. padding:7px;
  410. color:{color:Quote};
  411. }
  412.  
  413. #quote_header {position:absolute; margin-top:-37px;}
  414.  
  415. #quo_marks {font:40px 'Lily Script One';}
  416.  
  417. #dash {
  418. position:relative;
  419. vertical-align:top;
  420. top:6px;
  421. text-transform:lowercase;
  422. font:bold 14px muli;
  423. }
  424.  
  425. #source {
  426. padding:8px 10px 0 10px;
  427. text-align:right;
  428. text-transform:uppercase;
  429. font-weight:bold;
  430. font-size:10px;
  431. }
  432.  
  433. /* chat */
  434.  
  435. #chat {padding:7px 7px 7px 5px;}
  436. #chat li {padding:5px 0;}
  437. #line #label {color:{color:Chat Label};}
  438.  
  439. /* audio */
  440.  
  441. #audio_player_container {padding:7px;}
  442.  
  443. #album_art {
  444. position:absolute;
  445. width:50px;
  446. height:50px;
  447. z-index:1;
  448. background-color:{color:Background};
  449. }
  450.  
  451. #album_art img {max-width:100%;}
  452. #album_art, #album_art img {border-radius:{select:Audio Image Shape}px;}
  453.  
  454. #audio_player_bg_container {
  455. position:absolute;
  456. width:48px;
  457. height:48px;
  458. margin-top:1px;
  459. margin-left:1px;
  460. z-index:9;
  461. overflow:hidden;
  462. opacity:0;
  463. background:white;
  464. border-radius:calc({select:Audio Image Shape}px - 1px);
  465. }
  466.  
  467. #audio_player_container:hover #audio_player_bg_container {opacity:1;}
  468.  
  469. #audio_player_bg {
  470. margin-top:14px;
  471. margin-left:-4px;
  472. }
  473.  
  474. #track_details_container {
  475. display:table;
  476. height:50px;
  477. max-height:50px;
  478. margin-left:60px;
  479. overflow:hidden;
  480. }
  481.  
  482. #track_details {display:table-cell; vertical-align:middle;}
  483.  
  484. #track_name {
  485. text-transform:lowercase;
  486. font-weight:bold;
  487. font-size:14px;
  488. color:{color:Track Title};
  489. }
  490.  
  491. #artist_name {text-transform:uppercase; color:{color:Track Artist};}
  492.  
  493. .tumblr_audio_player {
  494. height:130px;
  495. width:1000px;
  496. -moz-transform:scale(0.70, 0.70);
  497. -webkit-transform:scale(0.70, 0.70);
  498. -o-transform:scale(0.70, 0.70);
  499. -ms-transform:scale(0.70, 0.70);
  500. transform:scale(0.70, 0.70);
  501. -moz-transform-origin:top left;
  502. -webkit-transform-origin:top left;
  503. -o-transform-origin:top left;
  504. -ms-transform-origin:top left;
  505. transform-origin:top left;
  506. }
  507.  
  508. /* post notes */
  509.  
  510. #notecontainer {width:calc({text:Permalink Post Size}px - 5px); background-color:{color:Posts BG};}
  511.  
  512. #notecontainer ol.notes {
  513. list-style-type:none;
  514. margin:0;
  515. padding:0;
  516. word-break:break-all;
  517. }
  518.  
  519. #notecontainer li {padding:10px;}
  520.  
  521. #notecontainer img.avatar {
  522. margin-right:10px;
  523. width:16px;
  524. height:16px;
  525. vertical-align:-4px;
  526. border-radius:8px;
  527. }
  528.  
  529. #notecontainer .retags {
  530. margin-left:25px;
  531. text-transform:uppercase;
  532. letter-spacing:2px;
  533. font-weight:bold;
  534. font-size:9px;
  535. }
  536.  
  537. #notecontainer .retags.error {color:{color:Italic} !important;}
  538.  
  539. #notecontainer .retags a:hover {color:{color:Link Hover} !important;}
  540.  
  541. #notecontainer .answer_content {font-style:italic; color:{color:Italic};}
  542.  
  543. #notecontainer blockquote {margin:10px 0px 10px 25px;}
  544. #notecontainer blockquote a:after, #notecontainer .retags a:after, #notecontainer .avatar_frame.smt-current-element a:after {height:0;}
  545.  
  546. /* post info */
  547.  
  548. #post_info_container {
  549. padding:5px;
  550. {block:Permalink}overflow:auto;{/block:Permalink}
  551. font:italic 11px roboto;
  552. border-top:1px solid #eee;
  553. background-color:{color:Posts BG};
  554. }
  555.  
  556. #post_info_container a {color:{color:Post Info};}
  557. #post_info_container a:hover {color:{color:Post Info Hover};}
  558.  
  559. #date, #post_source {float:left; }
  560. #notes, #tags {float:right; }
  561.  
  562. #post_source, #tags {margin-bottom:5px; font-family:{select:Body Font Family};}
  563.  
  564. #post_source {
  565. {block:Permalink}max-width:calc({text:Permalink Post Size}px * 1 / 3);
  566. padding-top:5px; {/block:Permalink}
  567. {block:IndexPage}
  568. max-width:calc({text:Post Size}px * 1 / 3);
  569.  
  570. padding-top:5px;
  571. {/block:IndexPage};
  572. }
  573.  
  574. .posts:hover #post_source {opacity:1;}
  575.  
  576. #tags {
  577. {block:Permalink}max-width:calc({text:Permalink Post Size}px * 2 / 3);
  578. padding-top:5px; {/block:Permalink}
  579. {block:IndexPage}max-width:calc({text:Post Size}px * 2 / 3);
  580. padding-top:5px; {/block:IndexPage};
  581. text-align:right;
  582. }
  583.  
  584. #tags a:link, #tags a:visited, #post_source a:link, #post_source a:visited {color:{color:Tags};}
  585. #tags a:hover, #post_source a:hover {color:{color:Tags Hover};}
  586.  
  587. #c {
  588. position:fixed;
  589. z-index:9999999999999999;
  590. bottom:5px;
  591. right:5px;
  592. }
  593.  
  594. /* sidebar */
  595.  
  596. #sidebar {
  597. position:fixed;
  598. {block:Permalink}
  599. {block:ifLeftSidebar}
  600. margin-left:160px; {/block:ifLeftSidebar}
  601. {block:ifRightSidebar}left:calc(50% + ({text:Permalink Post Size}px + {text:Post Side Padding}px * 2 - 4px) / 2 + 60px);{/block:ifRightSidebar}
  602. {/block:Permalink}
  603. {block:IndexPage}
  604. {block:ifLeftSidebar}margin-left:160px;{/block:ifLeftSidebar}
  605. {block:ifRightSidebar}left:calc(50% + (({text:Post Size}px - 4px + 2 * ({text:Post Side Padding}px + {text:Post Side Margin}px)) * {text:Number of Columns}) / 2 + 60px - {text:Post Side Margin}px);{/block:ifRightSidebar}
  606. {/block:IndexPage}
  607. margin-top:{text:Sidebar Top Margin}px;
  608. padding:10px;
  609. width:180px;
  610. z-index:9999;
  611. text-align:center;
  612. background:{color:Sidebar BG};
  613. }
  614.  
  615. #imgtitle {display:table; padding-bottom:5px;}
  616.  
  617. #sidebar a {color:{color:Navigation Links};}
  618. #sidebar a:hover {color:{color:Navigation Links Hover};}
  619.  
  620. #sidebar_image {width:64px; height:64px;}
  621. #sidebar_image img {max-width:100%; border-radius:{select:Sidebar Icon Shape}px;}
  622. #sidebar_image img:hover {opacity:.5;}
  623.  
  624. #sidebar_image, #title_container {display:table-cell; vertical-align:middle;}
  625.  
  626. #title_container {padding-left:0px; text-align:center;}
  627.  
  628. #title {
  629. text-transform:uppercase;
  630. font-family: 'Nunito', sans-serif;
  631. font-weight:bold;
  632. letter-spacing:3px;
  633. font-size:35px;
  634. margin-right:10px;
  635. color:{color:Sidebar Title};
  636. opacity:0.9;
  637. text-shadow: 0 0 16px #fff, 0 0 70px {color:titleglow}; 0 0 70px {color:titleglow};
  638. -webkit-transition:all 0.7s ease-in-out;
  639. -moz-transition:all 0.7s ease-in-out;
  640. -o-transition:all 0.7s ease-in-out;
  641. transition:all 0.7s ease-in-out;
  642. text-align:center; }
  643.  
  644. #title:hover {
  645. text-shadow: 0 0 35px #fff, 0 0 80px {color:titleglow}; 0 0 120px {color:titleglow};
  646. opacity:0.9;
  647. -webkit-transition:all 0.7s ease-in-out;
  648. -moz-transition:all 0.7s ease-in-out;
  649. -o-transition:all 0.7s ease-in-out;
  650. transition:all 0.7s ease-in-out;
  651.  
  652. }
  653.  
  654. #subtitle {
  655. text-transform:uppercase;
  656. font-size:10px;
  657. text-align:center;
  658. }
  659.  
  660. #descr {padding:7px 0;}
  661.  
  662. #subdescr {padding:7px 0; border-top:1px solid #eee;}
  663.  
  664. #nav {padding-bottom:5px;}
  665.  
  666. #nav a {display:inline-block; margin:4px 6px;}
  667.  
  668. #navigation {padding:5px 0; font-weight:bold; font-family:'Nunito';}
  669.  
  670. #prev, #next {display:inline-block;}
  671.  
  672. #like_reblog {
  673. position:absolute;
  674. right:20px;
  675. top:0;
  676. opacity:0;
  677. -webkit-transition-duration: .9s;
  678. -moz-transition-duration: .9s;
  679. -o-transition-duration: .9s;
  680. transition-duration: .9s;
  681. -webkit-transition-delay: 1s;
  682. -moz-transition-delay: 1s;
  683. -o-transition-delay: 1s;
  684. transition-delay: 1s;
  685. }
  686.  
  687. .posts:hover #like_reblog {
  688. right:-18px;
  689. opacity:1;
  690. -webkit-transition-delay: 0ms;
  691. -moz-transition-delay: 0ms;
  692. -o-transition-delay: 0ms;
  693. transition-delay: 0ms;
  694. }
  695.  
  696. .control {
  697. display:block;
  698. position:relative;
  699. color:{color:Like Reblog Buttons};
  700. }
  701.  
  702. .control a {color:{color:Like Reblog Buttons};}
  703. .control .like_button {font-size:12px; padding-bottom:3px;}
  704. .control .reblog_button {font-size:10px;}
  705. .control .like_button:hover,
  706. .control .reblog_button:hover {color:{color:Like Reblog Buttons Hover};}
  707. .control .like_button::before,
  708. .control .reblog_button::before {display:block; line-height:1;}
  709. .like_button.liked {color:{color:Like Button Liked};}
  710. .like_button.liked:hover {color:{color:Like Button Liked};}
  711. .like_button iframe {
  712. display:block;
  713. position:absolute;
  714. top:0;
  715. right:0;
  716. bottom:0;
  717. left:0;
  718. margin:0;
  719. opacity:0;
  720. }
  721.  
  722. #c img {height:100%; opacity:1;}
  723. #c img:hover {opacity:.6;}
  724. #c {
  725. position:fixed;
  726. z-index:9999999999999999999999999999;
  727. bottom:7px;
  728. right:7px;
  729. height:24px;
  730. }
  731.  
  732. </style>
  733.  
  734. </head>
  735. <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
  736. <link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
  737. <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  738.  
  739. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  740.  
  741. <body>
  742.  
  743. {block:ifFadeInOnRefresh}<script>document.body.className += ' fade-out';</script>{/block:ifFadeInOnRefresh}
  744.  
  745. <div id="sidebar">
  746. <div id="imgtitle">
  747. <div id="sidebar_image"><a href="/"><img src="{image:Sidebar Icon}"></a></div>
  748. <div id="title_container">
  749. <div id="title">{Title}</div>
  750. <div id="subtitle"><span style="font-size:8px;">「&nbsp;</span>{text:Sub Title}<span style="font-size:8px;">&nbsp;」</span></div>
  751. </div>
  752. </div>
  753.  
  754. <div id="descr_container">
  755. <div id="descr">{Description}</div>
  756. <div id="subdescr">{block:ifSecondDescription}{text:Second Description}{/block:ifSecondDescription}</div>
  757. </div>
  758.  
  759. <div id="nav">
  760. <a href="{text:Link 1 URL}">.&nbsp;{text:Link 1}</a>
  761. <a href="{text:Link 2 URL}">.&nbsp;{text:Link 2}</a>
  762. <a href="{text:Link 3 URL}">.&nbsp;{text:Link 3}</a>
  763. <a href="{text:Link 4 URL}">.&nbsp;{text:Link 4}</a>
  764. <a href="{text:Link 5 URL}">.&nbsp;{text:Link 5}</a>
  765. <a href="{text:Link 6 URL}">.&nbsp;{text:Link 6}</a>
  766. <a href="{text:Link 7 URL}">.&nbsp;{text:Link 7}</a>
  767. </div>
  768.  
  769. {block:IfNotInfiniteScroll}
  770. {block:Pagination}
  771. <div id="navigation">
  772. <div id="prev">{block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}</div>&nbsp;&mdash;&nbsp;
  773. <div id="next">{block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}</div>
  774. </div>
  775. {/block:Pagination}
  776. {/block:IfNotInfiniteScroll}
  777. </div>
  778.  
  779. <!-- posts container -->
  780.  
  781. <div id="posts_container">
  782.  
  783. <!-- posts -->
  784.  
  785. {block:Posts}
  786. <div class="posts" id="{PostID}">
  787. {block:Text}
  788. <div class="vertebrae">
  789. {block:Title}<div class="text_post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  790. <div class="text appel">{Body}</div>
  791. </div>
  792. {/block:Text}
  793. {block:Link}
  794. <div class="vertebrae">
  795. <div class="text_post_title"><a href="{URL}">&mdash;&nbsp;{Name}</a></div>
  796. {block:Description}<div class="text appel">{Description}</div>{/block:Description}
  797. </div>
  798. {/block:Link}
  799. {block:Quote}
  800. <div class="vertebrae">
  801. <div id="quote_post" class="appel">
  802. <div id="quote_header">
  803. <span id="dash">&mdash;&nbsp;</span>
  804. <span id="quo_marks">&rdquo;</span>
  805. </div>
  806. {Quote}
  807. {block:Source}<div id="source" class="appel">&mdash;&nbsp;{Source}</div>{/block:Source}
  808. </div>
  809. </div>
  810. {/block:Quote}
  811. {block:Chat}
  812. <div class="vertebrae">
  813. {block:Title}<div class="text_post_title"><a href="{Permalink}">&mdash;&nbsp;{Title}</a></div>{/block:Title}
  814. <div id="chat" class="appel"><ul>{block:Lines}<li id="line">{block:Label}<span id="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul></div>
  815. </div>
  816. {/block:Chat}
  817. {block:Answer}
  818. <div class="vertebrae">
  819. <div id="ask_post" class="appel">
  820. <div id="asker_avatar"><img src="{AskerPortraitURL-30}"></div>
  821. <div id="asker"><span id="a">{Asker}</span> asked:</div>
  822. <div id="question">{Question}</div>
  823. <div>{Answer}</div>
  824. </div>
  825. </div>
  826. {/block:Answer}
  827. {block:AudioPlayer}
  828. <div class="vertebrae">
  829. <div id="audio_player_container">
  830. <div id="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  831. <div id="audio_player_bg_container"><div id="audio_player_bg">{AudioPlayer}</div></div>
  832. <div id="track_details_container"><div id="track_details">
  833. {block:TrackName}<span id="track_name">{TrackName}</span>{/block:TrackName}<br/>
  834. {block:Artist}<span id="artist_name">{Artist}</span>{/block:Artist}<br/>
  835. </div></div>
  836. </div>
  837. {block:IfShowCaption}{block:Caption}<div class="audio appel">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  838. </div>
  839. {/block:AudioPlayer}
  840. {block:Photo}
  841. <div class="vertebrae">
  842. <div class="pancake">
  843. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  844. {block:IfShowCaption}{block:Caption}<div class="text appel">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  845. </div>
  846. </div>
  847. {/block:Photo}
  848. {block:Photoset}
  849. <div class="vertebrae">
  850. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  851. {block:Photos}
  852. <div class="photo-data">
  853. <div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div>
  854. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  855. </div>
  856. {/block:Photos}
  857. </div>
  858. {block:IfShowCaption}{block:Caption}<div class="text appel">{Caption}</div> {/block:Caption}{/block:IfShowCaption}
  859. </div>
  860. {/block:Photoset}
  861. {block:Video}
  862. <div class="vertebrae">
  863. <div class="video">{Video-500}</div>
  864. {block:IfShowCaption}{block:Caption}<div class="text appel">{Caption}</div>{/block:Caption}{/block:IfShowCaption}
  865. </div>
  866. {/block:Video}
  867. {block:Date}
  868. <div id="post_info_container">
  869. <div id="date">
  870. <a href="{Permalink}">&mdash;&nbsp;{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>
  871. </div>
  872. <div id="notes">
  873. <a href="{Permalink}">{block:NoteCount}+{NoteCountWithLabel}&nbsp;&mdash;{/block:NoteCount}</a>
  874. </div>
  875. <!--{block:RebloggedFrom}<a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}-->
  876. <br/>
  877. <div id="post_source">
  878. {block:RebloggedFrom}
  879. >> <a href="{ReblogRootURL}" title="{ReblogRootName}">src</a> /
  880. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>.
  881.  
  882. {/block:RebloggedFrom}
  883. </div>
  884. <div id="tags">{block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a> &nbsp;{/block:Tags}{/block:HasTags}</div>
  885. </div>
  886. {block:IndexPage}
  887. <div id="like_reblog">
  888. <div class="control like-control">{LikeButton size="13" color="black"}</div>
  889. <div class="control reblog-control">{ReblogButton size="11" color="black"}</div>
  890. </div>
  891. {/block:IndexPage}
  892. {/block:Date}
  893.  
  894. </div>
  895.  
  896. {block:IndexPage}
  897. {block:ifInfiniteScroll}
  898. <div class="navigation" id="navigation">
  899. {block:Pagination}
  900. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  901. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  902. {/block:Pagination}
  903. </div>
  904. {/block:IfInfiniteScroll}
  905. {/block:IndexPage}
  906.  
  907. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  908.  
  909. <div id="notecontainer" class="appel">{PostNotes-16}</div>
  910.  
  911. {/block:Posts}
  912. <!-- end posts -->
  913.  
  914. </div>
  915. <!-- end posts container-->
  916.  
  917.  
  918. <!-- scripts -->
  919.  
  920. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  921. <script>
  922. var p = $("#sidebar");
  923. var offset = p.offset();
  924. if (offset.left < 0) {
  925. $('#sidebar').css({"left":"0"})
  926. }
  927. </script>
  928. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script><script src="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>{block:IndexPage}<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>{block:ifInfiniteScroll}<script src="http://static.tumblr.com/0cdn90j/vsOo9wcfa/infinitescroll.js"></script>{/block:ifInfiniteScroll}{/block:IndexPage}
  929. <script>
  930. $(document).ready(function(){
  931. $('.photo-slideshow').pxuPhotoset({
  932. lightbox:true,
  933. rounded:false,
  934. gutter:'{select:Photoset Gutter}px',
  935. photoset:'.photo-slideshow',
  936. photoWrap:'.photo-data',
  937. photo:'.pxu-photo'
  938. });
  939. {block:IndexPage}
  940. var $container = $('#posts_container');
  941. $container.masonry({itemSelector:'.posts'});
  942. $container.imagesLoaded(function(){
  943. $container.masonry();
  944. $container.find('.posts').animate({opacity:1, zIndex:1});
  945. });
  946. {block:ifInfiniteScroll}
  947. $container.infinitescroll({
  948. itemSelector:'.posts',
  949. navSelector:'#navigation',
  950. nextSelector:'#navigation a#nextPage',
  951. loadingImg:'',
  952. loadingText:'<em></em>',
  953. bufferPx:2000
  954. },
  955. function (newElements){
  956. var $newElems = $(newElements);
  957. resizeVideos();
  958. var $newElemsIDs = $newElems.map(function(){
  959. return this.id;
  960. }).get();
  961. console.log($newElems, $newElemsIDs);
  962. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  963. $newElems.find('.photo-slideshow').pxuPhotoset({
  964. lightbox:true,
  965. rounded:false,
  966. gutter:'{select:Photoset Gutter}px',
  967. photoset:'.photo-slideshow',
  968. photoWrap:'.photo-data',
  969. photo:'.pxu-photo'
  970. },
  971. function(){
  972. $container.masonry();
  973. });
  974. $newElems.imagesLoaded(function(){
  975. $container.masonry('appended', $newElems);
  976. $newElems.animate({opacity:1, zIndex:1});
  977. });
  978. });
  979. {/block:ifInfiniteScroll}
  980. {/block:IndexPage}
  981. });
  982. </script>
  983. <script type="text/javascript">
  984. $(document).ready(function(){
  985. $(window).scroll(function(){
  986. if ($(this).scrollTop() > 400) {
  987. $('#scrolltotop').stop().animate({right:'0px'});
  988. }
  989. else {
  990. $('#scrolltotop').stop().animate({right:'-85px'});
  991. }
  992. });
  993. $('#scrolltotop').click(function(){
  994. $("html, body").animate({scrollTop:0}, 800);
  995. return false;
  996. });
  997. });
  998. </script>
  999. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script><script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script><div id="c"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/ZjQobhv98/snowshoe-cat.png"></a></div>
  1000. <script>
  1001. (function($){
  1002. $(document).ready(function(){
  1003. $("[title]").style_my_tooltips({
  1004. tip_follows_cursor:true,
  1005. tip_delay_time:0,
  1006. tip_fade_speed:0,
  1007. attribute:"title"
  1008. });
  1009. });
  1010. })(jQuery);
  1011. </script>
  1012. <script>
  1013. $(function() {
  1014. $('body').removeClass('fade-out');
  1015. });
  1016. </script>
  1017.  
  1018. </body>
  1019.  
  1020. </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!