SHARE
TWEET

popsicle v2 theme 005

a guest Jul 5th, 2015 2,227 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.  
  3. POPSICLE THEME V2 by VIPERCUTE!
  4.  
  5. All theme rules apply, you probably know them already.
  6. [x] dont steal
  7. [x] dont redistribute
  8. [x] dont use as a base code
  9. [x] dont remove creds
  10.  
  11. I have the CC badge on my page if you don't believe me
  12.  
  13. -->
  14.  
  15. <head>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Oswald|Pacifico|Kristi' rel='stylesheet' type='text/css'></script>
  25.  
  26. <link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  27.  
  28. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  29.  
  30. {block:IndexPage}
  31.  <script type="text/javascript"
  32. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  33.  
  34. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  35.  
  36. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  37. <script type="text/javascript">
  38. $(window).load(function () {
  39. var $content = $('#content');
  40. $content.masonry({itemSelector: '.entry'}),
  41. $content.infinitescroll({
  42. navSelector : 'div#pagination',
  43. nextSelector : 'div#pagination a#nextPage',
  44. itemSelector : '.entry',
  45. loading: {
  46. finishedMsg: '',
  47.  
  48. },
  49. bufferPx : 600,
  50. debug : false,
  51. },
  52. // call masonry as a callback.
  53. function( newElements ) {
  54. var $newElems = $( newElements );
  55. $newElems.hide();
  56. // ensure that images load before adding to masonry layout
  57. $newElems.imagesLoaded(function(){
  58. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );});});});</script>
  59. {/block:IndexPage}
  60.  
  61. <meta name="color:background" content="#f7f7f7" />
  62. <meta name="color:header" content="#ffffff" />
  63. <meta name="color:text" content="#000" />
  64. <meta name="color:title" content="#000" />
  65. <meta name="color:link" content="#828282" />
  66. <meta name="color:link hover" content="#86d08b" />
  67. <meta name="color:post background" content="#ffffff" />
  68. <meta name="color:scrollbar" content="#a3a3a3" />
  69.  
  70. <meta name="if:show captions" content="0">
  71. <meta name="if:show banner" content="0">
  72. <meta name="if:show shadows" content="1">
  73. <meta name="if:show search" content="1">
  74. <meta name="if:rounded corners" content="1">
  75. <meta name="if:title font one" content="0">
  76. <meta name="if:title font two" content="0">
  77. <meta name="if:title font three" content="0">
  78.  
  79. <meta name="text:home" content="Home">
  80. <meta name="text:message" content="Message">
  81. <meta name="text:archive" content="Archive">
  82.  
  83. <meta name="image:banner" content="" />
  84. <meta name="image:background" content="" />
  85.  
  86. <style type="text/css">
  87.  
  88.  
  89. ::-webkit-scrollbar {width: 8px; height: 0px; background:{color:background};}
  90. ::-webkit-scrollbar-thumb {background: {color:scrollbar};}
  91.  
  92. iframe#tumblr_controls {position:fixed; z-index:9999999999; top: 3px !Important; margin: 0 0 0 0; right:4px; -webkit-filter: invert(100%);}
  93.  
  94. body {
  95. background-color: {color:background};
  96. background-image:url("https://media4.giphy.com/media/IHXBDXnTxz9PG/200_s.gif");
  97. background-attachment: fixed;
  98. background-repeat: repeat;
  99. font-size:12px;
  100. font-family:Karla;
  101. line-height:14px;
  102. text-transform:none;
  103. color: {color:text};
  104. }
  105.  
  106. #header{
  107. position:fixed;
  108. top:0px;
  109. width:100%;
  110. height:80px;
  111. left:0px;
  112. text-align:left;
  113. background-color:{color:header};
  114. {block:ifshowshadows}box-shadow:0px 1px 3px rgba(0,0,0,.1);{/block:ifshowshadows}
  115. z-index:99;
  116. }
  117.  
  118. .blogtitle{
  119. padding-left:60px;
  120. padding-right:10px;
  121. line-height:80px;
  122. font-size:24px;
  123. color: {color:title};
  124. cursor:pointer;
  125. {block:iftitlefontone}
  126. font-family: Oswald;
  127. font-size:30px;
  128. line-height:75px;
  129. {/block:iftitlefontone}
  130. {block:iftitlefonttwo}
  131. font-family: Kristi;
  132. font-size:45px;
  133. {/block:iftitlefonttwo}
  134. {block:iftitlefontthree}
  135. font-family: Pacifico;
  136. font-size:32px;
  137. line-height:75px;
  138. {/block:iftitlefontthree}
  139. }
  140. .blogtitle img{
  141. margin-top:2px;
  142. }
  143. .down img{
  144. {block:ifshowbanner}
  145. position:absolute;
  146. top:30px;
  147. {/block:ifshowbanner}
  148. padding-left:10px;    
  149. }
  150. {block:ifshowbanner}
  151. .nav{
  152. position:absolute;
  153. line-height:80px;
  154. margin-left:30px;
  155. }
  156. {/block:ifshowbanner}
  157. .nav li{
  158. display:inline;
  159. margin-left:30px;
  160. font-size:14px;
  161. text-transform:none;
  162. list-type:none;
  163. color:{color:link};
  164. -webkit-transition: all 0.1s linear;
  165. -webkit-transition: all 0.1s linear;
  166. -moz-transition: all 0.1s linear;
  167. transition: all 0.1s linear;
  168. }
  169. .nav li:hover{
  170. color:{color:link hover};
  171. -webkit-transition: all 0.1s linear;
  172. -webkit-transition: all 0.1s linear;
  173. -moz-transition: all 0.1s linear;
  174. transition: all 0.1s linear;
  175. }
  176.  
  177. #description{
  178. position:fixed;    
  179. top:100px;
  180. width:280px;
  181. height:auto;
  182. padding:15px;
  183. left:40px;
  184. text-align:left;
  185. background-color:{color:header};
  186. {block:ifshowshadows}box-shadow:0px 1px 3px rgba(0,0,0,.1);{/block:ifshowshadows}
  187. z-index:999;
  188. display:none;
  189. }
  190.  
  191. #maker{
  192. float:right;
  193. position:fixed;
  194. bottom:5px;
  195. right:5px;
  196. padding:7px;
  197. font-size:8px;
  198. text-align:center;
  199. line-height:210%;
  200. text-transform:uppercase;
  201. }
  202.  
  203. #maker a{
  204. padding:7px;
  205. color:#000;
  206. -webkit-transition: all 0.5s ease;
  207. -moz-transition: all 0.5s ease;
  208. transition: all 0.5s ease;
  209. }
  210.  
  211. #maker a:hover{
  212.     transform: rotate(360deg);
  213. -ms-transform: rotate(360deg);
  214. -webkit-transform: rotate(360deg);
  215. -o-transform: rotate(360deg);
  216. -moz-transform: rotate(360deg);
  217.     -webkit-transition: all 0.5s ease;
  218. -moz-transition: all 0.5s ease;
  219. transition: all 0.5s ease;
  220. color:#000;
  221. padding:7px;
  222. background-color:{color:bg};
  223. }
  224.  
  225.  
  226. .triangle{
  227. position:absolute;
  228. top:-15px;
  229. left:20px;
  230. width: 0px;
  231. height: 0px;
  232. border-style: solid;
  233. border-width: 0 12px 15px 12px;
  234. border-color: transparent transparent {color:header} transparent;
  235. }
  236.  
  237. .answer{
  238. width:90%;
  239. padding:5%;
  240. }
  241. .answer img {
  242. width:100%;
  243. height:auto;
  244. {block:permalinkpage}
  245. width:auto;
  246. height:auto;
  247. {/block:permalinkpage}
  248. }
  249.  
  250. a {
  251. text-decoration:none;
  252. color:{color:link};
  253. }
  254.  
  255. a:link, a:active, a:visited{
  256. color: {color:link};
  257. -webkit-transition: all 0.1s linear;
  258. -webkit-transition: all 0.1s linear;
  259. -moz-transition: all 0.1s linear;
  260. transition: all 0.1s linear;
  261. }
  262.  
  263. a:hover{    
  264. color: {color:link hover};
  265. -webkit-transition: all 0.1s linear;
  266. -webkit-transition: all 0.1s linear;
  267. -moz-transition: all 0.1s linear;
  268. transition: all 0.1s linear;
  269. }
  270.  
  271. #content {
  272. width: 100%;
  273. margin-left:40px;
  274. margin-top:100px;
  275. position: absolute;
  276. }
  277.  
  278. .entry{
  279. margin:10px;
  280. border:15px solid {color:post background};
  281. {block:ifroundedcorners}border-radius:3px;{/block:ifroundedcorners}
  282. {block:ifshowshadows}box-shadow:0px 1px 3px rgba(0,0,0,.1);{/block:ifshowshadows}
  283. height:auto;
  284. background-color: {color:post background};
  285. {block:IndexPage}
  286. width:20%;
  287. {block:iftwocolumns}
  288. width:46%;
  289. {/block:iftwocolumns}
  290. overflow:hidden;
  291. {/block:IndexPage}
  292. {block:PermalinkPage}
  293. width:450px;
  294. height:auto;
  295. {/block:PermalinkPage}
  296. }
  297.  
  298. .title{
  299. font-size:18px;
  300. line-height:20px;
  301. text-transform:none;
  302. color: {color:text};
  303. }
  304.  
  305. blockquote{
  306. padding:0px 0px 0px 3px;
  307. margin:0px 0px 0px 2px;
  308. border-left: 2px solid #ddd;
  309. }
  310.  
  311. .like_and_reblog_buttons {
  312. position:absolute;
  313. top:5px;
  314. left:-25px;
  315. list-style: none;
  316. opacity:0;
  317. -webkit-transition: all 0.2s linear;
  318. -webkit-transition: all 0.2s linear;
  319. -moz-transition: all 0.2s linear;
  320. transition: all 0.2s linear;
  321. }
  322. .entry:hover .like_and_reblog_buttons{
  323. top:0px;    
  324. opacity:1;
  325. -webkit-transition: all 0.2s linear;
  326. -webkit-transition: all 0.2s linear;
  327. -moz-transition: all 0.2s linear;
  328. transition: all 0.2s linear;
  329. }
  330.  
  331. .like_and_reblog_buttons li {
  332. float: left;
  333. background-color:rgba(0,0,0,.1);
  334. border-radius:100%;
  335. padding:10px;
  336. height:14px;
  337. width:14px;
  338. }
  339.  
  340. .like_and_reblog_buttons li:first-child {
  341. margin-right:8px;
  342. }
  343.  
  344. .textbuttons ul{
  345. list-style:none;
  346. position:relative;
  347. }
  348. .textbuttons li {
  349. list-style:None;    
  350. float: right;
  351. margin-top:7px;
  352. }
  353. .textbuttons li:first-child {
  354. margin-left:12px;
  355. }
  356.  
  357. .textnote{
  358. position:absolute;
  359. margin-left:0px;
  360. bottom:5px;
  361. font-weight:700;
  362. font-family:arial;
  363. }
  364. .textnote a{
  365. font-size:11px;    
  366. color:#a3a3a3;
  367. }
  368.  
  369. .caption{
  370. background:{color:post background};
  371. margin-top:-3px;
  372. {block:ifroundedcorners}border-bottom-left-radius:3px;border-bottom-right-radius:3px;{/block:ifroundedcorners}
  373. }
  374.  
  375. .speclink{
  376. word-spacing:1px;
  377. }
  378.  
  379. .notess1{
  380. position:absolute;
  381. top:10px;
  382. left:510px;
  383. width:450px;
  384. padding:15px;
  385. {block:ifroundedcorners}border-radius:3px;{/block:ifroundedcorners}
  386. {block:ifshowshadows}box-shadow:0px 1px 3px rgba(0,0,0,.1);{/block:ifshowshadows}  
  387. background:{color:post background};
  388. height:auto;
  389. overflow-y:auto;
  390. }
  391. .notess2{
  392. position:absolute;
  393. top:105px;
  394. left:510px;
  395. width:450px;
  396. padding:15px;
  397. {block:ifroundedcorners}border-radius:3px;{/block:ifroundedcorners}
  398. {block:ifshowshadows}box-shadow:0px 1px 3px rgba(0,0,0,.1);{/block:ifshowshadows}  
  399. background:{color:post background};
  400. max-height:400px;
  401. overflow-y:auto;
  402. }
  403. .notess2 li{
  404. list-style-type:none;
  405. margin-left:-40px;
  406. line-height:40px;
  407. font-size:13px;
  408. }
  409.  
  410. .chat ul{
  411. list-style:none;
  412. margin-left:-40px;
  413. }
  414. .chat li{
  415. list-style:none;
  416. margin-left:-40px;
  417. border-bottom:1px solid #dddddd;
  418. padding-top:5px;
  419. padding-bottom:5px;
  420. }    
  421.  
  422. .label{
  423. font-family:arial;    
  424. font-weight:700;
  425. }
  426.  
  427. .play{
  428. position:absolute;
  429. left:50%;
  430. margin-left:-24px;
  431. top:50%;
  432. margin-top:-42px;
  433. border:10px solid white;  
  434. height:27px;
  435. width:27px;
  436. border-radius:100%;
  437. overflow:hidden;
  438. }
  439.  
  440. .search{
  441. position:absolute;
  442. top:35px;
  443. right:5px;
  444. }
  445. .stype{
  446. background:white;
  447. box-shadow:none;
  448. border:none;
  449. font-family:pt sans;
  450. padding-bottom:1px;
  451. border:1px solid rgba(0,0,0,.1);
  452. padding:3px;
  453. padding-top:4px;
  454. }    
  455. .stype:focus{
  456. outline:none;
  457. }
  458. .ssubmit{
  459. box-shadow:none;
  460. background:{color:link hover};
  461. border:none;
  462. color:white;
  463. font-weight:600;
  464. padding:5px;
  465. padding-bottom:3px;
  466. text-transform:uppercase;
  467. font-family:pt sans;
  468. cursor:pointer;
  469. }
  470.  
  471. {CustomCSS}
  472. </style>
  473.  
  474. <title>{title}</title>
  475.  
  476. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  477.  
  478. </head>
  479. <body>
  480.  
  481. <script type="text/javascript">
  482. $(document).ready(function(){
  483.     $("#description").hide(0);
  484.   $(".blogtitle").click(function(){
  485.     $("#description").slideToggle(300);
  486.   });
  487. });
  488. </script>
  489.  
  490. <div id="header">
  491. <span class="blogtitle">{block:ifshowbanner}<img src="{image:banner}" height="75px">{/block:ifshowbanner} {block:ifnotshowbanner}{Title}{/block:ifnotshowbanner} <span class="down">{block:ifnotwhitearrowbutton}<img src="http://www.iconsdb.com/icons/download/black/arrow-204-16.png">{/block:ifnotwhitearrowbutton}{block:ifwhitearrowbutton}<img src="http://www.iconsdb.com/icons/download/white/arrow-204-16.png">{/block:ifwhitearrowbutton}</span></span>
  492. <span class="nav">
  493. <a href="/"><li>{text:home}</li></a>
  494. <a href="/ask"><li>{text:message}</li></a>
  495. <a href="/archive"><li>{text:archive}</li></a>
  496. {block:HasPages}{block:Pages}<a href="{URL}"><span class="speclink"><li>{Label}</li></span></a> {/block:Pages}{/block:HasPages}
  497.  
  498. </span>
  499. {block:ifshowsearch}
  500. <div class="search">
  501. <form onsubmit="return tagSearch(this)">
  502.     <input type="text" name="tag" class="stype" placeholder="Search Site" onfocus="if (this.value == '{text:Search Label}') {this.value=''}" onblur="if (this.value == '') {this.value='{text:Search Label}'}" />
  503.     <input type="submit" value="Search" class="ssubmit"/>
  504. </form>
  505. </div>
  506. {/block:ifshowsearch}
  507. </div>
  508.  
  509. <div id="description">
  510. <div class="triangle"></div>
  511. {Description}
  512. </div>
  513.  
  514.  
  515. <div id="content">
  516. {block:Posts}
  517. <div class="entry">
  518.  
  519. {block:Text}
  520. <div class="answer">{block:Title}<span class="title">{Title}</span>{/block:Title}{Body}
  521. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  522. <ul class="textbuttons">
  523. <li>{ReblogButton color="gray" size=14}</li>
  524. <li>{LikeButton color="gray" size=14}</li>
  525. </ul><br>
  526. {/block:IndexPage}
  527. </div>
  528. {/block:Text}
  529.  
  530. {block:Link}
  531. <div class="answer"><a href="{URL}"><span class="title">{Name}</span></a>
  532. {block:Description}{Description}{/block:Description}
  533. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  534. <ul class="textbuttons">
  535. <li>{ReblogButton color="gray" size=14}</li>
  536. <li>{LikeButton color="gray" size=14}</li>
  537. </ul><br>
  538. {/block:IndexPage}
  539. </div>
  540. {block:Link}
  541.  
  542. {block:Photo}
  543. {block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=100%/></a></div>{LinkCloseTag}
  544. <ul class="like_and_reblog_buttons">
  545. <li>{ReblogButton color="white" size=14}</li>
  546. <li>{LikeButton color="white" size=14}</li>
  547. </ul>
  548. {block:ifshowcaptions}<div class="caption">{block:Caption}{Caption}{/block:caption}</div>{/block:ifshowcaptions}
  549. {/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=100%/>{LinkCloseTag}
  550. <div class="caption">{block:Caption}{Caption}{/block:caption}</div>
  551. {/block:PermalinkPage}
  552. {/block:Photo}
  553.  
  554. {block:Photoset}
  555. <center>
  556. {block:IndexPage}{Photoset-250}
  557. {block:Caption}{Caption}{/block:Caption}{/block:IndexPage}
  558. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  559. </center>
  560. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  561. <ul class="textbuttons">
  562. <li>{ReblogButton color="gray" size=14}</li>
  563. <li>{LikeButton color="gray" size=14}</li>
  564. </ul><br>
  565. {/block:IndexPage}
  566. {/block:Photoset}
  567.  
  568. {block:Quote}
  569. <div class="answer"><div class="title">{Quote}</div>- {Source}
  570. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  571. <ul class="textbuttons">
  572. <li>{ReblogButton color="gray" size=14}</li>
  573. <li>{LikeButton color="gray" size=14}</li>
  574. </ul><br>
  575. {/block:IndexPage}
  576. </div>
  577. {/block:Quote}
  578.  
  579. {block:Chat}
  580. <div class="answer">
  581. <div style="margin-left:3px;">
  582. {block:Title}<span class="title">{Title}</span>{/block:Title}
  583. <ul class="chat">
  584. {block:Lines}
  585. <li class="user_{UserNumber}">
  586. {block:Label}
  587. <span class="label">{Label}</span>
  588. {/block:Label}
  589. {Line}
  590. </li>
  591. {/block:Lines}
  592. </ul>
  593. </div>
  594. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  595. <ul class="textbuttons">
  596. <li>{ReblogButton color="gray" size=14}</li>
  597. <li>{LikeButton color="gray" size=14}</li>
  598. </ul><br>
  599. {/block:IndexPage}
  600. </div>
  601. {/block:Chat}
  602.  
  603. {block:Audio}
  604. {block:AlbumArt}
  605. <center><a href="{Permalink}"><img src="{AlbumArtURL}" width="100%"></a></center>
  606. {/block:AlbumArt}
  607. <div class="play">{AudioPlayerWhite}</div>
  608. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  609. {/block:IndexPage}
  610. {/block:Audio}
  611.  
  612. {block:Answer}
  613. <div class="answer"><div style="font-size:11px;line-height:11px;font-style:italic;color:{color:links}"><i>{Asker} asked:</i></div><br><span class="title">{Question}</span><hr color={color:title}>{Answer}
  614. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  615. <ul class="textbuttons">
  616. <li>{ReblogButton color="gray" size=14}</li>
  617. <li>{LikeButton color="gray" size=14}</li>
  618. </ul><br>
  619. {/block:IndexPage}
  620. </div>
  621. {/block:Answer}
  622.  
  623. {block:Video}
  624. {block:IndexPage}
  625. <center>
  626. {Video-250}
  627. {block:Caption}{Caption}{/block:Caption}</center>
  628. {block:IndexPage}<div class="textnote"><a href="{Permalink}">{NoteCountwithLabel}</a></div>
  629. <ul class="textbuttons">
  630. <li>{ReblogButton color="gray" size=14}</li>
  631. <li>{LikeButton color="gray" size=14}</li>
  632. </ul><br>
  633. {/block:IndexPage}
  634. {/block:IndexPage}
  635. {block:PermalinkPage}
  636. <center>
  637. {Video-500}</center>
  638. {/block:PermalinkPage}
  639. {block:Video}
  640.  
  641. {block:PostNotes}
  642. <div class="notess1"><span class="title">Share this post</span><br><!-- AddThis Button BEGIN -->
  643. <div class="addthis_toolbox addthis_default_style ">
  644. <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
  645. <a class="addthis_button_tweet"></a>
  646. <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
  647. <a class="addthis_counter addthis_pill_style"></a>
  648. </div>
  649. <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-525054fe20c6e26c"></script>
  650. <!-- AddThis Button END --></div>
  651. <div class="notess2"><span class="title">{NoteCount} Notes</span><br>{PostNotes}</div>
  652. {/block:PostNotes}
  653.  
  654. </div>
  655.  
  656. {/block:Posts}
  657.  
  658. {block:IndexPage}
  659. {block:Pagination}
  660. <div id="pagination">
  661. {block:NextPage}
  662. <a id="nextPage" href="{NextPage}"></a>
  663. {/block:NextPage}
  664. {block:PreviousPage}
  665. <a href="{PreviousPage}"></a>
  666. {/block:PreviousPage}
  667. </div>
  668. {/block:Pagination}
  669. {/block:IndexPage}
  670. </div>
  671.  
  672.  <div id="maker"><a href="http://vipercute.tumblr.com">THEME♥</a></div></center>
  673.  
  674. </body>
  675. </html>
RAW Paste Data
Top