API tools faq
paste
planthed

Iris with 3 columns

planthed
Jul 17th, 2016
294
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.32 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4.  
  5. Iris @ planthed
  6.  
  7.  
  8. — DO NOT delete the credit.
  9. — Do not copy or steal any code.
  10. — Do not claim as yours.
  11. — Full credits at @painthemes/c
  12.  
  13.  
  14. -->
  15.  
  16. <html lang="en">
  17. <head>
  18.  
  19. <title>{block:PostSummary}{PostSummary}: {/block:PostSummary}{Title}</title>
  20. <link rel="shortcut icon" href="{favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:hidden}
  23. <!--Default Variables-->
  24. <meta name="image:background" content=""/>
  25.  
  26. <meta name="color:Background" content="#ffffff"/>
  27. <meta name="color:Text" content="#000000"/>
  28. <meta name="color:Accent" content="#BDC0DA"/>
  29. <meta name="color:Accent text" content="#000000"/>
  30. <meta name="color:Borders" content="#BDC0DA"/>
  31.  
  32. <meta name="text:Blogtitle" content="" />
  33. <meta name="text:Home label" content="home" />
  34. <meta name="text:Ask label" content="ask"/>
  35. <meta name="text:Archive label" content="Past" />
  36. <meta name="text:Extra link 1 title" content="" />
  37. <meta name="text:Extra link 1" content="http://" />
  38. <meta name="text:Extra link 2 title" content="" />
  39. <meta name="text:Extra link 2" content="http://">
  40. <meta name="text:Graphic" content="http://static.tumblr.com/4abdab4fa96a456d80ee57d7b0d7802d/gx7ffxx/ZRimvlb1v/tumblr_static_tumblr_static_transparent_sidebar....................png" />
  41.  
  42. <meta name="if:Right Sidebar" content="" />
  43. <meta name="if:Graphic Image" content="1" />
  44. <meta name="if:White Tiny cursor" content="" />
  45. <meta name="if:Black Tiny cursor" content="" />
  46.  
  47.  
  48. {/block:hidden}
  49.  
  50.  
  51. <!---pxu script--->
  52. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  53.  
  54. <!--- tooltips script --->
  55. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  56. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  57. <script>
  58. (function($){
  59. $(document).ready(function(){
  60. $("a[title]").style_my_tooltips({
  61. tip_follows_cursor:true,
  62. tip_delay_time:90,
  63. tip_fade_speed:600,
  64. attribute:"title"
  65. });
  66. });
  67. })(jQuery);
  68. </script>
  69.  
  70.  
  71. <!-------
  72.  
  73. A FEW RULES YOU NEED TO KNOW BEFORE START EDITING THE THEME:
  74.  
  75. > You CAN'T use my themes as base
  76. > You CAN'T remove my credits, even if you edited the theme a lot.
  77. > Don't use any part of my codes without permission.
  78. > You can edit the theme as your own like and make it look too different as the original one but if you edit the theme a lot and you're having problems with it, I'll not allowed to help you.
  79.  
  80.  
  81. YOU ARE NOT ALLOWED TO USE MY CODES FOR YOUR OWN THEME OR ANY OTHER THEME
  82. BY OTHER THEME MAKER WITHOUT PERMISSION, IF YOU WANNA USE ONE OF MY CODES
  83. ASK FIRST, DON'T CLAIM AS YOURS, DON'T BE A BITCH.
  84.  
  85. ---------->
  86.  
  87.  
  88.  
  89. <style type="text/css">
  90.  
  91.  
  92. /*tooltips style*/
  93. #s-m-t-tooltip{
  94. max-width:300px;
  95. padding:6px;
  96. min-height:7px;
  97. margin:20px 0px 0px 20px;
  98. line-height:100%;
  99. background:{color:Accent};
  100. color:{color:Accent text};
  101. word-wrap:break-word;
  102. word-break:break-all;
  103. opacity:1;
  104. z-index:9999999999999999999;
  105. }
  106.  
  107.  
  108. #tumblr_controls, .tmblr-iframe{
  109. position:fixed!important;
  110. top:0px!important;
  111. right:5px!important;
  112. opacity:0.2;
  113. z-index:99999999999999999999999999!important;
  114. -webkit-filter:invert(100%);
  115. -moz-filter:invert(100%);
  116. -o-filter:invert(100%);
  117. -ms-filter:invert(100%);
  118. filter:invert(100%);
  119. -webkit-transition:all 0.6s ease-out;
  120. -webkit-transition: opacity 0.7s linear;
  121. -webkit-transition: all 0.8s ease-out;
  122. -moz-transition: all 0.8s ease-out;
  123. transition: all 0.8s ease-out
  124. }
  125.  
  126.  
  127.  
  128. /*tumblr controls and lightbox*/
  129.  
  130. #tumblr_lightbox,.tmblr-lightbox{
  131. background:rgba({RGBcolor:background}, 0.8)!important;}
  132.  
  133. #vignette,#tumblr_lightbox_caption,.vignette,.lightbox-caption{
  134. opacity:0!important;
  135. }
  136.  
  137. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .lightbox-image {
  138. box-shadow:none!important;
  139. border-radius:0px!important;
  140. padding:0px!important;
  141. background:{color:post background}!important;
  142. border:0px solid {color:borders}!important;
  143. }
  144.  
  145. ::-webkit-scrollbar{
  146. height:3px;
  147. width:11px;
  148. background:inherit;
  149. background:rgba({RGBcolor:borders}, 0.4);
  150. border:5px solid {color:background};
  151. }
  152.  
  153. ::-webkit-scrollbar-track {background:transparent;}
  154.  
  155. ::-webkit-scrollbar-thumb {
  156. height:150px!important;
  157. background:{color:borders};
  158. border:5px solid {color:background};
  159. }
  160.  
  161. /*tiny cursor*/
  162.  
  163.  
  164. html, body, img, a {
  165. {block:ifWhiteTinycursor}
  166. cursor:url(http://static.tumblr.com/vmteopo/fhxo3gbrd/small_white_cursor.png), auto;
  167. {/block:ifWhiteTinycursor}
  168. {block:ifBlackTinyCursor}
  169. cursor: url('http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png'), auto;
  170. {/block:ifBlackTinyCursor}
  171. }
  172.  
  173. a:hover, a:active, iframe{
  174. {block:ifWhiteTinycursor}cursor:url(http://static.tumblr.com/vmteopo/RQ9o3gbth/small_white_cursor_help.png), crosshair;
  175. {/block:ifWhiteTinycursor}
  176. {block:ifBlackTinyCursor}
  177. cursor:url(http://static.tumblr.com/vmteopo/DH3njhg50/help_cursor.png), crosshair;
  178. {/block:ifBlackTinyCursor}
  179. }
  180.  
  181.  
  182. /*main structure*/
  183.  
  184. body{
  185. background-color:{color:background};
  186. background-image:url({image:Background});
  187. background-attachment:fixed;
  188. background-repeat:repeat;
  189. font-size:10px;
  190. letter-spacing:0.5px;
  191. font-family:raleway, sans-serif;
  192. color:{color:text};
  193. line-height:1.5em;
  194. -moz-osx-font-smoothing:grayscale;
  195. -webkit-font-smoothing:antialiased;
  196. font-smoothing:antialiased;
  197. }
  198.  
  199.  
  200. a:link, a:active, a:visited{
  201. color:{color:Accent};
  202. text-decoration:none;
  203. -webkit-transition:all 0.5s linear;
  204. -moz-transition:all 0.5s linear;
  205. transition:all 0.5s linear;
  206. }
  207.  
  208. a:hover {color:{color:text};}
  209.  
  210.  
  211. .center {
  212. position:relative;
  213. margin:70px auto;
  214. left:120px;
  215. width:calc(850px + 120px);
  216. {block:PermalinkPage}
  217. width:calc(400px + 200px);
  218. {/block:PermalinkPage}
  219. }
  220.  
  221. #posts{
  222. position:relative;
  223. {block:PermalinkPage}
  224. margin-top:100px;
  225. {/block:PermalinkPage}
  226. }
  227.  
  228.  
  229. .entry {
  230. margin:35px;
  231. {block:indexpage}
  232. width:240px;
  233. opacity:0;
  234. z-index:-1;
  235. {/block:indexpage}
  236. {block:PermalinkPage}
  237. width:500px;
  238. {/block:PermalinkPage}
  239. }
  240.  
  241.  
  242. .entry img{
  243. max-width:100%;
  244. display:block;
  245. position:relative;
  246. overflow:hidden;
  247. }
  248.  
  249. #zoom{
  250. position:relative;
  251. overflow:hidden;
  252. }
  253.  
  254. .entry #zoom img{
  255. display:block;
  256. height:auto;
  257. -webkit-transition:opacity 0.5s linear;
  258. -webkit-transition:all 0.5s linear;
  259. -moz-transition:all 0.5s linear;
  260. transition:all 0.5s linear;
  261. -webkit-transform: scale(1.2);
  262. -moz-transform: scale(1.2);
  263. -o-transform: scale(1.2);
  264. transform: scale(1.2);
  265. }
  266.  
  267. .entry:hover #zoom img{
  268. -webkit-filter: grayscale(0%);
  269. -webkit-transform: scale(1);
  270. -moz-transform: scale(1);
  271. -o-transform: scale(1);
  272. transform: scale(1);
  273. }
  274.  
  275. .mask{
  276. position:absolute;
  277. width:240px;
  278. height:calc(100% - 0px);
  279. opacity:0.0;
  280. background:{color:Accent};
  281. z-index:9;
  282. -webkit-transition: all 0.4s ease;
  283. -moz-transition: all 0.4s ease;
  284. -o-transition: all 0.4s ease;
  285. transition: all 0.4s ease;
  286. }
  287.  
  288. .entry:hover .mask{
  289. opacity:0.8;
  290. -webkit-transition: all 0.4s ease;
  291. -moz-transition: all 0.4s ease;
  292. -o-transition: all 0.4s ease;
  293. transition: all 0.4s ease;
  294. }
  295.  
  296. #perm{
  297. position:absolute;
  298. z-index:10;
  299. left:-15px;
  300. right:-15px;
  301. top:-15px;
  302. bottom:-15px;
  303. overflow:hidden;
  304. opacity:0;
  305. -webkit-transition: all 0.5s ease;
  306. -moz-transition: all 0.5s ease;
  307. -o-transition: all 0.5s ease;
  308. transition: all 0.5s ease;
  309. }
  310.  
  311. .entry:hover #perm {opacity:1;}
  312.  
  313.  
  314. .line {
  315. width:0px;
  316. height:0px;
  317. border-top:2px solid {color:borders};
  318. border-left:2px solid {color:borders};
  319. -webkit-transition: all 0.5s ease;
  320. -moz-transition: all 0.5s ease;
  321. -o-transition: all 0.5s ease;
  322. transition: all 0.5s ease;
  323.  
  324. }
  325.  
  326. .line2 {
  327. position:absolute;
  328. width:0px;
  329. height:0px;
  330. border-bottom:2px solid {color:borders};
  331. border-right:2px solid {color:borders};
  332. bottom:0px;
  333. right:0px;
  334. -webkit-transition: all 0.5s ease;
  335. -moz-transition: all 0.5s ease;
  336. -o-transition: all 0.5s ease;
  337. transition: all 0.5s ease;
  338. }
  339.  
  340. .entry:hover .line, .entry:hover .line2 {width:30px;height:30px;}
  341.  
  342.  
  343. .perm1 a, .perm2 a, .perm3 a{
  344. color:{color:Accent text};
  345. }
  346.  
  347. .perm1 {
  348. width:20px;
  349. height:20px;
  350. text-align:center;
  351. position:absolute;
  352. z-index:100;
  353. top:10%;
  354. font-size:18px;
  355. margin-left:60px;
  356. opacity:0;
  357. display:inline-block;
  358. -webkit-transition: all 0.5s ease;
  359. -moz-transition: all 0.5s ease;
  360. -o-transition: all 0.5s ease;
  361. transition: all 0.5s ease;
  362. }
  363.  
  364. .entry:hover .perm1{
  365. opacity:1;
  366. top:45%;
  367. -webkit-transition-delay: 0.50s;
  368. -webkit-transition: all 0.50s;
  369. transition: all 0.50s;
  370. transition-delay: 0.50s;
  371. }
  372.  
  373. .perma1{
  374. position:absolute;
  375. text-transform:uppercase;
  376. font-family:roboto;
  377. font-weight:300;
  378. font-style:normal;
  379. font-size:14px;
  380. letter-spacing:1px;
  381. margin-top:20px;
  382. margin-left:0px;
  383. width:120px;
  384. opacity:0;
  385. visibility:hidden;
  386. -webkit-transition:opacity 0.3s linear;
  387. -webkit-transition:all 0.3s linear;
  388. -moz-transition:all 0.3s linear;
  389. transition:all 0.3s linear;
  390. }
  391.  
  392. .perm1:hover .perma1{
  393. opacity:1;
  394. visibility:visible;
  395. margin-left:0px;
  396. }
  397.  
  398. .perm2 {
  399. width:20px;
  400. height:20px;
  401. text-align:center;
  402. position:absolute;
  403. z-index:100;
  404. top:70%;
  405. font-size:18px;
  406. margin-left:110px;
  407. opacity:0;
  408. display:inline-block;
  409. -webkit-transition:all .5s ease-in-out;
  410. -moz-transition:all .5s ease-in-out;
  411. -o-transition:all .5s ease-in-out;
  412. }
  413.  
  414. .entry:hover .perm2 {
  415. opacity:1;
  416. top:45%;
  417. -webkit-transition-delay: 0.50s;
  418. -webkit-transition: all 0.50s;
  419. transition: all 0.50s;
  420. transition-delay: 0.50s;
  421. }
  422.  
  423.  
  424. .perma2{
  425. position:absolute;
  426. text-transform:uppercase;
  427. font-family:roboto;
  428. font-weight:300;
  429. font-style:normal;
  430. font-size:14px;
  431. letter-spacing:1px;
  432. margin-top:20px;
  433. margin-left:-50px;
  434. width:120px;
  435. opacity:0;
  436. visibility:hidden;
  437. -webkit-transition:opacity 0.3s linear;
  438. -webkit-transition:all 0.3s linear;
  439. -moz-transition:all 0.3s linear;
  440. transition:all 0.3s linear;
  441. }
  442.  
  443. .perm2:hover .perma2{
  444. opacity:1;
  445. visibility:visible;
  446. margin-left:-50px;
  447. }
  448.  
  449. .perm3 {
  450. width:20px;
  451. height:20px;
  452. text-align:center;
  453. position:absolute;
  454. z-index:100;
  455. top:10%;
  456. font-size:18px;
  457. margin-left:160px;
  458. opacity:0;
  459. display:inline-block;
  460. -webkit-transition:all .5s ease-in-out;
  461. -moz-transition:all .5s ease-in-out;
  462. -o-transition:all .5s ease-in-out;
  463. }
  464.  
  465. .entry:hover .perm3 {
  466. opacity:1;
  467. top:45%;
  468. -webkit-transition-delay: 0.50s;
  469. -webkit-transition: all 0.50s;
  470. transition: all 0.50s;
  471. transition-delay: 0.50s;
  472. }
  473.  
  474.  
  475. .perma3{
  476. position:absolute;
  477. text-transform:uppercase;
  478. font-family:roboto;
  479. font-weight:300;
  480. font-style:normal;
  481. font-size:14px;
  482. letter-spacing:1px;
  483. margin-top:20px;
  484. margin-left:-100px;
  485. width:120px;
  486. opacity:0;
  487. visibility:hidden;
  488. -webkit-transition:opacity 0.3s linear;
  489. -webkit-transition:all 0.3s linear;
  490. -moz-transition:all 0.3s linear;
  491. transition:all 0.3s linear;
  492. }
  493.  
  494. .perm3:hover .perma3{
  495. opacity:1;
  496. visibility:visible;
  497. margin-left:-100px;
  498. }
  499.  
  500.  
  501. .video, .video iframe{
  502. display:block;
  503. {block:indexpage}
  504. width:240px;
  505. height:auto;
  506. {/block:indexpage}
  507. {block:PermalinkPage}
  508. width:500px;
  509. height:auto;
  510. {/block:PermalinkPage}
  511. }
  512.  
  513. pre {
  514. white-space: pre-wrap;
  515. white-space: -moz-pre-wrap;
  516. white-space: -pre-wrap;
  517. white-space: -o-pre-wrap;
  518. word-wrap: break-word;
  519. }
  520.  
  521. p {margin:5px 0;}
  522.  
  523. p:first-of-type {
  524. margin-top:0;
  525. padding-top:0;
  526. }
  527.  
  528. p:last-of-type {
  529. margin-bottom:0;
  530. padding-bottom:0;
  531. }
  532.  
  533.  
  534. small, big {font-size:1em;}
  535.  
  536. h1, h2, h3, h4 {
  537. font-size:2em;
  538. margin:0;
  539. padding:0;
  540. }
  541.  
  542.  
  543. .back{
  544. padding:10px;
  545. border:2px solid {color:borders};
  546. background:#fff;
  547. }
  548.  
  549.  
  550. .back a, .a a{
  551. color:{color:text};
  552. border-bottom:1px solid {color:borders};
  553. }
  554.  
  555. .back a:hover, .a a:hover{
  556. color:{color:Accent};
  557. border-bottom:1px solid {color:Accent};
  558. }
  559.  
  560. .permalinktext{
  561. display:block;
  562. text-decoration:none;
  563. text-transform:uppercase;
  564. letter-spacing:1px;
  565. font-size:8px;
  566. margin-top:5px;
  567. line-height:16px;
  568. }
  569.  
  570.  
  571. .permalinktext a:hover{
  572. letter-spacing:3px;font-weight:700;
  573. }
  574.  
  575. /*audio player*/
  576.  
  577.  
  578. #audio {
  579. width:auto;
  580. margin:0px;
  581. height:auto;
  582. min-height:60px;
  583. line-height:20px;
  584. }
  585. .cover {
  586. z-index:1;
  587. width:70px;
  588. height:70px;
  589. position:absolute;
  590. }
  591. .cover img {
  592. float:left;
  593. position:absolute;
  594. border-radius:0px;
  595. width:70px;
  596. height:70px;
  597. }
  598.  
  599. .playbox {
  600. position:absolute;
  601. z-index:9;
  602. background:black;
  603. opacity:0;
  604. width:70px;
  605. height:70px;
  606. -webkit-transition:opacity 0.5s linear;
  607. -webkit-transition:all 0.5s linear;
  608. -moz-transition:all 0.5s linear;
  609. transition:all 0.5s linear;
  610. }
  611.  
  612. .entry:hover .playbox{
  613. opacity:.8;
  614. -webkit-transition:opacity 0.5s linear;
  615. -webkit-transition:all 0.5s linear;
  616. -moz-transition:all 0.5s linear;
  617. transition:all 0.5s linear;
  618. }
  619.  
  620. .button {
  621. position:relative;
  622. z-index: 1000;
  623. overflow:hidden;
  624. width:25px;
  625. height:25px;
  626. margin:20px 20px 20px 20px;
  627. }
  628.  
  629.  
  630. .info {
  631. margin-left:70px;
  632. margin-top:0px;
  633. font-size:10px;
  634. letter-spacing:2px;
  635. text-align:right;
  636. text-transform:uppercase;
  637. line-height:25px;
  638. background:{color:Accent};
  639. color:{color:Accent text};
  640. padding:10px;
  641. }
  642.  
  643. /*title*/
  644.  
  645. .title{
  646. padding:10px;
  647. border:2px solid {color:borders};
  648. border-bottom:0px;
  649. text-align:center;
  650. font-family:Clicker Script;
  651. font-size:3em;
  652. background:#fff;
  653. line-height:28px;
  654. color:{color:Accent};
  655. }
  656.  
  657.  
  658.  
  659. /*blockquote & quote*/
  660.  
  661. blockquote{
  662. border-left:1px solid {color:borders};
  663. margin:5px;
  664. padding-left:10px;
  665. line-height:15px;
  666. }
  667.  
  668. .quote{
  669. font-family:roboto;
  670. font-size:10px;
  671. color:{color:Title};
  672. font-style:italic;
  673. text-transform:uppercase;
  674. letter-spacing:2px;
  675. line-height:20px;
  676. padding:7px;
  677. background:{color:Accent};
  678. color:{color:Accent text};
  679. }
  680.  
  681. .cite{
  682. line-height:15px;
  683. text-align:right;
  684. font-size:9px;
  685. font-style:italic;
  686. padding:10px;
  687. padding-bottom:7px;;
  688. background:rgba({RGBcolor:Accent}, 0.5);
  689. color:{color:Accent text};
  690. }
  691.  
  692. .cite a{
  693. color:{color:Accent text};
  694. }
  695.  
  696. /*ask style*/
  697.  
  698.  
  699. .as{
  700. color:{color:text};
  701. letter-spacing:0px;
  702. text-transform:uppercase;
  703. letter-spacing:1px;
  704. padding:10px;
  705. font-family:roboto;
  706. font-size:10px;
  707. text-align:center;
  708. overflow:hidden;
  709. background:{color:Accent};
  710. color:{color:Accent text};
  711. }
  712.  
  713. .as a{color:{color:Accent text};}
  714.  
  715. .q{
  716. margin-top:10px;
  717. margin-bottom:10px;
  718. line-height:14px;
  719. }
  720.  
  721. .qline{
  722. height:2px;
  723. display:block;
  724. width:50%;
  725. margin-left:25%;
  726. background:{color:borders};
  727. }
  728.  
  729. .a{
  730. line-height:14px;
  731. margin-top:10px;
  732. }
  733.  
  734. .a img{
  735. width:100%;
  736. height:auto;
  737. }
  738.  
  739.  
  740. #reblogged {
  741. bottom:30px!important;
  742. right:30px!important;
  743. }
  744. /*chat styling*/
  745.  
  746. .user_1, .user_3, .user_5, .user_7, .user_9, .user_11, .user_13, .user_15, .user_17, .user_19, .user_21, .user_23, .user_25, .user_27, .user_29, .user_31, .user_33, .user_35, .user_37, .user_39, .user_41, .user_43, .user_45, .user_47, .user_49, .user_51, .user_53, .user_55, .user_57, .user_59, .user_61, .user_63, .user_65, .user_67, .user_69, .user_71, .user_73, .user_75, .user_77, .user_79, .user_81, .user_83, .user_85, .user_87, .user_89, .user_91, .user_93, .user_95, .user_97, .user_99, .user_101, .user_103, .user_105, .user_107, .user_109, .user_111, .user_113, .user_115, .user_117, .user_119, .user_121, .user_123, .user_125, .user_127, .user_129, .user_131, .user_133, .user_135, .user_137, .user_139, .user_141, .user_143, .user_145, .user_147, .user_149{
  747. background:rgba({RGBcolor:Accent}, 1);
  748. padding:7px;
  749. color:{color:Accent text};}
  750.  
  751. .user_2, .user_4, .user_6, .user_8, .user_10, .user_12, .user_14, .user_16, .user_18, .user_20, .user_22, .user_24, .user_26, .user_28, .user_30, .user_32, .user_34, .user_36, .user_38, .user_40, .user_42, .user_44, .user_46, .user_48, .user_50, .user_52, .user_54, .user_56, .user_58, .user_60, .user_62, .user_64, .user_66, .user_68, .user_70, .user_72, .user_74, .user_76, .user_78, .user_80, .user_82, .user_84, .user_86, .user_88, .user_90, .user_92, .user_94, .user_96, .user_98, .user_100, .user_102, .user_104, .user_106, .user_108, .user_110, .user_112, .user_114, .user_116, .user_118, .user_120, .user_122, .user_124, .user_126, .user_128, .user_130, .user_132, .user_134, .user_136, .user_138, .user_140, .user_142, .user_144, .user_146, .user_148, .user_150{
  752. background:rgba({RGBcolor:Accent}, 0.6);
  753. padding:7px;
  754. color:{color:Accent text};}
  755.  
  756.  
  757. /*permalink notes*/
  758.  
  759. .caption{
  760. padding:10px;
  761. margin-top:10px;
  762. border:2px solid {color:borders};
  763. background:#fff;
  764. }
  765.  
  766.  
  767. .inf{
  768. display:block;
  769. margin-top:10px;
  770. margin-bottom:10px;
  771. padding:10px;
  772. border:2px solid {color:borders};
  773. line-height:17px;
  774. background:#fff;
  775. }
  776.  
  777. .tg{display:block;}
  778. .tg a:after{content:',';}
  779. .tg a:last-of-type:after {content:'.';}
  780. .inf a, .notas a, .tg a{color:{color:text};}
  781. .inf a:hover, .notas a:hover, .tg a:hover{color:{color:Accent};}
  782.  
  783. .notas{
  784. margin-top:0px;
  785. display:none;
  786. border:2px solid {color:borders};
  787. border-top:0px solid transparent;
  788. padding:0px;
  789. color:{color:text};
  790. background:#fff;
  791. }
  792.  
  793.  
  794. ol.notes {
  795. padding:0px!important;
  796. margin: 0;
  797. list-style-type: none;
  798. }
  799. ol.notes li.note {
  800. padding:8px;
  801. border-top:2px solid {color:borders};
  802. }
  803. ol.notes li.note img.avatar {
  804. float:right;
  805. border-radius:50%;
  806. padding:0px!important;
  807. }
  808. ol.notes li.note blockquote a {
  809. text-decoration: none;
  810. }
  811. li.more_notes_link_container {
  812. text-transform: uppercase;
  813. font-size:1em;
  814. line-height:150%;
  815. letter-spacing:1px;
  816. }
  817.  
  818. li.more_notes_link_container:hover{
  819. letter-spacing:4px;
  820. }
  821.  
  822. img:not(.lightbox-image) {
  823. max-width:100%;
  824. height:auto;
  825. }
  826.  
  827. #infscr-loading { display:none!important; }
  828.  
  829. #top{
  830. position:fixed;
  831. top:0px;
  832. left:0px;
  833. width:100%;
  834. height:25px;
  835. background:{color:Accent};
  836. z-index:999999;
  837. }
  838.  
  839.  
  840. #sidebar {
  841. width:190px;
  842. height:auto;
  843. position:fixed;
  844. margin-left:calc(90px - 330px);
  845. {block:ifRightSidebar}
  846. right:calc(110px - 10px);
  847. {/block:IfRightSidebar}
  848. top:150px;
  849. z-index:999999;
  850. text-align:center;
  851. height:auto;
  852. color:{color:text};
  853. }
  854.  
  855.  
  856. .titulo {
  857. color:{color:Accent};
  858. font-family:Clicker script;
  859. font-size:50px;
  860. letter-spacing:2px;
  861. z-index:999999;
  862. width:auto;
  863. opacity:1;
  864. margin-bottom:10px;
  865. }
  866.  
  867.  
  868.  
  869. .nav{
  870. margin-top:4px;
  871. opacity:1;
  872. transition:0.4s;
  873. }
  874.  
  875.  
  876. .nav a{
  877. font-size:12px;
  878. display:inline-block;
  879. margin-left:-1px;
  880. text-align:center;
  881. width:17px;
  882. height:14px;
  883. margin-right:-2px;
  884. padding:5px;
  885. color:{color:Accent};
  886. background:{color:background};
  887. -webkit-transition:All 0.5s ease-in-out;
  888. -moz-transition:All 0.5s ease-in-out;
  889. -ms-transition:All 0.5s ease-in-out;
  890. -o-transition:All 0.5s ease-in-out;
  891. transition:All 0.5s ease-in-out;
  892. }
  893.  
  894. .nav a:hover{
  895. color:{color:text};
  896. -webkit-animation:pop 1s;
  897. }
  898.  
  899. @-webkit-keyframes pop{0% {-webkit-transform: scale(1);}50% {-webkit-transform: scale(.8);}100% {-webkit-transform: scale(1);}}
  900.  
  901.  
  902. .sideline {
  903. position:fixed;
  904. width:20px;
  905. height:20px;
  906. opacity:0;
  907. margin-top:-10px;
  908. margin-left:-10px;
  909. border-top:2px solid {color:borders};
  910. border-left:2px solid {color:borders};
  911. -webkit-transition: all 0.3s ease;
  912. }
  913.  
  914. .sideline2 {
  915. position:fixed;
  916. width:20px;
  917. height:20px;
  918. opacity:0;
  919. margin-top:-10px;
  920. margin-left:175px;
  921. border-bottom:2px solid {color:borders};
  922. border-right:2px solid {color:borders};
  923. -webkit-transition: all 0.3s ease;
  924. }
  925.  
  926. #sidebar:hover .sideline{margin-top:-15px;margin-left:-15px;opacity:1;}
  927. #sidebar:hover .sideline2{margin-top:0px;margin-left:180px;opacity:1;}
  928.  
  929. </style>
  930. </head>
  931.  
  932. <body>
  933. {block:IfGraphicImage}
  934. <div style="position:fixed;z-index:-3;bottom:0px;left:0px;opacity:0.7;">
  935. <img src="{text:Graphic}" style="width:300px"></div>
  936. {block:IfGraphicImage}
  937.  
  938. <div id="top"></div>
  939.  
  940. <div class="center">
  941.  
  942. <div id="sidebar">
  943. <div class="sideline"></div>
  944. <div class="titulo">{text:blogtitle}</div>
  945. <div class="desc">
  946. {description}
  947. </div>
  948. <div class="nav">
  949. <a title="{text:Home Label}" href="/"><i class="fa fa-home"></i></a>
  950. <a title="{text:Ask Label}" href="/ask"><i class="fa fa-envelope"></i></a>
  951. <a title="{text:Extra link 1 Title}" href="{text:Extra link 1}"><i class="fa fa-tags"></i></a>
  952. <a title="{text:Extra link 2 Title}" href="{text:Extra link 2}"><i class="fa fa-user"></i></a>
  953. <a title="{text:Archive Label}" href="/archive"><i class="fa fa-calendar"></i></a>
  954. </div>
  955. <div class="sideline2"></div>
  956. </div>
  957.  
  958.  
  959. <div id="posts">
  960. {block:Posts}
  961. <div class="entry">
  962.  
  963. {block:Text}
  964. {block:Title}<div class="title">{Title}</div>{/block:Title}
  965. <div class="back">
  966. {Body}</div>
  967. {block:IndexPage}
  968. <div class="permalinktext">
  969. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  970. {/block:IndexPage}
  971. {/block:Text}
  972.  
  973.  
  974. {block:Link}
  975. <div class="title">
  976. <a href="{URL}">{Name}</a></div>
  977. <div class="back">
  978. {block:Description}{Description}{/block:Description}
  979. </div>{block:IndexPage}
  980. <div class="permalinktext">
  981. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  982. {/block:IndexPage}
  983. {block:Link}
  984.  
  985.  
  986. {block:Photo}
  987. {block:IndexPage}
  988. <div class="perm1">
  989. <a href="{Permalink}"><i class="fa fa-calendar"></i></a>
  990. <div class="perma1">
  991. <a href="{Permalink}">{Month} {DayOfMonth}</a></div>
  992. </div><div class="perm2"><a href="{ReblogURL}" target="_blank"><i class="fa fa-refresh"></i></a>
  993. <div class="perma2"><a href="{ReblogURL}" target="_blank">reblog this</a></div>
  994. </div>
  995. <div class="perm3">
  996. <a href="{Permalink}"><i class="fa fa-comments"></i></a>
  997. <div class="perma3"><a href="{Permalink}">{NoteCountWithLabel}</a></div>
  998. </div>
  999. <div class="mask"></div>
  1000. <div id="perm">
  1001. <div class="line"></div>
  1002. <div class="line2"></div>
  1003. </div>
  1004. <div id="zoom">
  1005. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></div>
  1006. {/block:IndexPage}
  1007. {block:PermalinkPage}
  1008. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/>
  1009. {/block:PermalinkPage}
  1010. {/block:Photo}
  1011.  
  1012.  
  1013. {block:Photoset}
  1014. <div class="back">
  1015. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><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><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div>
  1016. {block:IndexPage}
  1017. <div class="permalinktext">
  1018. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  1019. {/block:IndexPage}
  1020. {/block:Photoset}
  1021.  
  1022.  
  1023. {block:Quote}
  1024. <div class="back">
  1025. <div class="quote">❝&nbsp;{quote}</div>
  1026. <div class="cite">&mdash; {Source}</div></div>
  1027. {block:IndexPage}
  1028. <div class="permalinktext">
  1029. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  1030. {/block:IndexPage}
  1031. {/block:Quote}
  1032.  
  1033. {block:Chat}
  1034. <div class="back">
  1035. <div class="chat">
  1036. {block:Title}<span class="title">{Title}</span></span>{/block:Title}
  1037. {block:Lines}<div class="lines {Alt}"><div class="{Alt} user_{UserNumber}">{block:Label}<i>{Label}</i> {/block:Label}{Line}</div></div>{/block:Lines}
  1038. </div></div>
  1039. {block:IndexPage}
  1040. <div class="permalinktext">
  1041. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  1042. {/block:IndexPage}
  1043. {/block:Chat}
  1044.  
  1045. {block:Audio}<div class="back">
  1046. <div id="audio">
  1047. <div class="cover"><img src="http://static.tumblr.com/k9utpfa/tcom8wpif/default_cover_m.jpg"></div>
  1048. {block:AlbumArt}
  1049. <div class="cover"><img src="{AlbumArtURL}"></div>
  1050. {/block:AlbumArt}
  1051. <div class="playbox">
  1052. <div class="button">
  1053. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
  1054. <div class="info">
  1055. <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}
  1056. <div style="text-transform:uppercase;font-size:8px;letter-spacing:2px;color:{color:Accent text};font-family:{select:Font};">
  1057. <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}</div>
  1058. </div>
  1059. </div></div>
  1060. {block:IndexPage}
  1061. <div class="permalinktext">
  1062. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  1063. {/block:IndexPage}
  1064. {/block:Audio}
  1065.  
  1066.  
  1067. {block:Video}
  1068. <div class="video">{Video-500}</div>
  1069. {block:IndexPage}
  1070. <div class="permalinktext">
  1071. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  1072. {/block:IndexPage}
  1073. {/block:Video}
  1074.  
  1075.  
  1076. {block:Answer}<div class="back">
  1077. <div class="as">{Asker} asked:</div>
  1078. <div class="q">{Question}</div>
  1079. <div class="qline"></div>
  1080. <div class="a">{Answer}</div></div>
  1081. {block:IndexPage}
  1082. <div class="permalinktext">
  1083. Posted on {Month} {DayOfMonth}, {Year} <div style="text-align:right;margin-top:-16px"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div></div>
  1084. {/block:IndexPage}
  1085. {/block:Answer}
  1086.  
  1087. {block:ContentSource}<!-- {SourceURL}
  1088. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1089. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1090. {/block:ContentSource}
  1091.  
  1092. <!-- {block:NoRebloggedFrom}
  1093. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1094. {/block:NoRebloggedFrom} -->
  1095.  
  1096. {block:PermalinkPage}
  1097. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1098. {block:Date}
  1099. <div class="inf">
  1100. Posted on {month} {dayofmonth}{dayofmonthsuffix} at {12hour}:{minutes}{ampm} <br>
  1101. {block:RebloggedFrom}
  1102. source: <a href="{ReblogRootURL}">{ReblogRootName}</a> <br> via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  1103. {/block:RebloggedFrom}
  1104. <div class="tg">
  1105. {block:HasTags}
  1106. tags: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;
  1107. {/block:Tags}{/block:HasTags}
  1108. </div>
  1109. <a class="show">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a></div>
  1110. <div class="notas">
  1111. {block:PostNotes}
  1112. {PostNotes}
  1113. {/block:PostNotes}
  1114. {/block:Date}
  1115. </div>
  1116. {/block:PermalinkPage}
  1117. {/block:Date}
  1118. </div>
  1119. {/block:Posts}
  1120. </div>
  1121.  
  1122.  
  1123. <div class="pagination">
  1124. {block:Pagination}
  1125. {block:PreviousPage}
  1126. <a href="{PreviousPage}"></a>
  1127. {/block:PreviousPage}
  1128.  
  1129. {block:NextPage}
  1130. <a href="{NextPage}" class="next"></a>
  1131. {/block:NextPage}
  1132. {/block:Pagination}</div></div>
  1133.  
  1134. <!--Like seriously guys, DON'T TOUCH any of this scripts unless you know what it does or you will ruin your whole theme--->
  1135. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  1136. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  1137. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  1138. <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:400,700|Hind:400,700|Dancing+Script:400,700|Open+Sans:400,700|Muli|Kurale|PT+Serif:400,700|Old+Standard+TT:400,700|Roboto:400,700|Roboto+Condensed:400,700|Lato:400,700|Raleway:400,700,300|Montez|Karla:400,700|Quicksand:400,700|Petit+Formal+Script|Clicker+Script|Mako|Maven+Pro:400,700' rel='stylesheet' type='text/css'>
  1139. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1140. <script src ="http://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1141. <link rel="stylesheet" href="http://static.tumblr.com/8pnyeus/29To2og0o/styles.css">
  1142. <script src="http://static.tumblr.com/8pnyeus/nfIo2oh8w/l-script.js" type="text/javascript"></script>
  1143. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1144. {block:IndexPage}
  1145. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  1146. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1147. {/block:IndexPage}
  1148. <script>
  1149. $(document).ready(function(){
  1150. $(".show").click(function(){
  1151. $(".notas").slideToggle("slow");
  1152. });
  1153. });
  1154. $(document).ready(function(){
  1155. $('.photo-slideshow').pxuPhotoset({
  1156. lightbox: true,
  1157. rounded: false,
  1158. gutter: '10px',
  1159. photoset: '.photo-slideshow',
  1160. photoWrap: '.photo-data',
  1161. photo: '.pxu-photo'
  1162. });
  1163. {block:IndexPage}
  1164. var $container = $('#posts');
  1165. $container.masonry({ itemSelector: '.entry' });
  1166. $container.imagesLoaded(function(){
  1167. $container.masonry();
  1168. $container.find('.entry').animate({ opacity: 1, zIndex: 1 });
  1169. });
  1170. $container.infinitescroll({
  1171. itemSelector: '.entry',
  1172. navSelector: '.pagination',
  1173. nextSelector: '.next',
  1174. loadingImg: '',
  1175. loadingText: '<em></em>',
  1176. bufferPx: 2000
  1177. },
  1178. function( newElements ) {
  1179. var $newElems = $( newElements );
  1180. $newElems.find('.photo-slideshow').pxuPhotoset({
  1181. lightbox: true,
  1182. rounded: false,
  1183. gutter: '10px',
  1184. photoset: '.photo-slideshow',
  1185. photoWrap: '.photo-data',
  1186. photo: '.pxu-photo'
  1187. },
  1188.  
  1189. function(){
  1190. resizeVideos(); },
  1191.  
  1192. function(){
  1193. $container.masonry();
  1194. });
  1195. $newElems.imagesLoaded(function(){
  1196. $container.masonry( 'appended', $newElems );
  1197. $newElems.animate({ opacity: 1, zIndex: 1 });
  1198. });
  1199. });
  1200. {/block:IndexPage}
  1201. });
  1202. </script>
  1203. </body>
  1204. </html>
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!