API tools faq
paste
odeysseus_thm

all in one / DREAM

odeysseus_thm
May 9th, 2017
6,749
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6.  
  7. dream
  8.  
  9. @odeysseus
  10.  
  11. - you can choose new colors from colorpicker.com
  12. - to change the accent color, pick a new color from colorpicker then use cmnd+f or ctrl+f to search for #d7c7d5, then hit cmnd/ctrl+f again and replace all with your new color. don't forget the #
  13. - the "message" section will only show up if you have your ask enabled in settings
  14. - the "blogroll" section will not show up for sideblogs as blogrolls don't work on sideblogs
  15. - credits at odeysseus.tumblr.com/credit
  16.  
  17. -->
  18.  
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. <title>explore</title>
  22.  
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div style="bottom:20px;right:20px;position:fixed"><a href="http://odeysseus.tumblr.com">O</a></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  24. (function($){
  25. $(document).ready(function(){
  26. $("a[title]").style_my_tooltips({
  27. tip_follows_cursor:true,
  28. tip_delay_time:30,
  29. tip_fade_speed:300,
  30. attribute:"title"
  31. });
  32. });
  33. })(jQuery);
  34. </script>
  35.  
  36. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic' rel='stylesheet' type='text/css'>
  37.  
  38. <style type="text/css">
  39.  
  40. #s-m-t-tooltip{
  41. position:absolute;
  42. margin:20px;
  43. max-width:250px;
  44. z-index:9999;
  45. border:1px solid #eee;
  46. color:#666;
  47. background:#fafafa;
  48. padding:2px 5px 1px;
  49. }
  50.  
  51. iframe#tumblr_controls, iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop,iframe.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop { display:none!important; }
  52.  
  53. @-webkit-keyframes fade {
  54. 0% {opacity: 0;}
  55. 100% { opacity: 1; }
  56. }
  57.  
  58. @-moz-keyframes fade {
  59. 0% { opacity: 0; }
  60. 100% { opacity: 1; }
  61. }
  62.  
  63. @keyframes fade {
  64. 0% { opacity: 0; }
  65. 100% { opacity: 1; }
  66. }
  67.  
  68. ::-webkit-scrollbar{
  69. width:1px;
  70. }
  71.  
  72. ::-webkit-scrollbar-thumb {background:#d7c7d5;opacity:.5;}
  73.  
  74. ::-webkit-scrollbar-track {background:#fafafa;}
  75.  
  76. ::-moz-selection{ background: #eee; color:#777;}
  77. ::selection { background:#eee; color:#777; }
  78.  
  79. body {
  80. background:#fefefe;
  81. color:#898989; /* text color */
  82. font-family:'Source Sans Pro', sans-serif; /*main font*/
  83. font-weight:400;
  84. font-size:11px; /* font size */
  85. text-align:left;
  86. line-height:180%;
  87. -webkit-animation-name:fade;
  88. -webkit-animation-duration:1s;
  89. -moz-osx-font-smoothing:grayscale;
  90. -webkit-font-smoothing:antialiased;
  91. font-smoothing:antialiased;
  92. }
  93.  
  94.  
  95. a {
  96. color:#aaa; /*link color*/
  97. text-decoration:none;
  98. cursor:pointer;
  99. }
  100.  
  101. b,strong { font-weight:600;color:#666; /* #666 is the color of bold text*/ }
  102. a,ul#tabs li,img.bimg {
  103. transition:all .5s ease;
  104. -webkit-transition:all .5s ease;
  105. -moz-transition:all .5s ease;
  106. -o-transition:all .5s ease;
  107. }
  108.  
  109. a:hover {
  110. text-decoration:none;
  111. color:#d7c7d5; /*link hover*/
  112. }
  113.  
  114.  
  115. section {
  116. width:520px;
  117. margin:180px auto 60px;
  118. }
  119.  
  120. ul#tabs {
  121. list-style-type: none;
  122. padding: 0;
  123. left:0px;
  124. margin-top:0px;
  125. display:block;
  126. padding-bottom:10px;
  127. margin-bottom:10px;
  128. border-bottom:1px solid #eee; /* #eee is the border color */
  129. text-align: left;
  130. }
  131.  
  132. ul#tabs li.active {
  133. font-weight:700;
  134. color:#d7c7d5;
  135. }
  136.  
  137. ul#tabs a {
  138. font-weight:700;
  139. color:#d7c7d5;
  140. float:right;
  141. }
  142. ul#tabs a:hover { color:#666; }
  143.  
  144. ul#tabs li {
  145. cursor: help;display:inline-block;
  146. margin-right:7px; /* spacing between tabs */
  147. }
  148.  
  149. ul#tab {
  150. list-style-type: none;
  151. margin: 0;
  152. padding: 0;
  153. }
  154. ul#tab li {
  155. display:none;
  156. }
  157. ul#tab li.active {
  158. display:block;
  159. -webkit-animation-name:fade;
  160. -webkit-animation-duration:.5s;
  161. }
  162.  
  163. p { margin:0;padding:0;margin-top:9px; }
  164.  
  165. .box {
  166. width:248px;
  167. float:left;
  168. padding:5px;
  169. }
  170.  
  171. h8 {
  172. font-size:12px;
  173. font-weight:600;
  174. color:#666;
  175. display:block;
  176. margin-bottom:7px;
  177. }
  178.  
  179. .box img {
  180. width:40px;
  181. border-radius:3px;
  182. height:40px;
  183. margin:0px 5px 2px 0px;
  184. }
  185.  
  186. .blogroll {
  187. float:left;
  188. display:inline-block;
  189. width:20%;
  190. padding:10px 0px;
  191. text-align:center;
  192. font-weight:600;
  193. }
  194.  
  195. img.bimg {
  196. width:50px;
  197. height:50px;
  198. border-radius:3px;
  199. display:block;
  200. margin:5px auto;
  201. opacity:.6;
  202. }
  203. .blogroll:hover img.bimg {
  204. opacity:1;
  205. }
  206.  
  207. .sm a {
  208. font-size:22px;
  209. border:1px solid #eee;
  210. border-radius:3px;
  211. padding:5px;display:inline-block;
  212. margin:0px 5px 6px 0px;
  213. width:22px;
  214. height:22px;
  215. text-align:center;
  216. }
  217. .sm a:hover {
  218. background:#fafafa;
  219. color:#444;
  220. }
  221.  
  222. .test {
  223. font-style:italic;
  224. }
  225. .test h8 { font-style:normal;margin-bottom:0px; }
  226.  
  227. .test h8 a,a.blogroll { color:#666; } .test h8 a:hover,a.blogroll:hover { color:#d7c7d5; }
  228.  
  229. .nav a,.nav b {
  230. width:24%;
  231. display:inline-block;
  232. }
  233. .tags {
  234. margin-bottom:5px;
  235. padding:5px 0px;
  236. border-bottom:1px solid #eee;
  237. }
  238.  
  239. .mssg b {
  240. display:block;
  241. color:#666;
  242. margin-top:10px;
  243. }
  244.  
  245. .mssg b:first-of-type { margin:0; }
  246.  
  247. </style>
  248.  
  249. </head>
  250. <body>
  251.  
  252. <section>
  253.  
  254. <ul id="tabs"> <!--top tabs-->
  255. <li class="active">about</li>
  256. <li>social</li>
  257. {block:AskEnabled}<li>message</li>{/block:AskEnabled}
  258. <li>navigate</li>
  259. {block:following}<li>blogroll</li>{/block:following}
  260.  
  261. <!--home link-->
  262. <a href="/">home</a>
  263. </ul>
  264. <!--end top tabs-->
  265.  
  266. <ul id="tab">
  267. <!--about tab-->
  268. <li class="active about">
  269. This is your about text. <b>Bold</b>, <i>italics</i>, <a href="link url">link</a>.
  270. <p>
  271. new paragraph.
  272. </li>
  273. <!--end about tab-->
  274.  
  275. <!--social tab: you can delete sections you don't need!-->
  276. <li class="social">
  277. <div class="wrapper">
  278.  
  279. <!--friends section-->
  280. <div class="box">
  281. <h8>friends</h8><!--heading-->
  282.  
  283. <a href="link url" title="friend name"><img src="img url"/></a>
  284. <a href="link url" title="friend name"><img src="img url"/></a>
  285.  
  286. </div>
  287. <!--end friends section-->
  288.  
  289. <!--social media section-->
  290. <div class="box sm">
  291. <h8>social media</h8><!--heading-->
  292. <!--use http://ionicons.com/ to find more social media icons -->
  293.  
  294. <a href="link url" title="twitter"><i class="ion-social-twitter"></i></a>
  295. <a href="link url" title="instagram"><i class="ion-social-instagram-outline"></i></a>
  296. <a href="link url" title="pinterest"><i class="ion-social-pinterest-outline"></i></a>
  297. <a href="link url" title="snapchat: username"><i class="ion-social-snapchat-outline"></i></a>
  298.  
  299. </div>
  300. <!--end social media section-->
  301.  
  302. <!--start networks section-->
  303. <div class="box">
  304. <h8>networks</h8>
  305. <a href="link url" title="network name"><img src="img url"/></a>
  306. <a href="link url" title="network name"><img src="img url"/></a>
  307.  
  308. </div>
  309. <!--end networks section-->
  310.  
  311. <!--start other blogs section-->
  312. <div class="box">
  313. <h8>other blogs</h8>
  314. <a href="link url" title="blog name"><img src="img url"/></a>
  315. <a href="link url" title="blog name"><img src="img url"/></a>
  316.  
  317. </div>
  318. <!--end other blogs section-->
  319.  
  320. <!--start testimonials section-->
  321. <div class="box test">
  322. <h8><a href="friend url">friend</a></h8>
  323. this is ur testimonial!
  324. </div>
  325.  
  326. <div class="box test">
  327. <h8>anonymous</h8>
  328. this is an anon testimonial!
  329. </div>
  330. <!--end testimonials section-->
  331.  
  332. </div>
  333. </li>
  334.  
  335. <!--start ask box: will only show up if you have ask enabled in settings-->
  336. {block:AskEnabled}
  337. <li class="mssg">
  338.  
  339. <!--start faq-->
  340.  
  341.  
  342. <b>this is a question</b>
  343. and this is an answer
  344.  
  345. <b>this is a question</b>
  346. and this is an answer
  347.  
  348.  
  349. <!--end faq-->
  350. <p style="border-top:1px solid #eee"><iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;padding-top:10px;margin-top:10px"></iframe></p>
  351. <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  352. </li>
  353. {/block:AskEnabled}
  354. <!--end ask box-->
  355.  
  356.  
  357. <!--start navigation-->
  358. <li class="nav">
  359.  
  360. <!--tags box-->
  361. <div class="tags">
  362. <b>heading</b>
  363. <a href="/tagged/">tag</a>
  364. <a href="/tagged/">tag</a>
  365. <a href="/tagged/">tag</a>
  366. <a href="/tagged/">tag</a>
  367. <a href="/tagged/">tag</a>
  368. <a href="/tagged/">tag</a>
  369. <a href="/tagged/">tag</a>
  370. <a href="/tagged/">tag</a>
  371. <a href="/tagged/">tag</a>
  372. </div>
  373. <!--end tags box-->
  374.  
  375.  
  376. <!--tags box-->
  377. <div class="tags">
  378. <b>heading</b>
  379. <a href="/tagged/">tag</a>
  380. <a href="/tagged/">tag</a>
  381. <a href="/tagged/">tag</a>
  382. </div>
  383. <!--end tags box-->
  384.  
  385.  
  386. </li>
  387. <!--end navigation-->
  388.  
  389. <!--start blogroll: you do not need to edit this manually, blogs you follow will show up automatically when you open your blog in a new tab. this will not show up on sideblogs.-->
  390. {block:Following}
  391. <li class="roll">{block:Followed}<a class="blogroll" href="{FollowedURL}"><img class="bimg" src="{FollowedPortraitURL-64}" /> {FollowedName}</a>{/block:Followed}</li>
  392. {/block:Following}
  393.  
  394. <!--end of editing-->
  395. </section>
  396. </body>
  397. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  398. <script>
  399. $(document).ready(function(){
  400. $("ul#tabs li").click(function(e){
  401. if (!$(this).hasClass("active")) {
  402. var tabNum = $(this).index();
  403. var nthChild = tabNum+1;
  404. $("ul#tabs li.active").removeClass("active");
  405. $(this).addClass("active");
  406. $("ul#tab li.active").removeClass("active");
  407. $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  408. }
  409. $('.wrapper').masonry({
  410. itemSelector : ".box",
  411. },
  412. function() { $('.wrapper').masonry({ appendedContent: $(this) }); }
  413. );
  414. $('li.roll').masonry({
  415. itemSelector : "a.blogroll",
  416. },
  417. function() { $('li.roll').masonry({ appendedContent: $(this) }); }
  418. );
  419. });
  420.  
  421. });
  422. </script>
  423.  
  424. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!