API tools faq
paste
Advertisement
mogimochi

Family Page [02] / Blogroll [04] Meikyo

mogimochi
Feb 8th, 2014
7,770
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. [ Family Page 02 / Blogroll 04 ] Meikyo
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim page as your own.
  14.  
  15. --------------------------------------------------------------------------
  16. Please look out for notes throughout the code
  17. to help you in customizing the page!!
  18. --------------------------------------------------------------------------
  19.  
  20. -->
  21.  
  22. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}" />
  25.  
  26. <style type="text/css">
  27.  
  28. ::-webkit-scrollbar { width: 2px; }
  29. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  30. /** scroll bar background **/
  31. ::-webkit-scrollbar-thumb:vertical {
  32. width: 2px;
  33. background-color: #555; /** scroll bar colour **/
  34. }
  35.  
  36. body {
  37. background-color: #fff;/** background colour**/
  38. background-image: url(https://31.media.tumblr.com/b46ceb559a4e2b70dce7d4558c28343f/tumblr_inline_n0onpo7siJ1rshr70.jpg);/**background img**/
  39. background-attachment: fixed;
  40. margin: 0;
  41. word-wrap: break-word;
  42. }
  43.  
  44. #cover {
  45. background-color: #fff;/**background colour**/
  46. background-image: url(https://31.media.tumblr.com/b46ceb559a4e2b70dce7d4558c28343f/tumblr_inline_n0onpo7siJ1rshr70.jpg);/**background img**/
  47. width: 100%;
  48. height: 120px;
  49. position: fixed;
  50. top: 0;
  51. left: 0;
  52. }
  53.  
  54. a { text-decoration:none; }
  55.  
  56.  
  57. /***************************** tool tip ********************************/
  58.  
  59. #s-m-t-tooltip {
  60. padding: 2px 5px 3px 5px;
  61. margin: 22px 14px 7px 10px;
  62. background-color: #333; /** tool tip background **/
  63. color: #bbb; /** tool tip text colour **/
  64. font-family: Calibri; /** tool tip font **/
  65. font-style: normal;
  66. font-size: 8px; /** tool tip font size **/
  67. letter-spacing: 1px;
  68. text-transform: uppercase;
  69. z-index: 999;
  70. }
  71.  
  72. #top {width: 100%;top: 0;left: 0;position: fixed;}
  73.  
  74.  
  75. /****************************** topbar *********************************/
  76.  
  77. #main {
  78. width: 500px;
  79. height: 100px;
  80. background-color: #333333; /** top bar background **/
  81. }
  82.  
  83. .userpic {
  84. border-right: 1px solid #666666; /** top bar divider **/
  85. width: 70px;
  86. height: 70px;
  87. float: left;
  88. margin: 15px;
  89. padding-right: 15px;
  90. overflow: auto;
  91. }
  92. .infotitle {
  93. color: #bbbbbb; /** title text colour **/
  94. font-family: courier new;
  95. font-size: 10px;
  96. text-transform: uppercase;
  97. letter-spacing: 1px;
  98. font-style: italic;
  99. float: left;
  100. line-height: 6px;
  101. margin-top: 24px;
  102. margin-bottom: 8px;
  103. padding-left: 10px;
  104. text-align: left;
  105. width: 340px;
  106. }
  107. .sq1, .sq2, .sq3 {
  108. width: 4px;
  109. height: 4px;
  110. float: left;
  111. margin-right: 10px;
  112. }
  113. .sq1 { border: 1px solid #f47771; } /** title square 1 **/
  114. .sq2 { border: 1px solid #f9c0b5; } /** title square 2 **/
  115. .sq3 { margin-right: 15px; border: 1px solid #fbe5db; } /** title square 3 **/
  116.  
  117. .info {
  118. color: #888888; /** info text colour **/
  119. width: 370px;
  120. height: 40px;
  121. float: left;
  122. text-align: left;
  123. font-family: calibri;
  124. font-size: 10px;
  125. overflow: auto;
  126. }
  127.  
  128. #navigate {
  129. position: fixed;
  130. top: 102px;
  131. width: 505px;
  132. }
  133. .navlink {
  134. width: 77.5px;
  135. margin-right: 2px;
  136. float: left;
  137. background-color: #f59f96; /** nav links background **/
  138. color: #fff; /** nav links text **/
  139. font-family: calibri;
  140. font-size: 8px;
  141. text-align: center;
  142. text-transform: uppercase;
  143. letter-spacing: 2px;
  144. padding: 2px 2px 4px 2px;
  145. transition: 0.6s;
  146. -moz-transition: 0.6s;
  147. -webkit-transition: 0.6s;
  148. -o-transition: 0.6s;
  149. }
  150. .navlink:hover {
  151. background-color: #333; /** nav links hover background **/
  152. color: #aaa; /** nav links hover text **/
  153. }
  154.  
  155.  
  156. /***************************** content *********************************/
  157.  
  158. #content {
  159. margin-top: 125px;
  160. width: 520px;
  161. height: 500px;
  162. }
  163. .nakama {
  164. width: 80px;
  165. height: 80px;
  166. background-color: #333; /** family member border **/
  167. background-image: url(https://31.media.tumblr.com/e8ec4aa40ea6b3d27b889c5deec02109/tumblr_inline_n0orihvRAu1rshr70.png); /** family member border image **/ /** not compulsory??? **/
  168. margin: 14px 14px 20px 14px;
  169. padding: 11px;
  170. float: left;
  171. }
  172. .nakamapic {
  173. width: 80px;
  174. height: 80px;
  175. float: left;
  176. }
  177. .nakamatitle {
  178. font-family: courier new;
  179. font-size: 10px;
  180. text-transform: uppercase;
  181. background-color: #fff;
  182. /** [family member title/followed blog url] bg **/
  183. color: #ccc; /** [family member title/followed blog url] text **/
  184. font-style: italic;
  185. width: 80px;
  186. margin: 80px 0;
  187. overflow: hidden;
  188. height: 0;
  189. padding: 0;
  190. position: absolute;
  191. transition: 0.6s;
  192. -moz-transition: 0.6s;
  193. -webkit-transition: 0.6s;
  194. -o-transition: 0.6s;
  195. }
  196. .nakama:hover .nakamatitle {
  197. height: 12px;
  198. padding: 1px 0;
  199. margin-top: 66px;
  200. }
  201.  
  202. {CustomCSS}
  203.  
  204. </style>
  205. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  206. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  207. <script>
  208. (function($){
  209. $(document).ready(function(){
  210. $("a[title]").style_my_tooltips({
  211. tip_follows_cursor:true,
  212. tip_delay_time:0,
  213. tip_fade_speed:0,
  214. attribute:"title"
  215. });
  216. });
  217. })(jQuery);
  218. </script>
  219. </head>
  220. <body>
  221.  
  222. <div id="cover"></div>
  223.  
  224. <!--------------------------- top bar html ------------------------------>
  225.  
  226. <center><div id="top"><div id="main">
  227.  
  228.  
  229. <img class="userpic" src="https://31.media.tumblr.com/838c85d564f25d485d59cc2858ccc808/tumblr_inline_n0onsx31bj1rshr70.jpg">
  230. <!-- That icon in the topbar. Replace the image link with your own! -->
  231.  
  232.  
  233. <div class="infotitle">
  234. <span class="sq1"></span><span class="sq2"></span><span class="sq3"></span>
  235. blogroll / family page <!-- please pick one!! or give it its own name.-->
  236. </div><!--infotitle-->
  237.  
  238.  
  239. <div class="info">
  240. <!-- write whatever you want here!! ------------------------------------->
  241. </div><!--info-->
  242.  
  243.  
  244. <!--------------------------- nav links html ----------------------------
  245. A normal link looks like the following:
  246. <a href="/url"><div class="navlink">link title</div></a>
  247. You should follow this format when typing in the link 01 and link 02 portions!! ( don't add more than 2 custom links, or they won't fit )
  248. ------------------------------------------------------------------------>
  249.  
  250. <div id="navigate">
  251. <a href="/"><div class="navlink">back</div></a>
  252. <a href="/ask"><div class="navlink">message</div></a>
  253. <a href="http://tumblr.com/dashboard"><div class="navlink">dashboard</div></a>
  254. <a href="/"><div class="navlink">link 01</div></a>
  255. <a href="/"><div class="navlink">link 02</div></a>
  256. <a href="http://yukoki.tumblr.com"><div class="navlink">credit</div></a>
  257. </div><!--navigate-->
  258.  
  259. </div></div></center><!--top--><!--main-->
  260.  
  261.  
  262.  
  263. <!---------------------------- content html ---------------------------->
  264.  
  265. <center><div id="content">
  266.  
  267. <!------------------------- I M P O R T A N T --------------------------
  268. Okay, so here's the bit which will determine if what you have is a blogroll or a family page --
  269.  
  270. - Blogroll: Delete lines 297 and 306
  271. - Family Page: Delete lines 284 and 291
  272.  
  273. To make a family page:
  274. 01) Follow the above instructions
  275. 02) Lines 284 to 287 make up one block, so copy the whole block (should start from <div clas="nakama"> and end with </div>) and paste it as many times as you need characters
  276. 03) Please note that the image link provided on line 286 for the family member icons is a default one, and I recommend that you change it!
  277. 04) 'title' in line 288 should be replaced with the family member's position in the family
  278. ----------------------------------------------------------------------->
  279.  
  280.  
  281.  
  282.  
  283.  
  284. <!-- delete this line if you want a family page!!
  285.  
  286. <div class="nakama">
  287. <a title="/url" href="/"><img class="nakamapic" src="https://31.media.tumblr.com/fa182522396c55f897993fa608cf2f95/tumblr_inline_n0ox2rjHwU1rshr70.jpg"></a>
  288. <div class="nakamatitle">title</div>
  289. </div>
  290.  
  291. delete this line if you want a family page!! -->
  292.  
  293.  
  294.  
  295.  
  296.  
  297. <!-- delete this line if you want a blogroll!!
  298.  
  299. {block:Following}{block:Followed}
  300. <div class="nakama">
  301. <a href="{FollowedURL}"><img class="nakamapic" src="{FollowedPortraitURL-96}"></a>
  302. <div class="nakamatitle">{FollowedName}</div>
  303. </div>
  304. {/block:Followed}{/block:Following}
  305.  
  306. delete this line if you want a blogroll!! -->
  307.  
  308.  
  309.  
  310.  
  311.  
  312. </body>
  313. </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!