API tools faq
paste
Advertisement
b0rn-to-be-wild

Theme directory (colored)

b0rn-to-be-wild
Sep 6th, 2014
537
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.87 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. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | "Theme directory (colored)"
  7.  
  8.  
  9. + Please do not redistribute this theme or remove credits.
  10. + You are allowed to make changes as long as you keep our credits.
  11. + If you have any questions or concerns, just contact us.
  12. + Thanks for using our page! We hope that you enjoy it!
  13.  
  14. ---->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <!--- Change the title of the page here --->
  21.  
  22. <title>{title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!--- Google fonts --->
  27.  
  28. <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  29.  
  30. <link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
  31.  
  32. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37. /* -------- BASICS ------- */
  38.  
  39. body {
  40. background: #fff;
  41. margin:0;
  42. width:100%;
  43. height:100%;
  44. font:12px Voltaire;
  45. padding: 0;
  46. position:absolute;
  47. }
  48.  
  49. /* Links */
  50.  
  51. a {
  52. text-decoration:none;
  53. outline:none;
  54. -webkit-transition: all 0.5s ease-in-out;
  55. -moz-transition: all 0.5s ease-in-out;
  56. -o-transition: all 0.5s ease-in-out;
  57. }
  58.  
  59. a:hover {
  60. color:#eee;
  61. -webkit-transition: all 0.5s ease-in-out;
  62. -moz-transition: all 0.5s ease-in-out;
  63. -o-transition: all 0.5s ease-in-out;
  64. }
  65.  
  66. .story{
  67. width:220px;
  68. margin:10px;
  69. padding:20px;
  70. transition-duration:1s;
  71. -moz-transition-duration:1s;
  72. -webkit-transition-duration:1s;
  73. -o-transition-duration:1s;
  74. }
  75.  
  76. /* Webkit scrollbar */
  77.  
  78. ::-webkit-scrollbar {
  79. background-color:#4ECDC4;
  80. border:2px solid #fff;
  81. height:5px;
  82. width:5px;
  83. }
  84.  
  85. ::-webkit-scrollbar-thumb:vertical {
  86. background-color:#4ECDC4;
  87. border:1px solid #fff;
  88. height:40px;
  89. }
  90.  
  91. ::-webkit-scrollbar-thumb:horizontal {
  92. background-color:#4ECDC4;
  93. border:1px solid #fff;
  94. height:8px!important
  95. }
  96.  
  97. /* -------- HEADER ------- */
  98.  
  99. #header{
  100. position:absolute;
  101. width:200px;
  102. background:#eee;
  103. left:0px;
  104. margin:0;
  105. width:100%;
  106. height:90px;
  107. z-index:10000;
  108. }
  109.  
  110. #headerin{
  111. position:relative;
  112. margin-right:auto;
  113. margin-left:auto;
  114. margin-top:10px;
  115. width:420px;
  116. height:60px;
  117. text-align:left;
  118. }
  119.  
  120. /* Header image */
  121.  
  122. .headerimage{
  123. position:absolute;
  124. margin-left:10px;
  125. margin-top:0px;
  126. width:50px;
  127. height:50px;
  128. padding:4px;
  129. background:#fff;
  130. }
  131.  
  132. .headerimage img{
  133. width:100%;
  134. height:100%;
  135. margin-left:-1px;
  136. margin-top:-1px;
  137. border:1px solid #eee;
  138. }
  139.  
  140. /* Blog title */
  141.  
  142. .blogtitle{
  143. position:absolute;
  144. margin-left:75px;
  145. margin-top:0px;
  146. font-size:34px;
  147. line-height:46px;
  148. height:46px;
  149. width:260px;
  150. font-family:Oswald;
  151. color:#BE0A50;
  152. border:1px solid #fff;
  153. padding:5px;
  154. background:#fff;
  155. text-align:center;
  156. }
  157.  
  158. /* Navigation icons */
  159.  
  160. .headerlinks{
  161. position:absolute;
  162. margin-left:349px;
  163. margin-top:0px;
  164. height:50px;
  165. width:70px;
  166. font-family:Oswald;
  167. color:#eee;
  168. }
  169.  
  170. .headerlinks i{
  171. display:inline-block;
  172. margin-left:5px;
  173. margin-bottom:7px;
  174. background:#BE0A50;
  175. color:#eee;
  176. padding:5px;
  177. font-size:15px;
  178. width:14px;
  179. }
  180.  
  181. .headerlinks i:hover{
  182. background:#fff;
  183. color:#BE0A50;
  184. }
  185.  
  186. /* -------- SORTING CONTENT ------- */
  187.  
  188. #sort{
  189. height:40px;
  190. line-height:40px;
  191. width:100%;
  192. position:relative;
  193. background:#eee;
  194. margin-top:10px;
  195. margin-left:auto;
  196. margin-right:auto;
  197. text-align:center;
  198. }
  199.  
  200. #sort ul {
  201. background:#eee;
  202. list-style: none;
  203. margin-top:0px;
  204. border-bottom:4px double #fff;
  205. padding-right:35px;
  206. }
  207.  
  208. /* Sort links */
  209.  
  210. #sort li {
  211. display:inline;
  212. text-align:center;
  213. list-style: none;
  214. margin-left:0px;
  215. padding:3px;
  216. background:#4ECDC4;
  217. text-transform:uppercase;
  218. }
  219.  
  220. #sort a {
  221. color:#eee;
  222. border:1px solid transparent;
  223. display:inline;
  224. padding:5px;
  225. margin-bottom:5px;
  226. }
  227.  
  228. #sort a:hover {
  229. color:#4ECDC4;
  230. background:#eee;
  231. }
  232.  
  233. #sort li a.selected {
  234. color:#4ECDC4;
  235. background:#eee;
  236. border:1px solid transparent;
  237. }
  238.  
  239. /* -------- CONTENT ------- */
  240.  
  241. #container{
  242. position:relative;
  243. margin-left:auto;
  244. margin-right:auto;
  245. margin-top:130px;
  246. width:805px;
  247. height:auto;
  248. }
  249.  
  250. /* Image container */
  251.  
  252. #themecontainer{
  253. width:220px;
  254. height:180px;
  255. background:#fff;
  256. border:4px double #ccc;
  257. padding:10px;
  258. }
  259.  
  260. #themecontainer img{
  261. width:220px;
  262. height:180px;
  263. }
  264.  
  265. /* Information */
  266.  
  267. .info{
  268. position:fixed;
  269. opacity:0;
  270. width:100%;
  271. height:0;
  272. top:0px;
  273. left:0px;
  274. background:#fff;
  275. color:#ccc;
  276. font-size:13px;
  277. text-align:center;
  278. }
  279.  
  280. #themecontainer:hover .info{
  281. opacity:0.9;
  282. height:100%;
  283. -moz-transition-duration:1s;
  284. -webkit-transition-duration:1s;
  285. -o-transition-duration:1s;
  286. }
  287.  
  288. /* Style of the title in information part */
  289.  
  290. h1{
  291. font-size:24px;
  292. margin-left:auto;
  293. margin-right:auto;
  294. width:90%;
  295. color:#BE0A50;
  296. border-bottom:1px solid #eee;
  297. }
  298.  
  299. /* Style of the links in information part */
  300.  
  301. .info a{
  302. background:#189BA3;
  303. color:#fff;
  304. padding:2px 4px;
  305. }
  306.  
  307. .info a:hover{
  308. background:#fff;
  309. color:#eee;
  310. border:1px solid #eee;
  311. }
  312.  
  313. /* ----------------------- CREDITS ----------------------------- */
  314.  
  315. #credits {
  316. position:fixed;
  317. right:10px;
  318. top:50px;
  319. z-index:100000;
  320. }
  321.  
  322. #credits img{
  323. border:1px solid #eee;
  324. }
  325.  
  326.  
  327. </style>
  328.  
  329. <!--Sticky menu-->
  330.  
  331. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  332. <script type="text/javascript">
  333. $(function(){
  334. var stickyRibbonTop = $('#sort').offset().top;
  335. $(window).scroll(function(){
  336. if( $(window).scrollTop() > stickyRibbonTop ) {
  337. $('#sort').css({position: 'fixed', top: '-10px'});
  338. } else {
  339. $('#sort').css({position: 'static', top: '0px'});
  340. }
  341. });
  342. });
  343. </script>
  344.  
  345.  
  346. <script>
  347. $(document).ready(function () {
  348. $.localScroll();
  349. });
  350. </script>
  351.  
  352. <!------- filter scripts -------->
  353. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  354. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  355. <script>
  356. $(function(){
  357.  
  358. var $container = $('#container');
  359.  
  360. $container.isotope({
  361. itemSelector : '.story'
  362. });
  363.  
  364.  
  365. var $optionSets = $('#sort .option-set'),
  366. $optionLinks = $optionSets.find('a');
  367.  
  368. $optionLinks.click(function(){
  369. var $this = $(this);
  370. // don't proceed if already selected
  371. if ( $this.hasClass('selected') ) {
  372. return false;
  373. }
  374. var $optionSet = $this.parents('.option-set');
  375. $optionSet.find('.selected').removeClass('selected');
  376. $this.addClass('selected');
  377.  
  378. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  379. var options = {},
  380. key = $optionSet.attr('data-option-key'),
  381. value = $this.attr('data-option-filter');
  382. // parse 'false' as false boolean
  383. value = value === 'false' ? false : value;
  384. options[ key ] = value;
  385. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  386. // changes in layout modes need extra logic
  387. changeLayoutMode( $this, options )
  388. } else {
  389. // otherwise, apply new options
  390. $container.isotope( options );
  391. }
  392.  
  393. return false;
  394. });
  395.  
  396.  
  397. });
  398. </script>
  399.  
  400. <!-----end filter scripts------>
  401.  
  402.  
  403. <meta charset="utf-8">
  404. <title>{Title}</title>
  405. <link rel="shortcut icon" href="{Favicon}">
  406. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  407.  
  408. </head>
  409.  
  410. <body>
  411.  
  412. <div id="header">
  413.  
  414. <div id="headerin">
  415.  
  416. <!--You can replace the image in the header-->
  417. <div class="headerimage"><a href="/"><img src="http://i58.tinypic.com/2s6kq2v.png"></a></div>
  418.  
  419. <div class="blogtitle">Directory</div>
  420.  
  421. <div class="headerlinks">
  422. <a href="/"><i class="fa fa-home"></i></a>
  423. <a href="/ask"><i class="fa fa-envelope"></i></a>
  424. <a href="/submit"><i class="fa fa-pencil"></i></a>
  425. <a href="/archive"><i class="fa fa-clock-o"></i></a>
  426. </div>
  427.  
  428. </div>
  429.  
  430. <!----- Filter links (here you add tags as ".header", ".sidebar", ".infinitescroll" etc. Do not change ".story" tag, it refreshes the page) ------>
  431.  
  432. <div id="sort">
  433. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  434.  
  435. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  436. <li><a href="#filter" data-option-filter=".tag1">tag 1</a></li>
  437. <li><a href="#filter" data-option-filter=".tag2">tag 2</a></li>
  438. <li><a href="#filter" data-option-filter=".tag3">tag 3</a></li>
  439. <li><a href="#filter" data-option-filter=".tag4">tag 4</a></li>
  440. <li><a href="#filter" data-option-filter=".tag5">tag 5</a></li>
  441. <li><a href="#filter" data-option-filter=".tag6">tag 6</a></li>
  442.  
  443. </ul>
  444. </div>
  445.  
  446. </div>
  447.  
  448. <div id="container" class="clearfix">
  449.  
  450. <!---- theme containers
  451.  
  452. in class="story tag1" "tag1" is actually a theme tag you can add, to add more tags for the same theme simply put "tag1 tag2 tag3" for example: class="story sidebar header infinitescroll pagination" I suggest you writing two word tags as one word tag
  453.  
  454. ----->
  455.  
  456. <!--1st container-->
  457.  
  458. <div id="themecontainer" class="story tag1">
  459. <img src="http://i61.tinypic.com/dg5t3b.png"></a>
  460. <div class="info">
  461.  
  462. <h1>Title</h1>
  463.  
  464. Information goes here<br><br>
  465.  
  466. <a href="/">link</a>
  467. <a href="/">link</a>
  468.  
  469. </div>
  470. </div>
  471.  
  472. <!--2nd container-->
  473.  
  474. <div id="themecontainer" class="story tag2">
  475. <img src="http://i62.tinypic.com/2rqdl79.png"></a>
  476. <div class="info">
  477.  
  478. <h1>Title</h1>
  479.  
  480. Information goes here<br><br>
  481.  
  482. <a href="/">link</a>
  483. <a href="/">link</a>
  484.  
  485. </div>
  486. </div>
  487.  
  488. <!--3rd container-->
  489.  
  490. <div id="themecontainer" class="story tag3">
  491. <img src="http://i57.tinypic.com/246rg5k.png"></a>
  492. <div class="info">
  493.  
  494. <h1>Title</h1>
  495.  
  496. Information goes here<br><br>
  497.  
  498. <a href="/">link</a>
  499. <a href="/">link</a>
  500.  
  501. </div>
  502. </div>
  503.  
  504. <!--4th container-->
  505.  
  506. <div id="themecontainer" class="story tag4">
  507. <img src="http://i59.tinypic.com/2643o2e.png"></a>
  508. <div class="info">
  509.  
  510. <h1>Title</h1>
  511.  
  512. Information goes here<br><br>
  513.  
  514. <a href="/">link</a>
  515. <a href="/">link</a>
  516.  
  517. </div>
  518. </div>
  519.  
  520. <!--5th container-->
  521.  
  522. <div id="themecontainer" class="story tag5">
  523. <img src="http://i62.tinypic.com/5vxduw.png"></a>
  524. <div class="info">
  525.  
  526. <h1>Title</h1>
  527.  
  528. Information goes here<br><br>
  529.  
  530. <a href="/">link</a>
  531. <a href="/">link</a>
  532.  
  533. </div>
  534. </div>
  535.  
  536. <!--6th container-->
  537.  
  538. <div id="themecontainer" class="story tag6">
  539. <img src="http://i57.tinypic.com/sfx73l.png"></a>
  540. <div class="info">
  541.  
  542. <h1>Title</h1>
  543.  
  544. Information goes here<br><br>
  545.  
  546. <a href="/">link</a>
  547. <a href="/">link</a>
  548.  
  549. </div>
  550. </div>
  551.  
  552. <!--7th container-->
  553.  
  554. <div id="themecontainer" class="story tag1 tag2">
  555. <img src="http://i58.tinypic.com/s6689w.png"></a>
  556. <div class="info">
  557.  
  558. <h1>Title</h1>
  559.  
  560. Information goes here<br><br>
  561.  
  562. <a href="/">link</a>
  563. <a href="/">link</a>
  564.  
  565. </div>
  566. </div>
  567.  
  568. <!--8th container-->
  569.  
  570. <div id="themecontainer" class="story tag3 tag4">
  571. <img src="http://i58.tinypic.com/10o1u6h.png"></a>
  572. <div class="info">
  573.  
  574. <h1>Title</h1>
  575.  
  576. Information goes here<br><br>
  577.  
  578. <a href="/">link</a>
  579. <a href="/">link</a>
  580.  
  581. </div>
  582. </div>
  583.  
  584. <!--9th container-->
  585.  
  586. <div id="themecontainer" class="story tag5 tag6">
  587. <img src="http://i60.tinypic.com/11a8pav.png"></a>
  588. <div class="info">
  589.  
  590. <h1>Title</h1>
  591.  
  592. Information goes here<br><br>
  593.  
  594. <a href="/">link</a>
  595. <a href="/">link</a>
  596.  
  597. </div>
  598. </div>
  599.  
  600.  
  601. <!---- Containers end, to add more containers just copy/paste:
  602.  
  603. <div id="themecontainer" class="story tag5 tag6">
  604. <img src="https://31.media.tumblr.com/c5f4f09ed321f20b2457565c18677d96/tumblr_nbhuohBQc71rhax0jo2_250.png"></a>
  605. <div class="info">
  606.  
  607. <h1>Title</h1>
  608.  
  609. Information goes here<br><br>
  610.  
  611. <a href="/">link</a>
  612. <a href="/">link</a>
  613.  
  614. </div>
  615. </div>
  616.  
  617. ---->
  618. </div>
  619.  
  620. <a href="http://borntobewildthemes.tumblr.com" title="Page THEME DIRECTORY by borntobewildthemes"><div id="credits">
  621. <img src="http://i57.tinypic.com/301g6eg.jpg"></div></a>
  622.  
  623. </body>
  624.  
  625.  
  626. </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!