API tools faq
paste
Advertisement
rockatanskis

cliff's edge (sepiol #01)

rockatanskis
Jul 5th, 2016
477
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.65 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}" />
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  6.  
  7. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  9. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  10. <script>
  11. (function($){
  12. $(document).ready(function(){
  13. $("[title]").style_my_tooltips({
  14. tip_follows_cursor:true,
  15. tip_delay_time:200,
  16. tip_fade_speed:300
  17. });
  18. });
  19. })(jQuery);
  20. </script>
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Bungee|Cairo:400,700" rel="stylesheet">
  23.  
  24.  
  25. <style type="text/css">
  26.  
  27. /*--- NAVIGATION PAGE BY ELI AKA SEPIOL
  28. - FEEL FREE TO EDIT AND MOVE AS MUCH AS YOU WANT
  29. - DO NOT REMOVE THE CREDIT
  30. - DO NOT USE AS A BASE
  31. - DO NOT REUPLOAD --*/
  32.  
  33. /*--TIPS FOR USE:
  34. 1. Don't let your category go over 1 line in length! If you do, you must adjust the margin height for the category (for example, to adjust <div id="categoryright2">, find #categoryright2 and change the margin height).
  35. 2. Images can be any size as they will automatically fit.
  36. 3. Removing avatars is easy but a little tedious: delete all #avatarleft and #avatarright sections and their corresponding divs. Find #linksleft and change margin-left:40px to margin-left:0px. Adjust the #container and #wrap widths and #container margin-left accordingly.
  37. 4. To remove a category, just delete all its <divs> and then adjust the container height.
  38. 4. Send me a message if you have any questions or come across any bugs.
  39. 5. Remember this is my first released theme!
  40.  
  41. ---*/
  42.  
  43. /*--THESE AFFECT THE APPEARANCE OF EVERYTHING--*/
  44.  
  45. #s-m-t-tooltip {
  46. max-width:300px;
  47. margin:15px;
  48. padding:5px;
  49. border:1px solid #eeeeee;
  50. border-radius:2px;
  51. background:#ffffff;
  52. color:#000;
  53. z-index:999999;
  54. font-size:7px;
  55. letter-spacing:2px;
  56. font-family:helvetica;
  57. text-transform:uppercase;
  58. }
  59.  
  60. body {
  61. font-style:none;
  62. background-color:#eee;
  63. color:#000;
  64. }
  65.  
  66. #wrap {
  67. width:460px;
  68. margin-left:50%;}
  69.  
  70. #container {
  71. width:460px;
  72. margin-top:140px;
  73. margin-left:-250px;
  74. margin-bottom:100px;
  75. height:355px;
  76. background-color:white;
  77. padding:20px;
  78. position:relative;
  79. overflow-y:scroll;
  80. overflow-x:hidden;
  81. border-radius:0px 0px 10px 10px;
  82. }
  83.  
  84. #pagetitle {
  85. border-radius:10px 10px 0px 0px;
  86. margin-left:-250;
  87. background:#151515;
  88. width:460px;
  89. padding:20px;
  90. font-family:helvetica, sans-serif;
  91. font-size:25px;
  92. font-weight:bold;
  93. position:fixed;
  94. margin-top:-69px;
  95. z-index:10;
  96. color:#fff;
  97. }
  98.  
  99. #pagetitle a {color:#fff;
  100. text-decoration:none;}
  101.  
  102. #pagetitle a:hover {
  103. color:white;
  104. -webkit-transition:all 0.5s;
  105. -moz-transition:all 0.5s;
  106. -ms-transition:all 0.5s;
  107. -o-transition:all 0.5s;
  108. transition:all 0.5s;
  109. }
  110.  
  111. #pagelinks {color:white;
  112. z-index:30;
  113. margin-left:175px;
  114. font-size:13px;
  115. position:fixed;
  116. font-weight:bold;
  117. margin-top:-45px;
  118. font-family:helvetica, sans-serif;
  119. word-spacing:5px;
  120. }
  121.  
  122. #pagelinks a {color:white;text-decoration:none;}
  123. #pagelinks a:hover {
  124. color:#000;
  125. -webkit-transition:all 0.5s;
  126. -moz-transition:all 0.5s;
  127. -ms-transition:all 0.5s;
  128. -o-transition:all 0.5s;
  129. transition:all 0.5s;}
  130.  
  131. /*--THESE CODES ARE FOR SECTIONS WITH THE AVATAR ON THE LEFT HAND SIDE--*/
  132.  
  133. #linksleft {
  134. background:#eee;
  135. width:400px;
  136. position:fixed;
  137. margin-left:40px;
  138. padding:10px;
  139. border-radius:5px;
  140. font-family:helvetica, sans-serif;
  141. font-size:12px;
  142. color:#515151;
  143. }
  144.  
  145. #linksleft a {color:#515151;text-decoration:none;}
  146. #linksleft a:hover {
  147. color:white;
  148. -webkit-transition:all 0.5s;
  149. -moz-transition:all 0.5s;
  150. -ms-transition:all 0.5s;
  151. -o-transition:all 0.5s;
  152. transition:all 0.5s;
  153. }
  154.  
  155. #avatarleft {
  156. margin-left:0px;
  157. z-index:0;
  158. position:fixed;
  159. }
  160.  
  161. #avatarleft img {
  162. max-width: 30px;
  163. max-height: 30px;
  164. border-radius:3px;
  165. }
  166.  
  167. #titleleft {
  168. color:#000;
  169. text-transform:uppercase;
  170. font-size:14px;
  171. font-weight:bold;
  172. }
  173.  
  174. #categoryleft1 {
  175. margin-bottom:60px;
  176. }
  177.  
  178. #categoryleft2 {
  179. margin-top:120px;
  180. }
  181.  
  182. #categoryleft3 {
  183. margin-top:240px;
  184. }
  185.  
  186.  
  187. /*--THESE CODES ARE FOR SECTIONS WITH THE AVATAR ON THE RIGHT HAND SIDE--*/
  188.  
  189. #linksright {
  190. background:#eee;
  191. width:400px;
  192. position:fixed;
  193. margin-left:0px;
  194. padding:10px;
  195. border-radius:5px;
  196. font-family:helvetica, sans-serif;
  197. font-size:12px;
  198. text-align:right;
  199. color:#515151;
  200. }
  201.  
  202. #linksright a {color:#515151;text-decoration:none;}
  203. #linksright a:hover {
  204. color:white;
  205. -webkit-transition:all 0.5s;
  206. -moz-transition:all 0.5s;
  207. -ms-transition:all 0.5s;
  208. -o-transition:all 0.5s;
  209. transition:all 0.5s;
  210. }
  211.  
  212. #avatarright {
  213. margin-left:430px;
  214. z-index:0;
  215. position:fixed;
  216. }
  217.  
  218. #avatarright img {
  219. max-width: 30px;
  220. max-height: 30px;
  221. border-radius:3px;
  222. }
  223.  
  224. #titleright {
  225. color:#000;
  226. text-align:right;
  227. text-transform:uppercase;
  228. font-size:14px;
  229. font-weight:bold;
  230. }
  231.  
  232. #categoryright {
  233. margin-bottom:60px;
  234. }
  235.  
  236. #categoryright2 {
  237. margin-top:180px;
  238. }
  239.  
  240. #categoryright3 {
  241. margin-top:300px;
  242. }
  243.  
  244. </style></head>
  245.  
  246.  
  247.  
  248. <body>
  249.  
  250. <div id="wrap">
  251. <div id="pagetitle">CLIFF'S EDGE.</div>
  252. <div id="pagelinks"><a href="/" title="home">☰</a>
  253. <a href="/ask" title="message">✎</a>
  254. <a href="http://sepiol.tumblr.com" title="credit">©</a> </div>
  255.  
  256. <div id="container">
  257.  
  258.  
  259. <div id="categoryleft1">
  260. <div id="avatarleft"><img src="https://65.media.tumblr.com/avatar_79454b29c200_96.png"/></div>
  261. <div id="linksleft">
  262. <div id="titleleft">CATEGORY</div>
  263. <a href="your link here">link one</a> /
  264. <a href="your link here">link two</a> /
  265. <a href="your link here">link three</a> /
  266. <a href="your link here">link four</a> /
  267. <a href="your link here">link five</a> /
  268. <a href="your link here">link six</a> /
  269. <a href="your link here">link seven</a>
  270. </div>
  271. </div>
  272.  
  273. <div id="categoryright1">
  274. <div id="avatarright"><img src="https://65.media.tumblr.com/avatar_79454b29c200_96.png"/></div>
  275. <div id="linksright">
  276. <div id="titleright">CATEGORY</div>
  277. <a href="your link here">link one</a> /
  278. <a href="your link here">link two</a> /
  279. <a href="your link here">link three</a> /
  280. <a href="your link here">link four</a> /
  281. <a href="your link here">link five</a> /
  282. <a href="your link here">link six</a> /
  283. <a href="your link here">link seven</a>
  284. </div>
  285. </div>
  286.  
  287. <div id="categoryleft2">
  288. <div id="avatarleft"><img src="https://65.media.tumblr.com/avatar_79454b29c200_96.png"/></div>
  289. <div id="linksleft">
  290. <div id="titleleft">CATEGORY</div>
  291. <a href="your link here">link one</a> /
  292. <a href="your link here">link two</a> /
  293. <a href="your link here">link three</a> /
  294. <a href="your link here">link four</a> /
  295. <a href="your link here">link five</a> /
  296. <a href="your link here">link six</a> /
  297. <a href="your link here">link seven</a>
  298. </div>
  299. </div>
  300.  
  301. <div id="categoryright2">
  302. <div id="avatarright"><img src="https://65.media.tumblr.com/avatar_79454b29c200_96.png"/></div>
  303. <div id="linksright">
  304. <div id="titleright">CATEGORY</div>
  305. <a href="your link here">link one</a> /
  306. <a href="your link here">link two</a> /
  307. <a href="your link here">link three</a> /
  308. <a href="your link here">link four</a> /
  309. <a href="your link here">link five</a> /
  310. <a href="your link here">link six</a> /
  311. <a href="your link here">link seven</a>
  312. </div>
  313. </div>
  314.  
  315. <div id="categoryleft3">
  316. <div id="avatarleft"><img src="https://65.media.tumblr.com/avatar_79454b29c200_96.png"/></div>
  317. <div id="linksleft">
  318. <div id="titleleft">CATEGORY</div>
  319. <a href="your link here">link one</a> /
  320. <a href="your link here">link two</a> /
  321. <a href="your link here">link three</a> /
  322. <a href="your link here">link four</a> /
  323. <a href="your link here">link five</a> /
  324. <a href="your link here">link six</a> /
  325. <a href="your link here">link seven</a>
  326. </div>
  327. </div>
  328.  
  329. <div id="categoryright3">
  330. <div id="avatarright"><img src="https://65.media.tumblr.com/avatar_79454b29c200_96.png"/></div>
  331. <div id="linksright">
  332. <div id="titleright">CATEGORY</div>
  333. <a href="your link here">link one</a> /
  334. <a href="your link here">link two</a> /
  335. <a href="your link here">link three</a> /
  336. <a href="your link here">link four</a> /
  337. <a href="your link here">link five</a> /
  338. <a href="your link here">link six</a> /
  339. <a href="your link here">link seven</a>
  340. </div>
  341. </div>
  342.  
  343. </div></div></body>
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!