API tools faq
paste
Advertisement
cornetespoir

Family/Network page 01

cornetespoir
May 13th, 2016
901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.98 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. // Network/Family/Id page 01
  3.  
  4. by espoirthemes//
  5.  
  6. +please do not move the credit.
  7.  
  8. +There's detailed instructions throughout this code to help you fill in the information and customize the page!
  9.  
  10. +for parts of this code you'll need some knowledge of CSS or HTML, so please be aware of this. If you run into major problems and the layout gets messed up, you might need to re-install this code.
  11.  
  12.  
  13.  
  14. Icons from Font Awesome
  15. -->
  16.  
  17. <html>
  18. <head>
  19.  
  20.  
  21. <!-- here's our title -->
  22. <title>{title}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.  
  26. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  27.  
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29.  
  30. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31.  
  32. <script>
  33.  
  34. (function($){
  35.  
  36. $(document).ready(function(){
  37.  
  38. $("a[title]").style_my_tooltips({
  39.  
  40. tip_follows_cursor:true,
  41.  
  42. tip_delay_time:90,
  43.  
  44. tip_fade_speed:600,
  45.  
  46. attribute:"title"
  47.  
  48. });
  49.  
  50. });
  51.  
  52. })(jQuery);
  53.  
  54. </script>
  55. <style type="text/css">
  56.  
  57.  
  58. #s-m-t-tooltip{
  59. max-width:300px;
  60. margin-top:-50px;
  61. margin-left:-20px;
  62.  
  63. border:2px solid white;
  64. box-shadow: 0px 0px 0px 2px #222222;
  65. font-family:verdana;
  66. padding:5px 5px;
  67. background:#222222; /*if you're changing the color in the code, make sure this is the same as the s-m-t:after */
  68. color:white;
  69. z-index:99999999;
  70. font-size:12px;
  71. text-transform:uppercase;
  72. }
  73.  
  74.  
  75. /* don't touch this, this is the what makes it look like a speech bubble */
  76. #s-m-t-tooltip:after{
  77.  
  78. content: '';
  79. position: absolute;
  80. border-style: solid;
  81. border-width: 8px 10px 0;
  82. border-color: #222222 transparent;
  83. display: block;
  84. width: 0;
  85. z-index: 1;
  86. bottom: -10px;
  87. left: 10%;}
  88.  
  89.  
  90. ::-webkit-scrollbar {
  91. width: 10px;
  92. height:10px;
  93.  
  94. }
  95. ::-webkit-scrollbar-button {
  96. width: 0px;
  97. height: 0px;
  98. }
  99. ::-webkit-scrollbar-thumb {
  100. background: #2b2b2b;
  101.  
  102. border-radius: 2px;
  103. }
  104. ::-webkit-scrollbar-track {
  105. background:#2b2b2b;
  106. border: 4px solid #eee;
  107.  
  108.  
  109. }
  110.  
  111.  
  112.  
  113. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop
  114. {display:none;} /*if you want the regular tumblr follow/return to dashboard buttons, erase display:none; */
  115.  
  116. a {
  117. color:white; /*color of links */
  118. text-shadow: 2px 2px rgba(0,0,0,.22); /*the shadow makes it easier to see the links no matter what color the links are */
  119. text-decoration:none; /*prevents underline from showing under links */
  120.  
  121. }
  122. body{
  123. margin:0;
  124. word-wrap:break-word;
  125. overflow-x:hidden;
  126. font-family:arial;
  127.  
  128. }
  129. i{
  130. font-size:30px; /*this is the size of the icons */
  131.  
  132. }
  133.  
  134. header{
  135. width:100%;
  136. font-family:sans-serif;
  137.  
  138. }
  139.  
  140. footer {
  141. background:#2b2b2b;
  142. padding:10px;
  143. width:100%;
  144. height:20px;
  145. position:fixed;
  146. bottom:0px;
  147. }
  148.  
  149. /*this is the bar at the top of the screen with all the links */
  150. .headerbar{
  151. width:100%;
  152. border-top:2px solid black;
  153. border-bottom:2px solid black;
  154. padding:20px; box-shadow:0px 0px 0px 2px white;
  155. font-size:18px;
  156. z-index:22;
  157. background:#2B2B2B; /*background of the link bar*/
  158. }
  159. .headerbar a {
  160. color:white;
  161. text-decoration:none;
  162. letter-spacing:2px;
  163.  
  164. }
  165. /*if you want an image above the links, this is the styling for it */
  166. header img{
  167. max-height:90vh;
  168. min-height:0px;
  169. width:100%;
  170. border-bottom:2px solid white;
  171. background:#eee;
  172.  
  173. }
  174.  
  175.  
  176. .link{
  177. text-align:right;
  178. float:right;
  179. font-size:22px;
  180. padding-right:40px;
  181.  
  182. }
  183.  
  184. #container{
  185. position:relative;
  186. margin:40px auto;
  187. width:80%; /*adjusting this adjusts how many columns appear. the bigger the number, the more columns */
  188.  
  189. }
  190. .entry{
  191. width:200px; /*you can change this to whatever width you want */
  192. height:200px; /*keeps the entries in a square shape */
  193. border:4px solid #eee;
  194. padding:2px;
  195.  
  196. }
  197. .entry img{
  198.  
  199. width:200px; /*looks best if this is the same width as the entry */
  200. height:200px;
  201. }
  202.  
  203. #container li {display:inline-block; list-style:none; margin:10px;
  204.  
  205. }
  206.  
  207. /*messing with the rest of the css may mess up how the usernames appear so please be careful if you must edit this */
  208.  
  209. .icon {
  210. visibility:hidden; /*this prevents the icons from being seen until you hover */
  211. position:absolute;
  212. padding:10px;
  213. margin-top:-40px;
  214. font-size:24px;
  215. transition:.6s;
  216.  
  217. }
  218. .entry:hover .icon{
  219. visibility:visible;
  220. transition:.6s;
  221.  
  222. }
  223.  
  224.  
  225. .name {
  226. width:0px;
  227. opacity:0;
  228. height:20px;
  229. overflow:hidden;
  230. float:right;
  231. padding-left:10px;
  232. font-size:20px;
  233. transition:.8s;
  234. text-align:left;
  235.  
  236. }
  237.  
  238.  
  239. .icon:hover .name{
  240. width:100px;
  241. opacity:1;
  242. transition:.8s;
  243. }
  244.  
  245. #egg { opacity:.8; left:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  246.  
  247. border:1px solid #222222; z-index:4;
  248.  
  249. }
  250. #egg:hover { animation-name: egg;
  251. animation-duration: 1s;
  252. animation-iteration-count: infinite;}
  253. @keyframes egg{
  254. 0%{}
  255. 10%{transform:rotate(20deg)}
  256. 80%{transform:rotate(-20deg)}
  257. 100%{}
  258. }
  259.  
  260.  
  261. </style>
  262. </head>
  263.  
  264. <body>
  265. <header>
  266. <!-- if you want a header image, copy this:
  267.  
  268. <center><img src=""></center>
  269.  
  270. and then put in the image url between "" -->
  271.  
  272. <div class="headerbar">
  273.  
  274. <!-- this is your link to return to your home page -->
  275. <a href="/" title="return">back</a>
  276.  
  277. <div class="link">
  278.  
  279. <a href="/ask" title="contact"><i class="fa fa-envelope-o"></i>
  280.  
  281. </a> <a href="http://tumblr.com/follow/{name}" title="follow" > <i class="fa fa-plus"></i></a> </div></div></header>
  282. <center>
  283. <div id="container">
  284.  
  285. <!-- if you want to add more users, copy and paste everything bettween the first entry and end of first entry labels and fill in the information
  286.  
  287. to delete users, erase everything between the entry and end of entry labels
  288.  
  289.  
  290. <!-- first entry -->
  291. <li>
  292. <div class="entry">
  293.  
  294. <!-- add in your img url. the image will automatically resize to whatever deminsions you put for entry img-->
  295. <img src="">
  296.  
  297. <div class="icon">
  298.  
  299. <!-- this is the user icon that appears bfore the name. if you don't want the user icon, look at the icons from Font Awesome and replace the "fa fa-user" with the icon of your choice -->
  300. <i class="fa fa-user"></i>
  301.  
  302. <div class="name">
  303.  
  304. <!-- replace the // with the url of the member's blog if you're using this as a network page, otherwise just leave it blank
  305.  
  306. If you want a description to appear on hover, put that in between title=""
  307. -->
  308.  
  309.  
  310. <a href="//" title="description about id/user here">
  311. <!--replace with member's url, ID, comfort character, bias, or whatever else you want-->
  312. username
  313.  
  314.  
  315. </a></div></div>
  316.  
  317. </div></li>
  318.  
  319. <!-- end of 1st entry -->
  320.  
  321.  
  322. <!--2nd entry -->
  323. <li><div class="entry"><img src="">
  324.  
  325. <div class="icon">
  326.  
  327. <i class="fa fa-user"></i>
  328.  
  329. <div class="name">
  330.  
  331. <a href="//" title="description">username
  332.  
  333. </a>
  334. </div></div>
  335.  
  336.  
  337. </div></li>
  338.  
  339.  
  340. <!-- end of 2nd entry -->
  341.  
  342. <!-- third entry -->
  343. <li><div class="entry">
  344. <img src="">
  345.  
  346. <div class="icon">
  347. <i class="fa fa-user"></i>
  348.  
  349. <div class="name">
  350.  
  351. <a href="//">username</a>
  352.  
  353.  
  354. </div></div>
  355. </div></li>
  356.  
  357. <!-- end of 3rd entry -->
  358. <!-- 4th entry -->
  359. <li><div class="entry">
  360.  
  361. <img src="">
  362.  
  363. <div class="icon">
  364. <i class="fa fa-user"></i>
  365.  
  366. <div class="name">
  367.  
  368. <a href="//">username</a>
  369.  
  370.  
  371. </div></div>
  372. </div></li>
  373. <!-- end of 4th entry -->
  374.  
  375.  
  376. <!-- 5th entry -->
  377. <li><div class="entry">
  378.  
  379. <img src="">
  380.  
  381. <div class="icon">
  382.  
  383. <i class="fa fa-user"></i>
  384.  
  385. <div class="name">
  386.  
  387. <a href="//">username</a>
  388.  
  389. </div></div>
  390. </div></li>
  391. <!-- end of 5th entry -->
  392.  
  393. <!-- 6th entry -->
  394. <li><div class="entry">
  395.  
  396. <img src="">
  397.  
  398. <div class="icon">
  399.  
  400. <i class="fa fa-user"></i>
  401.  
  402. <div class="name">
  403.  
  404. <a href="//" >username</a>
  405.  
  406. </div></div>
  407. </div></li>
  408. <!-- end of 6th entry -->
  409.  
  410. <!-- 7th entry -->
  411. <li><div class="entry">
  412.  
  413. <img src="">
  414.  
  415. <div class="icon">
  416.  
  417. <i class="fa fa-user"></i>
  418.  
  419. <div class="name">
  420.  
  421. <a href="//">username</a>
  422.  
  423. </div></div>
  424. </div></li>
  425.  
  426. <!-- end of 7th entry -->
  427.  
  428. <!-- 8th entry -->
  429. <li><div class="entry">
  430.  
  431. <img src="">
  432.  
  433. <div class="icon">
  434.  
  435. <i class="fa fa-user"></i>
  436.  
  437. <div class="name">
  438.  
  439. <a href="//">username</a>
  440.  
  441. </div></div>
  442. </div></li>
  443.  
  444. <!-- end of 8th entry -->
  445.  
  446. </center>
  447. </div>
  448.  
  449. <!-- Please respect the time and efort I put into this page by not removing or touching this-->
  450. <footer><a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a> </footer>
  451.  
  452. </body>
  453.  
  454. </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!