API tools faq
paste
Advertisement
Allisons-Themes

Layout 3

Allisons-Themes
Sep 12th, 2013
76
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.04 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Layout 3 by Allison (0mg-what)
  3.  
  4. There is instructions on how to do it closer to the bottom! So keep your eye out for them and if you need help feel free to message me any time! Please keep credit! and a matching ask layout will be coming soon!
  5. -->
  6.  
  7. <head>
  8. <style type="text/css">
  9.  
  10. ::-webkit-scrollbar-thumb:vertical {
  11. background-color: {color:scrollbar}; /*scrollbar's slider color*/
  12. background-image:url('URL HERE'); /*optional background image*/
  13. height:100px;
  14. -moz-border-radius: 50px; /*these make bar rounded*/
  15. border-radius: 50px;
  16. border: 1px solid #65909A; /*border's color*/
  17. }
  18.  
  19. ::-webkit-scrollbar-thumb:horizontal {
  20. background-color:#65909A; /*scrollbar's slider color*/
  21. height:100px !important;
  22. }
  23.  
  24. ::-webkit-scrollbar {
  25. background-color: gray; /*scrollbar's main color*/
  26. background-image:url('URL HERE'); /*optional background image*/
  27. height:10px;
  28. width:5px; /*width of slider*/
  29. border: 1px solid #65909A; /*border's color*/
  30. border-radius: 150px;
  31. border-right-bottom-radius: 1000000px;
  32. }
  33.  
  34.  
  35.  
  36.  
  37. body {
  38. padding: 0px;
  39. margin: 0px;
  40. color:{color:text};
  41. font-family: "Happy Monkey";
  42. line-height:17px;
  43. font-size:15px;
  44. background-color: {color:Background};
  45. background-image:url(http://static.tumblr.com/vyr0ogr/gQZms90cz/tumblr_m8ruhit5cl1rsxgl4o1_400.png);
  46. background-attachment: fixed;
  47. background-repeat: repeat;
  48. }
  49.  
  50.  
  51. a:link, a:active, a:visited{
  52. text-decoration: none;
  53. -webkit-transition: color 0.3s ease-out;
  54. -moz-transition: color 0.3s ease-out;
  55. transition: color 0.3s ease-out;
  56. color:#777;
  57. }
  58.  
  59. a:hover {
  60. text-decoration: none;
  61. font-style:;
  62. color: {color:Hover};
  63. }
  64.  
  65. div#center{
  66. margin:auto;
  67. position:relative;
  68. width:1000px;
  69. background-color:;
  70. overflow:auto;
  71. overflow-y:hidden;
  72. }
  73.  
  74. /*CUSTOMIZE SIDEBAR HERE*/
  75.  
  76. #basic{
  77. position:fixed;
  78. overflow: hidden;
  79. z-index:9999;
  80. padding:1px;
  81. margin-top: 300px;
  82. margin-left: -130px;
  83. height: 87px;
  84. width: 263px;
  85. opacity: 1;
  86. border-bottom: 5px solid #1C86EE;
  87. border-top:5px solid #60AFFE;
  88. border-left: 15px solid #60AFFE;
  89. border-right: 15px solid #1C86EE;
  90. background-color:#fff;
  91. font-family: "Happy Monkey";
  92. line-height: 10px;
  93. font-size: 60px;
  94. border-radius: 0px;
  95. -webkit-transition: all.7s ease;
  96. -moz-transition: all .7s ease;
  97. -o-transition: all .7s ease;
  98. box-shadow: 2px 4px 6px gray;
  99. }
  100. #basic:hover{
  101. opacity: 1;
  102. height: 410px;
  103. margin-top: 130px;
  104. overflow: auto;
  105. -webkit-transition: all 2s ease;
  106. -moz-transition: all 2s ease;
  107. -o-transition: all 2s ease;
  108. }
  109.  
  110. #tags{
  111. position:fixed;
  112. overflow: hidden;
  113. z-index:9999;
  114. padding:1px;
  115. margin-top: 300px;
  116. margin-left: 190px;
  117. height: 87px;
  118. width: 263px;
  119. opacity: 1;
  120. border-bottom: 5px solid #1C86EE;
  121. border-top:5px solid #60AFFE;
  122. border-left: 15px solid #60AFFE;
  123. border-right: 15px solid #1C86EE;
  124. background-color:#fff;
  125. font-family: "Happy Monkey";
  126. line-height: 10px;
  127. font-size: 60px;
  128. border-radius: 0px;
  129. -webkit-transition: all.7s ease;
  130. -moz-transition: all .7s ease;
  131. -o-transition: all .7s ease;
  132. box-shadow: 2px 4px 6px gray;
  133. }
  134. #tags:hover{
  135. opacity: 1;
  136. height: 410px;
  137. margin-top: 130px;
  138. overflow: auto;
  139. -webkit-transition: all 2s ease;
  140. -moz-transition: all 2s ease;
  141. -o-transition: all 2s ease;
  142. }
  143.  
  144.  
  145.  
  146. #social{
  147. position:fixed;
  148. overflow: hidden;
  149. z-index:9999;
  150. padding:1px;
  151. margin-top: 300px;
  152. margin-left: 510px;
  153. height: 87px;
  154. width: 263px;
  155. opacity: 1;
  156. border-bottom: 5px solid #1C86EE;
  157. border-top:5px solid #60AFFE;
  158. border-left: 15px solid #60AFFE;
  159. border-right: 15px solid #1C86EE;
  160. background-color:#fff;
  161. font-family: "Happy Monkey";
  162. line-height: 10px;
  163. font-size: 60px;
  164. border-radius: 0px;
  165. -webkit-transition: all.7s ease;
  166. -moz-transition: all .7s ease;
  167. -o-transition: all .7s ease;
  168. box-shadow: 2px 4px 6px gray;
  169. }
  170.  
  171. #social:hover{
  172. opacity: 1;
  173. height: 410px;
  174. margin-top: 130px;
  175. overflow: auto;
  176. -webkit-transition: all 2s ease;
  177. -moz-transition: all 2s ease;
  178. -o-transition: all 2s ease;
  179. }
  180.  
  181. #friends{
  182. position:fixed;
  183. overflow: hidden;
  184. z-index:9999;
  185. padding:1px;
  186. margin-top: 300px;
  187. margin-left: 830px;
  188. height: 87px;
  189. width: 263px;
  190. opacity: 1;
  191. border-bottom: 5px solid #1C86EE;
  192. border-top:5px solid #60AFFE;
  193. border-left: 15px solid #60AFFE;
  194. border-right: 15px solid #1C86EE;
  195. background-color:#fff;
  196. font-family: "Happy Monkey";
  197. line-height: 10px;
  198. font-size: 60px;
  199. border-radius: 0px;
  200. -webkit-transition: all.7s ease;
  201. -moz-transition: all .7s ease;
  202. -o-transition: all .7s ease;
  203. box-shadow: 2px 4px 6px gray;
  204. }
  205.  
  206. #friends:hover{
  207. opacity: 1;
  208. height: 410px;
  209. margin-top: 130px;
  210. overflow: auto;
  211. -webkit-transition: all 2s ease;
  212. -moz-transition: all 2s ease;
  213. -o-transition: all 2s ease;
  214. }
  215.  
  216. #purple{
  217. position: fixed !important;
  218. z-index:9999;
  219. padding:1px;
  220. margin-top: 5px;
  221. margin-left: 345px;
  222. height: 60px;
  223. width: 300px;
  224. opacity: 1;
  225. background-color:#fff;
  226. font-family: "Allison";
  227. line-height: 13px;
  228. font-size: 60px;
  229. border-bottom: 5px solid #1C86EE;
  230. border-top:5px solid #60AFFE;
  231. border-left: 15px solid #60AFFE;
  232. border-right: 15px solid #1C86EE;
  233. border-radius: 0px;
  234. box-shadow: 2px 4px 6px gray;
  235. }
  236.  
  237.  
  238. #side2{
  239. position: fixed !important;
  240. margin-left: -165px;
  241. margin-top: -2px;
  242. width: 20px;
  243. height: 100%;
  244. border: 2px solid white;
  245. background:#60AFFE;
  246. }
  247.  
  248.  
  249. #side4{
  250. position: fixed !important;
  251. margin-left: 1136px;
  252. margin-top: -2px;
  253. width: 20px;
  254. height: 100%;
  255. border: 2px solid white;
  256. background:#60AFFE;
  257.  
  258. }
  259.  
  260. #side1{
  261. position: fixed !important;
  262. margin-left: -220px;
  263. margin-top: 30px;
  264. width: 1500px;
  265. height: 20px;
  266. border: 2px solid white;
  267. background: #1C86EE;
  268. z-index: 2;
  269. }
  270.  
  271.  
  272. #side3{
  273. position: fixed !important;
  274. margin-left: -220px;
  275. bottom: 30px;
  276. width: 1500px;
  277. height: 20px;
  278. border: 2px solid white;
  279. background: #1C86EE;
  280. z-index: 3;
  281. }
  282.  
  283. @font-face { font-family:Allison; src: url(http://static.tumblr.com/vyr0ogr/BI7ms90jk/always_in_my_heart.ttf); }
  284.  
  285. @font-face { font-family: Loser; src: url(http://static.tumblr.com/vyr0ogr/lZPms90gh/halohandletter.ttf); }
  286.  
  287. @font-face {font-family: Happy Monkey; src: url(http://static.tumblr.com/vyr0ogr/evums90l9/neon.ttf); }
  288.  
  289.  
  290. </style>
  291. <title>Links</title>
  292.  
  293. <link rel="shortcut icon" href="{Favicon}" />
  294. <meta name="viewport" content="width=820" />
  295. </head>
  296.  
  297. <body>
  298.  
  299.  
  300. <div id="cage">
  301. <div id="center">
  302. <div id="side1"></div>
  303. <div id="side2"></div>
  304. <div id="side3"></div>
  305. <div id="side4"></div>
  306.  
  307.  
  308. <div id="purple"><center><br><br>Links</center></div>
  309.  
  310. <!--
  311. Ok so here are the instructions!
  312. Where it says PUT BASICS, TAGS, SOCIAL, OR FRIENDS LINK 1,2,3, or 4 HERE you erase everything there is in the "" and put the url there so for Basics link 1 I wanted my blog I would put my url where it says PUT BASICS LINK 1 HERE.. YOU HAVE TO LEAVE THE "" THERE OR ELSE IT WONT WORK!
  313.  
  314. Where it says Link 1,2,3 ect. Tag 1,2,3 ect. Social 1,2,3 ect. Friend 1,2,3 ect. you put the title you want it to say so say for the Link 1 I wanted it to say Home I would erase Link 1 and put Home there
  315.  
  316. If you want to add more links put:
  317. <hr size=1> <br><a href="URL HERE">TITLE HERE</a>
  318. right after #4! You can add as many as you want there is a scrollbar so the links wont go out of the box
  319.  
  320. If you want to take one out erase this:
  321. <hr size=1><br><a href="PUT ____ LINK __ HERE">____</a>
  322.  
  323. Also if you don't like the colours look for the hex codes #1C86EE and #60AFFE and change them with the hex code colours you want
  324.  
  325. I think that is it! If there is anything else feel free to message me anything! :)
  326. -->
  327.  
  328. <center>
  329.  
  330. <div id="basic"> <div style="font-family: Loser; font-size: 70px; margin-top:40px;">Basics</div>
  331. <br><br><hr size=1>
  332. <a href="PUT BASICS LINK 1 HERE">Link 1</a><hr size=1>
  333. <br> <a href="PUT BASICS LINK 2 HERE">Link 2</a><hr size=1>
  334. <br> <a href="PUT BASICS LINK 3 HERE">Link 3</a><hr size=1>
  335. <br><a href="PUT BASICS LINK 4 HERE">Link 4</a>
  336. </div>
  337.  
  338. <div id="tags"> <div style="font-family: Loser; font-size: 70px; margin-top:30px;">Tags</div>
  339. <br><br><hr size=1>
  340. <a href="PUT TAGS LINK 1 HERE">Tag 1</a><hr size=1>
  341. <br> <a href="PUT TAGS LINK 2 HERE">Tag 2</a><hr size=1>
  342. <br> <a href="PUT TAGS LINK 3 HERE">Tag 3</a><hr size=1>
  343. <br><a href="PUT TAGS LINK 4 HERE">Tag 4</a>
  344.  
  345. </div>
  346.  
  347. <div id="social"><div style="font-family: Loser; font-size: 70px; margin-top:40px;">Social</div>
  348. <br><br><hr size=1>
  349. <a href="PUT TAGS SOCIAL LINK 1 HERE">Social 1</a><hr size=1>
  350. <br> <a href="PUT SOCIAL LINK 2 HERE">Social 2</a><hr size=1>
  351. <br> <a href="PUT SOCIAL LINK 3 HERE">Social 3</a><hr size=1>
  352. <br><a href="PUT SOCIAL LINK 4 HERE">Social 4</a>
  353. </div>
  354.  
  355. <div id="friends"><div style="font-family: Loser; font-size: 70px; margin-top:40px;">Friends</div>
  356. <br><br><hr size=1>
  357. <a href="PUT FRIENDS LINK 1 HERE">Friend 1</a><hr size=1>
  358. <br> <a href="PUT FRIENDS LINK 2 HERE">Friend 2</a><hr size=1>
  359. <br> <a href="PUT FRIENDS LINK 3 HERE">Friend 3</a><hr size=1>
  360. <br><a href="PUT FRIENDS LINK 4 HERE">Friend 4</a>
  361. </div>
  362.  
  363.  
  364.  
  365.  
  366. </body>
  367. <div style="position:fixed; bottom:5px; right:5px; background:white; padding: 3px; padding-bottom:7px; padding-top: 7px; font-family: calibri; font-size: 10px; line-height: 10px; z-index: 999999;"><a href="http://0mg-what.tumblr.com"> ♥ </a></div>
  368. </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!