API tools faq
paste
Advertisement
paigeh987

All-In-One Base Code

paigeh987
Nov 30th, 2014
15,335
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. All-In-One Theme Base Code by Paige @neonbikethemes.tumblr.com
  8.  
  9. RULES OF THE BASE CODE:
  10.  
  11. - Don't steal and repost as your own
  12. - Leave a little line in the code somewhere that says the base code is by neonbike themes. You can delete the rules.
  13. - please like/reblog the post
  14. - if you have questions don't hesitate to ask!
  15.  
  16. Thanks!
  17.  
  18. -->
  19.  
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23. <meta charset="utf-8">
  24. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  25. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28.  
  29. <meta name="color:Background" content="#ffffff" />
  30. <meta name="color:links" content="#000000" />
  31. <meta name="color:links hover" content="#a0a0a0" />
  32. <meta name="color:text" content="#000000" />
  33. <meta name="color:posts" content="#ffffff" />
  34.  
  35. <meta name="text:Tab 1 Title" content="Tab 1 Title" />
  36. <meta name="text:Tab 2 Title" content="Tab 2 Title" />
  37. <meta name="text:Tab 3 Title" content="Tab 3 Title" />
  38. <meta name="text:Tab 4 Title" content="Tab 4 Title" />
  39. <meta name="text:Tab 5 Title" content="Tab 5 Title" />
  40.  
  41. <meta name="if:hide captions" content="0"/>
  42.  
  43.  
  44.  
  45. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  46.  
  47. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  48.  
  49. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  50.  
  51. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  52.  
  53. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  54.  
  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. <style type="text/css">
  72.  
  73. /* ---------------------------- GENERAL ----------------------------- */
  74.  
  75. /* -------- SELECTION TOOL ------- */
  76.  
  77. ::-moz-selection {
  78. background: {color:text};
  79. color: {color:background};
  80. }
  81.  
  82. ::selection {
  83. background: {color:text};
  84. color: {color:background};
  85. }
  86.  
  87. /* -------- SCROLLBAR ------- */
  88.  
  89. ::-webkit-scrollbar {
  90. width: 9px;
  91. }
  92.  
  93. /* Track */
  94. ::-webkit-scrollbar-track {
  95. background:{color:background};
  96. }
  97.  
  98. /* Handle */
  99. ::-webkit-scrollbar-thumb {
  100. background:{color:text};
  101. }
  102. ::-webkit-scrollbar-thumb:window-inactive {
  103. background: transparent;
  104. }
  105.  
  106. /* ------- TOOLTIPS ------ */
  107.  
  108. #s-m-t-tooltip {
  109. max-width:300px;
  110. margin:10px 0px 0px 10px;
  111. background-color:{color:bakground};
  112. font-family:helvetica;
  113. font-size:12px;
  114. color:{color:text};
  115. z-index:999999999999999999999999999999999999;
  116. }
  117.  
  118. /* -------- BASICS ------- */
  119.  
  120. body {
  121. background:{color:Background};
  122. color: {color:text};
  123. font-family: helvetica, arial;
  124. font-size: 11px;
  125. margin: 0;
  126. padding: 0;
  127. word-wrap: break-word;
  128. line-height:150%;
  129. }
  130.  
  131. a {
  132. color: {color:links};
  133. text-decoration: none;
  134. -webkit-transition: all .3s;
  135. -moz-transition: all .3s;
  136. -o-transition: all .3s;
  137. -ms-transition: all .3s;
  138. transition: all .3s;
  139. }
  140.  
  141. a:hover{
  142. color:{color:links hover};
  143. -webkit-transition: all .3s;
  144. -moz-transition: all .3s;
  145. -o-transition: all .3s;
  146. -ms-transition: all .3s;
  147. transition: all .3s;
  148. }
  149.  
  150. blockquote {
  151. border-left: 1px solid {color:text};
  152. margin: 10px;
  153. padding-left:25px;
  154. padding-top:3px;
  155. padding-bottom:3px;
  156. }
  157.  
  158. iframe, img, embed, object, video {
  159. max-width: 100%;
  160. }
  161.  
  162. p{
  163. margin-bottom:10px;
  164. }
  165.  
  166. img {
  167. height: auto;
  168. width:auto;
  169. max-width:100%;
  170. }
  171.  
  172. h1{
  173. text-transform:uppercase;
  174. font-size:13px;
  175. }
  176.  
  177. ul{
  178. list-style-type:square;
  179. }
  180.  
  181. ol{
  182. list-style-type:;
  183. }
  184.  
  185. #bigcon{
  186. width:520px;
  187. margin-left:auto;
  188. margin-right:auto;
  189. }
  190.  
  191. .tabcontent {
  192. position:static;
  193. margin-left:auto;
  194. margin-right:auto;
  195. width: 520px;
  196. text-align:center;
  197. margin-bottom:200px;
  198. }
  199.  
  200. #postcontainer {
  201. position:static;
  202. margin-left:auto;
  203. margin-right:auto;
  204. width: 520px;
  205. overflow:hidden;
  206. text-align:center;
  207. margin-bottom:150px;
  208. }
  209.  
  210.  
  211. /* ----------------------------- HEADER STUFF ---------------------------*/
  212.  
  213. #topbar{
  214. position:static;
  215. margin-top:80px;
  216. margin-bottom:50px;
  217. text-align:center;
  218. }
  219.  
  220. .blogtitle{
  221. margin-bottom:20px;
  222. text-transform:uppercase;
  223. font-size:12px;
  224. letter-spacing:2px;
  225. font-weight:bold;
  226. }
  227.  
  228. .description{
  229. margin-bottom:20px;
  230. }
  231.  
  232. #navbar{
  233. display:inline-block;
  234. text-align:center;
  235. }
  236.  
  237. /* ------------------------------ TABS ------------------------------ */
  238.  
  239. .tabs {
  240. width:100%;
  241. margin-left:0px;
  242. display:inline-block;
  243. }
  244.  
  245. /*----- Tab Links -----*/
  246.  
  247. /* Clearfix */
  248. .tab-links:after {
  249. display:block;
  250. clear:both;
  251. content:'';
  252. }
  253.  
  254. .tab-links li {
  255. margin-right:5px;
  256. display:inline-block;
  257. list-style:none;
  258. text-transform:uppercase;
  259. }
  260.  
  261. .tab-links a {
  262. padding:7px;
  263. display:inline-block;
  264. color:{color:links};
  265. transition:all linear 0.15s;
  266. border-bottom:1px solid transparent;
  267. }
  268.  
  269. .tab-links a:hover {
  270. border-bottom:1px solid {color:text};
  271. text-decoration:none;
  272. }
  273.  
  274. li.active a, li.active a:hover {
  275. background:transparent;
  276. color:{color:background};
  277. border-bottom:1px solid {color:text};
  278. background:{color:links};
  279. -webkit-transition: all .3s;
  280. -moz-transition: all .3s;
  281. -o-transition: all .3s;
  282. -ms-transition: all .3s;
  283. transition: all .3s;
  284. }
  285.  
  286. /*----- Content of Tabs -----*/
  287. .tab-content {
  288. }
  289.  
  290. .tab {
  291. display:none;
  292. }
  293.  
  294. .tab.active {
  295. display:block;
  296. }
  297.  
  298. /* --------------------------- POSTS (articles) --------------------- */
  299.  
  300. article {
  301. float:left;
  302. background:{color:posts};
  303. padding: 10px;
  304. width: 500px;
  305. text-align:left;
  306. margin-bottom:80px;
  307. }
  308.  
  309. /* ---------------------------- POST INFO -----------------------------*/
  310.  
  311. .postinfo{
  312. margin-top:10px;
  313. font-weight:bold;
  314. }
  315.  
  316. .tags {
  317. margin-top:5px;
  318. font-weight:normal;
  319. }
  320.  
  321. /* ---------------------------- POST NOTES ------------------------- */
  322.  
  323. ol.notes {
  324. display:block;
  325. text-align:left;
  326. list-style-type:none;
  327. margin-left:-40px;
  328. }
  329.  
  330. ol.notes li.note{
  331. margin-bottom:5px;
  332. }
  333.  
  334. .pagenotes {
  335. text-align:left;
  336. margin-top:15px;
  337. }
  338.  
  339. .pagenotes img{
  340. padding-right:5px;
  341. padding-top:5px;
  342. margin-bottom:-5px;
  343. }
  344.  
  345.  
  346. /* -------------------------- POST TYPES -------------------------- */
  347.  
  348. /* CHAT */
  349.  
  350. ul.chat{
  351. list-style:none;
  352. margin-left:-40px;
  353. }
  354.  
  355. .chat span {
  356. float: left;
  357. }
  358.  
  359. /* QUOTES */
  360.  
  361. .quote{
  362. font-size:20px;
  363. line-height:150%;
  364. }
  365.  
  366. .quotesource{
  367. text-align:right;
  368. margin-bottom:10px;
  369. }
  370.  
  371. /* QUESTIONS */
  372.  
  373. .question{
  374. margin-bottom:15px;
  375. }
  376.  
  377. .answer {
  378. font-size:11px;
  379. }
  380.  
  381. .askerimg{
  382. position:relative;
  383. display:inline-block;
  384. margin-right:10px;
  385. }
  386.  
  387. /* AUDIO */
  388.  
  389. .songart{
  390. float:left;
  391. margin-right:10px;
  392. }
  393.  
  394. .songart img{
  395. width:80px;
  396. height:80px;
  397. }
  398.  
  399. .songtitle{
  400. margin-bottom:10px;
  401. margin-left:90px;
  402. }
  403.  
  404. .songauthor{
  405. margin-bottom:10px;
  406. font-size:8px;
  407. margin-left:90px;
  408. }
  409.  
  410. .tumblr_audio_player {
  411. height: 50px;
  412. }
  413.  
  414. /* ------------------------- PAGINATION ------------------------- */
  415.  
  416. #pagination{
  417. position:static;
  418. margin-top:30px;
  419. text-align:center;
  420. }
  421.  
  422. .pagibutton{
  423. position:relative;
  424. display:inline-block;
  425. background:{color:posts};
  426. padding:15px;
  427. }
  428.  
  429.  
  430. /* --------------------------- Custom CSS -------------------------- */
  431. {CustomCSS}
  432. </style>
  433. </head>
  434. <body>
  435.  
  436.  
  437. <div id="bigcon">
  438.  
  439.  
  440. <!--TOPBAR-->
  441.  
  442. <div id="topbar">
  443.  
  444. <div class="blogtitle">
  445. <a href="/">{Title}</a>
  446. </div>
  447.  
  448. <div class="description">{description}</div>
  449.  
  450. <div id="navbar">
  451. <div class="tabs">
  452. <ul class="tab-links">
  453. <li class="active" style="margin-left:-30px">
  454. <a href="#tab1">{text:Tab 1 Title}</a></li>
  455. <li><a href="#tab2">{text:Tab 2 Title}</a></li>
  456. <li><a href="#tab3">{text:Tab 3 Title}</a></li>
  457. <li><a href="#tab4">{text:Tab 4 Title}</a></li>
  458. <li><a href="#tab5">{text:Tab 5 Title}</a></li>
  459. </ul>
  460. </div>
  461. </div>
  462.  
  463. </div>
  464.  
  465.  
  466. <!-- --------------------------- TABS -------------------------- -->
  467.  
  468.  
  469. <div class="tabs">
  470.  
  471.  
  472. <!-- --------------------------- TAB 1 -------------------------- -->
  473.  
  474. <div class="tab-content">
  475. <div id="tab1" class="tab active">
  476.  
  477. <div id="postcontainer">
  478.  
  479. {block:Posts}
  480. <article>
  481.  
  482. <!--TEXT POST-->
  483. {block:Text}
  484. {block:Title}
  485. <h1 class="title">
  486. <a href="{Permalink}">{Title}</a></h1>
  487. {/block:Title}
  488. {Body}
  489. {/block:Text}
  490.  
  491.  
  492. <!--PHOTO POST-->
  493. {block:Photo}
  494. {block:IndexPage}
  495. {LinkOpenTag}
  496. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  497. {LinkCloseTag}
  498. {/block:IndexPage}
  499. {block:PermalinkPage}
  500. {LinkOpenTag}
  501. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  502. {LinkCloseTag}{/block:PermalinkPage}
  503. {/block:Photo}
  504.  
  505.  
  506. <!--PHOTOSET POST-->
  507. {block:Photoset}
  508. {block:IndexPage}{Photoset-500}{/block:IndexPage}
  509. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  510. {/block:Photoset}
  511.  
  512.  
  513. <!--QUOTE POST-->
  514. {block:Quote}
  515. <div class="quote">{Quote}</div>
  516. {block:Source}
  517. <div class="quotesource">{Source}</div>
  518. {/block:Source}
  519. {/block:Quote}
  520.  
  521.  
  522. <!--LINK POST-->
  523. {block:Link}
  524. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  525. {block:Description}{Description}{/block:Description}
  526. {/block:Link}
  527.  
  528.  
  529. <!--CHAT POST-->
  530. {block:Chat}
  531. <ul class="chat">
  532. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  533. </ul>
  534. {/block:Chat}
  535.  
  536.  
  537. <!--AUDIO POST-->
  538. {block:Audio}
  539. {block:AlbumArt}
  540. <div class="songart">
  541. <img src="{AlbumArtURL}">
  542. </div>
  543. {/block:AlbumArt}
  544. <div class="songtitle">
  545. {block:TrackName}
  546. {TrackName}
  547. {/block:TrackName}
  548. </div>
  549. <div class="songauthor">
  550. By
  551. {block:Artist}
  552. {Artist}
  553. {/block:Artist}
  554. </div>
  555. {AudioPlayerWhite}
  556. {/block:Audio}
  557.  
  558.  
  559. <!--VIDEO POST-->
  560. {block:Video}
  561. <div class="video">
  562. <div class="video-player">{Video-500}</div>
  563. {/block:Video}
  564.  
  565.  
  566. <!--ANSWER POST-->
  567. {block:Answer}
  568. <div class="askerimg"><img src="{AskerPortraitURL-16}"></div>
  569. <b>{Asker}:</b></span>
  570. <span class="question">{Question}</span>
  571. <p><div class="answer">{Answer}</div>
  572. {/block:Answer}
  573.  
  574. <!--CAPTIONS-->
  575. {block:Ifhidecaptions}
  576. {block:permalink}
  577. {block:Caption}
  578. {Caption}
  579. {/block:Caption}
  580. {/block:permalink}
  581. {/block:Ifhidecaptions}
  582. {block:Ifnothidecaptions}
  583. {block:Caption}
  584. {Caption}
  585. {/block:Caption}
  586. {/block:Ifnothidecaptions}
  587.  
  588. <!--POST INFORMATION-->
  589. <div class="postinfo">
  590.  
  591. <!--PERMALINK-->
  592. <a href="{Permalink}">
  593. {block:Date}
  594. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {12Hour}:{Minutes} {AmPm}
  595. {/block:Date}
  596. </a>
  597.  
  598. <!--NOTES-->
  599. {block:NoteCount}
  600. <a href="{Permalink}"> + {NoteCount} </a>
  601. {/block:NoteCount}
  602.  
  603. <!--VIA AND SOURCE-->
  604. {block:RebloggedFrom}
  605. ( <a href="{ReblogParentURL}">Via</a>
  606. {/block:RebloggedFrom}
  607. {block:ContentSource}
  608. & <a href="{SourceURL}">Source</a>
  609. {/block:ContentSource}
  610. {block:RebloggedFrom} ){/block:RebloggedFrom}
  611.  
  612. <!--TAGS-->
  613. {block:HasTags}
  614. <div class="tags">
  615. {block:Tags}
  616. <a href="{TagURL}">#{Tag},</a>
  617. {/block:Tags}
  618. </div>
  619. {/block:HasTags}
  620.  
  621. </div>
  622.  
  623. <!--POST NOTES-->
  624. {block:PostNotes}
  625. <div class="pagenotes">{PostNotes-16}</div>
  626. {/block:PostNotes}
  627.  
  628.  
  629. </article>
  630. {/block:Posts}
  631. <!--Close of article-->
  632.  
  633.  
  634. <!--PAGINATION-->
  635. {block:Pagination}
  636. <div class="pagination">
  637. {block:PreviousPage}
  638. <a href="{PreviousPage}">
  639. <div class="pagibutton">Previous</div></a>
  640. {/block:PreviousPage}
  641. {block:NextPage}
  642. <a href="{NextPage}">
  643. <div class="pagibutton">Next</div></a>
  644. {/block:NextPage}
  645. </div>
  646. {/block:Pagination}
  647.  
  648. </div>
  649.  
  650. </div>
  651.  
  652. <!-- -------------------------- TAB 2 -------------------------- -->
  653.  
  654. <div id="tab2" class="tab">
  655. <div class="tabcontent">
  656. Tab two content here
  657. </div>
  658. </div>
  659.  
  660.  
  661. <!-- -------------------------- TAB 3 -------------------------- -->
  662.  
  663. <div id="tab3" class="tab">
  664. <div class="tabcontent">
  665. Tab three content here
  666. </div>
  667. </div>
  668.  
  669.  
  670. <!-- -------------------------- TAB 4 -------------------------- -->
  671.  
  672. <div id="tab4" class="tab">
  673. <div class="tabcontent">
  674. Tab four content here
  675. <br>yo yo yo
  676. </div>
  677. </div>
  678.  
  679.  
  680. <!-- -------------------------- TAB 5 -------------------------- -->
  681.  
  682. <div id="tab5" class="tab">
  683. <div class="tabcontent">
  684. Tab five content here
  685. </div>
  686. </div>
  687.  
  688.  
  689.  
  690. <!-- END OF TABS -->
  691.  
  692. </div>
  693. </div>
  694. </div>
  695. </div>
  696. </div>
  697.  
  698.  
  699. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  700.  
  701. <script>
  702. $(document).ready(function() {
  703. $('.tabs .tab-links a').on('click', function(e) {
  704. var currentAttrValue = $(this).attr('href');
  705.  
  706. // Show/Hide Tabs
  707. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  708.  
  709. // Change/remove current tab to active
  710. $(this).parent('li').addClass('active').siblings().removeClass('active');
  711.  
  712. e.preventDefault();
  713. });
  714. });
  715. </script>
  716.  
  717. <script>
  718. $(document).ready(function() {
  719. $('#filterOptions li a').click(function() {
  720. // fetch the class of the clicked item
  721. var ourClass = $(this).attr('class');
  722.  
  723. // reset the active class on all the buttons
  724. $('#filterOptions li').removeClass('active');
  725. // update the active state on our clicked button
  726. $(this).parent().addClass('active');
  727.  
  728. if(ourClass == 'all') {
  729. // show all our items
  730. $('#ourHolder').children('div.item').show();
  731. }
  732. else {
  733. // hide all elements that don't share ourClass
  734. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  735. // show all elements that do share ourClass
  736. $('#ourHolder').children('div.' + ourClass).show();
  737. }
  738. return false;
  739. });
  740. });
  741. </script>
  742.  
  743.  
  744.  
  745.  
  746. </body>
  747. </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!