API tools faq
paste
Advertisement
midthemes

Blogroll theme 01 by Jenny

midthemes
Jun 2nd, 2014
1,453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-------
  5.  
  6. Blogroll theme 01 by midthemes
  7.  
  8. DO NO STEAL, CLAIM AS YOUR OWN OR REMOVE THE CREDIT
  9.  
  10. -------->
  11.  
  12. <title>{title}</title>
  13. <link rel="shortcut icon" href="{Favicon}"/>
  14.  
  15. <style type="text/css">
  16.  
  17. /* HERE YOU CAN CHANGE THE COLOR OF YOUR SCROLLBAR */
  18.  
  19. ::-webkit-scrollbar-thumb:vertical {
  20. background-color: #000000;
  21. height: 20px;
  22. width: 1px;
  23. }
  24.  
  25. /* CHANGE IT HERE TOO */
  26.  
  27. ::-webkit-scrollbar-thumb:horizontal {
  28. background-color: #000000;
  29. height:10px !important;
  30. width: 1px;
  31. }
  32.  
  33. ::-webkit-scrollbar {
  34. height:7px;
  35. width:4px;
  36. background-color:#ffffff;
  37. }
  38.  
  39. /* HERE YOU CAN CHANGE THE COLOR FOR WHEN YOU HOVER OVEN THE ICONS */
  40.  
  41. #s-m-t-tooltip {
  42. max-width: 300px;
  43. background-color: #c1dfd4;
  44. font-family: calibri;
  45. font-size: 8px;
  46. text-transform: uppercase;
  47. color: #ffffff;
  48. padding: 5px;
  49. margin: 10px 0px 0px 20px;
  50. z-index: 9999999999999;
  51. }
  52.  
  53. body {
  54. font-family: calibri;
  55. font-size: 8px;
  56. background-color: #ffffff;
  57. text-transform: uppercase;
  58. }
  59.  
  60. a:link, a:active, a:visited {
  61. color: #ffffff;
  62. text-decoration: none;
  63. -webkit-transition: all 0.2s ease-in-out;
  64. -moz-transition: all 0.2s ease-in-out;
  65. -o-transition: all 0.2s ease-in-out;
  66. transition: all 0.2s ease-in-out;
  67. }
  68.  
  69. #content {
  70. position: relative;
  71. top: 120px;
  72. margin: 0 auto;
  73. width: 402px;
  74. }
  75.  
  76. /* HERE YOU CAN CHANGE THE BACKGROUND COLOR OF YOU TITLE */
  77.  
  78. #title {
  79. font-family: calibri;
  80. font-size: 10px;
  81. text-align: right;
  82. margin-top: 20px;
  83. padding: 10px;
  84. color: #ffffff;
  85. background-color: #222222;
  86. letter-spacing: 2px;
  87. }
  88.  
  89. #nav {
  90. margin: 0px 0px;
  91. width: 100px;
  92. }
  93.  
  94. /* HERE YOU CAN CHANGE THE COLOR OF THE LINKS */
  95.  
  96. #nav a {
  97. display: inline-block;
  98. padding: 6px 10px 6px 10px;
  99. width: 100px;
  100. height: 15px;
  101. margin-top: 2px;
  102. text-align: left;
  103. line-height: 15px;
  104. color: #ffffff;
  105. background-color: #c1dfd4;
  106. -webkit-transition: all 0.3s ease-in-out;
  107. -moz-transition: all 0.3s ease-in-out;
  108. -o-transition: all 0.3s ease-in-out;
  109. transition: all 0.3s ease-in-out;
  110. }
  111.  
  112.  
  113. /* HERE YOU CAN CHANGE THE COLOR FOR WHEN YOU HOVER OVER THE LINKS */
  114.  
  115. #nav a:hover {
  116. background-color: #e1f3ec;
  117. -webkit-transition: all 0.3s ease-in-out;
  118. -moz-transition: all 0.3s ease-in-out;
  119. -o-transition: all 0.3s ease-in-out;
  120. transition: all 0.3s ease-in-out;
  121. }
  122.  
  123. /* HERE YOU CAN CHANGE THE COLOR OF THE BOX BENEATH THE LINKS */
  124.  
  125. #box {
  126. margin-top: 2px;
  127. width: 120px;
  128. height: 180px;
  129. color: white;
  130. background-color: #c1dfd4;
  131. }
  132.  
  133. /* HERE YOU CAN CHANGE THE BORDER AROUND THE BLOGROLL*/
  134.  
  135. #broll {
  136. float: right;
  137. margin-top: -267px;
  138. width: 275px;
  139. height: 261px;
  140. overflow: scroll;
  141. border: 3px double #333333;
  142. }
  143.  
  144. #following {
  145. margin: 3px 3px;
  146. }
  147.  
  148. #following img {
  149. padding: 10px;
  150. width: 30px;
  151. margin: 7px 7px;
  152. background-color: #fbfbfb;
  153. -webkit-transition: all 0.2s ease-in-out;
  154. -moz-transition: all 0.2s ease-in-out;
  155. -o-transition: all 0.2s ease-in-out;
  156. transition: all 0.2s ease-in-out;
  157. }
  158.  
  159. #following img:hover {
  160. padding: 8px;
  161. width: 34px;
  162. -webkit-transition: all 0.2s ease-in-out;
  163. -moz-transition: all 0.2s ease-in-out;
  164. -o-transition: all 0.2s ease-in-out;
  165. transition: all 0.2s ease-in-out;
  166. }
  167.  
  168. </style>
  169.  
  170. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  171. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  172. <script>
  173. (function($){
  174. $(document).ready(function(){
  175. $("a[title]").style_my_tooltips({
  176. tip_follows_cursor:true,
  177. tip_delay_time:90,
  178. tip_fade_speed:600,
  179. attribute:"title"
  180. });
  181. });
  182. })(jQuery);
  183. </script>
  184.  
  185. </head>
  186. <body>
  187.  
  188. <div id="content">
  189.  
  190. <!-------
  191. Here you can change the title
  192. -------->
  193. <div id="title">blogroll</div>
  194.  
  195. <!-------
  196. YOU CAN CHANGE YOUR LINKS HERE AS LONG AS YOU DO NOT REMOVE THE CREDIT
  197.  
  198. I REPEAT, DO NOT REMOVE THE CREDIT!!
  199.  
  200. If you want to add an extra link you have to go and find #box in the css section and decrease the height
  201.  
  202. <a href="URL">name</a>
  203. ----->
  204.  
  205. <div id="nav">
  206. <a href="/">home</a>
  207. <a href="http://tumblr.com">dash</a>
  208. <a href="http://midthemes.tumblr.com/">credit</a>
  209. </div>
  210. <div id="box"></div>
  211.  
  212. <div id="broll">
  213. <div id="following">
  214. {block:Following}
  215. {block:Followed}
  216. <a href="{FollowedURL}" title="{FollowedName}" target="_blank"><img src="{FollowedPortraitURL-40}" />
  217. {/block:Followed}
  218. {/block:Following}
  219.  
  220. </div>
  221. </div>
  222.  
  223. </div>
  224.  
  225. </body>
  226. </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!