API tools faq
paste
Advertisement
mogimochi

Multi-Page [01]

mogimochi
Feb 11th, 2013
7,524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Mutli-Page Theme [01]
  8. by yukoki/houtarubi
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. -->
  16.  
  17. <title>-</title>
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19. <link rel="shortcut icon" href="{Favicon}" />
  20.  
  21. <style type="text/css">
  22.  
  23. iframe#tumblr_controls {
  24. right:3px !important; position:fixed !important;
  25. }
  26.  
  27. body {
  28. background-image: url(http://i1246.photobucket.com/albums/gg607/mogimochi/backgrounds/bg-woodhorizontallightsmall.png);
  29. background-attachment: fixed;
  30. margin: 0;
  31. }
  32. a { text-decoration:none; }
  33.  
  34. li { list-style-type:square;list-style-color:#569FE8; }
  35.  
  36. ::selection {background:transparent;color: #a6b4ca;}
  37. ::-moz-selection {background: transparent;color: #a6b4ca;}
  38. ::-webkit-selection {background: transparent;color: #a6b4ca;}
  39.  
  40. #top {width: 400px;margin-top: 40px;}
  41.  
  42. #colour-bar {width:440px;margin-left:-20px;height:7px;overflow:hidden;}
  43.  
  44. .colour-part { width:33%;height:100%;float:left;}
  45.  
  46. .pic {width: 400px;display: block;}
  47.  
  48. #title {
  49. background-color: #D9D9D9;/**bg of 'about me'**/
  50. border-left: 5px solid #6a689e;/**border of 'about me'**/
  51. border-right: 5px solid #6a689e;/**border of 'about me'**/
  52. width: 90px;
  53. font-family: consolas;
  54. font-size: 13px;
  55. padding: 2px 0;
  56. position: absolute;
  57. margin: -6px 10px;
  58. }
  59.  
  60. #title2 {
  61. background-color: #D9D9D9;/**bg of your URL**/
  62. border-left: 5px solid #6a689e;/**border of your URL**/
  63. border-right: 5px solid #6a689e;/**border of your URL**/
  64. width: 110px;
  65. float: right;
  66. font-family: consolas;
  67. font-size: 13px;
  68. padding: 2px 0;
  69. position: absolute;
  70. margin: -13px 270px;
  71. }
  72.  
  73. #dhtmltooltip {
  74. position: absolute;
  75. padding: 3px;
  76. text-align:center;
  77. font-family:consolas;
  78. font-size: 9px;
  79. text-transform: uppercase;
  80. color:#000;
  81. visibility: hidden;
  82. z-index: 10000;
  83. }
  84.  
  85. #custom {
  86. width: 10px;
  87. position: absolute;
  88. margin-top: 10px;
  89. margin-left: 410px;
  90. }
  91.  
  92. #a, #b, #c, #d, #e, #f {
  93. width: 13px;
  94. height: 13px;
  95. border-radius: 10px;
  96. -moz-border-radius: 10px;
  97. -webkit-border-radius: 10px;
  98. float: left;
  99. margin-right: 10px;
  100. margin-bottom: 5px;
  101. -webkit-transition: all 0.3s ease-in-out;
  102. -moz-transition: all 0.3s ease-in-out;
  103. -o-transition: all 0.3s ease-in-out;
  104. -ms-transition: all 0.3s ease-in-out;
  105. transition: all 0.3s ease-in-out;
  106. }
  107. .aa {background-color:#6a68ad;}/**circle 1**/
  108. .bb {background-color:#6a91d9;}/**circle 2**/
  109. .cc {background-color:#6aacef;}/**circle 3**/
  110. .dd {background-color:#6ad5fa;}/**circle 4**/
  111. .ee {background-color:#6af0fd;}/**circle 5**/
  112.  
  113. .aa:hover, .bb:hover, .cc:hover, .dd:hover, .ee:hover {
  114. background-color: #fff;/**circles' hovered colour**/
  115. -webkit-transition: all 0.3s ease-in-out;
  116. -moz-transition: all 0.3s ease-in-out;
  117. -o-transition: all 0.3s ease-in-out;
  118. -ms-transition: all 0.3s ease-in-out;
  119. transition: all 0.3s ease-in-out;
  120. }
  121.  
  122. #navi {
  123. width: 10px;
  124. position: absolute;
  125. margin-top: -100px;
  126. margin-left: -25px;
  127. }
  128.  
  129. .t {
  130. color: #000;/**information/favourites/following/more colours**/
  131. border-bottom: 1px solid #d3d3d3;/** ^ borders**/
  132. font-family: consolas;
  133. letter-spacing: 3px;
  134. font-style: italic;
  135. text-align: center;
  136. margin-bottom: 15px;
  137. margin-top: 5px;
  138. }
  139.  
  140. #info {
  141. color: #525252;/**bio colour**/
  142. background-color: #fff;/**bio bg**/
  143. width: 480px;
  144. margin-top: 30px;
  145. text-align: justify;
  146. padding: 10px;
  147. font-family: calibri;
  148. font-size: 13px;
  149. }
  150.  
  151. #info a {
  152. color: #6a68a2;/**bio links colour**/
  153. -webkit-transition: all 0.3s ease-in-out;
  154. -moz-transition: all 0.3s ease-in-out;
  155. -o-transition: all 0.3s ease-in-out;
  156. -ms-transition: all 0.3s ease-in-out;
  157. transition: all 0.3s ease-in-out;
  158. }
  159. #info a:hover {color:#000;}/**bio links hover colour**/
  160. #info .i b,strong {color: #768de1;font-weight:normal;}/**bio bold**/
  161. #info .i i,em {color:#6adbf8;font-style:normal;}/**bio italic**/
  162.  
  163. #intrecs {
  164. width: 500px;
  165. height: 270px;
  166. }
  167.  
  168. .fandomt {
  169. background-color: #6a689e;/**fandom title bg**/
  170. color: #fff;/**fandom title text**/
  171. line-height: 20px;
  172. text-transform: uppercase;
  173. padding: 0 5px;
  174. }
  175.  
  176. #interests {
  177. color: #8c8c8c;/**fandoms text**/
  178. background-color: #fff;/**fandom box bg**/
  179. margin-top: 10px;
  180. width: 225px;
  181. text-align: justify;
  182. padding: 10px;
  183. font-family: calibri;
  184. font-size: 13px;
  185. float: left;
  186. }
  187.  
  188. .content {height: 200px;margin-top: -10px;overflow: auto;}
  189.  
  190. #recs {
  191. background-color: #fff;/**blogroll box bg**/
  192. margin-top: 10px;
  193. width: 225px;
  194. text-align: justify;
  195. padding: 10px;
  196. font-family: calibri;
  197. font-size: 13px;
  198. float:right;
  199. }
  200.  
  201. .n {background-color:#989ede;height:10px;margin-bottom:5px;margin-top:23px;width:333px;}/**info stripe 1**/
  202. .a {background-color:#a5a7c6;height:10px;margin-bottom:5px;width:333px;}/**nfo stripe 2**/
  203. .l {background-color:#d3d3d3;height:10px;width:333px;}/*info stripe 2*/
  204.  
  205. .name {
  206. margin: -40px 0 5px 30px;
  207. padding: 0 10px;
  208. width: auto;
  209. float: left;
  210. background-color: #fff;/*colour of info bg*/
  211. line-height: 10px;
  212. }
  213. .name b,strong {color:#989ede;}/*'NAME:' colour*/
  214.  
  215. .age {
  216. margin: -25px 0 5px 30px;
  217. padding: 0 10px;
  218. width: auto;
  219. float: left;
  220. background-color: #fff;/*colour of info bg*/
  221. line-height: 10px;
  222. }
  223. .age b,strong {color:#a5a7c6;}/*'ASK:' colour*/
  224.  
  225. .location {
  226. margin: -10px 0 5px 30px;
  227. padding: 0 10px;
  228. width: auto;
  229. float: left;
  230. background-color: #fff;/*colour of info bg*/
  231. line-height: 10px;
  232. }
  233. .location b,strong {color:#d3d3d3;}/*'LOCATION:' colour*/
  234.  
  235. #basic {
  236. font-size: 12px;
  237. width: auto;
  238. margin-left: 74px;
  239. height: 64px;
  240. }
  241. .icon {width:64px;height:64px;position:absolute;border-radius:100px 0 100px 100px;}
  242. .icon2 {width:64px;height:64px;position:absolute;border-radius:0 100px 100px 100px;float: right;margin: -79px 0 0 416px;}
  243.  
  244. #more {
  245. background-color: #fff;/*more links bg*/
  246. width: 480px;
  247. text-align: justify;
  248. padding: 10px;
  249. font-family: calibri;
  250. font-size: 13px;
  251. float: center;
  252. }
  253.  
  254. .systema {height: auto;margin-top: -10px;}
  255. .link {
  256. color: #000;/*links text colour*/
  257. background-color: #d6d6d6;/*links bg colour*/
  258. font-family: consolas;
  259. font-size: 10px;
  260. line-height: 30px;
  261. text-transform: uppercase;
  262. width: 80px;
  263. padding: 5px 5px;
  264. margin: 0 3px 3px 3px;
  265. float: center;
  266. -webkit-transition: all 0.3s ease-in-out;
  267. -moz-transition: all 0.3s ease-in-out;
  268. -o-transition: all 0.3s ease-in-out;
  269. -ms-transition: all 0.3s ease-in-out;
  270. transition: all 0.3s ease-in-out;
  271. }
  272.  
  273. .link:hover {
  274. background-color: #4b4b4b;/*links text hover colour*/
  275. color: #fff;/*links bg hover colour*/
  276. }
  277.  
  278. #scrollToTop {
  279. background-color: #fff;/*back to top bg colour*/
  280. color: #000;/*back to top text colour*/
  281. font-family: consolas;
  282. font-size: 12px;
  283. padding: 5px 10px;
  284. font-style: italic;
  285. text-transform: uppercase;
  286. letter-spacing: 5px;
  287. margin-top: 100px;
  288. }
  289.  
  290. #scrollToTop:link, #scrollToTop:visited {
  291. background-color: #fff;/*back to top bg colour*/
  292. display: none;
  293. }
  294.  
  295. .followings {width:48px;height:48px;float:left;padding:2px;opacity:0.6;
  296. -webkit-transition: all 0.4s ease-in-out;
  297. -moz-transition: all 0.4s ease-in-out;
  298. -o-transition: all 0.4s ease-in-out;
  299. -ms-transition: all 0.4s ease-in-out;
  300. transition: all 0.4s ease-in-out;}
  301. .followings:hover {opacity: 1; border-radius: 20px;}
  302.  
  303. #ongaku {
  304. position: absolute;
  305. margin-top: 35px;
  306. margin-left: -40px;
  307. width: 25px;
  308. height: 25px;
  309. overflow: hidden;
  310. }
  311.  
  312. .musicg {
  313. margin-top: 7px;
  314. margin-left: -7px;
  315. position: absolute;
  316. background-color: #fff;
  317. -webkit-transition: all 0.4s ease-in-out;
  318. -moz-transition: all 0.4s ease-in-out;
  319. -o-transition: all 0.4s ease-in-out;
  320. -ms-transition: all 0.4s ease-in-out;
  321. transition: all 0.4s ease-in-out;
  322. }
  323.  
  324. #ongaku:hover .musicg { margin-top: -15px; }
  325.  
  326. #mplayer {
  327. margin-left: -17px;
  328. margin-top: -2px;
  329. }
  330.  
  331. {CustomCSS}
  332.  
  333. </style>
  334.  
  335. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  336. <script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  337.  
  338. </head>
  339. <body>
  340.  
  341. <div id="dhtmltooltip"></div>
  342. <script type="text/javascript">
  343.  
  344. /***********************************************
  345. * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  346. * This notice MUST stay intact for legal use
  347. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  348. ***********************************************/
  349.  
  350. var offsetxpoint=10 //Customize x offset of tooltip
  351. var offsetypoint=-20 //Customize y offset of tooltip
  352. var ie=document.all
  353. var ns6=document.getElementById && !document.all
  354. var enabletip=false
  355. if (ie||ns6)
  356. var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
  357.  
  358. function ietruebody(){
  359. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  360. }
  361.  
  362. function ddrivetip(thetext, thecolor, thewidth){
  363. if (ns6||ie){
  364. if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  365. if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  366. tipobj.innerHTML=thetext
  367. enabletip=true
  368. return false
  369. }
  370. }
  371.  
  372. function positiontip(e){
  373. if (enabletip){
  374. var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
  375. var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
  376. //Find out how close the mouse is to the corner of the window
  377. var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
  378. var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
  379.  
  380. var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
  381.  
  382. //if the horizontal distance isn't enough to accomodate the width of the context menu
  383. if (rightedge<tipobj.offsetWidth)
  384. //move the horizontal position of the menu to the left by it's width
  385. tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
  386. else if (curX<leftedge)
  387. tipobj.style.left="5px"
  388. else
  389. //position the horizontal position of the menu where the mouse is positioned
  390. tipobj.style.left=curX+offsetxpoint+"px"
  391.  
  392. //same concept with the vertical position
  393. if (bottomedge<tipobj.offsetHeight)
  394. tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
  395. else
  396. tipobj.style.top=curY+offsetypoint+"px"
  397. tipobj.style.visibility="visible"
  398. }
  399. }
  400.  
  401. function hideddrivetip(){
  402. if (ns6||ie){
  403. enabletip=false
  404. tipobj.style.visibility="hidden"
  405. tipobj.style.left="-1000px"
  406. tipobj.style.backgroundColor=''
  407. tipobj.style.width=''
  408. }
  409. }
  410.  
  411. document.onmousemove=positiontip
  412.  
  413. </script>
  414.  
  415. <center>
  416. <div id="top">
  417.  
  418. <div id="title">about me</div>
  419. <div id="colour-bar">
  420. <!--Where #6a689e is, replace it with the colour of the top bar you want surrounding the picture.-->
  421. <div class="colour-part" style="background-color:#6a689e;"></div>
  422. <div class="colour-part" style="background-color:#6a689e;"></div>
  423. <div class="colour-part" style="background:transparent;"></div></div>
  424.  
  425. <!--
  426.  
  427. 5 custom links at the top right of your picture.
  428. How to customize it:
  429.  
  430. <center><a href="[your custom link]" class="aa" id="a" onMouseover="ddrivetip('[title of your custom link]','#fff', [width of the text])"; onMouseout="hideddrivetip()"></a></center>
  431.  
  432. NOTE: it is not necessary to change all the widths of the text, you can just leave it at 50. And don't forget to remove the [square brackets]!
  433.  
  434. -->
  435.  
  436. <div id="custom">
  437.  
  438. <center><a href="/" class="aa" id="a" onMouseover="ddrivetip('link 1','#fff', 50)"; onMouseout="hideddrivetip()"></a></center>
  439.  
  440. <center><a href="/" class="bb" id="a" onMouseover="ddrivetip('link 2','#fff', 50)"; onMouseout="hideddrivetip()"></a></center>
  441.  
  442. <center><a href="/" class="cc" id="a" onMouseover="ddrivetip('link 3','#fff', 50)"; onMouseout="hideddrivetip()"></a></center>
  443.  
  444. <center><a href="/" class="dd" id="a" onMouseover="ddrivetip('link 4','#fff', 50)"; onMouseout="hideddrivetip()"></a></center>
  445.  
  446. <center><a href="/" class="ee" id="a" onMouseover="ddrivetip('link 5','#fff', 50)"; onMouseout="hideddrivetip()"></a></center>
  447.  
  448. </div>
  449.  
  450. <img class="pic" src="http://i1246.photobucket.com/albums/gg607/mogimochi/tumblr_lvi0ghafZY1r47th1o1_500_zpsecc0b27c.png"><!--your image link in between the " "-->
  451.  
  452. <div id="colour-bar">
  453. <!--Where #6a689e is, replace it with the colour of the bottom bar you want surrounding the picture.-->
  454. <div class="colour-part" style="background:transparent;"></div>
  455. <div class="colour-part" style="background-color:#6a689e;"></div>
  456. <div class="colour-part" style="background-color:#6a689e;"></div>
  457. </div>
  458.  
  459. <div id="navi">
  460. <center><a href="/" class="ee" id="a" onMouseover="ddrivetip('index','#fff', 30)";
  461. onMouseout="hideddrivetip()"></a></center>
  462. <center><a href="/ask" class="dd" id="a" onMouseover="ddrivetip('ask','#fff', 20)";
  463. onMouseout="hideddrivetip()"></a></center>
  464. <center><a href="/archive" class="cc" id="a" onMouseover="ddrivetip('memories','#fff', 40)";
  465. onMouseout="hideddrivetip()"></a></center>
  466. <center><a href="http://yukoki.tumblr.com" class="bb" id="a" onMouseover="ddrivetip('credit','#fff', 30)";
  467. onMouseout="hideddrivetip()"></a></center>
  468. <center><a href="http://.tumblr.com/dashboard" class="aa" id="a" onMouseover="ddrivetip('dashboard','#fff', 50)";
  469. onMouseout="hideddrivetip()"></a></center>
  470. </div>
  471.  
  472. <div id="title2">your url</div><!--your url/name/etc-->
  473.  
  474. <!--MUSIC. delete until line 489 if you don't have any.-->
  475.  
  476. <div id="ongaku">
  477.  
  478. <img class="musicg" src="http://media.tumblr.com/tumblr_m7w2o3N94I1r6o8v2.gif"/>
  479.  
  480. <div id="mplayer">
  481. <!--
  482. billy music player goes here. Find out how to get it at the below link:
  483. http://yukoki.tumblr.com/tut2
  484. -->
  485. </div><!--mplayer-->
  486.  
  487. </div>
  488.  
  489. <!--END OF MUSIC-->
  490.  
  491. </div>
  492.  
  493. <div id="info">
  494. <div class="t">information</div>
  495.  
  496. <img class="icon" src="{PortraitURL-64}">
  497.  
  498. <div id="basic">
  499.  
  500. <div class="nal">
  501. <div class="n"></div><div class="a"></div><div class="l"></div>
  502. </div>
  503.  
  504. <div class="name"><b>NAME:</b> name</div><!--your name-->
  505. <div class="age"><b>AGE:</b> age</div><!--your age-->
  506. <div class="location"><b>LOCATION:</b> country</div><!--your country-->
  507.  
  508. </div>
  509.  
  510. <img class="icon2" src="http://i1246.photobucket.com/albums/gg607/mogimochi/yamamoto.png"><!--the link to your right icon in between the " "-->
  511.  
  512. <div class="i">
  513.  
  514. <!--YOUR BIOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
  515.  
  516. </div><!--i-->
  517.  
  518. </div><!--info-->
  519.  
  520. <div id="intrecs">
  521.  
  522. <div id="interests">
  523. <div class="t">favourites</div>
  524. <div class="content">
  525.  
  526. <!--
  527. example:
  528.  
  529. <span class="fandomt">books</span>
  530. harry potter | percy jackson | manga | the mortal instruments<p>
  531.  
  532. NOTE: you MUST keep the <p> at the end of your list or it won't look right... :<
  533. -->
  534.  
  535. <span class="fandomt">one</span>
  536. aaa | bbb | ccc | ddd<p>
  537.  
  538. <span class="fandomt">two</span>
  539. aaa | bbb | ccccccc | dddddd | eee | fff | ggg | hhh | iii | jjj | kkk | lll | mmm | nnn | ooo<p>
  540.  
  541. <span class="fandomt">three</span>
  542. aaa | bbb | ccc | ddd | eee | fff<p>
  543.  
  544. </div><!--content-->
  545.  
  546. </div><!--interests-->
  547.  
  548. <div id="recs">
  549. <div class="t">following</div>
  550.  
  551. <center><div class="content">
  552.  
  553. {block:Following}{block:Followed}
  554. <center><a href="{FollowedURL}"><img class="followings" src="{FollowedPortraitURL-48}" /></a> </center>
  555. {/block:Followed}{/block:Following}
  556.  
  557. </div><!--content--></center>
  558.  
  559. </div><!--recs-->
  560.  
  561. </div><!--interests and recs-->
  562.  
  563. <div id="more">
  564. <div class="t">more links</div>
  565. <center><div class="systema">
  566.  
  567. <!--
  568. A normal link looks like the folowing:
  569.  
  570. <a href="/"><span class="link">link1</span></a>
  571.  
  572. If any of your links get half-cut-off and pushed to the next line, just type in '<br>' at the end of the line.
  573. -->
  574.  
  575. <a href="/"><span class="link">link 1</span></a>
  576. <a href="/"><span class="link">link 2</span></a>
  577. <a href="/"><span class="link">link 3</span></a>
  578. <a href="/"><span class="link">link 4</span></a>
  579. <a href="/"><span class="link">link 5</span></a>
  580. <a href="/"><span class="link">link 6</span></a>
  581. <a href="/"><span class="link">link 7</span></a>
  582. <a href="/"><span class="link">link 8</span></a>
  583. <a href="/"><span class="link">link 9</span></a>
  584. </center>
  585. </div>
  586.  
  587. <!--more-->
  588.  
  589. <div style="color: rgba(0,0,0,0);font-size:10px;">space</div>
  590. <center><a href="javascript:;" id="scrollToTop">back to top</a></center>
  591.  
  592. </div><!--top-->
  593. </center>
  594.  
  595. <div style="padding-top: 80px; color: rgba(0,0,0,0);">space</div>
  596.  
  597. </body>
  598. </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!