API tools faq
paste
enchantingly

Tags Page 02

enchantingly
Oct 29th, 2013
804
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.41 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en">
  2. <!--
  3. Tags Page 02 by Elowen (theghostoflove.tumblr.com)
  4.  
  5. I don’t mind if the credit is removed if the theme is edited beyond recognition. If not, please keep credit intact.
  6. -->
  7.  
  8. <head>
  9. <link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
  10. <script src="https://static.tumblr.com/ougxdjo/7cPmrvjid/lora.js" type="text/javascript"></script>
  11.  
  12. <title>{title} | tags</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  16.  
  17. <style type="text/css">
  18.  
  19. /**--SCROLLBAR BACKGROUND (just change the # colour)**/
  20.  
  21. ::-webkit-scrollbar {width:6px;height:auto;background:#fad9b4;-moz-border-radius-topleft: 6px 6px;border-top-left-radius: 6px 6px;-moz-border-radius-topright: 6px 6px;border-top-right-radius: 6px 6px;-moz-border-radius-bottomleft: 6px 6px;border-bottom-left-radius: 6px 6px;-moz-border-radius-bottomright: 6px 6px;border-bottom-right-radius: 6px 6px;}
  22.  
  23. /**SCROLLBAR THUMB (again just the # colour)**/
  24. ::-webkit-scrollbar-thumb:vertical {background:#bebebe;-moz-border-radius-topleft: 6px 6px;border-top-left-radius: 6px 6px;-moz-border-radius-topright: 6px 6px;border-top-right-radius: 6px 6px;-moz-border-radius-bottomleft: 6px 6px;border-bottom-left-radius: 6px 6px;-moz-border-radius-bottomright: 6px 6px;border-bottom-right-radius: 6px 6px;}
  25.  
  26. a {text-decoration:none;-moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;}
  27. a:hover {-moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;}
  28.  
  29. body {
  30. /**change the main background colour below**/
  31. background:#e4d7cf url('BACKGROUND IMAGE URL HERE IF WANTED') repeat fixed;
  32. text-align:center;
  33. font-family:'Lora', serif;
  34. font-size:11px;
  35. margin:0 auto;
  36. }
  37.  
  38. /**-------------------CONTAINER, NO EDITING NEEDED----------------------**/
  39.  
  40. #container {width:100%;margin: 0 auto;text-align:center;}
  41.  
  42. #container #entries {
  43. margin-top:300px;
  44. margin-bottom:10px;
  45. width:1089px;
  46. text-align:center;
  47. }
  48.  
  49. /**-----------------------------HEADER--------------------------------**/
  50. #header {
  51. background-color:#fbe2c6; /**background colour of header**/
  52. background-image:url('https://i43.tinypic.com/259zlg1.jpg'); /**image is optional but recommended**/
  53. background-size:1000px 250px; /**width by height, 1400px covers the width of many (but not all) screens**/
  54. left:0px;
  55. top:0px;
  56. width:100%;
  57. height:250px; /**IF YOU CHANGE THE HEIGHT OF THE IMAGE DON'T FORGET TO CHANGE THIS HEIGHT TOO**/
  58. position:absolute;
  59. background-position:top;
  60. background-repeat:no-repeat;
  61. }
  62.  
  63. /**--------------------------LINKS-----------------------------**/
  64.  
  65. #links {
  66. background-color:#fbe2c6; /**background colour of links bar**/
  67. z-index:10;
  68. position:absolute;
  69. text-align:center;
  70. top:248px;
  71. left:0px;
  72. width:100%;
  73. padding:5px 0px 0px 0px;
  74. padding-right:0px;
  75. }
  76. #links a {
  77. background-color:#bebebe; /**background colour of actual links**/
  78. color:#fdf3f3; /**colour of links text**/
  79. border:solid 2px transparent; /**colour of border, just change the #**/
  80. min-width:70px;
  81. display:inline-block;
  82. margin:0px 5px 8px 5px;
  83. padding:5px 1px 5px 1px;
  84. font-size:10px;
  85. text-transform:lowercase;
  86. letter-spacing:1px;
  87. text-align:center;
  88. padding:4px;
  89. }
  90. #links a:hover {
  91. border-color:#bebebe; /**colour of border on hover**/
  92. background-color:#ffe7e7; /**colour of links background on hover**/
  93. color:#5e0101; /**colour of links text on hover**/
  94. letter-spacing:2px
  95. }
  96.  
  97. #links.sticky {
  98. position:fixed;
  99. top:0px;
  100. left:0px;
  101. z-index:10;
  102. }
  103.  
  104. /**---------------------JILY SNITCH TAG HOLDERS---------------------**/
  105.  
  106. #zetags {
  107. width:221px;
  108. height:295px;
  109. display:inline-block;
  110. margin:20px;
  111. background-image:url('https://media.tumblr.com/c9f241451fabd6f48eef9d7bb8fd2476/tumblr_inline_mvby4sUU6y1qk6lff.png');
  112. background-size:224px 295px;
  113. background-repeat:no-repeat;
  114. }
  115.  
  116. /**----------------------MARAUDER TAG HOLDERS-----------------------**/
  117.  
  118. #zetagsmarauder {
  119. width:221px;
  120. height:295px;
  121. display:inline-block;
  122. margin:20px;
  123. background-image:url('https://media.tumblr.com/8e24b68c8a011e6ee45a4fa0a1a47d7c/tumblr_inline_mvbyh130501qk6lff.png');
  124. background-size:224px 295px;
  125. background-repeat:no-repeat;
  126. }
  127.  
  128. /**---------------------------TAG TITLE-----------------------------**/
  129.  
  130. #title {
  131. color:#000; /**colour of title**/
  132. font-family: 'Rochester'; /**font**/
  133. width:210px;
  134. text-align:center;
  135. font-style:normal;
  136. font-size:22px;
  137. text-align:center;
  138. margin:20px 0px 0px 5px;
  139. padding:10px 0px 10px 0px;
  140. }
  141.  
  142. #title a {
  143. color:#e23c3c; /**colour of tag title if you make it a link**/
  144. }
  145.  
  146. /**-------------------------MAIN TITLE----------------------------**/
  147.  
  148. #title2 {
  149. font-family: 'Montez'; /**font**/
  150. color:#000; /**colour of title**/
  151. text-align:center;
  152. font-size:44px;
  153. font-weight:bold;
  154. text-align:center;
  155. margin:20px 0px 0px -20px;
  156. padding:80px 0px 10px 0px;
  157. }
  158.  
  159. /**------------------------THE ACTUAL TAGS--------------------------**/
  160.  
  161. #tags {margin-left:10px;height:218px;width:203px;overflow-y:scroll;overflow-x:hidden;margin-top:-10px;}
  162. #tags a {
  163. width:193px;
  164. color:#5e0101; /**colour of tag text**/
  165. font-family:'Lora', serif; /**font**/
  166. font-size:12px; /**font size**/
  167. text-align:center;
  168. display:block;
  169. padding:5px 1px 5px 1px;
  170. }
  171.  
  172. #tags a:hover {
  173. color:#5e0101; /**colour of tag on hover**/
  174. background-color:rgba(255,255,255,0.5); /**guide to rgb colours can be found at https://unawoken.tumblr.com/post/62913215304/how-to-rgb-colours (if that doesn't work, replace unawoken with theghostoflove)**/
  175. font-weight:bold;
  176. }
  177.  
  178. {CustomCSS}</style>
  179.  
  180. </head>
  181.  
  182. <!--DO NOT EDIT THIS BIT BELOW HERE-->
  183.  
  184. <link href='https://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
  185. <link href='https://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
  186.  
  187. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  188.  
  189. <script>
  190. $(function(){
  191. var header = $('#links').offset().top;
  192. $(window).scroll(function(){
  193. if( $(window).scrollTop() > header ) {
  194. $('#links').addClass("sticky");
  195. } else {
  196. $('#links').removeClass("sticky");
  197. }
  198. });
  199. });
  200.  
  201. </script>
  202.  
  203. <!--Okay now you can go on editing-->
  204.  
  205. <body>
  206. <div id="header">
  207. <div id="title2">Tags Page</div> <!--title of tags page here-->
  208. </div>
  209. <div id="links">
  210. <a href="/">home</a>
  211. <a href="/ask">ask</a>
  212. <a href="/archive">archive</a>
  213. <!--to add more links, copy and paste the above and replace urls and titles-->
  214. <a href="https://theghostoflove.tumblr.com">credit</a>
  215. </div>
  216.  
  217. <div id="container">
  218. <center><div id="entries">
  219.  
  220. <!------
  221. copy and paste a whole paragraph for a new set of tags
  222. <div id="zetags"> = for a snitch background
  223. <div id="zetagsmarauder"> = for marauder background
  224.  
  225. to hide the scrollbar because you don't have enough tags in a section for an actual scroll thing, replace <div id="tags"> with <div id="tags" style="overflow:hidden"> like in the second load of tags in the original code
  226.  
  227. copy and paste a tag link for another tag
  228. -------->
  229.  
  230. <div id="zetags">
  231. <div id="title">Tag Title Here</div>
  232. <!--replace tag title with the title of your tags-->
  233. <div id="tags">
  234. <a href="/tagged/">tag</a>
  235. <a href="/tagged/">tag</a>
  236. <a href="/tagged/">tag</a>
  237. <a href="/tagged/">tag</a>
  238. <a href="/tagged/">tag</a>
  239. <a href="/tagged/">tag</a>
  240. <a href="/tagged/">tag</a>
  241. <a href="/tagged/">tag</a>
  242. <a href="/tagged/">tag</a>
  243. </div> <!--tags-->
  244. </div> <!--zetags-->
  245.  
  246. <div id="zetagsmarauder">
  247. <div id="title">Tag Title</div>
  248. <div id="tags" style="overflow:hidden">
  249. <a href="/tagged/">tag</a>
  250. <a href="/tagged/">tag</a>
  251. <a href="/tagged/">tag</a>
  252. <a href="/tagged/">tag</a>
  253. <a href="/tagged/">tag</a>
  254. <a href="/tagged/">tag</a>
  255. <a href="/tagged/">tag</a>
  256. </div> <!--tags-->
  257. </div> <!--zetags-->
  258.  
  259. <div id="zetags">
  260. <div id="title">Tag Title</div>
  261. <div id="tags">
  262. <a href="/tagged/">tag</a>
  263. <a href="/tagged/">tag</a>
  264. <a href="/tagged/">tag</a>
  265. <a href="/tagged/">tag</a>
  266. <a href="/tagged/">tag</a>
  267. <a href="/tagged/">tag</a>
  268. <a href="/tagged/">tag</a>
  269. <a href="/tagged/">tag</a>
  270. <a href="/tagged/">tag</a>
  271. <a href="/tagged/">tag</a>
  272. <a href="/tagged/">tag</a>
  273. <a href="/tagged/">tag</a>
  274. <a href="/tagged/">tag</a>
  275. </div> <!--tags-->
  276. </div> <!--zetags-->
  277.  
  278. <div id="zetagsmarauder">
  279. <div id="title">This is a tag title</div>
  280. <div id="tags" style="overflow:hidden">
  281. <a href="/tagged/">tag</a>
  282. <a href="/tagged/">tag</a>
  283. <a href="/tagged/">tag</a>
  284. <a href="/tagged/">tag</a>
  285. <a href="/tagged/">tag</a>
  286. </div> <!--tags-->
  287. </div> <!--zetags-->
  288.  
  289. <div id="zetagsmarauder">
  290. <div id="title">Tag Title</div>
  291. <div id="tags" style="overflow:hidden">
  292. <a href="/tagged/">tag</a>
  293. <a href="/tagged/">tag</a>
  294. <a href="/tagged/">tag</a>
  295. <a href="/tagged/">tag</a>
  296. <a href="/tagged/">tag</a>
  297. </div> <!--tags-->
  298. </div> <!--zetags-->
  299.  
  300. <div id="zetags">
  301. <div id="title">Lorem ipsum dolor sit amet</div>
  302. <div id="tags">
  303. <a href="/tagged/">tag</a>
  304. <a href="/tagged/">tag</a>
  305. <a href="/tagged/">tag</a>
  306. <a href="/tagged/">tag</a>
  307. <a href="/tagged/">tag</a>
  308. <a href="/tagged/">tag</a>
  309. <a href="/tagged/">tag</a>
  310. <a href="/tagged/">tag</a>
  311. <a href="/tagged/">tag</a>
  312. <a href="/tagged/">tag</a>
  313. </div> <!--tags-->
  314. </div> <!--zetags-->
  315.  
  316. <div id="zetagsmarauder">
  317. <div id="title">Tag Title</div>
  318. <div id="tags">
  319. <a href="/">tag</a>
  320. <a href="/">tag</a>
  321. <a href="/">tag</a>
  322. <a href="/">tag</a>
  323. <a href="/">tag</a>
  324. <a href="/">tag</a>
  325. <a href="/">tag</a>
  326. <a href="/">tag</a>
  327. <a href="/">tag</a>
  328. </div> <!--tags-->
  329. </div> <!--zetags-->
  330.  
  331. <div id="zetagsmarauder">
  332. <div id="title">Tag Title</div>
  333. <div id="tags">
  334. <a href="/">tag</a>
  335. <a href="/">tag</a>
  336. <a href="/">tag</a>
  337. <a href="/">tag</a>
  338. <a href="/">tag</a>
  339. <a href="/">tag</a>
  340. <a href="/">tag</a>
  341. <a href="/">tag</a>
  342. <a href="/">tag</a>
  343. </div> <!--tags-->
  344. </div> <!--zetags-->
  345.  
  346. </div> <!--entries--></center>
  347. </div> <!--container-->
  348.  
  349. </div>
  350. </body>
  351. </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!