API tools faq
paste
Advertisement
Guest User

all in one page 03; by primrosetylers

a guest
Oct 25th, 2014
490
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3.  
  4. <!--
  5.  
  6. all in one page 03;
  7. coded by irma at primrosetylers.tumblr.com
  8. don't steal, remove the credit, or use as a base
  9.  
  10. thank you for using my theme! :3
  11.  
  12. to change colors, ctrl + f (or command + f if you're on a mac) for " change the color "
  13. there are lots of notes in the coding that will hopefully help you out
  14.  
  15. -->
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
  21.  
  22. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  23.  
  24. <script>
  25. $(function() {
  26. $('a[href*=#]:not([href=#])').click(function() {
  27. if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
  28.  
  29. var target = $(this.hash);
  30. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  31. if (target.length) {
  32. $('html,body').animate({
  33. scrollTop: target.offset().top
  34. }, 1000);
  35. return false;
  36. }
  37. }
  38. });
  39. });
  40. </script>
  41.  
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  43. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  44. <script>
  45. (function($){
  46. $(document).ready(function(){
  47. $("a[title]").style_my_tooltips({
  48. tip_follows_cursor:true,
  49. tip_delay_time:30,
  50. tip_fade_speed:300,
  51. attribute:"title"
  52. });
  53. });
  54. })(jQuery);
  55. </script>
  56.  
  57. <style type="text/css">
  58.  
  59. #s-m-t-tooltip {
  60. max-width:300px;
  61. position:absolute;
  62. z-index:99999;
  63. margin-top:20px;
  64. text-transform:uppercase;
  65. padding:4px;
  66. background-color:#000; /* CHANGE THE BACKGROUND COLOR OF THE TOOLTIP */
  67. font-family:'Lato', calibri;
  68. font-weight:300;
  69. font-size:11px;
  70. color:#fff; /* CHANGE THE TEXT COLOR OF THE TOOLTIP */
  71. }
  72.  
  73. ::-webkit-scrollbar {
  74. width: 8px;
  75. }
  76.  
  77. ::-webkit-scrollbar-thumb {
  78. background-color:#FF9C7A; /* CHANGE THE COLOR OF THE SCROLLBAR */
  79. }
  80.  
  81. ::selection {
  82. background-color:#FF9C7A;
  83. color:#fff;
  84. }
  85.  
  86. ::-moz-selection {
  87. background-color:#FF9C7A;
  88. color:#fff;
  89. }
  90.  
  91. body {
  92. font-family:'Lato', calibri;
  93. color:#000;
  94. overflow-x:hidden;
  95. font-weight:300;
  96. background-color:#fff; /* CHANGE THE BODY BACKGROUND COLOR */
  97. font-size:14px;
  98. }
  99.  
  100. a {
  101. color:#FF9C7A;
  102. text-decoration:none;
  103. -webkit-transition:0.5s;
  104. -moz-transition:0.5s;
  105. -ms-transition:0.5s;
  106. -o-transition:0.5s;
  107. transition:0.5s;
  108. }
  109.  
  110. #links {
  111. position:fixed;
  112. right:8vw;
  113. padding:60px 20px 20px 45px;
  114. background-color:#FFF6DB; /* CHANGE THE BACKGROUND COLOR OF THE LINK SIDEBAR */
  115. text-align:right;
  116. top:0;
  117. z-index:5;
  118. font-size:15px;
  119. }
  120.  
  121. #links a {
  122. display:block;
  123. text-transform:uppercase;
  124. border-bottom:1px dotted transparent;
  125. color:#000; /* CHANGE THE COLOR OF THE TEXT IN THE LINK SIDEBAR */
  126. }
  127.  
  128. #links a:hover {
  129. border-bottom:1px dotted #000; /* CHANGE THE COLOR OF THE TEXT UNDERLINE IN THE LINK SIDEBAR */
  130. cursor:help;
  131. }
  132.  
  133. .content {
  134. padding-top:15vh;
  135. padding-bottom:15vh;
  136. margin-left:auto;
  137. margin-right:auto;
  138. width:50vw;
  139. }
  140.  
  141. .content h1 {
  142. font-weight:300;
  143. font-size:35px;
  144. text-transform:uppercase;
  145. color:#FF6363; /* CHANGE THE COLOR OF THE SECTION TITLES (E.G., ABOUT ME, CONTACT) */
  146. }
  147.  
  148. #sectwo h2 {
  149. font-size:16px;
  150. letter-spacing:2px;
  151. text-transform:uppercase;
  152. font-weight:300;
  153. font-style:italic;
  154. color:#FF9C7A; /* CHANGE THE COLOR OF THE FAQ QUESTIONS */
  155. }
  156.  
  157. #sectwo p {
  158. line-height:100%;
  159. }
  160.  
  161. #secthree a {
  162. display:inline-block;
  163. color:#fff; /* CHANGE THE TEXT COLOR OF THE LINKS IN THE LINKS SECTION */
  164. background-color:#FF9C7A; /* CHANGE THE BACKGROUND COLOR OF THE LINKS IN THE LINKS SECTION */
  165. border:1px solid #FF9C7A; /* CHANGE THE COLOR OF THE BORDER OF THE LINKS IN THE LINKS SECTION */
  166. padding:2px 6px 2px 6px;
  167. margin:5px;
  168. text-transform:uppercase;
  169. font-size:16px;
  170. }
  171.  
  172. #secthree a:hover {
  173. background-color:#fff; /* CHANGE THE BACKGROUND COLOR OF THE LINKS IN THE LINKS SECTION WHEN YOU HOVER */
  174. color:#FF9C7A; /* CHANGE THE TEXT COLOR OF THE LINKS IN THE LINKS SECTION WHEN YOU HOVER */
  175. }
  176.  
  177. #secfour img {
  178. opacity:0.5;
  179. -webkit-transition:0.5s;
  180. -moz-transition:0.5s;
  181. -ms-transition:0.5s;
  182. -o-transition:0.5s;
  183. transition:0.5s;
  184. }
  185.  
  186. #secfour img:hover {
  187. opacity:1;
  188. }
  189.  
  190. /* DON'T TOUCH THE CREDIT!! */
  191. #credit {
  192. right:10px;
  193. bottom:15px;
  194. font-size:11px;
  195. padding:2px 5px 2px 5px;
  196. text-transform:uppercase;
  197. text-align:center;
  198. background-color:#000;
  199. position:fixed;
  200. font-family:arial;
  201. z-index:55;
  202. }
  203.  
  204. #credit a {
  205. color:#fff;
  206. }
  207.  
  208. #credit a:hover {
  209. text-shadow:0 0 2px #fff;
  210. color:#000;
  211. }
  212.  
  213. </style>
  214.  
  215. </head>
  216.  
  217. <body>
  218.  
  219. <div id="links">
  220. <a href="/">home</a>
  221. <a href="#one">about</a>
  222. <a href="#two">contact</a>
  223. <a href="#three">links</a>
  224. <a href="#four">blogroll</a>
  225. </div>
  226.  
  227. <a name="one"></a>
  228.  
  229. <div class="content" id="secone">
  230. <h1>about me</h1>
  231. <!-- CHANGE THE TEXT IN THE ABOUT ME SECTION -->
  232. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
  233. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  234. </div>
  235.  
  236. <a name="two"></a>
  237. <div class="content" id="sectwo">
  238. <h1>contact</h1>
  239. <!-- CHANGE THE TEXT IN THE FAQ SECTION.
  240. questions go between <h2> </h2> tags. answers go between <p> </p> tags -->
  241. <h2>What is this?</h2>
  242. <p>It's an FAQ, although you can delete all this extra code if you don't want an FAQ.</p>
  243. <h2>How come my askbox isn't working?</h2>
  244. <p>This is very important. Make sure to type in your url in the askform where it specifies! If your askform still isn't working, go into your Tumblr settings and make sure that you have asks enabled.</p>
  245. <h2>Wow another question?</h2>
  246. <p>Wow another answer!</p>
  247. <!-- ASK FORM - PUT YOUR URL WHERE IT SAYS !YOUR URL HERE! -->
  248. <p><iframe src="http://www.tumblr.com/ask_form/primrosetylers.tumblr.com" id="ask_form" frameborder="0" height="200" scrolling="no" width="100%;"></iframe></p>
  249. </div>
  250.  
  251. <a name="three"></a>
  252. <div class="content" id="secthree">
  253. <h1>links</h1>
  254. <!-- CHANGE THE CONTENT OF THE LINKS SECTION -->
  255. <a href="/">whatever</a>
  256. <a href="/">you</a>
  257. <a href="/">want</a>
  258. <a href="/">tags or</a>
  259. <a href="/">links to pages</a>
  260. <a href="/">external links</a>
  261. <a href="/">trees</a>
  262. <a href="/">purple</a>
  263. <a href="/">autumn</a>
  264. </div>
  265.  
  266. <a name="four"></a>
  267. <div class="content" id="secfour">
  268. <h1>blogroll</h1>
  269. {block:Following}
  270. {block:Followed}
  271. <a title="{FollowedName}" href="{FollowedURL}"><img src="{FollowedPortraitURL-30}" /></a>
  272. {/block:Followed}
  273. {/block:Following}
  274. </div>
  275.  
  276. <div id="credit"><a href="http://primrosetylers.tumblr.com">✿THEME</a></div>
  277.  
  278. </body>
  279.  
  280.  
  281. </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!