API tools faq
paste
bychloethemes

Fence Sitter Theme - By Chloe

bychloethemes
Apr 24th, 2015
588
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. Fence Sitter Theme - bychloethemes.tumblr.com
  6. don't be a douche and delete the credit
  7. -->
  8.  
  9. <meta name="color:Background" content="#ffffff" />
  10. <meta name="color:Sidebar Accent" content="#97c5e0" />
  11. <meta name="color:Body links" content="#444444" />
  12. <meta name="color:Body text" content="#1d1818" />
  13. <meta name="color:Post color" content="#ffffff" />
  14. <meta name="color:Text highlight" content="#78cc6f" />
  15. <meta name="font:Body" content='verdana,sans-serif'/>
  16. <meta name="if:Tiled Background" content="0" />
  17. <meta name="if:Show Description" content="1" />
  18. <meta name="if:Archive link" content="1" />
  19. <meta name="text:Link 1" content="" />
  20. <meta name="text:URL 1" content="" />
  21. <meta name="text:Link 2" content="" />
  22. <meta name="text:URL 2" content="" />
  23. <meta name="text:Link 3" content="" />
  24. <meta name="text:URL 3" content="" />
  25. <meta name="image:Background" content="" />
  26. {block:Description}
  27. <meta name="description" content="{MetaDescription}" />
  28. {/block:Description}
  29. <meta charset="utf-8">
  30. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  31. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  32. <link rel="shortcut icon" href="{Favicon}">
  33. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  34. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  35. <style type="text/css">
  36. /*Basic styles*/
  37. ::-moz-selection {
  38. background: {color:Text highlight};
  39. color: #fff;
  40. }
  41. ::selection {
  42. background: {color:Text highlight};
  43. color: #fff;
  44. }
  45. #content {
  46. margin-top:20px;
  47. margin-left:50%;
  48. padding-left:75px;
  49. {block:IndexPage}
  50. width: 325px;
  51. {/block:IndexPage}
  52. {block:PermalinkPage}
  53. width:500px;
  54. {/block:PermalinkPage}
  55. }
  56. body {
  57. background: {color:Background} url('{image:Background}'){block:IfNotTiledBackground}no-repeat center center fixed;
  58. -webkit-background-size: cover;
  59. -moz-background-size: cover;
  60. -o-background-size: cover;
  61. background-size: cover;
  62. {/block:IfNotTiledBackground}
  63. {block:IfTiledBackground}
  64. repeat;
  65. background-attachment:fixed;
  66. {/block:IfTiledBackground}
  67. color: {color:Body text};
  68. font-family: {font:Body};
  69. font-size: 12px;
  70. margin: 0;
  71. padding: 0;
  72. }
  73. a:link, a:visited {
  74. text-decoration: none;
  75. color: {color:Body links};
  76. }
  77. a:hover, a:active {
  78. text-decoration: underline;
  79. color: {color:Body links};
  80. }
  81. blockquote {
  82. border-left: 1px solid black;
  83. margin: 0;
  84. padding: 2px 5px!important;
  85. }
  86. iframe, img, embed, object, video {
  87. max-width: 100%;
  88. }
  89. img {
  90. height: auto;
  91. width: auto;
  92. }
  93. /*Masthead*/
  94. .sidebar {
  95. top:200px;
  96. margin-left:50%;
  97. left:-450px;
  98. height:100%;
  99. width:475px;
  100. position:fixed;
  101. text-align:left;
  102. padding:20px;
  103. z-index:9999999;
  104. font-size:15px;
  105. }
  106. .sidebar h1 {
  107. display: block;
  108. font-size: 30px;
  109. margin-top: 0;
  110. margin-bottom: 0;
  111. margin-left: 0;
  112. margin-right: 0;
  113. padding-left:20px;
  114. padding-right:20px;
  115. padding-bottom:10px;
  116. font-weight: normal;
  117. letter-spacing:10px;
  118. text-transform:uppercase;
  119. }
  120. .sidebar hr {
  121. height: 2px;
  122. border: 0;
  123. color: {color:sidebar accent};
  124. background-color: {color:sidebar accent};
  125. margin:0;
  126. }
  127. .sidebar p {
  128. text-align:justify;
  129. padding:0px 20px 0px 20px;
  130. }
  131. .sidebar ul {
  132. list-style-type:none;
  133. padding-left:20px;
  134. padding-right:20px;
  135. }
  136. .sidebar li {
  137. font-size:13px;
  138. line-height:20px;
  139. display:inline-block;
  140. margin-left:5px;
  141. margin-right:5px;
  142. }
  143. .sidebar li:hover {
  144. background-color:{color:secondary accent};
  145. }
  146. .sidebar li:first-child {
  147. margin-left:0px!important;
  148. }
  149. /*Article*/
  150. article {
  151. margin:15px;
  152. width:300px;
  153. {block:PermalinkPage}
  154. width: 400px;
  155. {/block:PermalinkPage}
  156. }
  157. .photo, .photoset {
  158. padding:0;
  159. }
  160. .text, .link, .chat, .quote, .audio, .video{
  161. }
  162. article h1 {
  163. font-weight:normal;
  164. text-transform:uppercase;
  165. font-size:20px;
  166. }
  167. .chat span {
  168. float: left;
  169. margin-right: 5px;
  170. }
  171. .chat .even {
  172. {block:IfNotNoPostAccents}
  173. background: {color:Post Accent};
  174. {/block:IfNotNoPostAccents}
  175. }
  176. .tumblr_audio_player {
  177. height: 30px;
  178. width: 300px;
  179. opacity:0.7;
  180. }
  181. .audioinfo {
  182. top:50%;
  183. margin-top:-80px;
  184. left:50%;
  185. margin-left:-55px;
  186. width:100px;
  187. height:100px;
  188. line-height:12px;
  189. font-size:10px;
  190. padding:10px;
  191. text-transform:uppercase;
  192. background:rgba(255,255,255,0.7);
  193. z-index:999;
  194. position:absolute;
  195. text-align:center;
  196. outline:1px solid #000;
  197. outline-offset:-5px;
  198. }
  199. /*Metadata*/
  200. .metadata {
  201. display: inline-block;
  202. width: 100%;
  203. }
  204. .reblogged {
  205. float: right;
  206. }
  207. /*Tags and notes*/
  208. #tags, nav ul, .chat ul {
  209. list-style: none;
  210. list-style-image: none;
  211. margin: 0;
  212. padding: 0;
  213. }
  214. #tags li {
  215. float: left;
  216. margin-right: 10px;
  217. }
  218. .notes {
  219. clear: both;
  220. padding: 0;
  221. }
  222. .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {
  223. display:none;
  224. }
  225. #infscr-loading {
  226. display:none;
  227. }
  228. .navigation {
  229. display:none!important;
  230. }
  231. .copyright {
  232. position:fixed;
  233. bottom:10px;
  234. left:10px;
  235. }
  236.  
  237. .permalink {
  238. margin-top:0px;
  239. padding:0px 2px 2px 2px;
  240. text-align:right;
  241. word-spacing:1px;
  242. {block:permalinkpage}
  243. opacity:0;
  244. {/block:permalinkpage}}
  245.  
  246. .permalink a{
  247. text-decoration:none;
  248. font-size:12px;
  249. }
  250.  
  251. .permalink a:hover{
  252. text-decoration:underline;
  253. }
  254. #permatag {
  255. display:block;
  256. text-align:center;
  257. text-transform:capitalize;
  258. position:absolute;
  259. bottom:50%;
  260. margin-bottom:-47px;
  261. left:50%;
  262. margin-left:-47px;
  263. opacity:0;
  264. width:100px;
  265. height:100px;
  266. border-radius:100%;
  267. z-index:99;
  268. -webkit-transition: all 0.3s ease-in-out;
  269. -moz-transition: all 0.3s ease-in-out;
  270. -o-transition: all 0.3s ease-in-out;
  271. background:rgba(255,255,255,0.7);
  272. }
  273. #permatag li {
  274. list-style-type:none;
  275. display:inline-block;
  276. font-size:20px;
  277. margin-top:40px;
  278. }
  279. .photo:hover #permatag{
  280. opacity:1;
  281. }
  282. .photoset:hover #permatag{
  283. opacity:1;
  284. }
  285. ol.notes {
  286. padding: 0px;
  287. margin: 25px 0px;
  288. list-style-type: none;
  289. }
  290.  
  291. ol.notes li.note {
  292. padding: 5px;
  293. text-align:left;
  294. }
  295.  
  296. ol.notes li.note img.avatar {
  297. display:none;
  298. }
  299.  
  300. ol.notes li.note span.action {
  301. font-weight: normal;
  302. }
  303.  
  304. ol.notes li.note .answer_content {
  305. font-weight: normal;
  306. }
  307.  
  308. ol.notes li.note blockquote {
  309. padding: 4px 5px;
  310. margin: 10px 0px 0px 25px;
  311. }
  312.  
  313. ol.notes li.note blockquote a {
  314. text-decoration: none;
  315. }
  316. /*Custom CSS*/
  317. {CustomCSS}
  318. </style>
  319. </head>
  320. <body>
  321. <!--Masthead-->
  322. <header class="sidebar">
  323. <!--Navigation-->
  324. <nav id="blogtitle">
  325. <h1><a href="/" title="{lang:Home}">{Blogtitle}</a></h1>
  326. <hr>
  327. <description>
  328. {block:IfShowDescription}
  329. {block:Description}
  330. <p>{Description}</p>
  331. {block:Description}
  332. {/block:IfShowDescription}
  333. </description>
  334. <ul>
  335. {block:AskEnabled}
  336. <li> <a href="/ask">{AskLabel}</a></li>
  337. {/block:AskEnabled}
  338. {block:SubmissionsEnabled}
  339. <li> <a href="/submit">{SubmitLabel}</a></li>
  340. {/block:SubmissionsEnabled}
  341. {block:HasPages}
  342. {block:Pages}
  343. <li> <a href="{URL}">{Label}</a></li>
  344. {/block:Pages}
  345. {/block:HasPages}
  346. {block:IfLink1}
  347. <li> <a href="{text:URL 1}">{text:Link 1}</a> </li>
  348. {/block:IfLink1}
  349. {block:IfLink2}
  350. <li> <a href="{text:URL 2}">{text:Link 2}</a> </li>
  351. {/block:IfLink2}
  352. {block:IfLink3}
  353. <li> <a href="{text:URL 3}">{text:Link 3}</a> </li>
  354. {/block:IfLink3}
  355. {block:IfLink4}
  356. <li> <a href="{text:URL 4}">{text:Link 4}</a> </li>
  357. {/block:IfLink4}
  358. {block:IfLink5}
  359. <li> <a href="{text:URL 5}">{text:Link 5}</a> </li>
  360. {/block:IfLink5}
  361. {block:IfLink6}
  362. <li> <a href="{text:URL 6}">{text:Link 6}</a> </li>
  363. {/block:IfLink6}
  364. {block:IfArchiveLink}
  365. <li> <a href="/archive">past</a></li>
  366. {/block:IfArchiveLink}
  367. <li><a href="http://dontbrag.tumblr.com">theme</a></li>
  368. </ul>
  369. </nav>
  370. </header>
  371. <!--Content holder-->
  372. <div id="content">
  373. {block:Posts}
  374. <article>
  375. <!--Unique code for each post type-->
  376. {block:Text}
  377. <div class="text">
  378. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  379. {Body}
  380. {block:IndexPage}
  381. <div class="permalink">
  382. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  383. {/block:IndexPage}
  384. {/block:Text}
  385.  
  386. {block:Photo}<div class="photo">
  387. <div class="post">
  388. {block:IndexPage}
  389. <div id="permatag">
  390. <li><a href="{Permalink}">{NoteCount}</a></li>
  391. </div>
  392. <a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  393. </a>
  394. {/block:IndexPage}
  395. {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  396. {block:Caption}{Caption}{/block:Caption}
  397. {/block:PermalinkPage}</div>
  398. {/block:Photo}
  399.  
  400. {block:Photoset}
  401. <div class="photoset">
  402. <div class="post">
  403. {block:IndexPage}
  404. <div id="permatag">
  405. <li><a href="{Permalink}">{NoteCount}</a></li>
  406. </div>
  407. {/block:IndexPage}
  408. {Photoset}
  409. {block:PermalinkPage}
  410. {block:Caption}{Caption}{/block:Caption}
  411. {/block:PermalinkPage}</div>
  412. {/block:Photoset}
  413.  
  414. {block:Quote}
  415. <div class="quote">
  416. <p>&ldquo;{Quote}&rdquo;</p>
  417. {block:Source}<p><cite> &mdash;{Source}</cite></p>{/block:Source}
  418. {block:IndexPage}
  419. <div class="permalink">
  420. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  421. {/block:IndexPage}
  422. {/block:Quote}
  423.  
  424. {block:Link}
  425. <div class="link">
  426. <h1><a href="{URL}">{Name}</a></h1>
  427. {block:Description}{Description}{/block:Description}
  428. {block:IndexPage}
  429. <div class="permalink">
  430. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  431. {/block:IndexPage}
  432. {/block:Link}
  433.  
  434. {block:Chat}
  435. <div class="chat inner">
  436. <ul>
  437. {block:Lines}<li class="{Alt}"><p>{block:Label}
  438. <u>{Label}</u>{/block:Label} {Line} </p>
  439. </li>{/block:Lines}
  440. </ul>
  441. {block:IndexPage}
  442. <div class="permalink">
  443. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  444. {/block:IndexPage}
  445. {/block:Chat}
  446.  
  447. {block:Audio}
  448. <div class="audio">
  449. {block:IndexPage}
  450. {block:AlbumArt}<img src="{AlbumArtURL}" width="300"
  451. height="300"/>{/block:AlbumArt}<div class="audioinfo"><br>Artist: <span{block:Artist} style="display:none;"
  452. {/block:Artist}>Unknown</span>
  453. {block:Artist}{Artist}{/block:Artist} <br>
  454. Title: <span{block:TrackName} style="display:none;"
  455. {/block:TrackName}>Unknown</span>
  456. {block:TrackName}{TrackName}{/block:TrackName} <br>
  457. Album: <span{block:Album} style="display:none;"
  458. {/block:Album}>Unknown</span>
  459. {block:Album}{Album}{/block:Album}{block:PlayCount} <br>
  460. Plays: {FormattedPlayCount}{/block:PlayCount}</div>
  461. {AudioPlayerWhite}
  462. <div class="permalink">
  463. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  464. {/block:IndexPage}
  465. {block:PermalinkPage}
  466. {block:AlbumArt}<img src="{AlbumArtURL}" width="400"
  467. height="400"/>{/block:AlbumArt}<br>
  468. Artist: <span{block:Artist} style="display:none;"
  469. {/block:Artist}>Unknown</span>
  470. {block:Artist}{Artist}{/block:Artist} &mdash;
  471. Title: <span{block:TrackName} style="display:none;"
  472. {/block:TrackName}>Unknown</span>
  473. {block:TrackName}{TrackName}{/block:TrackName} &mdash;
  474. Album: <span{block:Album} style="display:none;"
  475. {/block:Album}>Unknown</span>
  476. {block:Album}{Album}{/block:Album}{block:PlayCount} &mdash;
  477. Plays: {FormattedPlayCount}{/block:PlayCount}
  478. {block:Caption}{Caption}{/block:Caption}
  479. {AudioPlayerWhite}
  480. {/block:PermalinkPage}
  481. {/block:Audio}
  482.  
  483. {block:Video}
  484. <div class="video">
  485. <div class="video-player">{Video-300}</div>
  486.  
  487. {block:IndexPage}
  488. <div class="permalink">
  489. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  490. {/block:IndexPage}
  491. {block:PermalinkPage}
  492. <div class="video-player">{Video-500}</div>
  493. {block:Caption}{Caption}{/block:Caption}
  494. {/block:permalinkPage}
  495. {/block:Video}
  496.  
  497. {block:Answer}
  498. <div class="answer">
  499. <div style="color: #000000; background-color:
  500. {color:primary accent};padding: 10px;">
  501. {lang:Asker asked 2}: {Question}</div>
  502. <div style="text-indent: 20px;">{Answer}</div>
  503. {block:IndexPage}
  504. <div class="permalink">
  505. <a href="{Permalink}">{NoteCount}</a> <a href="{ReblogURL}" target="_blank">Reblog</a></div>
  506. {/block:IndexPage}
  507. {/block:Answer}
  508. <!--Post footer (tags and notes) on displayed on permalink pages-->
  509. {block:Permalink}
  510. <footer class="details">
  511. {block:HasTags}
  512. <ul id="tags">
  513. {block:Tags}<li> <a href="{TagURL}">#{Tag}</a> </li>{/block:Tags}
  514. </ul>
  515. <br>
  516. {/block:HasTags}
  517. {block:PostNotes}
  518. <div id="notes">
  519. {PostNotes}
  520. </div>
  521. {/block:PostNotes}
  522. </footer>
  523. {/block:Permalink}
  524. </article>
  525. {/block:Posts}
  526. <!--Close of article-->
  527. </div>
  528. <!--Pagination: previous/next page links-->
  529. {block:Pagination}
  530. <div class="pagination">
  531. {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
  532. {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
  533. </div>
  534. {/block:Pagination}
  535. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  536. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  537. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  538. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  539. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  540. <!--Code for infinite scroll and grid layout-->
  541. <script>
  542. (function() {
  543. var $tumblelog = $('#content');
  544. $tumblelog.infinitescroll({
  545. navSelector : ".pagination",
  546. nextSelector : ".pagination a:first",
  547. itemSelector : "article",
  548. bufferPx : 50,
  549. done : "",
  550. loading: {
  551. finishedMsg: "<p> </p>",
  552. img : " ",
  553. msg: null,
  554. msgText: "<p> </p>"
  555. },
  556. },
  557. function( newElements ) {
  558. var $newElems = $( newElements ).css({ opacity: 0 });
  559. $newElems.imagesLoaded(function(){
  560. $newElems.animate({ opacity: 1 });
  561. $tumblelog.masonry( 'appended', $newElems);
  562. });
  563. }
  564. );
  565. $tumblelog.imagesLoaded( function(){
  566. $tumblelog.masonry({
  567. columnWidth: function( containerWidth ) {
  568. return containerWidth / 100;
  569. }
  570. });
  571. });
  572. })();
  573. </script>
  574. <div class="copyright"><a href="http://dontbrag.tumblr.com">&copy;
  575. </a></div>
  576. </body>
  577. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!