API tools faq
paste
Advertisement
Katting

Succulent Theme

Katting
Dec 4th, 2016
1,183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <!-----------------------------------------------------------------------
  7.  
  8. ***PLEASE READ THIS AS IT CONTAINS IMPORTANT INFO***
  9.  
  10. Feline Themes Presents: Succulent Theme
  11.  
  12. This theme has a ton of different customization options that you can mix and match! Just play around with the switches and colors until you get something you like!
  13.  
  14. You may make as many cosmetic changes as you'd like to this theme such as changing fonts, colors, and simple stuff like that. You may also replace the updates tab if the included one doesn't suit your needs. *I'll be releasing an extended version of the included updates tab as well.* Just please don't make this theme look like an entirely new theme.
  15.  
  16. Do not use as a base code! And do not reupload this theme as your own, no matter how much you edit it, and keep both credit links intact.
  17.  
  18. You may look at my coding to see how I did certain things, but please don't copy and paste and of the CSS/HTML.
  19.  
  20.  
  21.  
  22. *FONTS AND COLORS USED*
  23.  
  24. -All colors are easily editable with the customize theme settings.
  25.  
  26. FONTS [All fonts are from dafont.com, I did not make any of them]
  27.  
  28. -Neou ['neouthin']
  29. -Dolce Vita ['dolce_vita_lightsuper_light']
  30. -Caviar Dreams ['caviar_dreamsregular']
  31.  
  32. You may switch these fonts out if needed for your desired look.
  33.  
  34.  
  35.  
  36. *OTHER INFO*
  37.  
  38. -I have tested the following post types: Text, Photos/Photosets, Quotes, Asks, Videos, Chats. I didn't really touch the audio posts as I don't see them used often.
  39.  
  40. -Popup script included for the popup ask! If you get new popups you may need to add .popup_block2, ect. But you won't need to add the script in here.
  41.  
  42.  
  43. Enjoy and let me know if you use it so I can see! :)
  44.  
  45.  
  46. © Feline Themes 2016
  47.  
  48. ------------------------------------------------------------------------>
  49.  
  50.  
  51. <meta name="color:Background" content="#ffffff"/>
  52. <meta name="color:Posts" content="#ffffff"/>
  53. <meta name="color:Color 1" content="#95a88d"/>
  54. <meta name="color:Color 2" content="#5f6d59"/>
  55. <meta name="color:Color 3" content="#e7e5df"/>
  56. <meta name="color:Color 4" content="#a8a6a0"/>
  57.  
  58. <meta name="color:Font Color" content="#000000"/>
  59. <meta name="text:Font Size" content="10px"/>
  60. <meta name="text:Title Font Size" content="25px"/>
  61.  
  62. <meta name="text:Link 3 URL" content="/linkthree"/>
  63. <meta name="text:Link 3" content="Link 3"/>
  64. <meta name="text:Link 4 URL" content="/linkfour"/>
  65. <meta name="text:Link 4" content="Link 4"/>
  66.  
  67. <meta name="if:Popup Ask" content="1"/>
  68. <meta name="text:Popup Ask Title" content="Ask Away!"/>
  69.  
  70. <meta name="if:Border Style" content="1"/>
  71. <meta name="if:Left Or Right Sidebar" content="0"/>
  72. <meta name="if:Top Or Bottom Sidebar" content="0"/>
  73. <meta name="if:Three Columns" content="0"/>
  74. <meta name="if:Bold Post Borders" content="1"/>
  75. <meta name="if:Alternating Post Borders" content="1"/>
  76.  
  77. <meta name="if:Updates Tab" content="1"/>
  78. <meta name="text:Tab One Title" content="Updates"/>
  79. <meta name="text:Tab One Contents" content="This is your updates tab. Do whatever with this space as you wish if you use! This version of this updates tab is basic so anyone can get it set up, but I'll be releasing a more detailed version of this updates tab as well. :)"/>
  80. <meta name="text:Tab Two Title" content="Stats"/>
  81. <meta name="text:Tab Two Contents" content="Put your stats counters in here if you'd like to! Or anything you want really!"/>
  82. <meta name="text:Tab Three Title" content="Tab Three"/>
  83. <meta name="text:Tab Three Contents" content="If you wanna get detailed with this updates tab, I've made sure it was pretty easy to find when you go to edit your HTML. You may also wanna be on the lookout for the extended version of this updates tab.:)"/>
  84.  
  85.  
  86. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!-- jQuery, you only need ONE of these libraries! -->
  87.  
  88. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <!-- Style My Tooltips-->
  89.  
  90. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script> <!--- Infinite Scroll--->
  91.  
  92. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script> <!--- Masonry --->
  93.  
  94. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script> <!-- Images Loaded -->
  95.  
  96. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script> <!-- PXU -->
  97.  
  98. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/> <!--- PXU Styling --->
  99.  
  100. <script src="//static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script> <!-- Unnest Caption -->
  101.  
  102. <script type="text/javascript" src="//static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script> <!--- To Top Button ---->
  103.  
  104.  
  105. <link href="http://static.tumblr.com/dq6g0mp/MOTohk3d4/stylesheet.css" rel="stylesheet">
  106.  
  107. <link rel="stylesheet" href="http://static.tumblr.com/dq6g0mp/o5uohhrvv/neou.css">
  108.  
  109. <link href="http://static.tumblr.com/dq6g0mp/UAVocwhan/caviar.css" rel="stylesheet">
  110.  
  111. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!--font awesome icons-->
  112.  
  113.  
  114. <!--------------Popup Boxes Needed Script--------------->
  115. <script>
  116. $(document).ready(function() {
  117. //
  118. $('a.poplight[href^=#]').click(function() {
  119. var popID = $(this).attr('rel'); //Get Popup Name
  120. var popURL = $(this).attr('href'); //Get Popup href to define size
  121. var query= popURL.split('?');
  122. var dim= query[1].split('&');
  123. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  124. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://media.tumblr.com/tumblr_lngwqr5hbf1qf72le.png" class="btn_close" title="Close" alt="Close" /></a>');
  125. var popMargTop = ($('#' + popID).height() + 80) / 2;
  126. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  127. //Apply Margin to Popup
  128. $('#' + popID).css({
  129. 'margin-top' : -popMargTop,
  130. 'margin-left' : -popMargLeft
  131. });
  132. $('body').append('<div id="fade"></div>');
  133. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  134. return false;
  135. });
  136. $('a.close, #fade').live('click', function() {
  137. $('#fade , .popup_block').fadeOut(function() {
  138. $('#fade, a.close').remove(); //fade them both out
  139. });
  140. return false;
  141. });
  142. });
  143. </script>
  144.  
  145.  
  146. <!---------------End Popup Boxes Script----------------->
  147.  
  148. <style type="text/css">
  149.  
  150. /*----------------------------------------------------------------------*/
  151.  
  152. #sidebar{
  153. position:fixed;
  154. z-index:100;
  155. {block:ifTopOrBottomSidebar}
  156. top:120px;
  157. {block:ifTopOrBottomSidebar}
  158. {block:ifNotTopOrBottomSidebar}
  159. bottom:120px;
  160. {block:ifNotTopOrBottomSidebar}
  161. {block:ifNotLeftOrRightSidebar}
  162. left:6%;
  163. {/block:ifNotLeftOrRightSidebar}
  164. {block:ifLeftOrRightSidebar}
  165. right:6%;
  166. {/block:ifLeftOrRightSidebar}
  167. width:200px;
  168. text-align:center;
  169. background-color:{color:Posts};
  170. }
  171.  
  172. #blogtitle{
  173. padding:5px;
  174. background-color:{color:Color 2};
  175. font-family:'dolce_vita_lightsuper_light';
  176. font-size:{text:Title Font Size};
  177. color:{color:Posts};
  178. }
  179.  
  180. #description{
  181. padding:5px 10px 5px 10px;
  182. font-family:'neouthin';
  183. font-size:9px;
  184. color:{color:Color 2};
  185. }
  186.  
  187. #links{
  188. padding:7px;
  189. background-color:{color:Color 2};
  190. font-size:13px;
  191. color:{color:Posts};
  192. }
  193.  
  194. #links a{
  195. margin-left:2px;
  196. margin-right:2px;
  197. color:{color:Posts};
  198. }
  199.  
  200. /*----------------------------------------------------------------------*/
  201.  
  202. #updatestab{
  203. position:fixed;
  204. z-index:1000;
  205. top:30px;
  206. {block:ifLeftOrRightSidebar}
  207. {block:ifBorderStyle}
  208. left:30px;
  209. {/block:ifBorderStyle}
  210. {block:ifNotBorderStyle}
  211. left:15px;
  212. {/block:ifNotBorderStyle}
  213. {/block:ifLeftOrRightSidebar}
  214.  
  215. {block:ifNotLeftOrRightSidebar}
  216. {block:ifBorderStyle}
  217. right:25px;
  218. {/block:ifBorderStyle}
  219. {block:ifNotBorderStyle}
  220. right:15px;
  221. {/block:ifNotBorderStyle}
  222. {/block:ifNotLeftOrRightSidebar}
  223. width:25px;
  224. max-height:25px;
  225. overflow:hidden;
  226. text-align:center;
  227. -webkit-transition: all 1s ease;
  228. -moz-transition: all 1s ease;
  229. -o-transition: all 1s ease;
  230. transition: all 1s ease;
  231. -webkit-transition-delay: 1s; /* Safari */
  232. transition-delay: 1s;
  233. }
  234.  
  235. #updatestab:hover{
  236. width:200px;
  237. max-height:500px;
  238. -webkit-transition-delay: 0s; /* Safari */
  239. transition-delay: 0s;
  240. }
  241.  
  242. #tabmarker{
  243. position:absolute;
  244. {block:ifNotLeftOrRightSidebar}
  245. top:0px;
  246. left:0px;
  247. {/block:ifNotLeftOrRightSidebar}
  248. {block:ifLeftOrRightSidebar}
  249. top:0px;
  250. right:0px;
  251. {/block:ifLeftOrRightSidebar}
  252. width:25px;
  253. height:22px;
  254. padding-top:2px;
  255. padding-bottom:1px;
  256. background-color:{color:Color 2};
  257. font-size:15px;
  258. color:{color:Posts};
  259. -webkit-transition: all 1s ease;
  260. -moz-transition: all 1s ease;
  261. -o-transition: all 1s ease;
  262. transition: all 1s ease;
  263. -webkit-transition-delay: 1s; /* Safari */
  264. transition-delay: 1s;
  265. }
  266.  
  267. #updatestab:hover #tabmarker{
  268. opacity:0;
  269. -webkit-transition-delay: 0s; /* Safari */
  270. transition-delay: 0s;
  271. }
  272.  
  273. .updatestab{
  274. position:relative;
  275. padding:10px;
  276. opacity:0;
  277. -webkit-transition: all 1s ease;
  278. -moz-transition: all 1s ease;
  279. -o-transition: all 1s ease;
  280. transition: all 1s ease;
  281. }
  282.  
  283. #updatestab:hover .updatestab{
  284. opacity:1;
  285. -webkit-transition-delay: 1s; /* Safari */
  286. transition-delay: 1s;
  287. }
  288.  
  289. #tabtitle{
  290. margin-bottom:2px;
  291. padding:5px;
  292. background-color:{color:Color 2};
  293. font-family:'dolce_vita_lightsuper_light';
  294. font-size:20px;
  295. color:{color:Posts};
  296. }
  297.  
  298. #contents{
  299. margin-bottom:2px;
  300. padding:5px;
  301. background-color:{color:Posts};
  302. font-size:10px;
  303. }
  304.  
  305. /*----------------------------------------------------------------------*/
  306.  
  307. #container{
  308. position:absolute;
  309. top:30px;
  310. left:50%;
  311. transform:translateX(-50%);
  312. {block:ifThreeColumns}
  313. width:750px;
  314. {/block:ifThreeColumns}
  315. {block:ifNotThreeColumns}
  316. width:610px;
  317. {/block:ifNotThreeColumns}
  318. {block:PermalinkPage}
  319. width:610px;
  320. {/block:PermalinkPage}
  321. }
  322.  
  323. .entry{
  324. position:relative;
  325. z-index:2;
  326. {block:IndexPage}
  327. {block:ifThreeColumns}
  328. width:200px;
  329. {/block:ifThreeColumns}
  330. {block:ifNotThreeColumns}
  331. width:250px;
  332. {/block:ifNotThreeColumns}
  333. {/block:IndexPage}
  334. {block:PermalinkPage}
  335. width:500px;
  336. {block:ifBoldPostBorders}
  337. background-color:{color:Color 1};
  338. {/block:ifBoldPostBorders}
  339. {block:ifNotBoldPostBorders}
  340. border:1px solid {color:Color 1};
  341. background-color:{color:Posts};
  342. {/block:ifNotBoldPostBorders}
  343. {/block:PermalinkPage}
  344. margin:10px;
  345. padding:10px;
  346. {block:IndexPage}
  347. {block:ifNotAlternatingPostBorders}
  348. {block:ifBoldPostBorders}
  349. background-color:{color:Color 3};
  350. {/block:ifBoldPostBorders}
  351. {block:ifNotBoldPostBorders}
  352. border:1px solid {color:Color 3};
  353. background-color:{color:Posts};
  354. {/block:ifNotBoldPostBorders}
  355. {/block:ifNotAlternatingPostBorders}
  356. {block:IndexPage}
  357. text-align:justify;
  358. }
  359.  
  360.  
  361. {block:IndexPage}
  362. {block:ifAlternatingPostBorders}
  363. .postborders-even{
  364. position:absolute;
  365. z-index:-1;
  366. top:0px;
  367. bottom:0px;
  368. left:0px;
  369. right:0px;
  370. {block:ifBoldPostBorders}
  371. background-color:{color:Color 3};
  372. {/block:ifBoldPostBorders}
  373. {block:ifNotBoldPostBorders}
  374. border:1px solid {color:Color 3};
  375. background-color:{color:Posts};
  376. {/block:ifNotBoldPostBorders}
  377. }
  378.  
  379. .postborders-odd{
  380. position:absolute;
  381. z-index:-1;
  382. top:0px;
  383. bottom:0px;
  384. left:0px;
  385. right:0px;
  386. {block:ifBoldPostBorders}
  387. background-color:{color:Color 4};
  388. {/block:ifBoldPostBorders}
  389. {block:ifNotBoldPostBorders}
  390. border:1px solid {color:Color 4};
  391. background-color:{color:Posts};
  392. {/block:ifNotBoldPostBorders}
  393. }
  394. {/block:ifAlternatingPostBorders}
  395. {/block:IndexPage}
  396.  
  397. /*--Makes text posts look a little nicer--*/
  398. #textpostbody{
  399. padding:10px;
  400. background-color:{color:Posts};
  401. }
  402. /*--Makes text posts look a little nicer--*/
  403.  
  404. /*--Post permalinks--*/
  405.  
  406. #posteddate{
  407. padding:5px;
  408. text-align:right;
  409. background-color:{color:Color 2};
  410. font-size:9px;
  411. color:{color:Posts};
  412. }
  413.  
  414. #textpermalinks{
  415. padding:5px;
  416. text-align:left;
  417. background-color:{color:Color 1};
  418. font-size:9px;
  419. color:{color:Posts};
  420. }
  421.  
  422. #textpermalinks a{
  423. margin-left:5px;
  424. margin-right:5px;
  425. color:{color:Posts};
  426. }
  427. /*--Post permalinks--*/
  428.  
  429. /*--Permalinks on photo posts--*/
  430.  
  431. #photopermalinks{
  432. {block:PermalinkPage}
  433. display:none;
  434. {/block:PermalinkPage}
  435. position:absolute;
  436. z-index:15;
  437. {block:ifNotThreeColumns}
  438. width:220px;
  439. {/block:ifNotThreeColumns}
  440. {block:ifThreeColumns}
  441. width:170px;
  442. {/block:ifThreeColumns}
  443. top:50%;
  444. left:50%;
  445. transform:translate(-50%,-50%);
  446. opacity:0;
  447. text-align:center;
  448. -webkit-transition: all 1s ease;
  449. -moz-transition: all 1s ease;
  450. -o-transition: all 1s ease;
  451. transition: all 1s ease;
  452. }
  453.  
  454. .entry:hover #photopermalinks{
  455. opacity:1;
  456. }
  457.  
  458. .photopermalinks{
  459. {block:ifNotThreeColumns}
  460. margin:5px;
  461. padding:10px;
  462. {/block:ifNotThreeColumns}
  463. {block:ifThreeColumns}
  464. margin:2px;
  465. padding:5px;
  466. {/block:ifThreeColumns}
  467. background-color:{color:Posts};
  468. font-family:'neouthin';
  469. font-size:15px;
  470. color:{color:Color 1};
  471. -webkit-transition: all 1s ease;
  472. -moz-transition: all 1s ease;
  473. -o-transition: all 1s ease;
  474. transition: all 1s ease;
  475. }
  476.  
  477. .photopermalinks:hover{
  478. background-color:{color:Color 2};
  479. color:{color:Posts};
  480. }
  481.  
  482. /*--Permalinks on photo posts--*/
  483.  
  484. /*--For hover effect on photo posts--*/
  485.  
  486. #photoposts{
  487. position:relative;
  488. }
  489.  
  490. .photohovereffecttop{
  491. position:absolute;
  492. z-index:10;
  493. top:2px;
  494. left:2px;
  495. right:2px;
  496. height:35px;
  497. opacity:0;
  498. background-color:{color:Color 1};
  499. -webkit-transition: all 1s ease;
  500. -moz-transition: all 1s ease;
  501. -o-transition: all 1s ease;
  502. transition: all 1s ease;
  503. }
  504.  
  505. .photohovereffectbottom{
  506. position:absolute;
  507. z-index:10;
  508. bottom:2px;
  509. left:2px;
  510. right:2px;
  511. height:35px;
  512. opacity:0;
  513. background-color:{color:Color 1};
  514. -webkit-transition: all 1s ease;
  515. -moz-transition: all 1s ease;
  516. -o-transition: all 1s ease;
  517. transition: all 1s ease;
  518. }
  519.  
  520. .photohovereffectleft{
  521. position:absolute;
  522. z-index:10;
  523. top:37px;
  524. bottom:37px;
  525. left:2px;
  526. width:35px;
  527. opacity:0;
  528. background-color:{color:Color 1};
  529. -webkit-transition: all 1s ease;
  530. -moz-transition: all 1s ease;
  531. -o-transition: all 1s ease;
  532. transition: all 1s ease;
  533. }
  534.  
  535. .photohovereffectright{
  536. position:absolute;
  537. z-index:10;
  538. top:37px;
  539. bottom:37px;
  540. right:2px;
  541. width:35px;
  542. opacity:0;
  543. background-color:{color:Color 1};
  544. -webkit-transition: all 1s ease;
  545. -moz-transition: all 1s ease;
  546. -o-transition: all 1s ease;
  547. transition: all 1s ease;
  548. }
  549.  
  550. .photohovereffectinner1{
  551. position:absolute;
  552. z-index:10;
  553. top:38px;
  554. bottom:38px;
  555. left:38px;
  556. right:38px;
  557. opacity:0;
  558. border:2px solid {color:Posts};
  559. -webkit-transition: all 1s ease;
  560. -moz-transition: all 1s ease;
  561. -o-transition: all 1s ease;
  562. transition: all 1s ease;
  563. }
  564.  
  565. .photohovereffectinner2{
  566. position:absolute;
  567. z-index:10;
  568. top:41px;
  569. bottom:41px;
  570. left:41px;
  571. right:41px;
  572. opacity:0;
  573. background-color:{color:Color 1};
  574. -webkit-transition: all 1s ease;
  575. -moz-transition: all 1s ease;
  576. -o-transition: all 1s ease;
  577. transition: all 1s ease;
  578. }
  579.  
  580. .photohovereffect{
  581. position:absolute;
  582. top:0px;
  583. bottom:0px;
  584. left:0px;
  585. right:0px;
  586. opacity:0;
  587. background-color:{color:Posts};
  588. -webkit-transition: all 1s ease;
  589. -moz-transition: all 1s ease;
  590. -o-transition: all 1s ease;
  591. transition: all 1s ease;
  592. }
  593.  
  594. .entry:hover .photohovereffecttop{
  595. opacity:0.9;
  596. }
  597.  
  598. .entry:hover .photohovereffectbottom{
  599. opacity:0.9;
  600. }
  601.  
  602. .entry:hover .photohovereffectleft{
  603. opacity:0.9;
  604. }
  605.  
  606. .entry:hover .photohovereffectright{
  607. opacity:0.9;
  608. }
  609.  
  610. .entry:hover .photohovereffectinner1{
  611. opacity:1;
  612. }
  613.  
  614. .entry:hover .photohovereffectinner2{
  615. opacity:0.9;
  616. }
  617.  
  618. .entry:hover .photohovereffect{
  619. opacity:0.6;
  620. }
  621.  
  622. /*--For hover effects on photo posts--*/
  623.  
  624. /*--For quote posts--*/
  625.  
  626. blockquote{
  627. margin:0px;
  628. text-align:left;
  629. font-family:'neouthin';
  630. font-size:20px;
  631. }
  632.  
  633. #source{
  634. margin-top:5px;
  635. text-align:right;
  636. font-size:9px;
  637. }
  638.  
  639. /*--For quote posts--*/
  640.  
  641. /*--For the link in link posts--*/
  642.  
  643. #link{
  644. padding:10px;
  645. background-color:{color:Color 1};
  646. text-align:center;
  647. font-family:'dolce_vita_lightsuper_light';
  648. font-size:30px;
  649. color:{color:Posts};
  650. -webkit-transition: all 1s ease;
  651. -moz-transition: all 1s ease;
  652. -o-transition: all 1s ease;
  653. transition: all 1s ease;
  654. }
  655.  
  656. #link:hover{
  657. background-color:{color:Posts};
  658. color:{color:Color 1};
  659. }
  660.  
  661. /*--For the link in link posts--*/
  662.  
  663. /*--For the lines of chat posts--*/
  664.  
  665. .odd{
  666. padding-top:5px;
  667. padding-bottom:5px;
  668. padding-left:15px;
  669. padding-right:15px;
  670. background-color:{color:Posts};
  671. color:{color:Color 2};
  672. }
  673.  
  674. .even{
  675. padding-top:5px;
  676. padding-bottom:5px;
  677. padding-left:15px;
  678. padding-right:15px;
  679. background-color:{color:Color 1};
  680. color:{color:Posts};
  681. }
  682.  
  683. /*--For the lines of chat posts--*/
  684.  
  685. /*--The question part of answer posts--*/
  686.  
  687. .question{
  688. padding:10px;
  689. background-color:{color:Color 2};
  690. color:{color:Posts};
  691. }
  692.  
  693. .theasker{
  694. font-family:'neouthin';
  695. font-size:14px;
  696. }
  697.  
  698. .theasker img{
  699. margin-right:5px;
  700. width:35px;
  701. height:35px;
  702. border-radius:90px;
  703. }
  704.  
  705. .asked{
  706. margin-top:5px;
  707. padding:10px;
  708. background-color:{color:Color 1};
  709. }
  710.  
  711. /*--The question part of answer posts--*/
  712.  
  713. /*--The answer part of answer posts--*/
  714.  
  715. .replies{
  716. margin-top:5px;
  717. margin-bottom:5px;
  718. padding:5px 20px 5px 20px;
  719. background-color:{color:Color 1};
  720. }
  721.  
  722. .replies a{
  723. color:{color:Posts};
  724. }
  725.  
  726. /*--The answer part of answer posts--*/
  727.  
  728. /*--Permalink page--*/
  729.  
  730. .caption{
  731. margin-top:10px;
  732. padding:10px;
  733. {block:ifNotBoldPostBorders}
  734. border:1px solid {color:Color 1};
  735. {/block:ifNotBoldPostBorders}
  736. background-color:{color:Posts};
  737. overflow-y:auto;
  738. }
  739.  
  740. .tumblr_parent {
  741. margin:0px 0px 5px 0px;
  742. }
  743.  
  744. .tumblr_avatar{
  745. display:none;
  746. }
  747.  
  748. ol.notes{
  749. margin-bottom:0px;
  750. height:300px;
  751. padding:5px;
  752. overflow-y:auto;
  753. list-style-type:none;
  754. {block:ifNotBoldPostBorders}
  755. border:1px solid {color:Color 1};
  756. {/block:ifNotBoldPostBorders}
  757. background-color:{color:Posts};
  758. }
  759.  
  760. ol.notes img.avatar {
  761. margin-right:5px;
  762. width:18px;
  763. height:18px;
  764. border-radius:90px;
  765. }
  766.  
  767. ol.notes blockquote{
  768. margin-top:2px;
  769. margin-bottom:2px;
  770. font-family:'caviar_dreamsregular';
  771. font-size:{text:Font Size};
  772. }
  773.  
  774. /*--Permalink Page--*/
  775.  
  776. .tumblr_audio_player {
  777. {block:IndexPage}
  778. width: 250px;
  779. {/block:IndexPage}
  780. {block:PermalinkPage}
  781. width:500px;
  782. {/block:PermalinkPage}
  783. height: 100px;
  784. overflow: hidden;
  785. position: relative;
  786. z-index: 1000;
  787. }
  788.  
  789. /*makes images in texts posts stay in the box*/
  790. iframe, img, embed, object, video {
  791. max-width: 100%;
  792. }
  793.  
  794. img {
  795. vertical-align:middle;
  796. height: auto;
  797. width: auto;
  798. }
  799.  
  800. /*----------------------------------------------------------------------*/
  801. {block:ifBorderStyle}
  802. #s1right, #s1left1, #s1left2{
  803. position:fixed;
  804. top:0px;
  805. bottom:0px;
  806. background-color:{color:Color 1};
  807. }
  808.  
  809. #s1right{
  810. right:0px;
  811. width:15px;
  812. border-left:4px double {color:Posts};
  813. }
  814.  
  815. #s1left1{
  816. left:0px;
  817. width:15px;
  818. border-right:1px solid {color:Posts};
  819. }
  820.  
  821. #s1left2{
  822. left:16px;
  823. width:5px;
  824. border-right:5px double {color:Posts};
  825. }
  826. {/block:ifBorderStyle}
  827.  
  828.  
  829. {block:ifNotBorderStyle}
  830. #s2top1, #s2top2, #s2bottom1, #s2bottom2, #s2left1, #s2left2, #s2right1, #s2right2{
  831. position:fixed;
  832. z-index:9000000000;
  833. background-color:{color:Color 1};
  834. }
  835.  
  836. #s2top1, #s2bottom1{
  837. left:0px;
  838. right:0px;
  839. height:4px;
  840. }
  841.  
  842.  
  843. #s2top2, #s2bottom2{
  844. left:0px;
  845. right:0px;
  846. height:2px;
  847. }
  848.  
  849. #s2top1{
  850. top:0px;
  851. border-bottom:1px solid {color:Posts};
  852. }
  853.  
  854. #s2top2{
  855. top:5px;
  856. border-bottom:1px solid {color:Posts};
  857. }
  858.  
  859.  
  860. #s2bottom1{
  861. border-top:1px solid {color:Posts};
  862. bottom:0px;
  863. }
  864.  
  865. #s2bottom2{
  866. bottom:5px;
  867. border-top:1px solid {color:Posts};
  868. }
  869.  
  870. #s2left1, #s2right1{
  871. top:0px;
  872. bottom:0px;
  873. width:5px;
  874. }
  875.  
  876. #s2left2, #s2right1{
  877. top:0px;
  878. bottom:0px;
  879. width:2px;
  880. }
  881.  
  882. #s2left1{
  883. border-right:1px solid {color:Posts};
  884. left:0px;
  885. }
  886.  
  887. #s2left2{
  888. left:6px;
  889. border-right:1px solid {color:Posts};
  890. }
  891.  
  892. #s2right1{
  893. right:0px;
  894. border-left:1px solid {color:Posts};
  895. }
  896.  
  897. {/block:ifNotBorderStyle}
  898.  
  899. /*----------------------------------------------------------------------*/
  900.  
  901. #fade { /*--Transparent background layer on pop-ups--*/
  902. display: none; /*--hidden by default--*/
  903. background: {color:Background};
  904. position: fixed;
  905. left: 0;
  906. top: 0;
  907. width: 100%;
  908. height: 100%;
  909. opacity: 1;
  910. z-index: 999900;
  911. }
  912.  
  913. img.btn_close {
  914. display:none;
  915. }
  916.  
  917. /*--Making IE6 Understand Fixed Positioning--*/
  918. *html #fade {
  919. position: absolute;
  920. }
  921.  
  922. *html .popup_block{
  923. position: absolute;
  924. }
  925.  
  926. .popup_block{
  927. /*main*/
  928. display:none; /*hides when not using*/
  929. position:fixed;
  930. top:50%;
  931. left:50%;
  932. z-index:9000000;
  933. }
  934.  
  935. #askblock{
  936. position:fixed;
  937. z-index:9000000;
  938. top:50%;
  939. left:50%;
  940. transform:translate(-50%,-50%);
  941. width:350px;
  942. padding:20px;
  943. border:5px double {color:Color 2};
  944. background-color:{color:Posts};
  945. }
  946.  
  947. #ask{
  948. margin:10px;
  949. }
  950.  
  951. /*----------------------------------------------------------------------*/
  952.  
  953. #s-m-t-tooltip {
  954. max-width:150px;
  955. background-color:{color:Color 1};
  956. font-family:'neouthin';
  957. font-size:11px;
  958. color:{color:Posts};
  959. padding:5px;
  960. margin:15px 0px 0px 10px;
  961. z-index:99999999999999999999999999999999999;
  962. }
  963.  
  964. body{
  965. text-align:justify;
  966. background-color:{color:Backgrounds};
  967. font-family:'caviar_dreamsregular';
  968. font-size:{text:Font Size};
  969. color:{color:Font Color};
  970. }
  971.  
  972. h1{
  973. margin:0px;
  974. padding:5px;
  975. text-align:center;
  976. background-color:{color:Color 2};
  977. font-family:'dolce_vita_lightsuper_light';
  978. font-size:25px;
  979. color:{color:Posts};
  980. }
  981.  
  982. h1 b{
  983. font-family:'dolce_vita_lightsuper_light';
  984. }
  985.  
  986. h2{
  987. margin-top:3px;
  988. margin-bottom:3px;
  989. padding:3px;
  990. background-color:{color:Color 3};
  991. text-align:center;
  992. font-family:'neouthin';
  993. font-size:18px;
  994. color:{color:Posts};
  995. }
  996.  
  997. h2 b{
  998. font-family:'neouthin';
  999. }
  1000.  
  1001. hr{
  1002. height:1px;
  1003. border:none;
  1004. background-color:{color:Color 1};
  1005. }
  1006.  
  1007. ul{
  1008. font-family:'caviar_dreamsregular';
  1009. font-size:{text:Font Size};
  1010. }
  1011.  
  1012. p{
  1013. text-align:justify;
  1014. font-family:'caviar_dreamsregular';
  1015. font-size:{text:Font Size};
  1016. }
  1017.  
  1018. a{
  1019. text-decoration:none;
  1020. color:{color:Color 1};
  1021. webkit-transition: all 1s ease;
  1022. -moz-transition: all 1s ease;
  1023. -o-transition: all 1s ease;
  1024. transition:all 1s ease; /*smooth transitions*/
  1025. }
  1026.  
  1027. a:hover{
  1028. color:{color:Color 2};
  1029. }
  1030.  
  1031. b{
  1032. font-family:'caviar_dreamsbold';
  1033. }
  1034.  
  1035. /*--Change the color of the highlights--*/
  1036. ::-moz-selection { /* Code for Firefox */
  1037. background:{color:Color 1};
  1038. color:{color:Posts};
  1039. }
  1040. ::selection{
  1041. background:{color:Color 1};
  1042. color:{color:Posts};
  1043. }
  1044.  
  1045. /*Cred to html tutorials*/
  1046. ::-webkit-scrollbar-thumb:vertical {
  1047. width:4px; /*width of the slider*/
  1048. opacity:1;
  1049. background-color:{color:Posts}; /*color of main scrollbar*/
  1050. }
  1051. ::-webkit-scrollbar {
  1052. border-left:1px solid {color:Posts};
  1053. background-color:{color:Color 1}; /*color of the slider*/
  1054. width:4px;
  1055. opacity:1;
  1056. }
  1057.  
  1058. ::-webkit-scrollbar-corner{
  1059. background-color:#FEFEFE;
  1060. opacity:0;
  1061. }
  1062.  
  1063. #infscr-loading {
  1064. display: none !important;
  1065. }
  1066.  
  1067. .tmblr-iframe{
  1068. position:fixed;
  1069. {block:ifBorderStyle}
  1070. margin-top:2px;
  1071. margin-right:21px;
  1072. {/block:ifBorderStyle}
  1073. {block:ifNotBorderStyle}
  1074. margin-top:8px;
  1075. margin-right:4px;
  1076. {/block:ifNotBorderStyle}
  1077. z-index:10000 !important;
  1078. -webkit-filter: invert(100%);
  1079. }
  1080.  
  1081. /*----------------------------------------------------------------------*/
  1082. </style>
  1083.  
  1084. </head>
  1085.  
  1086.  
  1087. <!-------------------What Appears On The Browser Tab---------------------->
  1088.  
  1089. <title>{Title}</title>
  1090.  
  1091. <link href="{Favicon}" rel="icon" type="image/x-icon" />
  1092. <!---------You can customize this to something differant from your profile pic by putting the url to your desired icon in place of {Favicon}------->
  1093.  
  1094. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  1095. {block:Description}
  1096.  
  1097. <meta name="description" content="{MetaDescription}" />
  1098. {/block:Description}
  1099.  
  1100. <!---------------------------------------------------------------------->
  1101. <body>
  1102.  
  1103.  
  1104.  
  1105. <!----------------------------------------------------------------------->
  1106. <div id="sidebar">
  1107.  
  1108. <div id="blogtitle">{Title}</div>
  1109. <div id="description">{Description}</div>
  1110.  
  1111. <div id="links">
  1112. <a href="/"><i class="fa fa-circle-o-notch fa-spin"></i></a>
  1113. •
  1114. {block:ifPopupAsk}
  1115. <a href="#?w=500" rel="01" class="poplight" title="Message"><i class="fa fa-envelope-o"></i></a>
  1116. {/block:ifPopupAsk}
  1117. {block:ifNotPopupAsk}
  1118. <a href="/ask" title="Message"><i class="fa fa-envelope-o"></i></a>
  1119. {block:ifNotPopupAsk}
  1120. •
  1121. <a href="{text:Link 3 URL}" title="{text:Link 3}"><i class="fa fa-user-o"></i></a> •
  1122. <a href="{text:Link 4 URL}" title="{text:Link 4}"><i class="fa fa-navicon"></i></a>
  1123. •
  1124. <a href="http://katting.tk"><i class="fa fa-code"></i></a>
  1125. </div>
  1126.  
  1127. </div>
  1128.  
  1129. <!----------------------------------------------------------------------->
  1130.  
  1131. {block:ifUpdatesTab}
  1132. <div id="updatestab">
  1133.  
  1134. <div id="tabmarker">
  1135. {block:ifLeftOrRightSidebar}
  1136. <i class="fa fa-angle-right"></i>
  1137. {/block:ifLeftOrRightSidebar}
  1138. {block:ifNotLeftOrRightSidebar}
  1139. <i class="fa fa-angle-left"></i>
  1140. {/block:ifNotLeftOrRightSidebar}
  1141. </div>
  1142.  
  1143. <div class="updatestab">
  1144.  
  1145.  
  1146. <div id="tabtitle">{text:Tab One Title}</div>
  1147. <div id="contents">
  1148. {text:Tab One Contents}
  1149. </div>
  1150.  
  1151. <div id="tabtitle">{text:Tab Two Title}</div>
  1152. <div id="contents">
  1153. {text:Tab Two Contents}
  1154. </div>
  1155.  
  1156. <div id="tabtitle">{text:Tab Three Title}</div>
  1157. <div id="contents">
  1158. {text:Tab Three Contents}
  1159. </div>
  1160.  
  1161. </div>
  1162. </div>
  1163. {/block:ifUpdates Tab}
  1164.  
  1165.  
  1166. <!----------------------------------------------------------------------->
  1167.  
  1168. <div id="container">
  1169. <center>
  1170. {block:Posts}
  1171. <div class="entry">
  1172.  
  1173.  
  1174. {block:IndexPage}
  1175. {block:ifAlternatingPostBorders}
  1176. {block:Odd}<div class="postborders-odd"></div>{/block:Odd}
  1177. {block:Even}<div class="postborders-even"></div>{/block:Even}
  1178. {/block:ifAlternatingPostBorders}
  1179. {/block:IndexPage}
  1180.  
  1181. <!--------------------------------------------------------------->
  1182. {block:Text}
  1183.  
  1184. <div class="post text">
  1185.  
  1186. {block:Title}<h1>{Title}</h1>{/block:Title}
  1187. <div id="textpostbody">{Body}</div>
  1188.  
  1189. <div id="posteddate">
  1190. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1191. </div>
  1192.  
  1193. </div>
  1194.  
  1195.  
  1196. {block:IndexPage}
  1197. <div id="textpermalinks">
  1198. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1199. •
  1200. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1201. </div>
  1202. {/block:IndexPage}
  1203.  
  1204. {block:Text}
  1205. <!--------------------------------------------------------------->
  1206.  
  1207.  
  1208. <!--------------------------------------------------------------->
  1209. {block:Photo}
  1210.  
  1211. <div class="post photo">
  1212.  
  1213. {block:IndexPage}
  1214. <div id="photoposts">
  1215. <div class="photohovereffecttop"></div>
  1216. <div class="photohovereffectbottom"></div>
  1217. <div class="photohovereffectleft"></div>
  1218. <div class="photohovereffectright"></div>
  1219. <div class="photohovereffectinner1"></div>
  1220. <div class="photohovereffectinner2"></div>
  1221. <div class="photohovereffect"></div>
  1222. <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
  1223. </div>
  1224.  
  1225. <div id="photopermalinks">
  1226. <a href="{Permalink}"><div class="photopermalinks">{TimeAgo}</div></a>
  1227.  
  1228. <a href="{Permalink}"><div class="photopermalinks">{NoteCountWithLabel}</div></a>
  1229.  
  1230. <a href="{ReblogURL}"><div class="photopermalinks">Reblog</div></a>
  1231. </div>
  1232. {block:IndexPage}
  1233.  
  1234. {block:PermalinkPage}
  1235. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1236. {/block:PermalinkPage}
  1237.  
  1238. </div>
  1239.  
  1240. {/block:Photo}
  1241. <!--------------------------------------------------------------->
  1242.  
  1243.  
  1244. <!--------------------------------------------------------------->
  1245. {block:Panorama}
  1246. <div class="post panorama">
  1247. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  1248. {LinkCloseTag}
  1249.  
  1250. <div id="posteddate">
  1251. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1252. </div>
  1253.  
  1254. </div>
  1255.  
  1256.  
  1257. {block:IndexPage}
  1258. <div id="textpermalinks">
  1259. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1260. •
  1261. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1262. </div>
  1263. {/block:IndexPage}
  1264. {/block:Panorama}
  1265. <!--------------------------------------------------------------->
  1266.  
  1267.  
  1268. <!--------------------------------------------------------------->
  1269. {block:Photoset}
  1270. <div class="post photoset">
  1271.  
  1272. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1273. {block:Photos}
  1274. <div class="photo-data"><div class="pxu-photo">
  1275. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1276. </div>
  1277. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1278. </div>
  1279. {/block:Photos}
  1280. </div>
  1281.  
  1282. <div id="posteddate">
  1283. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1284. </div>
  1285.  
  1286. </div>
  1287.  
  1288.  
  1289. {block:IndexPage}
  1290. <div id="textpermalinks">
  1291. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1292. •
  1293. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1294. </div>
  1295. {/block:IndexPage}
  1296. {/block:Photoset}
  1297. <!--------------------------------------------------------------->
  1298.  
  1299.  
  1300. <!--------------------------------------------------------------->
  1301. {block:Quote}
  1302. <div id="post quote">
  1303. <div id="textpostbody">
  1304. <blockquote>"{Quote}"</blockquote>
  1305. <div id="source">{Source}</div>
  1306. </div>
  1307.  
  1308. <div id="posteddate">
  1309. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1310. </div>
  1311.  
  1312. </div>
  1313.  
  1314.  
  1315. {block:IndexPage}
  1316. <div id="textpermalinks">
  1317. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1318. •
  1319. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1320. </div>
  1321. {/block:IndexPage}
  1322. {/block:Quote}
  1323. <!--------------------------------------------------------------->
  1324.  
  1325.  
  1326. <!--------------------------------------------------------------->
  1327. {block:Link}
  1328. <div class="post link">
  1329. <a href="{URL}" class="link" {Target} target="blank"><div id="link">{Name}</div></a>
  1330.  
  1331. <div id="posteddate">
  1332. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1333. </div>
  1334.  
  1335. </div>
  1336.  
  1337.  
  1338. {block:IndexPage}
  1339. <div id="textpermalinks">
  1340. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1341. •
  1342. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1343. </div>
  1344. {/block:IndexPage}
  1345. {/block:Link}
  1346. <!--------------------------------------------------------------->
  1347.  
  1348.  
  1349. <!--------------------------------------------------------------->
  1350. {block:Chat}
  1351. <div class="post chat">
  1352.  
  1353. {block:Title}<h1>{Title}</h1>{/block:Title}
  1354.  
  1355. <div class="chat">
  1356. {block:Lines}
  1357. <div class="{Alt} user_{UserNumber}">
  1358. {block:Label}<b>{Label}</b>{/block:Label}
  1359. {Line}
  1360. </div>
  1361. {block:Lines}
  1362. </div>
  1363.  
  1364. <div id="posteddate">
  1365. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1366. </div>
  1367.  
  1368. </div>
  1369.  
  1370.  
  1371. {block:IndexPage}
  1372. <div id="textpermalinks">
  1373. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1374. •
  1375. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1376. </div>
  1377. {/block:IndexPage}
  1378. {/block:Chat}
  1379. <!--------------------------------------------------------------->
  1380.  
  1381.  
  1382. <!--------------------------------------------------------------->
  1383. {block:Video}
  1384. <div class="post video">
  1385. {block:IndexPage}{Video-250}{/block:IndexPage}
  1386. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  1387.  
  1388. <div id="posteddate">
  1389. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1390. </div>
  1391.  
  1392. </div>
  1393.  
  1394. {block:IndexPage}
  1395. <div id="textpermalinks">
  1396. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1397. •
  1398. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1399. </div>
  1400. {/block:IndexPage}
  1401. {/block:Video}
  1402. <!--------------------------------------------------------------->
  1403.  
  1404.  
  1405. <!--------------------------------------------------------------->
  1406. {block:Audio}
  1407. <div class="post audio">
  1408.  
  1409.  
  1410. </div>
  1411.  
  1412.  
  1413. {/block:Audio}
  1414. <!--------------------------------------------------------------->
  1415.  
  1416.  
  1417. <!--------------------------------------------------------------->
  1418. {block:Answer}
  1419.  
  1420. <div class="question">
  1421. <div class="theasker">
  1422. <table>
  1423. <tr>
  1424. <td><img src="{AskerPortraitURL-64}"></td>
  1425. <td>{Asker} asked:</td>
  1426. </tr>
  1427. </table>
  1428. </div>
  1429. <div class="asked">{Question}</div>
  1430. </div>
  1431.  
  1432. <div class="replies">
  1433. {Answer}
  1434. </div>
  1435.  
  1436. <div id="posteddate">
  1437. Posted on {MonthNumber}/{DayOfMonth}/{Year}
  1438. </div>
  1439.  
  1440.  
  1441. {block:IndexPage}
  1442. <div id="textpermalinks">
  1443. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1444. •
  1445. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1446. </div>
  1447. {/block:IndexPage}
  1448. {/block:Answer}
  1449. <!--------------------------------------------------------------->
  1450.  
  1451.  
  1452. <!--------------------------------------------------------------->
  1453. {block:PermalinkPagination}
  1454. {block:PermalinkPage}
  1455.  
  1456. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1457.  
  1458. {block:PostNotes}{PostNotes-16}{/block:PostNotes}
  1459.  
  1460. {/block:PermalinkPage}
  1461. {/block:PermalinkPagination}
  1462. <!--------------------------------------------------------------->
  1463. </div>
  1464. {block:Posts}
  1465. </center>
  1466.  
  1467. </div>
  1468.  
  1469.  
  1470. <style>
  1471. #cred{
  1472. position:fixed;
  1473. z-index:9000;
  1474. {block:ifBorderStyle}
  1475. bottom:5px;
  1476. right:23px;
  1477. {/block:ifBorderStyle}
  1478. {block:ifNotBorderStyle}
  1479. bottom:10px;
  1480. right:6px;
  1481. {/block:ifNotBorderStyle}
  1482. width:15px;
  1483. height:15px;
  1484. padding:5px;
  1485. border-radius:90px;
  1486. background-color:{color:Color 1};
  1487. text-align:center;
  1488. font-size:14px;
  1489. color:{color:Posts};
  1490. webkit-transition: all 1s ease;
  1491. -moz-transition: all 1s ease;
  1492. -o-transition: all 1s ease;
  1493. transition:all 1s ease; /*smooth transitions*/
  1494. }
  1495. #cred:hover{
  1496. background-color:{color:Color 2};
  1497. }
  1498. </style>
  1499. <a href="http://felinethemes.tumblr.com" title="Feline Themes" target="blank"><div id="cred"><i class="fa fa-paw"></i></div></a>
  1500.  
  1501.  
  1502. <!----------------------------------------------------------------------->
  1503.  
  1504. {block:ifBorderStyle}
  1505. <div id="s1right"></div>
  1506. <div id="s1left1"></div>
  1507. <div id="s1left2"></div>
  1508. {/block:ifBorderStyle}
  1509.  
  1510. {block:ifNotBorderStyle}
  1511. <div id="s2top1"></div>
  1512. <div id="s2top2"></div>
  1513. <div id="s2bottom1"></div>
  1514. <div id="s2bottom2"></div>
  1515. <div id="s2left1"></div>
  1516. <div id="s2left2"></div>
  1517. <div id="s2right1"></div>
  1518. <div id="s2right2"></div>
  1519. {block:ifNotBorderStyle}
  1520.  
  1521. <!---------------------------------------------------------------------->
  1522.  
  1523. <!---------------------------------------------------------------------->
  1524.  
  1525. {block:ifScrollToTopButton}
  1526. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Back To Top"><i class="fa fa-arrow-up"></i></a>
  1527. {/block:ifScrollToTopButton}
  1528.  
  1529. <!-------------------- PAGINATION - DON'T REMOVE ----------------------->
  1530. {block:Pagination}
  1531. <div class="pagination" style="visibility:hidden;">
  1532. {block:NextPage}
  1533. <a href="{NextPage}" id="next">Next</a>
  1534. {/block:NextPage}
  1535. </div>
  1536. {/block:Pagination}
  1537.  
  1538. <!------------ Functionality [BE CAREFUL, EASY TO FUCK UP] ------------->
  1539. <script>
  1540. $(function(){
  1541.  
  1542. // ------------------------- Style My Tooltips -------------------------
  1543.  
  1544. (function($){
  1545. $(document).ready(function(){
  1546. $("a[title]").style_my_tooltips({
  1547. tip_follows_cursor:true,
  1548. tip_delay_time:90,
  1549. tip_fade_speed:600,
  1550. attribute:"title"
  1551. });
  1552. });
  1553. })(jQuery);
  1554.  
  1555. // ----------------------- Unnest by NEO --------------------------------
  1556.  
  1557. $('.entry').unnest({ //posts themselves
  1558. yourCaption: ".caption", //caption div
  1559. wrapName: ".tumblr_parent", //unnested captions
  1560. newCaptionUsername: true, //add username
  1561. originalPostCaptionUsername: true, //adds username regardless
  1562. tumblrAvatars: true, // user avatars
  1563. tumblrAvatarClass: ".tumblr_avatar", // avatar class
  1564. usernameColon: false
  1565. });
  1566.  
  1567. //---------------------------- PXU Photosets ----------------------------
  1568.  
  1569. $('.photo-slideshow').pxuPhotoset({
  1570. lightbox: false,
  1571. rounded: false,
  1572. gutter: '{select:Photoset Gutter Size}',
  1573. photoset: '.photo-slideshow',
  1574. photoWrap: '.photo-data',
  1575. photo: '.pxu-photo'
  1576. });
  1577.  
  1578. });
  1579.  
  1580. // -------------------------- Infinite Scroll ---------------------------
  1581.  
  1582. {block:IndexPage}
  1583. (function () {
  1584. var $blogcontent = $('#container'); //posts container
  1585. $blogcontent.imagesLoaded(function () {
  1586. $blogcontent.masonry({
  1587. itemSelector: '.entry', //posts themselves
  1588. isAnimated:false,
  1589. columnWidth:250,
  1590. gutterWidth:40,
  1591. });
  1592. });
  1593. $blogcontent.infinitescroll({
  1594. navSelector : "div.pagination", //pagination div
  1595. nextSelector : ".pagination a#next", //pagination next
  1596. itemSelector : ".entry",
  1597. loading: {
  1598. finishedMsg: "<p>You have reached the end of the internet. Now go outside and get some fresh air.</p>", // if you scroll that far
  1599. msg: null,
  1600. msgText: "",
  1601. },
  1602. },
  1603.  
  1604. function( newElements ) {
  1605. var $newElems = $( newElements );
  1606. $newElems.find('.photo-slideshow').pxuPhotoset({ //pxu callback
  1607. lightbox: false,
  1608. rounded: false,
  1609. gutter: '3px',
  1610. photoset: '.photo-slideshow',
  1611. photoWrap: '.photo-data',
  1612. photo: '.pxu-photo'
  1613. },
  1614.  
  1615. function(){
  1616. $blogcontent.masonry({
  1617. itemSelector: '.entry',
  1618. columnWidth:250,
  1619. gutterWidth:40,
  1620. });
  1621. });
  1622. var $newElems = $(newElements).css({
  1623. opacity: 0,
  1624. zIndex: -1,
  1625. });
  1626. $newElems.imagesLoaded(function(){
  1627. $newElems.animate({ opacity: 1, zIndex: 1 });
  1628. $blogcontent.masonry( 'appended', $newElems );
  1629. });
  1630.  
  1631. });
  1632. })();
  1633. {/block:IndexPage}
  1634. </script>
  1635. <!---------------------------------------------------------------------->
  1636.  
  1637.  
  1638.  
  1639. </body>
  1640.  
  1641. <!---------------------------------------------------------------------->
  1642.  
  1643. {block:ifPopupAsk}
  1644. <div id="01" class="popup_block">
  1645. <div id="askblock">
  1646.  
  1647. <h1>{text:Popup Ask Title}</h1>
  1648.  
  1649. <div id="ask">
  1650. <!------------------------------Ask Form-------------------------------->
  1651. <iframe frameborder="0" scrolling="yes" width="100%" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
  1652. <!---------------------------------------------------------------------->
  1653. </div>
  1654.  
  1655. </div>
  1656. </div>
  1657. {/block:ifPopupAsk}
  1658.  
  1659. <!--------------------------------------------------------------------->
  1660.  
  1661. </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!