API tools faq
paste
Advertisement
sofiiayala

All in one page for tumblr

sofiiayala
Jan 30th, 2015
1,435
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.31 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" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5.  
  6. <script type="text/javascript">
  7. WebFontConfig = {
  8. google: { families: [ 'Lato:300,400:latin' ] }
  9. };
  10. (function() {
  11. var wf = document.createElement('script');
  12. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  13. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  14. wf.type = 'text/javascript';
  15. wf.async = 'true';
  16. var s = document.getElementsByTagName('script')[0];
  17. s.parentNode.insertBefore(wf, s);
  18. })(); </script>
  19.  
  20. <!---- All in one page #1 by Sofi (castiiel.tumblr.com). DON'T REMOVE THE CREDIT OR CLAIM THE THEME AS YOURS. DON'T USE IT AS A BASE --->
  21.  
  22. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  23.  
  24. <script type="text/javascript">
  25.  
  26. $(document).ready(function() {
  27. $(".tab_content").hide();
  28. $(".tab_content:first").show();
  29. $(".tablink a").click(function() {
  30. $(".tablink a").removeClass("active");
  31. $(this).addClass("active");
  32. $(".tab_content").hide();
  33. var activeTab = $(this).attr("rel");
  34. $("#"+activeTab).fadeIn();
  35. });
  36. });
  37.  
  38. </script>
  39.  
  40. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  41. <script>
  42. $(document).ready(function(){
  43. $(".ask").click(function(){
  44. $("#submit").hide();
  45. });
  46. $(".ask").click(function(){
  47. $("#askbox").show();
  48. });
  49. });
  50. </script>
  51.  
  52. <script>
  53. $(document).ready(function(){
  54. $(".submit").click(function(){
  55. $("#askbox").hide();
  56. });
  57. $(".submit").click(function(){
  58. $("#submit").show();
  59. });
  60. });
  61. </script>
  62.  
  63. <style type="text/css">
  64.  
  65. #dhtmltooltip{
  66. position: absolute;
  67. margin-left:70px;
  68. margin-top: 0px;
  69. border:2px #fff solid;
  70. padding:10px 3px;
  71. line-height:0px;
  72. font-family:consolas, trebuchet ms, sans-serif;
  73. text-transform:uppercase;
  74. font-size:10px;
  75. color:white;
  76. font-weight:bolder;
  77. letter-spacing: 1.5px;
  78. background:rgba(0,0,0, 0.5);
  79. visibility: hidden;
  80. z-index: 999999999999999999999999999;
  81. /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
  82. filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
  83. }
  84.  
  85. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  86.  
  87. display: none;
  88.  
  89. }
  90.  
  91. ::-webkit-scrollbar {width: 2px; height: 2px; background: transparent; }
  92. ::-webkit-scrollbar-thumb { background-color: #ccc; -webkit-border-radius: 0ex; }
  93.  
  94. body{
  95. font-family:Arial;
  96. background: #f3f3f3;
  97. margin:-10px;
  98. overflow-x:hidden;
  99. }
  100.  
  101. a{
  102. text-decoration:none;
  103. -webkit-transition-duration:.6s;
  104. -moz-transition-duration:.6s;
  105. -o-transition-duration:.6s;
  106. -ms-transition-duration:.6s;
  107. }
  108.  
  109. a:hover{
  110. -webkit-transition-duration:.6s;
  111. -moz-transition-duration:.6s;
  112. -o-transition-duration:.6s;
  113. -ms-transition-duration:.6s;
  114. }
  115.  
  116. h1 {
  117. font-family:'lato', sans-serif;
  118. text-transform:uppercase;
  119. font-size:10px;
  120. font-weight:bolder;
  121. text-align:left;
  122. line-height:150%;
  123. margin-top:15px;
  124. }
  125.  
  126. #content {
  127. margin:auto;
  128. margin-top:50px;
  129. width:770px;
  130. text-align:center;
  131. }
  132.  
  133. .tab_container {
  134. width: 770px;
  135. position: relative;
  136. top: 0px;
  137. clear: both;
  138. }
  139.  
  140. .tab_content {
  141. display: none;
  142. width:770px;
  143. }
  144.  
  145. /*---------FAQ----------*/
  146.  
  147. #tabz {
  148. width:330px;
  149. margin-bottom:10px;
  150. }
  151.  
  152. #tabz a {
  153. padding:10px;
  154. border:1px solid #dfdfdf;
  155. background:#fff;
  156. text-align: center;
  157. display:inline-block;
  158. width:135px;
  159. font-size:11px;
  160. font-family: trebuchet ms, consolas, 'lato', sans-serif;
  161. text-transform:uppercase;
  162. letter-spacing:1.4px;
  163. color:#000;
  164. margin:0px;
  165. transition: all 0.1s linear;
  166. -moz-transition-duration:0.1s;
  167. -webkit-transition-duration:0.1s;
  168. -o-transition-duration:0.1s;
  169. }
  170.  
  171. #tabz a:hover {
  172. letter-spacing:2px;
  173. transition: all 0.1s linear;
  174. -moz-transition-duration:0.1s;
  175. -webkit-transition-duration:0.1s;
  176. -o-transition-duration:0.1s;
  177. cursor:help!Important;
  178. }
  179.  
  180. #right {
  181. width:330px;
  182. height:400px;
  183. margin-top:-400px;
  184. margin-left:390px;
  185. }
  186.  
  187. #faqs {
  188. max-height:383px;
  189. overflow:auto;
  190. border:1px solid #dfdfdf;
  191. background:#fff;
  192. padding:0px 15px 15px;
  193. letter-spacing:1.2px;
  194. font-size:10px;
  195. font-family:'lato', sans-serif;
  196. line-height:150%;
  197. text-align:left;
  198. }
  199.  
  200. #left {
  201. width:330px;
  202. height: 400px;
  203. margin-left:50px;
  204. }
  205.  
  206. #askbox {
  207. border:1px solid #dfdfdf;
  208. background:#fff;
  209. padding:15px;
  210. }
  211.  
  212. #submit {
  213. overflow-x:hidden;
  214. overflow-y:auto;
  215. border:1px solid #dfdfdf;
  216. background:#fff;
  217. padding:15px;
  218. max-height: 324px;
  219. display:none;
  220. }
  221.  
  222. /*---------Blogroll---------*/
  223. #bpannel {
  224. width:128px;
  225. height:128px;
  226. padding:8px;
  227. background:white;
  228. border:1px solid #dfdfdf;
  229. position: relative;
  230. margin:10px;
  231. display:inline-block;
  232. }
  233.  
  234. #bpannel img{
  235. width:128px;
  236. height:128px;
  237. }
  238.  
  239. /*-------------------About------------*/
  240. #about {
  241. width:460px;
  242. max-height:400px;
  243. padding:20px;
  244. font-family:'lato', sans-serif;
  245. font-size:10px;
  246. letter-spacing:1.3px;
  247. line-height:150%;
  248. background:#fff;
  249. border:1px solid #dfdfdf;
  250. overflow-y:auto;
  251. overflow-x:hidden;
  252. text-align: justify;
  253. margin-left:135px;
  254. }
  255.  
  256. .pic img {
  257. float:left;
  258. margin-right:12px;
  259. width: 130px;
  260. padding: 10px;
  261. border:1px solid #dfdfdf;
  262. }
  263.  
  264. /*-------------------Navigation------------*/
  265. #pannel {
  266. width:215px;
  267. height:279px;
  268. background:white;
  269. border:1px solid #dfdfdf;
  270. position: relative;
  271. margin:18px;
  272. display:inline-block;
  273. overflow:hidden;
  274. }
  275.  
  276. .title {
  277. padding:17px 0px 17px;
  278. background:rgba(0,0,0, 0.8);
  279. border:8px solid #fff;
  280. color:#fff;
  281. font-size:12px;
  282. font-weight:bolder;
  283. font-family: trebuchet ms, consolas, 'lato', sans-serif;
  284. text-transform:uppercase;
  285. letter-spacing:2px;
  286. }
  287.  
  288. .links {
  289. height:215px;
  290. width:215px;
  291. overflow-y:auto;
  292. overflow-x:hidden;
  293. }
  294.  
  295. .links a {
  296. padding:15px 0px;
  297. border-top:1px solid #dfdfdf;
  298. font-size:11px;
  299. font-family: 'lato', sans-serif;
  300. letter-spacing:1px;
  301. text-transform:uppercase;
  302. color:#000;
  303. display:block;
  304. }
  305.  
  306. .links a:hover {
  307. font-style:italic;
  308. }
  309.  
  310. #topbar {
  311. width: 100%;
  312. margin:auto;
  313. background:#fff;
  314. border-bottom:1px solid #dfdfdf;
  315. font-size:14px;
  316. font-family: trebuchet ms, consolas, 'lato', sans-serif;
  317. text-transform:uppercase;
  318. padding: 25px 0px 15px;
  319. letter-spacing:1.4px;
  320. color:#000;
  321. text-align:right;
  322. }
  323.  
  324. #topbar a {
  325. color: #000;
  326. font-size:10px;
  327. margin-right:15px;
  328. cursor:help!Important;
  329. }
  330.  
  331. #uptownfunk {
  332. margin:auto;
  333. margin-top:50px;
  334. width:770px;
  335. text-align:center;
  336. font-family: trebuchet ms, 'lato', sans-serif;
  337. margin-bottom:50px;
  338. font-size: 10px;
  339. letter-spacing:2px;
  340. text-transform:uppercase;
  341. }
  342.  
  343. #uptownfunk a {
  344. color:#000;
  345. }
  346.  
  347. </style>
  348. </head>
  349. <body>
  350.  
  351. <div id="topbar">
  352. <a href="http://tumblr.com">index</a>
  353. <span class="tablink">
  354. <a class="active" rel="faq">FAQ</a>
  355. <a rel="about">about</a>
  356. <a rel="navi">tags</a>
  357. <a rel="blogroll">blogroll</a>
  358. </span>
  359. <b><span style="margin-right:25px;">Title goes here</span></b>
  360. </div>
  361.  
  362. <div id="content">
  363. <div class="tab_container">
  364.  
  365. <!-------------FAQ---------->
  366. <div id="faq" class="tab_content">
  367. <div id="left">
  368. <div id="tabz">
  369. <a class="ask" style="margin-right:10px;">ask box</a>
  370. <a class="submit">submit box</a>
  371. </div>
  372.  
  373. <div id="askbox"><iframe frameborder="0" scrolling="no" width="100%" height="260" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></div>
  374.  
  375. <div id="submit"><iframe frameborder="0" border="0" scrolling="no" width="298px" height="535px" allowtransparency="true" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent;"></iframe></div>
  376. </div>
  377.  
  378. <div id="right">
  379. <div id="faqs">
  380. <h1>This is how you wrap a question</h1>
  381. This is an answer.
  382.  
  383. <h1>Why didn't you reply?</h1>
  384. I'm sorry if I didn't! Tumblr must have eaten your message or I am very busy at the moment. Anyway, don't doubt to send it again!
  385.  
  386. <h1>Can you tag something for me?</h1>
  387. Sure! I can always tag anything that bothers you :)
  388.  
  389. <h1>Vote for me in a poll?</h1>
  390. Yes, sure. Just send me the link.
  391.  
  392. <h1>Can you recommend me good blogs?</h1>
  393. Every blog I follow is very good, so you can check out my blogroll.
  394.  
  395. <h1>Do you take requests?</h1>
  396. Not at the moment, but I will put it in my updates tab when they are opened.
  397.  
  398. <h1>Can I talk to you about random stuff, tell you about my day, ask for an advice or just be friends?</h1>
  399. Yes, PLEASE! I love meeting people here ♥
  400. </div>
  401. </div>
  402.  
  403. </div><!--FAQ tab-->
  404.  
  405.  
  406.  
  407. <!-------------About---------->
  408. <div id="about" class="tab_content">
  409.  
  410. <span class="pic">
  411. <img src="https://31.media.tumblr.com/c88731875ed5ad3bc7e367170e90e787/tumblr_n443ea8wYq1s5f5tho8_250.jpg">
  412. </span>
  413.  
  414. Write whatever you want and as much a you want here, because it will scroll.<br>
  415.  
  416. <h1>This is how you wrap a title</h1>
  417.  
  418. <b>bold</b>, <i>italics</i>, <u>underline</u> and <s>strike</s>. And add a new line with &lt;br&gt;. The picture auto resizes to 130px wide.<br><br>
  419.  
  420. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.<br><br>
  421.  
  422. Lorem ipsum dolor sit amet.
  423. Consectetuer adipiscing elit.
  424. Nam at tortor quis ipsum tempor aliquet.
  425. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.<br><br>
  426.  
  427. Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.
  428. Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.<br><br>
  429.  
  430. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.<br><br>
  431.  
  432. Lorem ipsum dolor sit amet.
  433. Consectetuer adipiscing elit.
  434. Nam at tortor quis ipsum tempor aliquet.
  435. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.<br><br>
  436.  
  437. Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.
  438. Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.
  439. </div>
  440.  
  441.  
  442.  
  443. <!-------------Navigation---------->
  444. <div id="navi" class="tab_content">
  445.  
  446. <div id="pannel">
  447. <div class="title">title number 1</div>
  448. <div class="links">
  449. <a href="/">link 1</a>
  450. <a href="/">link 2</a>
  451. <a href="/">link 3</a>
  452. <a href="/">link 4</a>
  453. <a href="/">link 5</a>
  454. <a href="/">link 6</a>
  455. <a href="/">link 7</a>
  456. </div>
  457. </div>
  458.  
  459. <div id="pannel">
  460. <div class="title">title number 2</div>
  461. <div class="links">
  462. <a href="/">link 1</a>
  463. <a href="/">link 2</a>
  464. <a href="/">link 3</a>
  465. <a href="/">link 4</a>
  466. <a href="/">link 5</a>
  467. <a href="/">link 6</a>
  468. <a href="/">link 7</a>
  469. </div>
  470. </div>
  471.  
  472. <div id="pannel">
  473. <div class="title">title number 3</div>
  474. <div class="links">
  475. <a href="/">link 1</a>
  476. <a href="/">link 2</a>
  477. <a href="/">link 3</a>
  478. <a href="/">link 4</a>
  479. <a href="/">link 5</a>
  480. <a href="/">link 6</a>
  481. <a href="/">link 7</a>
  482. </div>
  483. </div>
  484.  
  485. <div id="pannel">
  486. <div class="title">title number 4</div>
  487. <div class="links">
  488. <a href="/">link 1</a>
  489. <a href="/">link 2</a>
  490. <a href="/">link 3</a>
  491. <a href="/">link 4</a>
  492. <a href="/">link 5</a>
  493. <a href="/">link 6</a>
  494. <a href="/">link 7</a>
  495. </div>
  496. </div>
  497.  
  498. <div id="pannel">
  499. <div class="title">title number 5</div>
  500. <div class="links">
  501. <a href="/">link 1</a>
  502. <a href="/">link 2</a>
  503. <a href="/">link 3</a>
  504. <a href="/">link 4</a>
  505. <a href="/">link 5</a>
  506. <a href="/">link 6</a>
  507. <a href="/">link 7</a>
  508. </div>
  509. </div>
  510.  
  511. <div id="pannel">
  512. <div class="title">title number 6</div>
  513. <div class="links">
  514. <a href="/">link 1</a>
  515. <a href="/">link 2</a>
  516. <a href="/">link 3</a>
  517. <a href="/">link 4</a>
  518. <a href="/">link 5</a>
  519. <a href="/">link 6</a>
  520. <a href="/">link 7</a>
  521. </div>
  522. </div>
  523.  
  524. </div>
  525.  
  526.  
  527. <!-------------Blogroll---------->
  528. <div id="blogroll" class="tab_content">
  529. {block:Following}
  530. {block:Followed}
  531. <div id="bpannel">
  532. <a href="{FollowedURL}"><img src="{FollowedPortraitURL-128}" onMouseover="ddrivetip('{FollowedName}')"; onMouseout="hideddrivetip()"></a>
  533. </div>
  534. {/block:Followed}
  535. {/block:Following}
  536. </div>
  537.  
  538. </div></div>
  539.  
  540. <div id="uptownfunk"><a href="http://castiiel.tumblr.com">theme by castiiel</a></div>
  541.  
  542. <div id="dhtmltooltip"></div>
  543.  
  544. <script type="text/javascript">
  545.  
  546. /***********************************************
  547. * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  548. * This notice MUST stay intact for legal use
  549. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  550. ***********************************************/
  551.  
  552. var offsetxpoint=-60 //Customize x offset of tooltip
  553. var offsetypoint=20 //Customize y offset of tooltip
  554. var ie=document.all
  555. var ns6=document.getElementById && !document.all
  556. var enabletip=false
  557. if (ie||ns6)
  558. var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
  559.  
  560. function ietruebody(){
  561. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  562. }
  563.  
  564. function ddrivetip(thetext, thecolor, thewidth){
  565. if (ns6||ie){
  566. if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  567. if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  568. tipobj.innerHTML=thetext
  569. enabletip=true
  570. return false
  571. }
  572. }
  573.  
  574. function positiontip(e){
  575. if (enabletip){
  576. var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
  577. var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
  578. //Find out how close the mouse is to the corner of the window
  579. var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
  580. var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
  581.  
  582. var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
  583.  
  584. //if the horizontal distance isn't enough to accomodate the width of the context menu
  585. if (rightedge<tipobj.offsetWidth)
  586. //move the horizontal position of the menu to the left by it's width
  587. tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
  588. else if (curX<leftedge)
  589. tipobj.style.left="5px"
  590. else
  591. //position the horizontal position of the menu where the mouse is positioned
  592. tipobj.style.left=curX+offsetxpoint+"px"
  593.  
  594. //same concept with the vertical position
  595. if (bottomedge<tipobj.offsetHeight)
  596. tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
  597. else
  598. tipobj.style.top=curY+offsetypoint+"px"
  599. tipobj.style.visibility="visible"
  600. }
  601. }
  602.  
  603. function hideddrivetip(){
  604. if (ns6||ie){
  605. enabletip=false
  606. tipobj.style.visibility="hidden"
  607. tipobj.style.left="-1000px"
  608. tipobj.style.backgroundColor=''
  609. tipobj.style.width=''
  610. }
  611. }
  612.  
  613. document.onmousemove=positiontip
  614.  
  615. </script>
  616.  
  617. </body>
  618. </html>
  619. <!--
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!