Advertisement
lust_themes

Ask/Links Layout #1

Apr 28th, 2013
4,244
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.86 KB | None | 0 0
  1. <!--
  2. Theme By Fara
  3. © http://polarizers.tumblr.com
  4. Please have some form of credit on your blog. x
  5. Thank you for using one of my themes!
  6.  
  7. How to Install
  8. Go to your customize on your blog > Create a new page > Choose Custom HTML > Paste everything in the code there > Scroll through the coding and follow the instructions to change colors, backgrounds, & your FAQ.
  9. -->
  10.  
  11. <head>
  12.  
  13. <link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
  14. <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
  15. <link href='http://fonts.googleapis.com/css?family=Raleway+Dots' rel='stylesheet' type='text/css'>
  16.  
  17. <html lang="en">
  18.  
  19. <link href="http://static.tumblr.com/z0cd8ty/aJjm6uyej/meffects.css" rel="stylesheet">
  20. <script type="text/javascript"
  21. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  22. <script src="http://static.tumblr.com/kcrxiw3/LDBlqq9ia/jquerry.js"></script>
  23.  
  24.  
  25.  
  26. <title>{Title}</title>
  27.  
  28.  
  29. <style type="text/css">
  30.  
  31.  
  32. ::-webkit-scrollbar-thumb:vertical {height:9px;background-color: #e2e2e2;margin-right:8px;}
  33. ::-webkit-scrollbar {width:5px;height:5px;background:#fff;margin-right:8px;}
  34.  
  35. iframe#tumblr_controls {z-index:99999;}
  36.  
  37. a:link, a:active, a:visited{color:#000000;text-decoration: none; -webkit-transition: color 0.4s ease-out; -moz-transition: color 0.4s ease-out;}
  38.  
  39. a:hover{color:#ffffff;-webkit-transition: color 0.4s ease-out; -moz-transition: color 0.4s ease-out; text-decoration:none;}
  40.  
  41.  
  42.  
  43. body {
  44. color:{color:text};
  45. font-family:tahoma;
  46. font-size: 9px;
  47. background-color: #FFFFFF; /*THIS IS WHERE YOU CHANGE THE BACKGROUND COLOR*/
  48. background-image:url(http://static.tumblr.com/00401e68e549f286f6dd1385ca77a879/iyodnno/p7Dmfh2l0/tumblr_static_sea-fog.jpg); /*THIS IS WHERE YOU CHANGE THE BACKGROUND IMAGE*/
  49. background-attachment: fixed;
  50. background-size: 1400px;
  51. }
  52.  
  53.  
  54. #vanessa{
  55. position:fixed;
  56. font-family: "Consolas";
  57. font-size: 8px;
  58. line-height:10px;
  59. text-transform:uppercase;
  60. letter-spacing:1px;
  61. top:37px;
  62. margin-left:535px;
  63. width:268px;
  64. height:auto;
  65. padding:7px;
  66. color:#000000;
  67. text-align:right;
  68. background:white;
  69. border:3px solid #fff;
  70. box-shadow:0 0 6px #ddd;
  71. overflow:hidden;
  72. -webkit-transition: all 0.9s ease-in-out;
  73. -moz-transition: all 0.9s ease-in-out;
  74. -o-transition: all 0.9s ease-in-out;
  75. -ms-transition: all 0.9s ease-in-out;
  76. transition: all 0.9s ease-in-out;
  77. z-index:4;
  78. }
  79.  
  80. .desc{
  81. height:86px;
  82. overflow:auto;
  83. width:146px;
  84. }
  85.  
  86.  
  87. #umm{
  88. position:fixed;
  89. top:37px;
  90. margin-left:420px;
  91. height:auto;
  92. width:auto;
  93. padding:5px;
  94. background:white;
  95. border:3px solid #fff;
  96. box-shadow:0 0 6px #ddd;
  97. -webkit-transition: all 0.9s ease-in-out;
  98. -moz-transition: all 0.9s ease-in-out;
  99. -o-transition: all 0.9s ease-in-out;
  100. -ms-transition: all 0.9s ease-in-out;
  101. transition: all 0.9s ease-in-out;
  102. }
  103.  
  104. .links{
  105. display:block;
  106. width:80px;
  107. height:5px;
  108. margin:4px;
  109. right:0px;
  110. padding:4px;
  111. text-align:center;
  112. font-family: "Consolas";
  113. font-size: 8px;
  114. line-height:6px;
  115. text-transform:uppercase;
  116. letter-spacing:1px;
  117. background-color:#e2e2e2; /*THIS IS WHERE YOU CHANGE THE LINK BACKGROUND*/
  118. opacity:1;
  119. -webkit-transition: all 0.9s ease-in-out;
  120. -moz-transition: all 0.9s ease-in-out;
  121. -o-transition: all 0.9s ease-in-out;
  122. -ms-transition: all 0.9s ease-in-out;
  123. transition: all 0.9s ease-in-out;
  124. }
  125.  
  126. .links a{
  127. color:#000000;
  128. -webkit-transition: all 0.9s ease-in-out;
  129. -moz-transition: all 0.9s ease-in-out;
  130. -o-transition: all 0.9s ease-in-out;
  131. -ms-transition: all 0.9s ease-in-out;
  132. transition: all 0.9s ease-in-out;
  133. }
  134.  
  135. .links:hover{
  136. opacity:0.6;
  137. -webkit-transition: all 0.9s ease-in-out;
  138. -moz-transition: all 0.9s ease-in-out;
  139. -o-transition: all 0.9s ease-in-out;
  140. -ms-transition: all 0.9s ease-in-out;
  141. transition: all 0.9s ease-in-out;
  142. }
  143.  
  144. .links a:hover{
  145. color:#db8eac;
  146. -webkit-transition: all 0.9s ease-in-out;
  147. -moz-transition: all 0.9s ease-in-out;
  148. -o-transition: all 0.9s ease-in-out;
  149. -ms-transition: all 0.9s ease-in-out;
  150. transition: all 0.9s ease-in-out;
  151. }
  152.  
  153. #tssf{
  154. position:fixed;
  155. top:180px;
  156. margin-left:420px;
  157. height:auto;
  158. width:auto;
  159. padding:7px;
  160. padding-top:0px;
  161. text-align:center;
  162. font-family: "Consolas";
  163. font-size: 8px;
  164. line-height:6px;
  165. text-transform:uppercase;
  166. letter-spacing:1px;
  167. background-color:#ffffff;
  168. border:3px solid #fff;
  169. box-shadow:0 0 6px #ddd;
  170. -webkit-transition: all 0.9s ease-in-out;
  171. -moz-transition: all 0.9s ease-in-out;
  172. -o-transition: all 0.9s ease-in-out;
  173. -ms-transition: all 0.9s ease-in-out;
  174. transition: all 0.9s ease-in-out;
  175. }
  176.  
  177. #out,#swag{
  178. height:auto;
  179. width:auto;
  180. padding:2px;
  181. margin-left:-10px;
  182. margin-top:8px;
  183. cursor:help;
  184. }
  185.  
  186. #out {
  187. background-color:transparent;
  188. margin-top:1px;
  189. margin-left:-10px;
  190. margin-bottom:1px;
  191. height:auto;
  192. font-family: "Consolas";
  193. font-size: 8px;
  194. line-height:10px;
  195. text-transform:uppercase;
  196. letter-spacing:1px;
  197. text-decoration:none;
  198. display:none;
  199. }
  200.  
  201. @font-face { font-family: "sunshine"; src: url('http://static.tumblr.com/5fd89aw/U3vli7rvs/sunshine_in_my_soul.ttf'); }
  202. @font-face{font-family:Ashley Marie;src:url(http://static.tumblr.com/9wzbixa/qKtmj2fnf/ashleymarie.ttf);}
  203. @font-face { font-family: "signerica"; src: url('http://static.tumblr.com/uuzw7gl/PQ0mfd1ip/signerica_fat.ttf'); }
  204. @font-face { font-family: "geometric"; src: url('http://static.tumblr.com/uuzw7gl/Unomfcz67/geo231l.ttf'); }
  205.  
  206.  
  207.  
  208. #titulo{
  209. font-family:courier new;
  210. text-transform:uppercase;
  211. font-size: 14px;
  212. line-height:22px;
  213. letter-spacing:0px;
  214. text-align:right;
  215. padding-bottom:2px;
  216. border-bottom:1px solid #e2e2e2; /*THIS IS WHERE YOU CHANGE THE TITLE UNDERLINE*/
  217. color:#6a8db4; /*THIS IS WHERE YOU CHANGE THE TITLE COLOR*/
  218. -webkit-transition: all 0.5s linear;
  219. -webkit-transition: all 0.5s linear;
  220. -moz-transition: all 0.5s linear;
  221. transition: all 0.5s linear;
  222. }
  223.  
  224.  
  225.  
  226.  
  227. #infscr-loading{
  228. bottom: -70px;
  229. position: absolute;
  230. left: 50%;
  231. margin-left:-8px;
  232. width:16px;
  233. height:11px;
  234. overflow:hidden;
  235. margin-bottom: 50px;
  236. }
  237. </style>
  238. {block:IndexPage}
  239. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  240.  
  241. <script type="text/javascript">
  242. $(window).load(function () {
  243. var $content = $('#posts');
  244. $content.masonry({itemSelector: '.entry'}),
  245. $content.infinitescroll({
  246. navSelector : 'div#pagination',
  247. nextSelector : 'div#pagination a#nextPage',
  248. itemSelector : '.entry',
  249. loading: {
  250. finishedMsg: '',
  251. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  252. },
  253. bufferPx : 600,
  254. debug : false,
  255. },
  256. // call masonry as a callback.
  257. function( newElements ) {
  258. var $newElems = $( newElements );
  259. $newElems.hide();
  260. // ensure that images load before adding to masonry layout
  261. $newElems.imagesLoaded(function(){
  262. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  263. });
  264. });
  265. });
  266. </script>
  267. {/block:IndexPage}
  268. </div>
  269.  
  270. <script src="jquery.js"></script>
  271. <script>
  272. $(document).ready(function(){
  273. $("#swag").click(function(){
  274. $("#out").slideToggle("slow");
  275. });
  276. });
  277. </script>
  278.  
  279. <title>{title}</title>
  280.  
  281. <link rel="shortcut icon" href="{Favicon}">
  282. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  283. <meta name="viewport" content="width=820" />
  284. </head>
  285.  
  286. <body>
  287.  
  288.  
  289.  
  290.  
  291. <div id="vanessa">
  292. <div id="titulo">About the blogger</div>
  293.  
  294. <!--this is where you put your icon (make sure it's square!!!)-->
  295. <a href="/"><img src="http://media.tumblr.com/642632cc3bc1950e445ceaa35ea48d22/tumblr_inline_mlx31aJs941qz4rgp.png" align="left" style="margin-left:-2px;margin-top:-24px;width:118px;height:118px;"></a></p></center>
  296.  
  297. <!--this is where you put your description about yourself-->
  298. <div class="desc">put your about me and shit like that here</div>
  299.  
  300. </div>
  301.  
  302. <!--change your links below!! keep credit though ok-->
  303.  
  304. <div id="umm">
  305. <a href="/" class="links">back to home</a>
  306. <a href="http://tumblr.com"class="links">dashboard</a>
  307. <a href="/linkone"class="links">extra link 1</a>
  308. <a href="/linktwo"class="links">extra link 2</a>
  309. <a href="/linkthree"class="links">extra link 3</a>
  310. <a href="/linkfour"class="links">extra link 4</a>
  311. <a href="http://polarizers.tumblr.com"class="links">credit</a>
  312. </div>
  313.  
  314. <div id="tssf">
  315. <div id="swag">click for faq</div>
  316.  
  317. <!--put your faq there vv-->
  318.  
  319. <div id="out"><p>yeah haha frequently asked questions swag<p>this is where your faq goes btw
  320. </p></div><br>
  321.  
  322. <iframe frameborder="0" scrolling="no" width="384" height="190" src="http://www.tumblr.com/ask_form/YOUR URL GOES HERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  323. </center>
  324.  
  325. </div>
  326.  
  327.  
  328. {block:IndexPage}
  329. {block:Pagination}
  330. <div id="pagination">
  331. {block:NextPage}
  332. <a id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>
  333. {/block:NextPage}
  334. {block:PreviousPage}
  335. <a href="{PreviousPage}">&larr;&nbsp;</a>
  336. {/block:PreviousPage}
  337. </div>
  338. {/block:Pagination}
  339. {/block:IndexPage}
  340. </div>
  341. </body>
  342. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement