API tools faq
paste
Advertisement
pistachi-o

theme 2.07

pistachi-o
May 21st, 2013
4,827
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 24.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  
  4. <!--
  5.  
  6. Theme V2.007
  7. pistachi-o (nutty-themes @ tumblr)
  8.  
  9. Theme Documentation:
  10. http://nutty-themes.tumblr.com/themedoc
  11.  
  12. Please Do Not:
  13. http://nutty-themes.tumblr.com/terms
  14.  
  15. -->
  16.  
  17.  
  18. <html>
  19. <head>
  20.  
  21. <!-- DEFAULT VARIABLES -->
  22. <meta name="text:Body Font" content="'Signika', 'Cambria', 'Georgia', sans-serif;" />
  23. <meta name="text:Header Font" content="'Signika', 'Lucida Sans', sans-serif;" />
  24. <meta name="text:Sidebar Font" content="'Signika', 'Cambria', 'Georgia', sans-serif;" />
  25. <meta name="text:Title Font" content="'Open Sans', Arial, sans-serif" />
  26. <meta name="text:Font Size" content="11px" />
  27.  
  28. <meta name="color:Background" content="#e4ded0" />
  29.  
  30. <meta name="color:Border" content="#abccbd" />
  31. <meta name="color:Border2" content="#7dbeb8" />
  32.  
  33. <meta name="color:Desc Text" content="#f0ebeb" />
  34. <meta name="color:Text" content="#f0ebeb" />
  35. <meta name="color:Text2" content="#0a0a0a" />
  36.  
  37. <meta name="color:Link" content="#e32f21" />
  38. <meta name="color:Link Hover" content="#dfcc8a" />  
  39.  
  40. <meta name="color:Posts" content="#181619" />
  41.  
  42. <meta name="color:Date Bg" content="#e32f21" />
  43. <meta name="color:Date" content="#f0ebeb" />
  44.  
  45. <meta name="color:Notes Bg" content="#abccbd" />
  46. <meta name="color:Notes" content="#f0ebeb" />
  47.  
  48. <meta name="color:Source Bg" content="#7dbeb8" />
  49. <meta name="color:Source" content="#f0ebeb" />
  50.  
  51. <meta name="color:Title" content="#e32f21" />
  52.  
  53. <meta name="color:Side Bg" content="#000000" />
  54. <meta name="color:Navlinks" content="#7dbeb8" />
  55.  
  56. <meta name="color:Sidelinks" content="#000000" />
  57. <meta name="color:Sidelink1" content="#abccbd" />
  58. <meta name="color:Sidelink2" content="#c4fae6" />
  59. <meta name="color:Sidelink3" content="#e32f21" />
  60.  
  61. <meta name="color:Extra Links" content="#abccbd" />
  62. <meta name="color:Extra1" content="#c4fae6" />
  63. <meta name="color:Extra2" content="#e32f21" />
  64.  
  65. <meta name="image:Sidebar" content=""/>
  66. <meta name="image:Side Bg" content=""/>
  67. <meta name="image:Side2 Bg" content=""/>
  68. <meta name="image:Background" content=""/>
  69.  
  70. <meta name="text:Extra Links" content="Links" />
  71. <meta name="text:Extra1" content="Extra1" />
  72. <meta name="text:Extra2" content="Extra2" />
  73.  
  74. <meta name="text:Extra1 Content" content="Extra1" />
  75. <meta name="text:Extra2 Content" content="Extra2" />
  76.  
  77. <meta name="text:Section1" content="" />
  78. <meta name="text:LinkS1A" content="" />
  79. <meta name="text:LinkS1A Title" content="" />
  80. <meta name="text:LinkS1B" content="" />
  81. <meta name="text:LinkS1B Title" content="" />
  82. <meta name="text:LinkS1C" content="" />
  83. <meta name="text:LinkS1C Title" content="" />
  84. <meta name="text:LinkS1D" content="" />
  85. <meta name="text:LinkS1D Title" content="" />
  86.  
  87. <meta name="text:Section2" content="" />
  88. <meta name="text:LinkS2A" content="" />
  89. <meta name="text:LinkS2A Title" content="" />
  90. <meta name="text:LinkS2B" content="" />
  91. <meta name="text:LinkS2B Title" content="" />
  92. <meta name="text:LinkS2C" content="" />
  93. <meta name="text:LinkS2C Title" content="" />
  94. <meta name="text:LinkS2D" content="" />
  95. <meta name="text:LinkS2D Title" content="" />
  96.  
  97. <meta name="text:Section3" content="" />
  98. <meta name="text:LinkS3A" content="" />
  99. <meta name="text:LinkS3A Title" content="" />
  100. <meta name="text:LinkS3B" content="" />
  101. <meta name="text:LinkS3B Title" content="" />
  102. <meta name="text:LinkS3C" content="" />
  103. <meta name="text:LinkS3C Title" content="" />
  104. <meta name="text:LinkS3D" content="" />
  105. <meta name="text:LinkS3D Title" content="" />
  106.  
  107. <meta name="if:400 Posts" content="1"/>
  108. <meta name="if:500 Posts" content="0"/>
  109.  
  110. <meta name="if:External Sidebar Image" content="0"/>
  111. <meta name="if:Tumblr Sidebar Image" content="1"/>
  112.  
  113.  
  114. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  115. <title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  116. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  117. <link rel="shortcut icon" href="{Favicon}" />
  118. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  119.  
  120. <link href='http://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
  121. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,800,700,600' rel='stylesheet' type='text/css'>
  122.  
  123. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  124.  
  125.  
  126.  
  127. <style type="text/css">
  128.  
  129.  
  130.  
  131. /* Reset
  132. -------------------------------------------------------------*/
  133.  
  134. body,div,dl,dt,dd,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
  135. ul, ol, li {list-style: none; margin: 0;padding: 0;}
  136.  
  137.  
  138. /* Webkit-Scrollbar
  139. -------------------------------------------------------------*/
  140.  
  141. ::-webkit-scrollbar {width: 24px; height: 12px; background:{color:Background};}
  142. ::-webkit-scrollbar-thumb:vertical {background: {color:Border2}; border: 8px solid {color:Background};}
  143. ::-webkit-scrollbar-thumb:horizontal {background: {color:Border2}; border: 8px solid {color:Background};}
  144. ::-webkit-scrollbar-thumb {
  145.     background: {color:Border2};
  146.     border: 8px solid {color:Background};
  147.     border-radius: 12px;
  148.     }
  149.  
  150.  
  151. /* General
  152. -------------------------------------------------------------*/
  153.  
  154. body {
  155. background-color: {color:Background};
  156. background-image: url('{image:Background}');
  157. background-attachment: fixed;
  158. background-repeat: repeat;
  159. font-family: {text:Body Font};
  160. font-size: {text:Font Size};
  161. text-align: justify;
  162. color: {color:Text};
  163. line-height: 100%;
  164. }
  165.  
  166. a:link, a:active, a:visited {
  167. color: {color:Link};
  168. text-decoration: none;
  169. }
  170.  
  171. a:hover {
  172. color: {color:Link Hover};
  173. text-decoration: none;
  174. }
  175.  
  176.  
  177. b, strong{
  178. color: {color:Border};
  179. }
  180.  
  181. i, em {
  182. color: {color:Border2};
  183. }
  184.  
  185. p {
  186. margin: 5px 0px;
  187. }
  188.  
  189.  
  190. h1 {
  191. font-family: {text:Header Font};
  192. color: {color:Link};
  193. font-weight: 800;
  194. font-size: 20px;
  195. line-height: 100%;  
  196. font-weight: normal;
  197. text-transform: uppercase;
  198. text-align: left;
  199. }
  200.  
  201. h2 {
  202. font-family: {text:Header Font};
  203. color: {color:Link};
  204. font-size: 14px;
  205. line-height: 100%;  
  206. font-weight: normal;
  207. text-transform: uppercase;
  208. text-align: center;
  209. }
  210.  
  211. blockquote {
  212. border-top: 3px double #000;
  213. border-bottom: 3px double #000;
  214. padding: 10px;
  215. }
  216.  
  217. blockquote i {
  218. color: {color:Text};
  219. }
  220.  
  221. blockquote img {
  222. max-width: 100%;
  223. }
  224.  
  225. img {
  226. display: block;
  227. max-width: 100%;
  228. }
  229.  
  230.  
  231. /* Sidebar Content
  232. -------------------------------------------------------------*/
  233.  
  234. .menu {
  235. height: 100%;
  236. width: 600px;
  237. position: fixed;
  238. top: 0;
  239. left: 0;
  240. background: transparent;
  241. z-index: 10;
  242. }
  243.  
  244. .menu-title {
  245. width: 200px;
  246. font-family: {text:Title Font};
  247. height: 100%;
  248. position: fixed;
  249. top: 0;
  250. left: 0;
  251. z-index: 100;
  252. }
  253.  
  254. .menu-title h1 {
  255. width: 200px;
  256. position: absolute;
  257. top: 50%;
  258. margin: -260px 0px 10px 10px;
  259. font-size: 64px;
  260. font-weight: 800;
  261. text-transform: uppercase;
  262. text-align: justified;
  263. word-wrap: break-word;
  264. line-height: 75%;
  265. color: {color:Title};
  266. }
  267.  
  268. .menu-title h1 span {
  269. letter-spacing: -3px;
  270. }
  271.  
  272. #menu-container {
  273. height: 100%;
  274. width: 360px;
  275. position: fixed;
  276. top: 0;
  277. left: 250px;
  278. background: transparent;
  279. z-index: 10;
  280. }
  281.  
  282. #content {
  283. float: right;
  284. width: 260px;
  285. height: 100%;
  286. text-align: justify;
  287. overflow-y: auto;
  288. position: relative;
  289. }
  290.  
  291. #tabs {
  292. float: left;
  293. position: relative;
  294. width: 100px;
  295. height: 100%;
  296. margin: 0px;
  297. list-style: none;
  298. text-align: center;  
  299. z-index: 9999;
  300. overflow: hidden;
  301. }
  302.  
  303. #tabs li {
  304. width: 80px;
  305. height: 25%;
  306. padding: 0px 10px;
  307. font-family: {text:Header Font};
  308. font-weight: 800;
  309. font-size: 16px;
  310. text-align: center;
  311. }
  312.  
  313. #tabs li:nth-child(1) {background: {color:Side Bg};}
  314. #tabs li:nth-child(2) {background: {color:Extra Links};}
  315. #tabs li:nth-child(3) {background: {color:Extra1};}
  316. #tabs li:nth-child(4) {background: {color:Extra2};}
  317.  
  318. #tab1, #tab2, #tab3, #tab4 {
  319. width: 100%;
  320. height: 100% !important;
  321. }
  322.  
  323. .tab1, .tab2, .tab3, .tab4 {
  324. padding: 40px 20px;
  325. }
  326.  
  327. #tab1 {
  328. background: {color:Side Bg};
  329. background-image: url('{image:Side Bg}');
  330. background-repeat: no-repeat;
  331. background-position: bottom;
  332. color: {color:Text};
  333. }
  334.  
  335. #tab2 {
  336. background: {color:Extra Links};
  337. }
  338.  
  339. .tab2 a {
  340. display: block;
  341. padding: 6px 10px;
  342. }
  343.  
  344. .tab2 a:hover {
  345. background: {color:Border2};
  346. }
  347.  
  348. #tab3 {
  349. background: {color:Extra1};
  350. background-image: url('{image:Side2 Bg}');
  351. background-repeat: no-repeat;
  352. background-position: bottom;
  353. color: {color:Text2};
  354. }
  355.  
  356. #tab4 {
  357. background: {color:Extra2};
  358. }
  359.  
  360. #tabs a {
  361. display: block;
  362. height: 100%;
  363. line-height: 1000%;
  364. text-transform: uppercase;
  365. position: relative;
  366. z-index: 10;
  367. -webkit-transition: 0.6s ease-in-out;
  368. -moz-transition: 0.6s ease-in-out;
  369. -o-transition: 0.6s ease-in-out;
  370. transition: 0.6s ease-in-out;
  371. }
  372.  
  373. #tabs #current {
  374. z-index: 3;
  375. }
  376.  
  377. #sideimg {
  378. margin-bottom: 5px;
  379. }
  380.  
  381. #sideimg img {
  382. width: 240px;
  383. }
  384.  
  385. h5 {
  386. font-size: 16px;
  387. letter-spacing: 1px;
  388. text-align: center;
  389. padding-bottom: 4px;
  390. border-bottom: 2px solid {color:Border2};
  391. text-transform: uppercase;
  392. margin: 10px 0px;
  393. }
  394.  
  395. .pagination {
  396. width: 500px;
  397. position: relative;
  398. margin: 10px auto;
  399. text-align: center;
  400. font-size: 11px;
  401. line-height: 11px;
  402. text-transform: uppercase;
  403. }
  404.  
  405. .pagination a {
  406. color: #fff;
  407. }
  408.  
  409. .currentpage {
  410. background: {color:Border};
  411. width: 10px;
  412. height: 10px;
  413. padding: 3px 5px;
  414. }
  415.  
  416. .otherpage {
  417. padding: 3px 5px;
  418. background: {color:Posts};
  419. width: 10px;
  420. height: 10px;
  421. }
  422.  
  423. .otherpage:hover,
  424. .prevpage:hover,
  425. .nextpage:hover {
  426. background: {color:Border};
  427. }
  428.  
  429. .prevpage,
  430. .nextpage {
  431. background: {color:Posts};
  432. width: 10px;
  433. height: 10px;
  434. padding: 3px 5px;
  435. }
  436.  
  437. .creds {
  438. position: fixed;
  439. width: 250px;
  440. text-align: center;
  441. bottom: 25px;
  442. z-index: 9999;
  443. text-transform: uppercase;
  444. font-size: 10px;
  445. }
  446.  
  447. .creds a {
  448. padding: 3px 5px;
  449. text-transform: uppercase;
  450. background: #abccbd;
  451. color: #fff;
  452. }
  453.  
  454. /* Entries
  455. -------------------------------------------------------------*/
  456.  
  457. #entries {
  458. float: left;
  459. margin-left: 635px;
  460. background: transparent;
  461. position: relative;
  462. {block:If400Posts}width: 440px; {/block:If400Posts}
  463. {block:If500Posts}width: 540px; {/block:If500Posts}
  464. padding: 50px 20px;
  465. }
  466.  
  467. #posts {
  468. {block:If400Posts}
  469. {block:IndexPage}width: 400px; {/block:IndexPage}
  470. {block:PermalinkPage}width: 500px; {/block:PermalinkPage}
  471. {/block:If400Posts}
  472. {block:If500Posts}width: 500px; {/block:If500Posts}
  473. background: {color:Posts};
  474. padding: 20px 20px 25px 20px;
  475. text-align: justify;
  476. line-height: 130%;
  477. position: relative;
  478. border-bottom: 4px solid {color:Border2};
  479. }
  480.  
  481. #posts ul {padding: 10px; margin: 0px 10px 0px 30px;}
  482. #posts li {list-style-type:square;}
  483.  
  484.  
  485. /* Post Info
  486. -------------------------------------------------------------*/
  487.  
  488. .dated {
  489. position: absolute;
  490. top: 0;
  491. {block:If400Posts}left: 440px; {/block:If400Posts}
  492. {block:If500Posts}left: 540px; {/block:If500Posts}
  493. display: block;
  494. padding: 10px;
  495. color: {color:Date Bg};
  496. font-family: {text:Title Font};
  497. text-align: center;
  498. }
  499.  
  500. .dated-day {
  501. font-size: 34px;
  502. line-height: 100%;
  503. font-weight: 800;
  504. }
  505.  
  506. .dated-month {
  507. font-size: 22px;
  508. text-transform: uppercase;
  509. line-height: 100%;
  510. font-weight: 800;
  511. margin-top: -4px;
  512. }
  513.  
  514. .dated-year {
  515. font-size: 12px;
  516. line-height: 100%;
  517. letter-spacing: 1px;
  518. }
  519.  
  520. .info {
  521. {block:If400Posts}
  522. {block:IndexPage}width: 440px; {/block:IndexPage}
  523. {block:PermalinkPage}width: 540px; {/block:PermalinkPage}
  524. {/block:If400Posts}
  525. {block:If500Posts}width: 540px; {/block:If500Posts}
  526. padding: 5px 0px;
  527. margin-bottom: 40px;
  528. font-size: 10px;
  529. text-align: left;
  530. text-transform: uppercase;
  531. line-height: 150%;
  532. position: relative;
  533. }
  534.  
  535. .info a {
  536. color: {color:Text};
  537. }
  538.  
  539. .date2 {
  540. padding: 1px 3px;
  541. background: {color:Date Bg};
  542. color: {color:Date};
  543. margin-right: 2px;
  544. }
  545.  
  546. .noted {
  547. padding: 1px 3px;
  548. background: {color:Notes Bg};
  549. color: {color:Notes};
  550. margin-right: 2px;
  551. }
  552.  
  553. .rblog {
  554. padding: 1px 3px;
  555. background: {color:Source Bg};
  556. color: {color:Source};
  557. margin-right: 2px;
  558. }
  559.  
  560. .tagged {
  561. color: {color:Posts};
  562. }
  563.  
  564. .tagged a {
  565. color: {color:Link};
  566. }
  567.  
  568.  
  569. /* @font-face (SOSA)
  570. -------------------------------------------------------------*/
  571.  
  572. @font-face {
  573. font-family: 'sosa';
  574.     src: url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot");
  575.     src:
  576.         url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot?#iefix") format('embedded-opentype'),
  577.         url("http://static.tumblr.com/whx9ghv/zwPmbwkjn/sosa.woff") format('woff'),
  578.         url("http://static.tumblr.com/whx9ghv/5Skmbwkja/sosa.ttf") format('truetype'),
  579.         url("http://static.tumblr.com/whx9ghv/KXgmbwkj1/sosa.svg#icons") format('svg');
  580. font-weight: normal;
  581. font-style: normal;
  582. }
  583.  
  584. .iconfont {
  585. font-family: 'sosa';
  586. font-size: 12px;
  587. }
  588.  
  589.  
  590. /* Ask Posts
  591. -------------------------------------------------------------*/
  592.  
  593. .question:before {
  594. position: absolute;
  595. color: {color:Text};
  596. font-family: 'sosa';
  597. content: '?';
  598. font-size: 25px;
  599. z-index: 101;
  600. margin: 10px 5px;
  601. line-height: 100%;
  602. background: {color:Border};
  603. padding: 8px;
  604. }
  605.  
  606. .asking {
  607. margin: 10px 0px 20px 50px;
  608. padding: 10px;
  609. text-align: left;
  610. position: relative;
  611. z-index: 1000;
  612. min-height: 25px;
  613. }
  614.  
  615. .reply:before {
  616. position: absolute;
  617. color: {color:Text};
  618. font-family: 'sosa';
  619. content: 'B';
  620. font-size: 25px;
  621. z-index: 101;
  622. margin: 10px 5px;
  623. line-height: 100%;
  624. background: {color:Border};
  625. padding: 8px;
  626. }
  627.  
  628. .answer {
  629. margin: 10px 0px 10px 50px;
  630. padding: 10px;
  631. text-align: left;
  632. position: relative;
  633. z-index: 1000;
  634. min-height: 25px;
  635. }
  636.  
  637. .asker {
  638. text-transform: uppercase;
  639. }
  640.  
  641.  
  642. /* Quote Posts
  643. -------------------------------------------------------------*/
  644.  
  645. .quotewrap {
  646. width: 350px;
  647. margin: 20px auto;
  648. padding: 20px 25px;
  649. position: relative;    
  650. }
  651.  
  652. .quote {
  653. margin-top: 15px;
  654. padding-top: 20px;
  655. }
  656.  
  657. .out:after {
  658. font-family: 'sosa';
  659. content: 'C';
  660. background: transparent;
  661. width: 50px;
  662. height: 50px;
  663. position: absolute;
  664. color: {color:border};
  665. text-shadow: 0 1px 1px rgba(255,255,255,0.1);
  666. font-size: 35px;
  667. line-height: 50px;
  668. text-align: center;
  669. left: 50%;
  670. margin-left: -25px;
  671. top: -15px;
  672. cursor: pointer;
  673. z-index: 100;
  674. }
  675.  
  676. .soucite {
  677. font-size: 9px;
  678. letter-spacing: 1px;
  679. margin: 10px;
  680. padding-left: 10px;
  681. text-transform: uppercase;
  682. }
  683.  
  684.  
  685. /* Audio Posts
  686. -------------------------------------------------------------*/
  687.  
  688. .audioplayer {
  689. position: absolute;
  690. z-index: 3;
  691. opacity: 0.7;
  692. margin: 33px;
  693. }
  694.  
  695. .audio {
  696. width: 10px;
  697. padding: 5px 20px 5px 5px;
  698. background-color: #fefefe;
  699. overflow: hidden;
  700. }
  701.  
  702. #audiocap {
  703. min-height: 100px;
  704. }
  705.  
  706. #audioinfo {
  707. height: 10px;
  708. padding: 4px 5px;
  709. display: block;
  710. overflow: hidden;
  711. text-align: left;
  712. margin-bottom: 3px;
  713. text-transform: uppercase;
  714. }
  715.  
  716. #audioinfo b {
  717. color: {color:Link};
  718. }
  719.  
  720. #audioimg img {
  721. margin-right: 2px;
  722. }
  723.  
  724.  
  725. /* Chat Posts
  726. -------------------------------------------------------------*/
  727.  
  728. .user_1 .label {color:{color:link}; font-weight:bold}
  729. .user_2 .label {color:{color:link hover}; font-weight:bold}
  730. .user_3 .label {color:{color:link}; font-weight:bold}
  731. .user_4 .label {color:{color:link hover}; font-weight:bold}
  732. .user_5 .label {color:{color:link}; font-weight:bold}
  733. .user_6 .label {color:{color:link hover}; font-weight:bold}
  734. .user_7 .label {color:{color:link}; font-weight:bold}
  735. .user_8 .label {color:{color:link hover}; font-weight:bold}
  736. ul.chat, .chat ol, .chat li {list-style: none !important; margin:0px; padding:0px;}
  737.  
  738.  
  739. /* Post Notes (Permalink Page)
  740. -------------------------------------------------------------*/
  741.  
  742. ol.notes, .notes li {
  743. list-style:none;
  744. margin: 0px;
  745. padding: 0px;
  746. }
  747.  
  748. .ending {
  749. {block:If400Posts}max-width: 400px; {/block:If400Posts}
  750. {block:If500Posts}max-width: 500px; {/block:If500Posts}
  751. text-align: left;
  752. padding: 10px;
  753. text-decoration: none;
  754. line-height: 180%;
  755. position: relative;
  756. }
  757.  
  758. .ending a {
  759. text-transform: uppercase;
  760. font-size: 10px;
  761. }
  762.  
  763. .ending img {
  764. width: 10px;
  765. height: 10px;
  766. border: 2px solid {color:Tags};
  767. margin-right: 2px;
  768. }
  769.  
  770. </style>
  771. <style type="text/css">{CustomCSS}</style>
  772. </head>
  773.  
  774. <body>
  775.  
  776. <div class="menu-title">
  777. <h1 class="menu-title">{Title}</h1>
  778. <div class="creds"><a href="http://nutty-themes.tumblr.com/">Theme Credit</a></div>
  779. </div>
  780.  
  781. <div id="menu-container">
  782.  
  783. <ul id="tabs">
  784. <li><a style="color:{color:Link};" href="#" name="#tab1">Home</a></li>
  785. <li><a style="color:{color:Link};" href="#" name="#tab2">{text:Extra Links}</a></li>
  786. <li><a style="color:{color:Link};" href="#" name="#tab3">{text:Extra1}</a></li>
  787. <li><a style="color:#fff;" href="#" name="#tab4">{text:Extra2}</a></li>
  788. </ul>
  789.  
  790. <div id="content">
  791. <div id="tab1"><div class="tab1">
  792. {block:Description}{Description}{/block:Description}
  793. </div></div>
  794.  
  795. <div id="tab2"><div class="tab2">
  796. {block:ifSection1}<h5>{text:Section1}</h5>{/block:ifSection1}
  797. {block:ifLinkS1A}<a href="{text:LinkS1A}">{text:LinkS1A Title}</a>{/block:ifLinkS1A}
  798. {block:ifLinkS1B}<a href="{text:LinkS1B}">{text:LinkS1B Title}</a>{/block:ifLinkS1B}
  799. {block:ifLinkS1C}<a href="{text:LinkS1C}">{text:LinkS1C Title}</a>{/block:ifLinkS1C}
  800. {block:ifLinkS1D}<a href="{text:LinkS1D}">{text:LinkS1D Title}</a>{/block:ifLinkS1D}
  801. {block:ifSection2}<h5>{text:Section2}</h5>{/block:ifSection2}
  802. {block:ifLinkS2A}<a href="{text:LinkS2A}">{text:LinkS2A Title}</a>{/block:ifLinkS2A}
  803. {block:ifLinkS2B}<a href="{text:LinkS2B}">{text:LinkS2B Title}</a>{/block:ifLinkS2B}
  804. {block:ifLinkS2C}<a href="{text:LinkS2C}">{text:LinkS2C Title}</a>{/block:ifLinkS2C}
  805. {block:ifLinkS2D}<a href="{text:LinkS2D}">{text:LinkS2D Title}</a>{/block:ifLinkS2D}
  806. {block:ifSection3}<h5>{text:Section3}</h5>{/block:ifSection3}
  807. {block:ifLinkS3A}<a href="{text:LinkS3A}">{text:LinkS3A Title}</a>{/block:ifLinkS3A}
  808. {block:ifLinkS3B}<a href="{text:LinkS3B}">{text:LinkS3B Title}</a>{/block:ifLinkS3B}
  809. {block:ifLinkS3C}<a href="{text:LinkS3C}">{text:LinkS3C Title}</a>{/block:ifLinkS3C}
  810. {block:ifLinkS3D}<a href="{text:LinkS3D}">{text:LinkS3D Title}</a>{/block:ifLinkS3D}
  811. </div></div>
  812.  
  813. <div id="tab3"><div class="tab3">
  814. {text:Extra1 Content}
  815. </div></div>
  816.  
  817. <div id="tab4"><div class="tab4">
  818. <div id="sideimg">{block:IfExternalSidebarImage}<img src="{text:Sidebar Image}">{/block:IfExternalSidebarImage}{block:IfTumblrSidebarImage}<img src="{image:Sidebar}">{/block:IfTumblrSidebarImage}</div>
  819. {text:Extra2 Content}
  820. </div></div>
  821. </div>
  822. </div>
  823.  
  824. <div id="entries">
  825. {block:Posts}
  826. <div id="posts">
  827.  
  828. <div class="dated">{block:Date}
  829. <div class="dated-day">{DayOfMonthWithZero}</div>
  830. <div class="dated-month">{ShortMonth}</div>
  831. <div class="dated=year">{Year}</div>
  832. {/block:Date}</div>
  833.  
  834. {block:Quote}<div class="quotewrap quote"><a class="out" href="{SourceURL}" title="Source"></a>
  835. <h2>{Quote}</h2><div class="soucite">&nbsp;- {Source}</div></div>{/block:Quote}
  836.  
  837. {block:Title}<h1>{Title}</h1>{/block:Title}
  838.  
  839. {block:Text}{Body}{/block:Text}
  840.  
  841. {block:Link}<a href="{URL}" class="link" {Target}><h1>{Name}&nbsp;</h1></a>{block:Description}{Description}{/block:Description}{/block:Link}
  842.  
  843. {block:If400Posts}{block:IndexPage}{block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}{/block:IndexPage}{/block:If400Posts}
  844. {block:If500Posts}{block:IndexPage}{block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}{/block:IndexPage}{/block:If500Posts}
  845. {block:PermalinkPage}{block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}{/block:PermalinkPage}
  846.  
  847. {block:If400Posts}{block:IndexPage}{block:Photoset}<center>{Photoset-400}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}{/block:IndexPage}{/block:If400Posts}
  848. {block:If500Posts}{block:IndexPage}{block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}{/block:IndexPage}{/block:If500Posts}
  849. {block:PermalinkPage}{block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}{/block:PermalinkPage}
  850.  
  851. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  852.  
  853. {block:If400Posts}{block:IndexPage}{block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}{/block:IndexPage}{/block:If400Posts}
  854. {block:If500Posts}{block:IndexPage}{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}{/block:IndexPage}{/block:If500Posts}
  855. {block:PermalinkPage}{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}{/block:PermalinkPage}
  856.  
  857. {block:Answer}
  858. <div class="question"><div class="asking"><span class="asker">{Asker} ASKED:</span> {Question}</div></div>
  859. <div class="reply"><div class="answer">{Answer}</div></div>
  860. {/block:Answer}
  861.  
  862. {block:Audio}{block:AlbumArt}<div id="audioimg"><img src="{AlbumArtURL}" width="100" height="100" align="left"></div>{/block:AlbumArt}
  863. <div class="audioplayer"><div class="audio">{AudioPlayerWhite}</div></div>
  864. <div id="audiocap"><div id="audioinfo"><b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}</div>
  865. <div id="audioinfo"><b>TRACK:</b> {block:TrackName}{TrackName}{/block:TrackName}</div>
  866. <div id="audioinfo"><b>ALBUM:</b> {block:Album}{Album}{/block:Album}</div>
  867. <div id="audioinfo">{block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</div>
  868. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}</div>{/block:Audio}
  869.  
  870. </div>
  871.  
  872. <div class="info">
  873.  
  874. {block:Date}<span class="date2"><a href="{Permalink}">Posted {TimeAgo}</a></span>{/block:Date}{block:NoteCount}<span class="noted"><a href="{Permalink}">{NoteCountWithLabel}</a></span>{/block:NoteCount}{block:RebloggedFrom}<span class="rblog"><a href="{ReblogParentURL}">VIA</a>{block:ContentSource} / <a href="{SourceURL}">SOURCE</a>{/block:ContentSource}</span>{/block:RebloggedFrom}{block:HasTags}<span class="tagged">Filed Under: {block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}</span>{/block:HasTags}
  875. </div>
  876.    
  877. {/block:Posts}
  878.  
  879. {block:PostNotes}<div class="ending">{PostNotes}</div>{/block:PostNotes}
  880.  
  881. <div class="pagination">{block:Pagination}
  882. {block:PreviousPage}<span class="prevpage"><a href="{PreviousPage}">prev</a></span>{/block:PreviousPage}
  883. {block:JumpPagination length="8"}
  884. {block:CurrentPage}<span class="currentpage">{PageNumber}</span>{/block:CurrentPage}
  885. {block:JumpPage}<a class="otherpage" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  886. {/block:JumpPagination}
  887. {block:NextPage}<span class="nextpage"><a href="{NextPage}">next</a></span>{/block:NextPage}
  888. {/block:Pagination}</div>
  889.  
  890. </div>
  891.  
  892. </div>
  893.  
  894.   <script>
  895.     function resetTabs(){
  896.         $("#content > div").hide(); //Hide all content
  897.         $("#tabs a").attr("id",""); //Reset id's      
  898.    }
  899.  
  900.    var myUrl = window.location.href; //get URL
  901.    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2    
  902.    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
  903.  
  904.    (function(){
  905.        $("#content > div").hide(); // Initially hide all content
  906.        $("#tabs li:first a").attr("id","current"); // Activate first tab
  907.        $("#content > div:first").fadeIn(); // Show first tab content
  908.        
  909.        $("#tabs a").on("click",function(e) {
  910.            e.preventDefault();
  911.            if ($(this).attr("id") == "current"){ //detection for current tab
  912.             return      
  913.            }
  914.            else{            
  915.            resetTabs();
  916.            $(this).attr("id","current"); // Activate this
  917.            $($(this).attr('name')).fadeIn(); // Show content for current tab
  918.            }
  919.        });
  920.  
  921.        for (i = 1; i <= $("#tabs li").length; i++) {
  922.          if (myUrlTab == myUrlTabName + i) {
  923.              resetTabs();
  924.              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
  925.              $(myUrlTab).fadeIn(); // Show url tab content        
  926.          }
  927.        }
  928.    })()
  929.  </script>
  930.  
  931.  
  932.  
  933. </body>
  934. </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!