API tools faq
paste
Advertisement
trenzalours

theme 12 ~ darkness

trenzalours
Jun 23rd, 2014
392
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <html>
  4.  
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta name="author" content="Antonio Pratas">
  8. <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
  9. <script src="http://code.jquery.com/jquery-latest.js"></script>
  10.  
  11.  
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  13.  
  14.  
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}" />
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  19. <!---
  20. |||||||||| T R E N Z A L O U R S - T H E M E S ||||||||||
  21.  
  22. -PLEASE DON'T REMOVE THE CREDIT--DON'T REPOST AND CLAIM AS YOUR OWN-
  23. -EDIT AS MUCH AS YOU LIKE--Don't just take the update code from theme-
  24. _____________________________________________________________________________
  25. ~You can remove the updates tab I've labeled
  26. where the codes begin and end for you!~
  27. Don't forget you can search within the theme code(control+f)
  28. to find the updates tab and ask codes! You can type out the
  29. FAQ in the area I've labeled for you! Enjoy!
  30. _____________________________________________________________________________
  31. -Feel free to message me with any questions! Enjoy!
  32.  
  33. wwww.trenzathemes.tumblr.com *****
  34. ****** wwww.trenzalours.tumblr.com
  35. _____________________________________________________________________________
  36. --->
  37.  
  38. <!---COLOR METAS--->
  39.  
  40. <meta name="color:bg" content="#ffffff">
  41. <meta name="color:linkheader" content="#000000">
  42. <meta name="color:link" content="#gggggg">
  43. <meta name="color:link hover" content="#000000">
  44. <meta name="color:text" content="#000000">
  45. <meta name="color:title" content="#gggggg">
  46. <meta name="color:header" content="#ffffff">
  47. <meta name="color:accent" content="#eeeeee">
  48. <meta name="color:scrollbar" content="#gggggg">
  49. <meta name="color:selection" content="#000000" />
  50. <meta name="color:block background" content="#eeeeee">
  51. <meta name="color:block text" content="#000000">
  52. <meta name="color:block1" content="#d1d1d1">
  53. <meta name="color:block2" content="#dddddd">
  54. <meta name="color:block3" content="#eeeeee">
  55. <meta name="color:block4" content="#f1f1f1">
  56.  
  57. <!---TOGGLE METAS--->
  58.  
  59. <meta name="if:Captions Off" content="0">
  60. <meta name="if:500pxPosts" content="1">
  61. <meta name="if:400pxPosts" content="0">
  62. <meta name="if:Sidebar" content="1">
  63.  
  64. <!---IMAGE METAS--->
  65.  
  66. <meta name="image:sidebar" content="/">
  67.  
  68. <!---ASK BOX METAS--->
  69.  
  70. <meta name="text:url" content="url here">
  71. <meta name="text:askbox title" content="message">
  72. <meta name="text:ask" content="message">
  73.  
  74. <!---LINK METAS--->
  75.  
  76. <meta name="text:link1" content="">
  77. <meta name="text:link1 url" content="/">
  78. <meta name="text:link2" content="">
  79. <meta name="text:link2 url" content="/">
  80. <meta name="text:link3" content="">
  81. <meta name="text:link3 url" content="/">
  82. <meta name="text:link4" content="">
  83. <meta name="text:link4 url" content="/">
  84.  
  85.  
  86.  
  87. <!---FONTS--->
  88.  
  89. <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
  90. <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  91.  
  92. <!--side push menu from codrops-->
  93. <!--don't touch-->
  94. <script src="http://takien.github.io/jPushMenu/js/jquery-1.9.1.min.js"></script>
  95. <script src="http://takien.github.io/jPushMenu/js/jPushMenu.js"></script>
  96.  
  97. <!--call jPushMenu, required-->
  98. <script>
  99. jQuery(document).ready(function($) {
  100. $('.toggle').jPushMenu();
  101. });
  102. </script>
  103.  
  104.  
  105. <style type="text/css">
  106.  
  107. .tabtitle{/* this styles the title for each tab*/
  108. font-size:9px;
  109. font-family: 'Alegreya Sans SC', sans-serif;
  110. text-transform:uppercase;
  111. background:{color:linkheader};
  112. color:{color:header};
  113. border-radius:5px;
  114. letter-spacing:2px;
  115. margin-bottom:5px;
  116. padding:5px;
  117. }
  118.  
  119. #content{/*Style of the tabs content*/
  120. position:absolute;
  121. right:50%;
  122. opacity:0;
  123. overflow:hidden;
  124. word-spacing:1px;
  125. font-size:9px;/*change font size*/
  126. color:{color:block text};
  127. width:5px;
  128. height:10px;
  129. text-align:left;
  130. margin-left:25px;
  131. margin-right:10px;
  132. -webkit-transition: all 1.1s ease;
  133. -moz-transition: all 1.1s ease;
  134. transition: all 1.1s ease;
  135. }
  136.  
  137. /*begin first block background css*/
  138.  
  139. #block1{/*STYLE FIRST COLOR BLOCK*/
  140. /*I use this to move the block freely around*/
  141. background:{color:block1};
  142. width:5px;
  143. height:50px;
  144. }
  145. /*whenever you add more make sure to change all the numbers inside of the new code with a new number!*/
  146.  
  147. #block1:hover #content{ /*Here you are controlling two things at once. So when you hover over either of these the transition runs.*/
  148. opacity:1;
  149. background:transparent;
  150. border-radius:10px;
  151. width:150px;
  152. height:auto;
  153. padding:10px;
  154. -webkit-transition: all 1.3s ease-out;
  155. -moz-transition: all 1.3s ease-out;
  156. transition: all 1.3s ease-out;
  157. }
  158.  
  159. /*end first block css*/
  160.  
  161. /*begin second block css*/
  162.  
  163. #block2{
  164.  
  165. background:{color:block2};
  166. width:5px;
  167. height:50px;
  168. }
  169.  
  170.  
  171. #block2:hover #content{
  172. opacity:1;
  173. background:transparent;
  174. border-radius:10px;
  175. width:150px;
  176. height:auto;
  177. padding:10px;
  178. -webkit-transition: all 1.3s ease-out;
  179. -moz-transition: all 1.3s ease-out;
  180. transition: all 1.3s ease-out;
  181. }
  182. /*end second block css*/
  183.  
  184. /*begin third block css*/
  185.  
  186. #block3{
  187.  
  188. background:{color:block3};
  189. width:5px;
  190. height:50px;
  191. }
  192.  
  193. #block3:hover #content{
  194. opacity:1;;
  195. background:transparent;
  196. border-radius:10px;
  197. width:150px;
  198. height:auto;
  199. padding:10px;
  200. -webkit-transition: all 1.3s ease-out;
  201. -moz-transition: all 1.3s ease-out;
  202. transition: all 1.3s ease-out;
  203. }
  204. /*end third block css*/
  205.  
  206. /*begin fourth block css*/
  207.  
  208. #block4{
  209.  
  210. background:{color:block4};
  211. width:5px;
  212. height:50px;
  213. }
  214.  
  215. #block4:hover #content{
  216. opacity:1;
  217. background:transparent;
  218. border-radius:10px;
  219. width:150px;
  220. height:auto;
  221. padding:10px;
  222. -webkit-transition: all 1.3s ease-out;
  223. -moz-transition: all 1.3s ease-out;
  224. transition: all 1.3s ease-out;
  225. }
  226. /*end fourth block css*/
  227.  
  228.  
  229. #updates{ /*Positon of the entire tab//Holder of tab*/
  230. {block:if400pxPosts}left:440px;{/block:if400pxPosts}
  231. {block:if500pxPosts}left:415px;{/block:if500pxPosts}
  232. position:fixed;
  233. text-transform:uppercase;
  234. font-family:consolas;
  235. background-color:transparent;
  236. letter-spacing:0px;
  237. z-index:9999999999999999999;
  238. top:200px;
  239. }
  240.  
  241. /*---end updates tab css---*/
  242.  
  243. ::selection {
  244. background-color:{color:selection};
  245. color:{color:accent};
  246. }
  247.  
  248.  
  249. *, body, a, a:hover {
  250. cursor: url(http://i62.tinypic.com/2exuagi.png), auto;
  251.  
  252.  
  253. }
  254.  
  255.  
  256. /* SCROLL BAR */
  257.  
  258. ::-webkit-scrollbar {
  259. background-color:{color:bg};
  260.  
  261. height:8px;
  262. width:4px;
  263. border-radius:2px;
  264.  
  265. }
  266. ::-webkit-scrollbar-thumb:vertical {
  267. background-color:{color:scrollbar};
  268. height:30px;
  269. border-radius:2px;
  270.  
  271.  
  272. }
  273. ::-webkit-scrollbar-thumb:horizontal {
  274. background-color:{color:scrollbar};
  275. height:4px!important;
  276.  
  277. }
  278.  
  279. /*---TOOLTIPS---*/
  280.  
  281. #s-m-t-tooltip {
  282. background:{color:bg};
  283. max-width:300px;
  284. font-family:helvetica;
  285. font-weight:bold;
  286. font-style:italic;
  287. font-size:10px;
  288. color:white;
  289. letter-spacing:0px;
  290. text-transform:lowercase;
  291. padding:3px 4px 3px 4px;
  292. margin:-25px 0px 0px 0px;
  293. z-index:9999999999999999999999;
  294. }
  295.  
  296. @-webkit-keyframes Beeh {
  297. 0% {-webkit-transform: opacity(.2);}
  298. 50% {-webkit-transform: opacity(1.00);}
  299. 70% {-webkit-transform: opacity(.7);}
  300. 100% {-webkit-transform: opacity(1);}}
  301.  
  302. /*---end tooltips---*/
  303.  
  304. /*TUMBLR CONTROL ICONS*/
  305.  
  306. #tumblr_controls{
  307. position:fixed !important;
  308. -webkit-filter: invert(100%)
  309. }
  310.  
  311. /*MAIN BODY CSS*/
  312.  
  313. body {
  314. background:{color:bg};
  315. font-family:calibri;
  316. width:1100px;
  317. font-size:8px;
  318. font-weight:normal;
  319. }
  320.  
  321. a {
  322. color:{color:link};
  323. text-decoration:none;
  324. -moz-transition-duration:0.5s;
  325. -webkit-transition-duration:0.5s;
  326. -o-transition-duration:0.5s;
  327. }
  328.  
  329. a:hover {
  330. color:{color:link hover};
  331. text-decoration:none;
  332. -moz-transition-duration:0.5s;
  333. -webkit-transition-duration:0.5s;
  334. -o-transition-duration:0.5s;
  335. }
  336.  
  337.  
  338. h1 {
  339. {block:if500pxPosts}width:500px;{/block:if500pxPosts}
  340. {block:if400pxPosts}width:400px;{/block:if400pxPosts}
  341. font-weight:normal;
  342. font-size:12px;
  343. text-align:center;
  344. font-style:normal;
  345. line-height:110%;
  346. letter-spacing:1px;
  347. text-transform:uppercase;
  348. color:{color:text};
  349. }
  350.  
  351. h2 {
  352. {block:if500pxPosts}width:500px;{/block:if500pxPosts}
  353. {block:if400pxPosts}width:400px;{/block:if400pxPosts}
  354. font-size:13px;
  355. font-family: 'Alegreya Sans SC', sans-serif;
  356. text-align:center;
  357. line-height:110%;
  358. letter-spacing:-0.5px;
  359. color:{color:text};
  360. font-weight:bold;
  361. padding:5px;
  362. padding-bottom:2px;
  363. }
  364.  
  365. h3 {
  366. font-size:12px;
  367. text-align:center;
  368. line-height:100%;
  369. letter-spacing:2px;
  370. color:{color:title};
  371. font-weight:normal;
  372. text-transform:uppercase;
  373. padding:5px;
  374. }
  375.  
  376. h3 a{
  377. color:{color:title};
  378. }
  379.  
  380. h4 {
  381. font-size:12px;
  382. text-align:left;
  383. line-height:100%;
  384. letter-spacing:2px;
  385. color:{color:header};
  386. font-weight:normal;
  387. text-transform:uppercase;
  388. padding:5px;
  389. }
  390.  
  391. h5{
  392. font-size:12px;
  393. text-align:center;
  394. line-height:100%;
  395. letter-spacing:1px;
  396. color:{color:text};
  397. font-weight:normal;
  398. text-transform:uppercase;
  399. padding:5px;
  400. }
  401.  
  402. a {
  403. text-decoration:none;
  404. outline:none;
  405. -moz-outline-style:none;
  406. color:{color:link};
  407. transition-duration:0.5s;
  408. -o-transition-duration:0.5s;
  409. -ms-transition-duration:0.5s;
  410. -moz-transition-duration:0.5s;
  411. -webkit-transition-duration:0.5s;
  412. }
  413.  
  414. a:hover{
  415. letter-spacing:3px;
  416. color:{color:link};
  417. -webkit-transition: all 0.3s;
  418. -moz-transition: all 0.3s;
  419. transition: all 0.3s;
  420. }
  421. }
  422.  
  423. strong, b{
  424. font-weight:bold;
  425. color:{color:text};
  426. }
  427.  
  428. big{
  429. font-family: 'Alegreya Sans SC', sans-serif;
  430. font-size:11px;
  431. font-weight:bold;
  432. color:{color:text};
  433. text-transform:uppercase;
  434. }
  435.  
  436.  
  437. i {
  438. font-style:italic;
  439. color:{color:accent};
  440. }
  441. em{
  442. font-style:italic;
  443. }
  444.  
  445. pre {
  446. padding:3px 5px;
  447. background-color:#1F1F1F;
  448. line-height:110%;
  449. }
  450.  
  451. ol {
  452. list-style:upper-roman;
  453. line-height:115%;
  454. }
  455.  
  456.  
  457. li {
  458. list-style:circle;
  459. text-align:left;
  460. line-height:120%;
  461. }
  462.  
  463.  
  464. img {
  465. border:none;
  466. max-width:100%;
  467. }
  468.  
  469.  
  470. blockquote {
  471. text-align:justify;
  472. padding:10px;
  473. margin-left:20px;
  474. {block:if500pxPosts}width:400px;{/block:if500pxPosts}
  475. {block:if400pxPosts}width:300px;{/block:if400pxPosts}
  476. }
  477.  
  478.  
  479. #theme {
  480.  
  481. width:800px;
  482. margin: -10px auto -13px auto;
  483. text-align: center;
  484. }
  485.  
  486. a {
  487. color:;
  488. text-decoration:none;
  489. -webkit-transition: all 0.7s ease-out;
  490. -moz-transition: all 0.7s ease-out;
  491. transition: all 0.7s ease-out;
  492.  
  493. }
  494.  
  495.  
  496.  
  497. /*/ POSTS /*/
  498.  
  499. #stuffcontainer {
  500. margin-top:120px;
  501. {block:if500pxPosts}margin-left:180px;{/block:if500pxPosts}
  502. {block:if400pxPosts}margin-left:230px;{/block:if400pxPosts}
  503. padding:25px;
  504. text-align:center;
  505. color:{color:text};
  506. margin-bottom: 20px;
  507.  
  508. }
  509.  
  510.  
  511. #stuff {
  512.  
  513. margin-bottom:110px;
  514. margin-left:220px;
  515.  
  516. {block:if500pxPosts}width:500px;{/block:if500pxPosts}
  517. {block:if400pxPosts}width:400px;{/block:if400pxPosts}
  518. text-align:justify;
  519. font-size:11px;
  520. line-height:100%;
  521. letter-spacing:0x;
  522. color:{color:text};
  523.  
  524. }
  525.  
  526.  
  527. /*/ NOTES /*/
  528.  
  529.  
  530. #info {
  531. {block:if500pxPosts}width:500px;{/block:if500pxPosts}
  532. {block:if400pxPosts}width:400px;{/block:if400pxPosts}
  533. position:absolute;
  534. margin-left:6px;
  535. padding:5px;
  536. font-size:8px;
  537. letter-spacing:1px;
  538. text-transform:uppercase;
  539. color:{color:link};
  540. margin-top:20px;
  541. text-align:left;
  542. opacity:0;
  543. -webkit-transition: all 1s ease-in-out;
  544. -moz-transition: all 1s ease-in-out;
  545. -o-transition: all 1s ease-in-out;
  546. -ms-transition: all 1s ease-in-out;
  547. transition: all 1s ease-in-out;
  548. }
  549.  
  550. #inforight{
  551. float:right;
  552. text-align:right;
  553. margin-right:13px;
  554. }
  555.  
  556. #info a{
  557. color:{color:text};
  558. -webkit-transition: all 1s ease-in-out;
  559. -moz-transition: all 1s ease-in-out;
  560. -o-transition: all 1s ease-in-out;
  561. -ms-transition: all 1s ease-in-out;
  562. transition: all 1s ease-in-out;
  563. }
  564.  
  565. #stuff:hover #info {
  566. color:{color:link};
  567. opacity:1;
  568. -webkit-transition: all 1s ease-in-out;
  569. -moz-transition: all 1s ease-in-out;
  570. -o-transition: all 1s ease-in-out;
  571. -ms-transition: all 1s ease-in-out;
  572. transition: all 1s ease-in-out;
  573. }
  574.  
  575.  
  576. /* TAGS */
  577.  
  578.  
  579. #tags {
  580. position:absolute;
  581. margin-top:5px;
  582. text-transform:lowercase;
  583. font-size:9px;
  584. margin-left:10px;
  585. opacity:.8;
  586. color:{color:link};
  587. -webkit-transition: all .3s ease-in-out;
  588. -moz-transition: all .3s ease-in-out;
  589. -o-transition: all .3s ease-in-out;
  590. -ms-transition: all .3s ease-in-out;
  591. transition: all .3s ease-in-out;
  592. }
  593.  
  594. #tags a{
  595. color:{color:link};
  596. -webkit-transition: all .3s ease-in-out;
  597. -moz-transition: all .3s ease-in-out;
  598. -o-transition: all .3s ease-in-out;
  599. -ms-transition: all .3s ease-in-out;
  600. transition: all .3s ease-in-out;
  601. }
  602.  
  603. #tags a:hover{
  604. color:{color:link hover};
  605. -webkit-transition: all .3s ease-in-out;
  606. -moz-transition: all .3s ease-in-out;
  607. -o-transition: all .3s ease-in-out;
  608. -ms-transition: all .3s ease-in-out;
  609. transition: all .3s ease-in-out;
  610. }
  611.  
  612. /* NOTES */
  613.  
  614. ol.notes {
  615. display:block;
  616. text-align:left;
  617. margin-bottom:30px;
  618. list-style-type:none;
  619. {block:if500pxPosts}width:520px;{/block:if500pxPosts}
  620. {block:if400pxPosts}width:420px;{/block:if400pxPosts}
  621. margin-left:250px;
  622. padding:0px;
  623. }
  624.  
  625. ol.notes li.note{
  626. padding:5px;
  627. padding-top:2px;
  628. margin-bottom:3px;
  629. }
  630.  
  631. .pagenotes {
  632. text-align:left;
  633. background:transparent;
  634. text-transform:uppercase;
  635. font-size:9px;
  636. }
  637.  
  638.  
  639. .pagenotes img{
  640. padding-right:5px;
  641. padding-top:5px;
  642. margin-bottom:-5px;
  643. border:none;
  644. padding-bottom:2px;
  645. }
  646.  
  647. /*/ PAGINATION /*/
  648.  
  649. #pagi {
  650. margin-top:50px;
  651. margin-left:25px;
  652. padding:15px;
  653. width:auto;
  654. text-align:center;
  655. margin-bottom:30px;
  656. font-size:10px;
  657. letter-spacing:1px;
  658. text-transform:lowercase;
  659. font-style:italic;
  660. z-index:100;
  661. color:{color:linkheader};
  662.  
  663. }
  664.  
  665.  
  666.  
  667.  
  668. /*/ ASK /*/
  669.  
  670. .ask {
  671. color:{color:header};
  672. border-top:3px solid {color:accent};
  673. padding:20px;
  674. text-align:center;
  675. line-height:15px;
  676.  
  677. }
  678.  
  679. .answer{
  680.  
  681. padding: 5px 10px 20px;
  682. text-align:center;
  683. font-style:italic;
  684. line-height:20px;
  685. background:#eee;
  686.  
  687.  
  688. }
  689.  
  690.  
  691. /*AUDIO added -Cathy 5/22 */
  692.  
  693. .cover {
  694. position: relative;
  695. z-index: 1;
  696. width:100px;
  697. background-color:{color:bg};
  698. padding-bottom:10px;
  699. }
  700.  
  701. .musicbutton {
  702. width: 20px;
  703. height: 30px;
  704. overflow: hidden;
  705. position: relative;
  706. z-index: 1000;
  707. margin: 12px 20px 10px 13px;
  708. }
  709.  
  710. .musicbox:hover {
  711. opacity:1;
  712. transition-duration:0.5s;
  713. -o-transition-duration:0.5s;
  714. -ms-transition-duration:0.5s;
  715. -moz-transition-duration:0.5s;
  716. -webkit-transition-duration:0.5s;
  717. }
  718.  
  719. .musicbox {
  720. background-color: #fff;
  721. position: absolute;
  722. z-index: 1000;
  723. margin-top:25px;
  724. margin-left:24px;
  725. opacity:0.6;
  726. width:50px;
  727. height:50px;
  728. transition-duration:0.5s;
  729. -o-transition-duration:0.5s;
  730. -ms-transition-duration:0.5s;
  731. -moz-transition-duration:0.5s;
  732. -webkit-transition-duration:0.5s;
  733. }
  734.  
  735.  
  736. ul.chat, .chat ol, .chat li {
  737. list-style:none;
  738. margin-left:5px;
  739. padding:2px;
  740. }
  741.  
  742. .label {
  743. font-size:10px;
  744. text-align:left;
  745. line-height:100%;
  746. letter-spacing:2px;
  747. color:{color:text};
  748. font-weight:normal;
  749. text-transform:uppercase;
  750. padding:5px;
  751. margin-left:10px;
  752. }
  753.  
  754.  
  755.  
  756. nav{
  757. width: 960px;
  758. margin: 0 auto;
  759. }
  760.  
  761.  
  762. /* HEADER */
  763.  
  764. header{
  765. position: fixed;
  766. top: 0;
  767. left: 0;
  768. width: 100%;
  769. background: {color:header};
  770. z-index: 10000;
  771. height: 229px;
  772. overflow: hidden;
  773. -webkit-transition: height 0.3s;
  774. -moz-transition: height 0.3s;
  775. transition: height 0.3s;
  776. }
  777.  
  778. {block:ifSidebar}
  779. header img{
  780. margin-top:10px;
  781. margin-left:25px;
  782. }{/block:ifSidebar}
  783.  
  784. {block:ifSidebar}
  785. header nav img {
  786. border:3px solid {color:accent} ;
  787. float:left;
  788. width:50px;
  789. border-radius:110px;
  790. -webkit-transition: all .5s ease-in;
  791. -moz-transition: all .5s ease-in;
  792. -o-transition: all .5s ease-in;
  793. -ms-transition: all .5s ease-in;
  794. transition: all .5s ease-in;
  795. }
  796. {/block:ifSidebar}
  797.  
  798. header img:hover{
  799. -webkit-filter: grayscale(100%);
  800. -webkit-transition: all .5s ease-out;
  801. -moz-transition: all .5s ease-out;
  802. -o-transition: all .5s ease-out;
  803. -ms-transition: all .5s ease-out;
  804. transition: all .5s ease-out;
  805.  
  806. }
  807.  
  808.  
  809. header nav{
  810. display:inline;
  811. {block:ifnotSidebar}padding-left:560px; {/block:ifnotSidebar}
  812. {block:ifSidebar}padding-left:415px;{/block:ifSidebar}
  813. display: block;
  814. {block:ifnotSidebar}margin:-15px auto;{/block:ifnotSidebar}
  815.  
  816. text-align: left;
  817. float: left;
  818. }
  819.  
  820. header a{
  821. color:{color:linkheader};
  822. float:left;
  823. letter-spacing:2px;
  824. margin-left:15px;
  825. font-size:9px;
  826. text-transform:uppercase;
  827. -webkit-transition: all 0.3s;
  828. -moz-transition: all 0.3s;
  829. transition: all 0.3s;
  830. }
  831.  
  832.  
  833.  
  834. {block:ifnotSidebar}header h3{
  835. color:{color:title};
  836. margin-top:10px;
  837. margin-left:298px;
  838. text-transform:uppercase;
  839. font-family: 'Alegreya Sans SC', sans-serif;
  840. letter-spacing:2px;
  841. line-height:20%;
  842. float:none;
  843. max-width:400px;
  844.  
  845. }{/block:ifnotSidebar}
  846.  
  847. header nav a :hover {
  848. letter-spacing:2px;
  849. color:{color:link};
  850. -webkit-transition: all 0.3s;
  851. -moz-transition: all 0.3s;
  852. transition: all 0.3s;
  853. }
  854.  
  855.  
  856. header, a, img, h3{
  857. transition: all .5s;
  858. -moz-transition: all .5s; /* Firefox 4 */
  859. -webkit-transition: all .5s; /* Safari and Chrome */
  860. -o-transition: all .5s; /* Opera */
  861. }
  862.  
  863.  
  864. /* Sizes for the bigger menu */
  865.  
  866. header.large{
  867. height:11%;
  868.  
  869. }
  870.  
  871. {block:ifnotSidebar}header.large h3{
  872. float:none;
  873. font-size:23px;
  874. margin-top:20px;
  875. -moz-transition: all .5s; /* Firefox 4 */
  876. -webkit-transition: all .5s; /* Safari and Chrome */
  877. -o-transition: all .5s; /* Opera */
  878. }{/block:ifnotSidebar}
  879.  
  880. header.large a{
  881. {block:ifnotSidebar}margin-top:5px;{/block:ifnotSidebar}
  882. {block:ifSidebar}margin-top:34px;{/block:ifSidebar}
  883. }
  884.  
  885.  
  886. /* Sizes for the smaller menu */
  887. header.small a{
  888. {block:ifnotSidebar}margin-top:5px;
  889. font-size:9px;{/block:ifnotSidebar}
  890. {block:ifSidebar}margin-top:20px;{/block:ifSidebar}
  891.  
  892.  
  893.  
  894. }
  895.  
  896.  
  897. header.small nav{
  898. {block:ifnotSidebar}margin-left:0px;{/block:ifnotSidebar}
  899. {block:ifSidebar}margin-left:-10px;{/block:ifSidebar}
  900. }
  901. header.small img{
  902. opacity:0;
  903.  
  904. }
  905.  
  906. {block:ifnotSidebar}header.small h3{
  907. font-size:16px;
  908. margin-top:20px;
  909. -moz-transition: all .5s; /* Firefox 4 */
  910. -webkit-transition: all .5s; /* Safari and Chrome */
  911. -o-transition: all .5s; /* Opera */
  912. }{/block:ifnotSidebar}
  913.  
  914. header.small{
  915. height:25px;
  916. padding-bottom:20px;
  917.  
  918. }
  919.  
  920. .cbp-spmenu {
  921. position: fixed;
  922. }
  923.  
  924.  
  925. /* Orientation-dependent styles for the content of the menu */
  926.  
  927. .cbp-spmenu-horizontal {
  928. padding-top:10px;
  929. padding-bottom:10px;
  930. margin-left:50px;
  931. text-align:justify;
  932. font-size:10px;
  933. line-height:11px;
  934. background:{color:bg};
  935. color:{color:text};
  936. width: 300px;
  937. height: 100%;
  938. }
  939.  
  940.  
  941. /* Horizontal menu that slides from the top or bottom */
  942.  
  943. .cbp-spmenu-top {
  944. top: -550px;
  945. }
  946.  
  947. .cbp-spmenu-top.cbp-spmenu-open {
  948. top: 100px;
  949. margin-left:50px;
  950. }
  951.  
  952.  
  953.  
  954.  
  955. /* Transitions */
  956.  
  957. .cbp-spmenu,
  958. .cbp-spmenu-push {
  959. -webkit-transition: all 0.3s ease;
  960. -moz-transition: all 0.3s ease;
  961. transition: all 0.3s ease;
  962. }
  963.  
  964.  
  965.  
  966. .pushtitle {
  967. font-family: 'Alegreya Sans SC', sans-serif;
  968. font-weight:bold;
  969. color:{color:title};
  970. font-size:12px;
  971. margin-bottom:5px;
  972. letter-spacing:2px;
  973. text-transform:uppercase;
  974. }
  975.  
  976.  
  977. #pushdescription {
  978. line-height:18px;
  979. padding:5px;
  980.  
  981. }
  982.  
  983.  
  984. /*container*/
  985. #container {
  986. top:50%;
  987. margin-left:-225px;
  988. position:absolute;
  989. z-index:999999999999999999999999999;
  990. }
  991. .cbp-spmenu {
  992. position: fixed;
  993. }
  994.  
  995.  
  996. /* Orientation-dependent styles for the content of the menu */
  997.  
  998. .cbp-spmenu-vertical {
  999. padding-top:10px;
  1000. padding-bottom:10px;
  1001. margin-top:10px;
  1002. padding-right:20px;
  1003. text-align:justify;
  1004. font-size:10px;
  1005. line-height:12px;
  1006. background:{color:bg};
  1007. color:{color:text};
  1008. width: 300px;
  1009. height: 100%;
  1010. z-index:999999999999999999999999;
  1011. }
  1012.  
  1013. /* Vertical menu that slides from the right or right */
  1014.  
  1015.  
  1016.  
  1017. .cbp-spmenu-left {
  1018. left: -320px;
  1019. }
  1020.  
  1021.  
  1022. .cbp-spmenu-left.cbp-spmenu-open {
  1023. left: 0px;
  1024. margin-top:10px;
  1025. }
  1026.  
  1027.  
  1028.  
  1029.  
  1030.  
  1031.  
  1032. /*DO NOT TOUCH*/
  1033. #cred {
  1034. color:{color:link};
  1035. bottom:13px;
  1036. position:fixed;
  1037. right:10px;
  1038. float:right;
  1039. font-size:13px;
  1040. letter-spacing:1px;
  1041. padding:4px;
  1042. }
  1043.  
  1044. #cred a i{
  1045. color:{color:link};
  1046. -webkit-transition-duration:1s;
  1047. -o-transition-duration:1s;
  1048. -moz-transition-duration:1s;
  1049.  
  1050. }
  1051.  
  1052. #cred a:hover {
  1053. color:{color:link hover};
  1054. color:transparent;
  1055. }
  1056. #counter{
  1057. padding:4px;
  1058. font-size:9px;
  1059. bottom:3px;
  1060. position:fixed;
  1061. right:10px;
  1062. }
  1063.  
  1064. {CustomCSS}
  1065.  
  1066. </style></head><body>
  1067. <!---begin updates tab code--->
  1068. <div id="updates">
  1069. <div id="holder">
  1070. <div id="block1">
  1071. <div id="content"><!---tab content--->
  1072. <div class="tabtitle">title</div><!---tab title--->
  1073. <div style="background-color:transparent; padding:2px;text-align:left;font-family:consolas;text-transform:uppercase;font-size:10px;letter-spacing:1px; font-weight:bold;color:#000;">secondary title</div>
  1074. <li>wow look</li>
  1075. <li>its a list</li>
  1076. <p></p>
  1077.  
  1078. </div>
  1079. </div>
  1080. <!---begin tab 02--->
  1081. <div id="block2">
  1082. <div id="content">
  1083. <div class="tabtitle">title</div><!---tab title--->
  1084. <div style="background-color:transparent; padding:2px;text-align:left;font-family:consolas;text-transform:uppercase;font-size:10px;letter-spacing:1px; font-weight:bold;color:#000;">secondary title<br></div>
  1085.  
  1086.  
  1087. </div>
  1088.  
  1089. </div>
  1090. <!---begin tab 03--->
  1091. <div id="block3">
  1092. <div id="content">
  1093. <div class="tabtitle">title</div><!---tab title--->
  1094.  
  1095. <br>
  1096. </div>
  1097.  
  1098. </div>
  1099. <!---begin tab 04--->
  1100. <div id="block4">
  1101. <div id="content">
  1102. <div class="tabtitle">title</div><!---tab title--->
  1103.  
  1104. </div>
  1105. </div>
  1106. </div>
  1107. </div>
  1108.  
  1109. <script type="text/javascript">
  1110. $(document).on("scroll",function(){
  1111. if($(document).scrollTop()>100){
  1112. $("header").removeClass("large").addClass("small");
  1113. }
  1114. else{
  1115. $("header").removeClass("small").addClass("large");
  1116. }
  1117. });
  1118. </script>
  1119. </head>
  1120. <body>
  1121. <header class="large">
  1122. {block:ifnotSidebar}
  1123. <h3>{Title}</h3>{/block:ifnotSidebar}
  1124. <nav>
  1125. {block:ifSidebar}<img src="{image:sidebar}">{/block:ifSidebar}
  1126. <a href="#"><a class="toggle menu-top">{text:ask}</a></a>
  1127. <a href="{text:link1 url}">{text:link1}</a>
  1128. <a href="{text:link2 url}">{text:link2}</a>
  1129. <a href="{text:link3 url}">{text:link3}</a>
  1130. <a href="{text:link4 url}">{text:link4}</a>
  1131. <a href="/" title="refresh">
  1132. <i class="fa fa-refresh fa-lg"></i></a>
  1133. {block:Pagination}
  1134. {block:PreviousPage}
  1135. <a href="{PreviousPage}" title="reverse">
  1136. <i class="fa fa-angle-double-left fa-lg"></i></a>
  1137. {/block:PreviousPage}
  1138. {block:NextPage}
  1139. <a href="{NextPage}" title="forward"><i class="fa fa-angle-double-right fa-lg"></i></a>
  1140. {/block:NextPage}
  1141. {/block:Pagination}
  1142.  
  1143. </nav>
  1144. </header>
  1145.  
  1146. <body class="cbp-spmenu-push">
  1147.  
  1148. <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s1">
  1149. <div class="menu" >
  1150. <div class="pushtitle"><h4>{text:askbox title}</h4></div>
  1151. <!---you can type FAQ here!--->
  1152. <div id="pushdescription"><div style="padding:10px; word-spacing:1px;">
  1153. <center>
  1154. <iframe frameborder="0" height="250" id="ask_form" scrolling="none" src="http://www.tumblr.com/ask_form/{text:url}.tumblr.com" width="100%"> </iframe>
  1155. <p></p>
  1156. </center>
  1157. </div>
  1158. </div>
  1159. </div>
  1160. </nav>
  1161.  
  1162. <div id="stuffcontainer">
  1163.  
  1164. {block:Posts}
  1165.  
  1166. <div id="stuff">
  1167.  
  1168. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  1169.  
  1170. {block:Quote}<h2>“{Quote}”</h2><h1>{Source}</h1>{/block:Quote}
  1171.  
  1172. {block:Link}<a href="{URL}"><h2>{Name}</h2></a>
  1173. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  1174.  
  1175. {block:Photo}
  1176.  
  1177. {block:if500pxPosts}<img src="{PhotoURL-500}">{/block:if500pxPosts}
  1178. {block:if400pxPosts}<img src="{PhotoURL-400}">{/block:if400pxPosts}
  1179. {block:ifCaptionsOff}{block:permalink}{block:Caption}{Caption}{/block:Caption}{/block:permalink} {/block:ifCaptionsOff}
  1180. {block:ifnotCaptionsOff}{block:permalink}{block:Caption}{Caption}{/block:Caption}{/block:permalink} {/block:ifnotCaptionsOff}{/block:Photo}
  1181.  
  1182. {block:Photoset}
  1183.  
  1184. {block:if500pxPosts}{Photoset-500}{/block:if500pxPosts}
  1185. {block:if400pxPosts}{Photoset-400}{/block:if400pxPosts}
  1186. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1187.  
  1188. {block:Chat}<ul class="chat">{block:Title}<h2>{Title}</h2>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;<b>{Line}</b><br></li>{/block:Lines}</ul>{/block:Chat}
  1189.  
  1190. {block:Video}
  1191. {block:if500pxPosts}{Video-500}{/block:if500pxPosts}
  1192. {block:if400pxPosts}{Video-400}{/block:if400pxPosts}
  1193. {block:Caption}{Caption}{/block:Caption}{/block:Video}
  1194.  
  1195.  
  1196. {block:Answer}<div class="ask"><p></p><h5>{Asker}&#8614; {Question}</h5></div><div class="answer">
  1197. {Answer}</div>{/block:answer}
  1198.  
  1199. {block:Audio}<div class="musicbox">
  1200. <div class="musicbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  1201. {block:AlbumArt}
  1202. <img src="{AlbumArtURL}" class="cover">
  1203. {/block:AlbumArt}
  1204. <div style="margin-left:110px; margin-top:-100px; line-height:160%; margin-bottom:10px"><br>
  1205. {block:TrackName}{TrackName}{/block:TrackName}<br>
  1206. {block:Artist}{Artist}{/block:Artist}<br>
  1207. {block:Album}{Album}{/block:Album}
  1208. <br>{/block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</div>
  1209. {block:Caption}{Caption}{/block:Caption}<br>{/block:Audio}
  1210.  
  1211. {block:Date}
  1212. <div id="info">
  1213. <a href="{Permalink}">
  1214. {block:Date}
  1215. {12Hour}:{Minutes} {AmPm}
  1216. {/block:Date}
  1217. </a> {block:NoteCount}
  1218. | ♥ <a href="{Permalink}">{NoteCount}</a> |{/block:NoteCount}
  1219. <div id="inforight">
  1220. {block:RebloggedFrom}
  1221. <a href="{ReblogParentURL}">via</a>
  1222. {/block:RebloggedFrom}
  1223. {block:ContentSource} &
  1224. <a href="{SourceURL}">src</a>
  1225. {/block:ContentSource}
  1226. </div>
  1227.  
  1228. <div id="tags">
  1229. {block:HasTags}
  1230. {block:Tags}<a href="{TagURL}">{Tag},</a> {/block:Tags}
  1231. {/block:HasTags}
  1232. </div>
  1233.  
  1234. </div></div>
  1235.  
  1236. {block:PostNotes}
  1237. <div class="pagenotes">{PostNotes-16}</div>{/block:PostNotes}
  1238. {/block:Posts}
  1239.  
  1240.  
  1241. {/block:Posts}</div>
  1242.  
  1243.  
  1244.  
  1245.  
  1246.  
  1247. </div>
  1248. </div>
  1249. <div id="cred">
  1250.  
  1251. <a href="http://trenzalours.tumblr.com/" title="trenzalours themes" style="color:#000;"><i class="fa fa-moon-o"></i></a></div>
  1252. <div id="counter"><!---You can paste your hit counter here! Head over to freetexthosts.com---></div>
  1253.  
  1254. </body>
  1255. <!-- lazy load -->
  1256.  
  1257. <script type="text/javascript" src="http://static.tumblr.com/3dkvxpf/bj5n7g6q6/jquery.js"></script>
  1258. <script type="text/javascript" src="http://static.tumblr.com/3dkvxpf/pqpn7g6qs/lazyload.js"></script>
  1259. <script type="text/javascript" charset="utf-8">
  1260. var $j = jQuery.noConflict();
  1261. $j(function() {
  1262. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  1263. $j("img").lazyload({
  1264. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  1265. effect: "fadeIn",
  1266. });
  1267. });
  1268. </script>
  1269.  
  1270. <!-- start of script tooltip -->
  1271. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1272.  
  1273. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1274. <script>
  1275.  
  1276. (function($){
  1277.  
  1278. $(document).ready(function(){
  1279.  
  1280. $("a[title]").style_my_tooltips({
  1281.  
  1282. tip_follows_cursor:true,
  1283.  
  1284. tip_delay_time:90,
  1285.  
  1286. tip_fade_speed:600,
  1287.  
  1288. attribute:"title"
  1289.  
  1290. });
  1291.  
  1292. });
  1293.  
  1294. })(jQuery);
  1295.  
  1296. </script>
  1297. </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!