API tools faq
paste
Advertisement
Guest User

network page; by primrosetylers

a guest
Sep 13th, 2014
3,688
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <head>
  4.  
  5. <!--
  6. network page
  7. coded by irma at primrosetylers.tumblr.com
  8. don't steal any code or remove the credit
  9.  
  10. to change colors -
  11. ctrl + f (or command + f if on a mac) for "change" and look for notes in the coding
  12. -->
  13.  
  14. <title>{Title}</title>
  15. <link href="{Favicon}" rel="shortcut icon">
  16.  
  17. <!-- tooltip script -->
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  19. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  20. <script>
  21. (function($){
  22. $(document).ready(function(){
  23. $("a[title]").style_my_tooltips({
  24. tip_follows_cursor:true,
  25. tip_delay_time:30,
  26. tip_fade_speed:300,
  27. attribute:"title"
  28. });
  29. });
  30. })(jQuery);
  31. </script>
  32.  
  33. <style type="text/css">
  34.  
  35. /*tooltip css*/
  36. #s-m-t-tooltip {
  37. max-width:300px;
  38. position:absolute;
  39. z-index:99999;
  40. margin-top:20px;
  41. text-transform:uppercase;
  42. padding:2px 4px 2px 4px;
  43. background-color:#fff; /* CHANGE - tooltip bg color */
  44. font-family:arial;
  45. font-size:11px;
  46. color:#000; /* CHANGE - tooltip text color */
  47. }
  48.  
  49. ::-webkit-scrollbar {
  50. width:6px;
  51. height:6px;
  52. }
  53.  
  54. ::-webkit-scrollbar-track {
  55. background-color:transparent;
  56. }
  57.  
  58. ::-webkit-scrollbar-thumb {
  59. background-color:#BD7AFF; /* CHANGE - scrollbar color */
  60. }
  61.  
  62. ::selection {
  63. background-color:#BD7AFF;
  64. }
  65.  
  66. ::-moz-selection {
  67. background-color:#BD7AFF;
  68. }
  69.  
  70. body {
  71. font-family:arial; /* CHANGE - font */
  72. font-size:12px;
  73. }
  74.  
  75. a {
  76. color:#fff; /* CHANGE - link */
  77. text-decoration:none;
  78. -webkit-transition:0.6s;
  79. -moz-transtion:0.6s;
  80. -ms-transition:0.6s;
  81. -o-transition:0.6s;
  82. transition:0.6s;
  83. }
  84.  
  85. #header {
  86. height:150px;
  87. background-color:#000; /* CHANGE - header background */
  88. color:#fff; /* CHANGE - header text */
  89. text-align:center;
  90. width:100%;
  91. position:fixed;
  92. z-index:10;
  93. top:0;
  94. left:0;
  95. }
  96.  
  97. #title {
  98. font-size:30px;
  99. font-weight:bold;
  100. letter-spacing:-2px;
  101. }
  102.  
  103. #title a {
  104. color:#BD7AFF; /* CHANGE - title link color (in other words, the purple [ bracket ] colors */
  105. }
  106.  
  107. #netdescrip {
  108. position: relative;
  109. top: 50%;
  110. transform: translateY(-50%);
  111. }
  112.  
  113. #main {
  114. margin-top:170px;
  115. text-align:center;
  116. width:80%;
  117. margin-left:auto;
  118. margin-right:auto;
  119. }
  120.  
  121. .member {
  122. width:250px;
  123. display:inline-block;
  124. margin:20px;
  125. }
  126.  
  127. .member img {
  128. width:250px;
  129. height:150px;
  130. margin-top:35px;
  131. }
  132.  
  133. .block {
  134. height:32px;
  135. z-index:5;
  136. position:absolute;
  137. width:250px;
  138. overflow:hidden;
  139. background-color:#BD7AFF; /* CHANGE - background color of name (the purplish color) */
  140. color:#fff; /* CHANGE - text color of description */
  141. -webkit-transition:0.6s;
  142. -moz-transition:0.6s;
  143. -ms-transition:0.6s;
  144. -o-transition:0.6s;
  145. transition:0.6s;
  146. }
  147.  
  148. .member:hover .block {
  149. background-color:#000; /* CHANGE - background color of description and name on hover */
  150. height:185px;
  151. }
  152.  
  153. .name {
  154. color:#fff; /* CHANGE - text color of name */
  155. padding-top:5px;
  156. padding-bottom:5px;
  157. font-size:20px;
  158. font-weight:bold;
  159. letter-spacing:-1px;
  160. -webkit-transition:0.6s;
  161. -moz-transition:0.6s;
  162. -ms-transition:0.6s;
  163. -o-transition:0.6s;
  164. transition:0.6s;
  165. }
  166.  
  167. .name:hover {
  168. color:#BD7AFF; /* CHANGE - text color of name on hover */
  169. }
  170.  
  171. .description {
  172. height:140px;
  173. padding-left:5px;
  174. padding-right:5px;
  175. overflow-y:auto;
  176. }
  177.  
  178. /* CREDIT - DON'T TOUCH */
  179.  
  180. #credit {
  181. right:10px;
  182. bottom:15px;
  183. font-size:11px;
  184. padding:2px 5px 2px 5px;
  185. text-transform:uppercase;
  186. text-align:center;
  187. background-color:#000;
  188. position:fixed;
  189. font-family:arial;
  190. }
  191.  
  192. #credit a {
  193. color:#fff;
  194. }
  195.  
  196. #credit a:hover {
  197. text-shadow:0 0 2px #fff;
  198. color:#000;
  199. }
  200.  
  201. </style>
  202.  
  203. </head>
  204.  
  205. <body>
  206.  
  207. <div id="header">
  208.  
  209. <div id="netdescrip">
  210. <div id="title">
  211. <a title="back" href="/">[</a>
  212. network title
  213. <a title="dash" href="http://tumblr.com">]</a>
  214. </div>
  215. network description. try and keep it brief. keep the network title brief too.
  216. </div>
  217.  
  218. </div> <!-- header -->
  219.  
  220. <div id="main">
  221.  
  222. <div class="member">
  223. <div class="block">
  224. <!-- CHANGE the url --><a title="url" href="http://url">
  225. <!-- CHANGE the name --><div class="name">kitty</div></a>
  226. <div class="description">
  227. <!-- CHANGE the description -->
  228. <b>bold.</b> <i>italic.</i> <u>underline.</u> <s>strikethrough.</s> <br />
  229. this is where your description goes. in my opinion, it looks best if it's short, but i suppose you can do what you want.
  230. </div>
  231. </div>
  232. <!-- CHANGE the url below to change the image -->
  233. <img src="http://33.media.tumblr.com/726c871f855e588b87385068420ffc5f/tumblr_n3le578ujr1rlo9uqo1_250.gif"/>
  234. </div> <!-- member -->
  235.  
  236. <div class="member">
  237. <div class="block">
  238. <!-- CHANGE the url --><a title="url" href="http://url">
  239. <!-- CHANGE the name --><div class="name">kitty</div></a>
  240. <div class="description">
  241. <!-- CHANGE the description -->
  242. this is where your description goes. make sure it doesn't get too long.
  243. </div>
  244. </div>
  245. <!-- CHANGE the url below to change the image -->
  246. <img src="http://38.media.tumblr.com/37346eb82f1ac1c08574f1f4495ecf68/tumblr_n3ltshLVbC1rlo9uqo3_250.gif"/>
  247. </div> <!-- member -->
  248.  
  249. <div class="member">
  250. <div class="block">
  251. <!-- CHANGE the url --> <a title="url" href="http://url">
  252. <!-- CHANGE the name --> <div class="name">kitty</div></a>
  253. <div class="description">
  254. <!-- CHANGE the description --->
  255. this is where your description goes. make sure it doesn't get too long.
  256. </div>
  257. </div>
  258. <!-- CHANGE the url below to change the image -->
  259. <img src="http://38.media.tumblr.com/80199f7b0c39190b6fccce327ca2b028/tumblr_n3e1e2MXSZ1rgr4l6o2_250.gif"/>
  260. </div> <!-- member -->
  261.  
  262. <div class="member">
  263. <div class="block">
  264. <!-- CHANGE the url --><a title="url" href="http://url">
  265. <!-- CHANGE the name --><div class="name">kitty</div></a>
  266. <div class="description">
  267. <!-- CHANGE the description -->
  268. this is where your description goes. make sure it doesn't get too long.
  269. </div>
  270. </div>
  271. <!-- CHANGE the url below to change the image -->
  272. <img src="http://33.media.tumblr.com/e86df3685fe95a1a82fc5dbb11aac8cc/tumblr_n34od122Ui1rs9v2ho6_250.gif"/>
  273. </div> <!-- member -->
  274.  
  275. <div class="member">
  276. <div class="block">
  277. <!-- CHANGE the url --><a title="url" href="http://url">
  278. <!-- CHANGE the name --><div class="name">kitty</div></a>
  279. <div class="description">
  280. <!-- CHANGE the description -->
  281. this is where your description goes. make sure it doesn't get too long.
  282. </div>
  283. </div>
  284. <!-- CHANGE the url below to change the image -->
  285. <img src="http://38.media.tumblr.com/26289cacf20e166ec3d5c16c73a7a706/tumblr_n19q0mw3w91rlo9uqo2_r2_250.gif"/>
  286. </div> <!-- member -->
  287.  
  288. <div class="member">
  289. <div class="block">
  290. <!-- CHANGE the url --><a title="url" href="http://url">
  291. <!-- CHANGE the name --><div class="name">kitty</div></a>
  292. <div class="description">
  293. <!-- CHANGE the description -->
  294. this is where your description goes. make sure it doesn't get too long.
  295. </div>
  296. </div>
  297. <!-- CHANGE the url below to change the image -->
  298. <img src="http://31.media.tumblr.com/9c7e3f8b699d504f1c6a9fb53a463348/tumblr_mzn7yhARy31rlo9uqo2_250.gif"/>
  299. </div> <!-- member -->
  300.  
  301. <div class="member">
  302. <div class="block">
  303. <!-- CHANGE the url --><a title="url" href="http://url">
  304. <!-- CHANGE the name --><div class="name">kitty</div></a>
  305. <div class="description">
  306. <!-- CHANGE the description -->
  307. this is where your description goes. make sure it doesn't get too long.
  308. </div>
  309. </div>
  310. <!-- CHANGE the url below to change the image -->
  311. <img src="http://33.media.tumblr.com/1d92f64384f3d5697e816c955ff52a43/tumblr_mwjihgqfTW1rlo9uqo5_r1_250.gif"/>
  312. </div> <!-- member -->
  313.  
  314. <div class="member">
  315. <div class="block">
  316. <!-- CHANGE the url --><a title="url" href="http://url">
  317. <!-- CHANGE the name --><div class="name">kitty</div></a>
  318. <div class="description">
  319. <!-- CHANGE the description -->
  320. this is where your description goes. make sure it doesn't get too long.
  321. </div>
  322. </div>
  323. <!-- CHANGE the url below to change the image -->
  324. <img src="http://38.media.tumblr.com/c8e08e9b84a57696afca3c97ee3a4153/tumblr_mw1asexzpQ1qeqgdvo5_r1_250.gif"/>
  325. </div> <!-- member -->
  326.  
  327. </div> <!-- main -->
  328.  
  329. <!-- PLEASE DON'T TOUCH THE CREDIT -->
  330. <div id="credit"><a href="http://primrosetylers.tumblr.com">✿THEME</a></div>
  331.  
  332. </body>
  333.  
  334. </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!