Advertisement
zoeyrph

zoeyrph Blogroll Theme #1 Version 2.0: Starry Skies

Jan 7th, 2014
227
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.64 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Blogroll Theme #1 Starry Skies by zoeysthemes.tumblr.com (zoeyrph|tumblr).
  8. Please don't steal this, or edit and repost. I'll get butthurt.
  9. Yes, you may edit this, but do not distribute. Don't be an a$$hole.
  10. Enjoy!
  11.  
  12. -->
  13.  
  14.  
  15. <title>tab title</title> <!-- Edit the title of your tab here -->
  16.  
  17. <link rel="shortcut icon" href="{Favicon}"/>
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
  20. <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
  21. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  22.  
  23.  
  24. <style type="text/css">
  25.  
  26. .header {border-bottom-color:#ffffff; width:100%;}
  27. .topbar {border-bottom:#ffffff solid 5px;}
  28. .bottombar {border-top:#ffffff solid 5px;}
  29.  
  30. /* CSS */
  31.  
  32. body {
  33. background-color:#f6f6f6;
  34. background-image:url('https://31.media.tumblr.com/28b56b3fcd5000b40802a24d4bbf4b2f/tumblr_inline_myxjp1V0mM1rgofdh.gif'); /* Replace image url with the one for your own background image */
  35. margin:0;
  36. font-family: 'Signika Negative', sans-serif;
  37. }
  38.  
  39. .image {
  40. margin-left:160px;
  41. margin-top:40px;
  42. border: 1px solid #ffffff;
  43. width:300px;
  44. height:500px;
  45. background-image:url('https://31.media.tumblr.com/1d59d437ba0cb9855e9c22a7826d5c01/tumblr_inline_mytj5y1tXf1rgofdh.gif'); /* Replace image url with the one for your own picture or GIF */
  46. }
  47.  
  48. .contain {
  49. width:640px;
  50. margin:0 auto;
  51. margin-left:600px;
  52. overflow-y:scroll;
  53. overflow-x:hidden;
  54. height:420px;
  55. padding:5px 0;
  56. }
  57.  
  58. .topbar {
  59. margin:60px auto 0 auto;
  60. margin-left:605px;
  61. width:620px;
  62. height:25px;
  63. background-color:transparent;
  64. }
  65.  
  66. .bottombar {
  67. margin:0 auto 0 auto;
  68. margin-left:605px;
  69. width:620px;
  70. height:25px;
  71. background-color:transparent;
  72. }
  73.  
  74. a { text-decoration: none;
  75. text-align:center;
  76. text-transform:uppercase;
  77. font-size:10px;
  78. color:#777777;
  79. }
  80. @-moz-document url-prefix() {
  81. .contain {
  82. width:650px!important;
  83. }
  84. .topbar,.bottombar {
  85. width:620px!important;
  86. }
  87.  
  88. }
  89.  
  90. .header {
  91. width: 500px;
  92. height:50px;
  93. background-color:transparent;
  94. margin-left:0%;
  95. margin-top: 5%;
  96. padding: 5px 0 0 0;
  97. color:#ffffff;
  98. font-size:36px;
  99. text-align:center;
  100. font-family: 'Arvo', serif;
  101. border-bottom-width:5px;
  102. border-bottom-style:solid;
  103. }
  104.  
  105. .subhead {
  106. padding:5px 0;
  107. width: 300px;
  108. margin-left: 800px;
  109. margin-top: -580px;
  110. text-align:center;
  111. font-size:8px;
  112. color:#eeeeee;
  113. letter-spacing:+2px;
  114. }
  115.  
  116. .subhead a {font-size:9px;
  117. letter-spacing:+4px;
  118. color:#fff;}
  119.  
  120.  
  121. .url {opacity:0;
  122. margin-top:-29px;
  123. position:relative;
  124. min-width:48px;
  125. background-color:#222222;
  126. text-align:center;
  127. padding:3px;
  128. }
  129.  
  130. .url a {font-size:7px;
  131. text-transform:uppercase;
  132. letter-spacing:+1px;
  133. color:#ffffff;
  134. background-color:#222222;
  135. padding:3px 0;
  136. }
  137.  
  138. .icon {
  139. float:left;
  140. width:48px;
  141. height:48px;
  142. background:#ffffff;
  143. padding:6px;
  144. margin:5px;
  145. }
  146.  
  147. .icon:hover .url {
  148. opacity:1;
  149. transition: all 0.3s ease-out;
  150. -o-transition-transition: all 0.3s ease-out;
  151. -webkit-transition: all 0.3s ease-out;
  152. -moz-transition: all 0.3s ease-out;
  153. }
  154.  
  155.  
  156. .credit {
  157. padding:10px;
  158. font-size:20px;
  159. color:#ffffff;
  160. position:fixed;
  161. bottom:10px;
  162. right:10px;
  163. }
  164.  
  165. ::selection {
  166. background-color:#ffffff;
  167. opacity: 0.6;
  168. color:#000000;
  169. }
  170.  
  171. ::-moz-selection {
  172. background-color:#ffffff;
  173. color:#000000;
  174. }
  175.  
  176. ::-webkit-scrollbar {
  177. width:5px;
  178. height:auto;
  179. background:#bcbcbc;
  180. }
  181.  
  182. ::-webkit-scrollbar-corner {
  183. background:#eeeeee;;
  184. }
  185.  
  186. ::-webkit-scrollbar-thumb:vertical {
  187. background:#ffffff;
  188. }
  189.  
  190. ::-webkit-scrollbar-thumb:horizontal {
  191. background:#ffffff;
  192. }
  193.  
  194. </style>
  195. </head>
  196.  
  197.  
  198.  
  199. <body>
  200.  
  201.  
  202. <div class="header">♔ MY BLOGROLL</div> <!-- Edit the title here -->
  203.  
  204. <div class="image"></div>
  205.  
  206. <div class="subhead">
  207. <a href="/">back</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/ask">message</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://tumblr.com/dashboard">dash</a> <!-- Edit the link names and their URLs here -->
  208. </div>
  209. <div class="topbar"></div>
  210. <div class="contain">
  211. {block:Following}
  212. {block:Followed}
  213.  
  214. <div class="icon">
  215. <a href="{FollowedURL}" target="_blank">
  216. <img src="{FollowedPortraitURL-48}"></a>
  217. <div class="url"><a href="{FollowedURL}">{FollowedName}</a></div></div>
  218.  
  219. {/block:Followed}
  220. {/block:Following}
  221.  
  222. </div>
  223. <div class="bottombar"></div>
  224.  
  225.  
  226. <div class="credit">
  227. <a href="http://zoeysthemes.tumblr.com">♔</a>
  228. </div>
  229.  
  230.  
  231. </body>
  232. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement