API tools faq
paste
Belgrravia

Blogroll #2

Belgrravia
Mar 23rd, 2017
1,275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Blogroll #2 by kalopsiathemes
  3. Please do not
  4. -remove the credit
  5. -steal parts of code
  6. -use as a base
  7.  
  8. Feel free to
  9. -edit parts of the page
  10. -ask me any questions
  11. -->
  12. <!DOCTYPE html>
  13. <head>
  14. <link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' type='text/css'>
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  19.  
  20. <style type="text/css">
  21.  
  22. ::-webkit-scrollbar {height: 2px;
  23. width: 3px;
  24. -webkit-border-radius: 1px;}
  25. ::-webkit-scrollbar-thumb {height:auto;
  26. background-color:#979797;/*scrollbar color*/
  27. }
  28. ::-webkit-scrollbar-track {
  29. background:#ffffff;}/*scrollbar back color*/
  30.  
  31. body {
  32. background-color:#f8f8f8;/*page background color*/
  33. font-family:helvetica neue,sans-serif;
  34. color:#979797; /*change text color here*/
  35. }
  36.  
  37. .user {
  38. border-bottom:2px solid #f8f8f8;/*border below each user*/
  39. margin-right:10px;
  40. }
  41. .image img {
  42. padding:4px;
  43. margin:5px;
  44. margin-bottom:3px;
  45. width:30px;
  46. border-radius:5px;
  47. -webkit-filter: grayscale(80%);
  48. -moz-filter: grayscale(80%);
  49. -ms-filter: grayscale(80%);
  50. -o-filter: grayscale(80%);
  51. }
  52.  
  53. .user:hover .image img {
  54. -webkit-filter: grayscale(0%);
  55. -moz-filter: grayscale(0%);
  56. -ms-filter: grayscale(0%);
  57. -o-filter: grayscale(0%);
  58. }
  59.  
  60. .image {
  61. display:inline-block;
  62. }
  63.  
  64. .info {
  65. display:inline-block;
  66. vertical-align:top;
  67. padding:5px;
  68. }
  69. .name {
  70. font-weight:700;
  71. font-size:11px;
  72. margin-top:5px;
  73. text-align:left;
  74. }
  75.  
  76. .usert {
  77. font-style:italic;
  78. font-size:10px;
  79. text-align:left;
  80. margin-top:5px;
  81. }
  82.  
  83. #all {
  84. margin:auto;
  85. width:443px;
  86. margin-top:120px;
  87. }
  88.  
  89. #top {
  90. width:120px;
  91. height:360px;
  92. position:fixed;
  93. margin-left:0px;
  94. padding-top:10px;
  95. margin-top:0px;
  96. background-color:#ffffff;/*sidebar background color*/
  97. }
  98.  
  99. #content {
  100. width:320px;
  101. height:370px;
  102. margin:auto;
  103. margin-left:122px;
  104. margin-top:80px;
  105. overflow:scroll;
  106. text-align:left;
  107. background-color:#ffffff;/*content background color*/
  108. }
  109.  
  110. ul {
  111. list-style: none;
  112. margin-left:-24px;
  113. }
  114. li {
  115.  
  116. float: left;
  117. }
  118.  
  119. #title {
  120. font-size:14px;
  121. letter-spacing:.5px;
  122. margin-top:5px;
  123. margin-bottom:5px;
  124. text-align:left;
  125. margin-left:45px;
  126. text-transform:lowercase;
  127. font-weight:700;
  128. font-family:helvetica neue,sans-serif;
  129. }
  130.  
  131. #nav {
  132. font-size:9px;
  133. text-align:right;
  134. line-height:180%;
  135. margin-right:2px;
  136. }
  137.  
  138. #nav a {
  139. text-decoration:underline;
  140. color:#bbbbbb;/*change the color of the nav links here*/
  141. }
  142.  
  143. #nav a:hover {
  144. text-decoration:underline;
  145. cursor:help;
  146. }
  147.  
  148. #image img {
  149. width:80px;
  150. height:100px;
  151. padding:4px;
  152. margin-left:12px;
  153. background-color:#f8f8f8;/*background color of sidebar image*/
  154. border-radius:5px;
  155. }
  156.  
  157. .info {
  158. padding:5px;
  159. margin:auto;
  160. text-align:center;
  161. font-family:arial,sans-serif;
  162. }
  163.  
  164. a:link, a:visited {
  165. text-decoration:none;
  166. color:#979797;/*link color*/
  167. }
  168.  
  169. a:hover {
  170. color:#bbbbbb; /*color when hover on link*/
  171. cursor:crosshair;
  172. }
  173.  
  174. #credit {
  175. position:fixed;
  176. bottom:5px;
  177. right:10px;
  178. padding:4px;
  179. font-size:11px;
  180. }
  181.  
  182. #credit a {
  183. color:#090909;
  184. text-decoration:none;
  185. }
  186. </style>
  187. </head>
  188. <body>
  189.  
  190. <div id="all">
  191. <div id="top">
  192. <div class="info">
  193. <div id="image"><img src="http://static.tumblr.com/wi2dwmg/p13ol4urj/pink.png"></div>
  194. <!--here is where you insert the link for your sidebar image-->
  195. <div id="title">Blogroll</div>
  196. <div id="nav">
  197. <a href="/">index</a>
  198. &#9900; <a href="/ask">ask</a><br>
  199. <a href="/archive">archive</a>
  200. </div>
  201. </div></div>
  202. <div id="content">
  203. {block:Following}
  204. <ul>
  205. {block:Followed}
  206. <div class="user">
  207. <div class="image"> <img src="{FollowedPortraitURL-48}"></div>
  208. <div class="info">
  209. <a href="{FollowedURL}"><div class="name">{FollowedName}</div></a>
  210. <div class="usert">{FollowedTitle}</div></div>
  211. </div>
  212. {/block:Followed}
  213. </ul>
  214. {/block:Following}
  215. </div>
  216. </div>
  217. <div id="credit">
  218. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
  219. </body>
  220. </html>
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!