Advertisement
Carolaine_Vieira

Base Theme

Mar 28th, 2016
898
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.11 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---
  6. Base theme by amplamente.tumblr.com
  7. --->
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14. <meta name="color:Background" content="#eee" />
  15. <meta name="color:Post" content="#Fff" />
  16. <meta name="color:Borders" content="#eee" />
  17. <meta name="color:Accent" content="#c9a7ea" />
  18. <meta name="color:Text" content="#999" />
  19. <meta name="color:Link" content="#888" />
  20. <meta name="color:Link hover" content="#ccc" />
  21. <meta name="color:Sidebar bg" content="#Fff" />
  22. <meta name="color:Sidebar link" content="#888" />
  23. <meta name="color:Sidebar link hover" content="#ccc" />
  24.  
  25. <meta name="image:Background" content="" />
  26. <meta name="image:Sidebar" content="" />
  27.  
  28. <meta name="if:InfiniteScrolling" content="0"/>
  29.  
  30. <meta name="text:Link1Title" content="link 1" />
  31. <meta name="text:Link1Url" content="/" />
  32. <meta name="text:Link2Title" content="link 2" />
  33. <meta name="text:Link2Url" content="/" />
  34. <meta name="text:Link3Title" content="link 3" />
  35. <meta name="text:Link3Url" content="/" />
  36. <meta name="text:Link4Title" content="link 4" />
  37. <meta name="text:Link4Url" content="/" />
  38.  
  39. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  40.  
  41. <style type="text/css">
  42.  
  43. /** BODY **/
  44.  
  45. body {
  46.  
  47. background: {color:background} url("{image:background}") fixed;
  48. color:{color:Text};
  49. font-size:10px;
  50. font-family:Open Sans;
  51.  
  52. }
  53. /** BODY **/
  54.  
  55. /** LINKS **/
  56. a {
  57. text-decoration:none;
  58. color:{color:link};
  59. -webkit-transition: all 0.5s ease-out;
  60. -moz-transition: all 0.5s ease-out;
  61. -ms-transition: all 0.5s ease-out;
  62. -o-transition: all 0.5s ease-out;
  63. transition: all 0.5s ease-out;
  64. }
  65. a:hover {
  66.  
  67. color:{color:link hover};
  68. -webkit-transition: all 0.5s ease-out;
  69. -moz-transition: all 0.5s ease-out;
  70. -ms-transition: all 0.5s ease-out;
  71. -o-transition: all 0.5s ease-out;
  72. transition: all 0.5s ease-out;
  73.  
  74. }
  75. /** LINKS **/
  76.  
  77. /** POST **/
  78. #post {
  79.  
  80. width:400px;
  81. background:transparent;
  82. margin-left:450px;
  83. margin-top:20px;
  84.  
  85. }
  86.  
  87. /** POST **/
  88.  
  89. /** ENTRY **/
  90. .entry {
  91. float:left;
  92. width:400px;
  93. padding:15px;
  94. margin-bottom:70px;
  95. background:{color:post};
  96.  
  97. }
  98. /** ENTRY **/
  99.  
  100. /** ENTRY PERMA HOVER - REBLOG AND LIKE BUTTON **/
  101. .entry .permhover {
  102.  
  103. width:23px;
  104. height:auto;
  105. position:absolute;
  106. margin-left:0px;
  107. margin-top:0px;
  108. background:transparent;
  109. opacity:0.0;
  110. padding:15px;
  111. text-align:center;
  112. -webkit-transition: all 0.5s ease-out;
  113. -moz-transition: all 0.5s ease-out;
  114. -ms-transition: all 0.5s ease-out;
  115. -o-transition: all 0.5s ease-out;
  116. transition: all 0.5s ease-out;
  117.  
  118. }
  119.  
  120. .entry:hover .permhover {
  121.  
  122. opacity:1;
  123. -webkit-transition: all 0.5s ease-out;
  124. -moz-transition: all 0.5s ease-out;
  125. -ms-transition: all 0.5s ease-out;
  126. -o-transition: all 0.5s ease-out;
  127. transition: all 0.5s ease-out;
  128.  
  129. }
  130. /** ENTRY PERMA HOVER **/
  131.  
  132. /** QUOTE **/
  133.  
  134. .quote {
  135.  
  136. font-size:15px;
  137. text-align:center;
  138. padding-left:30px;
  139. padding-right:30px;
  140. margin-bottom:15px;
  141.  
  142. }
  143.  
  144. /** QUOTE SOURCE **/
  145.  
  146. .qsub {
  147.  
  148. font-size:13px;
  149.  
  150. }
  151.  
  152. /** QUOTE **/
  153.  
  154. /** CHAT **/
  155.  
  156. .chat {
  157.  
  158. padding:10px;
  159.  
  160. }
  161. .ch1 {
  162.  
  163. padding:10px;
  164. background:{color:opcional};
  165. border:1px solid {color:Background};
  166. margin-bottom:5px;
  167.  
  168. }
  169. .ch1 b{
  170.  
  171. color:{color:Accent};
  172. margin-right:2px;
  173.  
  174. }
  175.  
  176. /** CHAT **/
  177.  
  178. /** POST TITLE **/
  179.  
  180. h1 {
  181.  
  182. text-align:center;
  183.  
  184. }
  185.  
  186. /** POST TITLE **/
  187.  
  188. blockquote {
  189.  
  190. margin-left:15px;
  191. padding-left:10px;
  192. border-left:3px solid {color:Background};
  193.  
  194. }
  195.  
  196. .caption {}
  197. .caption a{border-bottom:1px solid {color:borders};}
  198.  
  199. /** ALBUM **/
  200.  
  201. .albumfoto{
  202.  
  203. float:left;
  204. width:80px;
  205. margin-top:0px;
  206. margin-left:5px;
  207.  
  208. }
  209. .albumfoto img{
  210.  
  211. width:80px;
  212. border-radius:100%;
  213.  
  214. }
  215.  
  216. .audiodesc {
  217.  
  218. margin-left:90px;
  219. padding:10px;
  220. background:transparent;
  221. margin-top:0px;
  222. min-height:60px;
  223. font-weight:bold;
  224. margin-bottom:10px;
  225.  
  226. }
  227.  
  228. .audioplay {
  229.  
  230. position:absolute;
  231. overflow:hidden;
  232. max-width:30px;
  233. height:28px;
  234. background:{color:Background};
  235. margin-left:25px;
  236. margin-top:-60px;
  237.  
  238. }
  239.  
  240. /** ALBUM **/
  241.  
  242. /** AKS AND ANSWER **/
  243.  
  244. .pessoap a{
  245.  
  246. text-transform:uppercase;
  247.  
  248. }
  249. .pessoapfoto img{
  250.  
  251. float:left;
  252. border-radius:2px;
  253.  
  254. }
  255. .pergunta {
  256.  
  257. background:#eee;
  258. padding:15px;
  259. margin-left:50px;
  260.  
  261. }
  262. .sresposta {
  263.  
  264. padding:5px;
  265. margin-top:5px;
  266.  
  267. }
  268.  
  269. /** ASK AND ANSWER **/
  270.  
  271. /** REBLOG LINK **/
  272.  
  273. .seureblog {
  274. margin-top:20px;
  275. text-align:left;
  276. border-top:1px solid {color:borders};
  277. padding:10px;
  278. padding-bottom:0px;
  279. font-size:10px;
  280.  
  281. }
  282. .seureblog a {
  283.  
  284. margin-right:8px;
  285.  
  286. }
  287.  
  288. /** REBLOG LINK **/
  289.  
  290. .pagination {display:none;}
  291.  
  292. .permalink {
  293.  
  294. padding:10px;
  295.  
  296. }
  297.  
  298. /** TAGS **/
  299.  
  300. .tags {
  301.  
  302. padding:10px;
  303.  
  304. }
  305. .tags a{
  306.  
  307. text-transform:lowercase;
  308.  
  309. }
  310.  
  311. /** TAGS **/
  312.  
  313. /** SIDEBAR **/
  314.  
  315. #sidebar {
  316.  
  317. background:{color:sidebar bg};
  318. padding:10px;
  319. position:fixed;
  320. width:150px;
  321. left:200px;
  322. top:150px;
  323.  
  324. }
  325. .sideimg {
  326.  
  327. width:150px;
  328.  
  329. }
  330.  
  331. .description {
  332.  
  333. padding:10px;
  334. text-align:center;
  335.  
  336. }
  337. .sidetitle {
  338.  
  339. background:{color:borders};
  340. text-transform:uppercase;
  341. padding:10px;
  342. text-align:center;
  343.  
  344.  
  345. }
  346.  
  347. /** SIDEBAR **/
  348.  
  349. /** NAVIGATION **/
  350.  
  351. #navigation {
  352. background:transparent;
  353. width:auto;
  354. text-align:center;
  355. }
  356. #navigation a {
  357. margin-left:10px;
  358. display:inline-block;
  359. padding:5px;
  360. color:{color:sidebar link};
  361. font-size:10px;
  362. -webkit-transition:all 0.3s ease-out;
  363. -moz-transition:all 0.3s ease-out;
  364. transition:all 0.3s ease-out;
  365. }
  366. #navigation a:hover {
  367. color:{color:sidebar link hover};
  368. -webkit-transition:all 0.3s ease-out;
  369. -moz-transition:all 0.3s ease-out;
  370. transition:all 0.3s ease-out;
  371. }
  372.  
  373. /** NAVIGATION **/
  374.  
  375. /** PAGINATION **/
  376.  
  377. .pages {
  378.  
  379. margin-top:20px;
  380. text-align:center;
  381.  
  382. }
  383.  
  384. /** PAGINATION **/
  385.  
  386. /** CREDIT **/
  387.  
  388. .credit {
  389.  
  390. position:fixed;
  391. right:10px;
  392. bottom:10px;
  393. text-transform:uppercase;
  394. font-size:10px;
  395.  
  396. }
  397.  
  398. /** CREDIT **/
  399.  
  400. {CustomCSS}
  401.  
  402. </style>
  403. <body>
  404.  
  405. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  406. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  407.  
  408. <script>
  409. $(function(){
  410. var $container = $('#post');
  411. $container.imagesLoaded(function(){
  412. $container.masonry({
  413. itemSelector: '.entry',
  414. });
  415. });
  416. $container.infinitescroll({
  417. itemSelector : ".entry",
  418. navSelector : "div.pagination",
  419. nextSelector : ".pagination a#next",
  420. loadingImg : "http://static.tumblr.com/nnc3xz0/eYDo4b927/loading5.gif",
  421. loadingText : "<em></em>",
  422. bufferPx : 10000,
  423. extraScrollPx: 12000,
  424. },
  425. // trigger Masonry as a callback
  426. function( newElements ) {
  427. var $newElems = $( newElements ).css({ opacity: 0 });
  428. // ensure that images load before adding to masonry layout
  429. $newElems.imagesLoaded(function(){
  430. $newElems.animate({ opacity: 1 });
  431. $container.masonry( 'appended', $newElems, true );
  432. });
  433. }
  434. );
  435. });
  436. </script>
  437.  
  438. <div id="sidebar">
  439.  
  440. <div class="sidetitle">{Title}</div>
  441. <img class="sideimg" src="{image:sidebar}" />
  442. <div class="description">{Description}</div>
  443. <div id="navigation">
  444. <a href="{text:link1url}">{text:link1title}</a></br>
  445. <a href="{text:link2url}">{text:link2title}</a></br>
  446. <a href="{text:link3url}">{text:link3title}</a></br>
  447. <a href="{text:link4url}">{text:link4title}</a>
  448. </div>
  449.  
  450. {block:IfNotInfiniteScrolling}
  451. <div class="pages">
  452. {block:Pagination}
  453. {block:PreviousPage}<a href="{PreviousPage}">Back</a>{/block:PreviousPage}
  454. </br>{CurrentPage} of {TotalPages}</br>
  455. {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  456. {/block:Pagination}
  457. </div>
  458. {/block:IfNotInfiniteScrolling}
  459.  
  460. </div>
  461.  
  462.  
  463. <div id="post">
  464.  
  465. {block:Posts}
  466.  
  467. <div class="entry">
  468.  
  469. <div class="permhover">
  470.  
  471. {ReblogButton Color="Black"}
  472. {LikeButton Color="Black"}
  473.  
  474. </div>
  475.  
  476. {block:Title} <h1>{TItle}</h1> {/block:Title}
  477.  
  478. {block:Text} {Body} {/block:Text}
  479.  
  480. {block:Photo}
  481. <img src="{PhotoURL-400}" width="400" />
  482. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  483. {/block:Photo}
  484.  
  485. {block:Photoset}
  486. {Photoset-400}
  487. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  488. {/block:Photoset}
  489.  
  490. {block:Quote}
  491. <div class="quote">
  492. "{Quote}"
  493. <div class="qsub">- {block:Source} {Source} {/block:Source} {block:Caption} {Caption} {block:Caption}</div>
  494. </div>
  495. {/block:Quote}
  496.  
  497. {block:Link}
  498. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  499. {block:Description} {Description} {/block:Description}
  500. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  501. {/block:Link}
  502.  
  503. {block:Chat}
  504. <div class="chat">
  505. {block:Lines}
  506. {block:Label}
  507. <div class="ch1">
  508. <b>{Label}</b>
  509. {/block:Label}
  510. {Line}</br>
  511. </div>
  512. {/block:Lines}
  513. </div>
  514. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  515. {/block:Chat}
  516.  
  517. {block:Audio}
  518. <div class="albumfoto">
  519. {block:AlbumArt}<img src="{AlbumArtURL}" />{/block:AlbumArt}
  520. <div class="audioplay">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer} </div></div>
  521.  
  522. <div class="audiodesc">
  523. {block:Artist}{Artist}{/block:Artist}</br>
  524. {block:Album}{Album}{/block:Album}</br>
  525. {block:TrackName}{TrackName}{/block:TrackName}</br>
  526. {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}
  527. </div>
  528.  
  529. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  530. {/block:Audio}
  531.  
  532. {block:Video}
  533. {Video-400}
  534. {PlayCountWithLabel}
  535. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  536. {/block:Video}
  537.  
  538. {block:Answer}
  539. <div class="pessoapfoto"><img src="{AskerPortraitURL-40}" /></div>
  540. <div class="pergunta">
  541. <div class="pessoap">{Asker}</div>
  542. {Question}
  543. </div>
  544. <div class="sresposta">{Answer}</div>
  545. <div class="caption">{block:Caption} {Caption} {block:Caption}</div>
  546.  
  547. {/block:Answer}
  548.  
  549. <div class="seureblog">
  550.  
  551. <a href="{ReblogUrl}">Reblog</a>
  552. {block:Date}
  553. <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} {Year}</a>
  554. {/block:Date}
  555. <a href="{Permalink}">{NoteCountWithLabel}</a>
  556.  
  557. <div class="tags">
  558. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  559. </div>
  560.  
  561. {block:PermalinkPage}
  562.  
  563. <div class="permalink">
  564.  
  565. <b>Date:</b> {block:Date}{DayOfMonthWithZero} {Month} {ShortYear}{/block:Date}</br>
  566. <b>Notes:</b> {NoteCount} </br>
  567. {block:RebloggedFrom}<b>Via: </b> <a href="{ReblogParentURL}">{ReblogParentName}</a></br>
  568. <b>Source: </b> <a href="{ReblogRootURL}">{ReblogRootName}</a>
  569. {/block:RebloggedFrom}
  570.  
  571. {block:PostNotes}{PostNotes-16}{/block:PostNotes}
  572.  
  573. </div>
  574.  
  575. {/block:PermalinkPage}
  576.  
  577. </div>
  578.  
  579. {/block:Posts}
  580.  
  581. </div>
  582.  
  583. {block:IfInfiniteScrolling}
  584. <div class="pagination">
  585. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}
  586. <a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  587. </div>
  588. {/block:IfInfiniteScrolling}
  589.  
  590. <div class="credit">
  591. <a href="http://ttamplamente.tumblr.com/" title="this is a base theme" target="_blank">Credit</a>
  592. </div>
  593.  
  594. </body>
  595. </head>
  596. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement