API tools faq
paste
Advertisement
flyawayfromzayn

Theme #02 by Hayley

flyawayfromzayn
Apr 25th, 2014
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!--Please do not steal this theme, it took me a long time to make. Do Not Remove the credit, or else I will hunt you down and murder you brutally. Thank you for understanding.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10.  
  11.  
  12. <meta name="font:Body" content="Helvetica" />
  13. <meta name="color:Background" content="#fff" />
  14. <meta name="color:Body" content="#333" />
  15. <meta name="color:Link" content="#8d8c8d" />
  16. <meta name="color:Link Hover" content="#c48e8e" />
  17. <meta name="color:Sidebar Background" content="#0dd7e2" />
  18. <meta name="image:Sidebar" content="" />
  19. <meta name="image:Background" content="" />
  20. <meta name="image:Sidebar Background" content="" />
  21. <meta name="text:link1" content="link" />
  22. <meta name="text:link1 URL" content="/" />
  23. <meta name="text:link2" content="link" />
  24. <meta name="text:link2 URL" content="/" />
  25. <meta name="text:link3" content="link" />
  26. <meta name="text:link3 URL" content="/" />
  27. <meta name="text:link4" content="link" />
  28. <meta name="text:link4 URL" content="/" />
  29. <meta name="text:link5" content="link" />
  30. <meta name="text:link5 URL" content="/" />
  31. <meta name="text: Ask Text" content="whispered"/>
  32. <meta name="if:Infinite Scroll" content="1">
  33. <meta name="image:thekey" content=""/>
  34. <meta name="color:updates title background" content="#b8b8b8"/>
  35. <meta name="color:updates arrow background" content="#b8b8b8"/>
  36. <meta name="color:updates text colour" content="#b8b8b8"/>
  37. <meta name="color:updates arrow on hover" content="#b8b8b8"/>
  38.  
  39.  
  40. <!--This part is the basis of your blog, without it you just have letters and numbers.-->
  41. <style type="text/css">
  42.  
  43. #updates{
  44. z-index:1;
  45. position:fixed;
  46. top:-205px;
  47. left:30px;
  48. height:200px;
  49. width:150px;
  50. font-size:9px;
  51. transition-duration: 0.8s;
  52. -moz-transition-duration: 0.8s;
  53. -webkit-transition-duration: 0.8s;
  54. -o-transition-duration: 0.8s;
  55. }
  56.  
  57. #updates:hover{
  58. top:0px;
  59. transition-duration: 0.8s;
  60. -moz-transition-duration: 0.8s;
  61. -webkit-transition-duration: 0.8s;
  62. -o-transition-duration: 0.8s;
  63. }
  64.  
  65. .arrow_box {
  66. position: relative;
  67. background:#0dd7e2;
  68. }
  69. .arrow_box:after {
  70. border: solid transparent;
  71. content: " ";
  72. height: 0;
  73. width: 0;
  74. position: absolute;
  75. pointer-events: none;
  76. margin-left:6px;
  77. top:0px;
  78. }
  79.  
  80. .arrow_box:after {
  81. border-top-color:#0dd7e2;
  82. border-width: 7px;
  83. }
  84.  
  85. #box{
  86. opacity:1;
  87. z-index:-99999;
  88. top:-21px;
  89. position:relative;
  90. width:25px;
  91. height:37px;
  92. padding-top:2px;
  93. border-radius:6px;
  94. border:1px solid {color:updates arrow background};
  95. background:{color:updates arrow background};
  96. transition-duration: 0.8s;
  97. -moz-transition-duration: 0.8s;
  98. -webkit-transition-duration: 0.8s;
  99. -o-transition-duration: 0.8s;
  100. }
  101.  
  102. #line{
  103. position:relative;
  104. width:2px;
  105. height:12px;
  106. background:#0dd7e2;
  107. left:50%;
  108. margin-left:-1px;
  109. margin-top:15px;
  110. }
  111.  
  112. #updates:hover #box{
  113. opacity:0;
  114. transition-duration: 0.8s;
  115. -moz-transition-duration: 0.8s;
  116. -webkit-transition-duration: 0.8s;
  117. -o-transition-duration: 0.8s;
  118. }
  119.  
  120.  
  121.  
  122.  
  123. #box2{
  124. opacity:0;
  125. z-index:-99999;
  126. top:-75px;
  127. position:relative;
  128. width:25px;
  129. height:47px;
  130. padding-top:2px;
  131. border-radius:6px;
  132. border:1px solid #d8d8d8;
  133. background:white;
  134. transition-duration: 0.8s;
  135. -moz-transition-duration: 0.8s;
  136. -webkit-transition-duration: 0.8s;
  137. -o-transition-duration: 0.8s;
  138. }
  139. #updates:hover #box2{
  140. opacity:1;
  141. transition-duration: 0.8s;
  142. -moz-transition-duration: 0.8s;
  143. -webkit-transition-duration: 0.8s;
  144. -o-transition-duration: 0.8s;
  145. }
  146.  
  147. .arrow_box2 {
  148. position: relative;
  149. background: {color:updates arrow on hover};
  150. }
  151. .arrow_box2:after {
  152. bottom: 10px;
  153. border: solid transparent;
  154. content: " ";
  155. height: 0;
  156. width: 0;
  157. position: absolute;
  158. pointer-events: none;
  159. }
  160.  
  161. .arrow_box2:after {
  162. border-bottom-color:{color:updates arrow on hover};
  163. border-width: 7px;
  164. margin-left:5px;
  165. }
  166.  
  167.  
  168.  
  169. #line2{
  170. position:relative;
  171. width:2px;
  172. height:12px;
  173. background:{color:updates arrow on hover};
  174. left:50%;
  175. margin-left:-2px;
  176. margin-top:32px;
  177. }
  178.  
  179. #words{
  180. top:-10px;
  181. width:130px;
  182. height:150px;
  183. position:relative;
  184. line-height:140%;
  185. padding:20px 6px 6px 6px;
  186. background:white;
  187. color:{color:updates text colour};
  188. overflow:scroll;
  189. border-radius:10px;
  190. border:1px solid #d8d8d8;
  191. }
  192.  
  193. #utitle{
  194. width:126px;
  195. height:15px;
  196. font-size:15px;
  197. padding:13px 9px 5px 9px;
  198. position:relative;
  199. top:0px;
  200. z-index:9999;
  201. color:white;
  202. background:{color:updates title background};
  203. text-align:center;
  204. }
  205.  
  206.  
  207. body {
  208. background: {color:Background};
  209. background-image: url('{image:Background}');
  210. position:absolute;
  211. font-size:12px;
  212. font-family: {font:Body};
  213. color:{color:Body};
  214. }
  215.  
  216. blockquote {
  217. border-left: 3px solid #eee;
  218. padding:5px;
  219. padding-left:10px;
  220. text-align: justify;
  221. }
  222.  
  223. blockquote img {
  224. max-width: 100%;
  225. display: block;
  226. margin-bottom: 5px;
  227. }
  228.  
  229. blockquote blockquote {
  230. margin: 10px;
  231. padding: 10px;
  232. }
  233.  
  234. a {
  235. text-decoration:none;
  236. outline:none;
  237. color:{color:Link};
  238. -webkit-transition: all 0.5s ease-in-out;
  239. -moz-transition: all 0.5s ease-in-out;
  240. -o-transition: all 0.5s ease-in-out;
  241. }
  242.  
  243. a:hover {
  244. color:{color:Link Hover};
  245. -webkit-transition: all 0.5s ease-in-out;
  246. -moz-transition: all 0.5s ease-in-out;
  247. -o-transition: all 0.5s ease-in-out;
  248. }
  249.  
  250. h1 {
  251. font-family:{font:Body};
  252. text-align:center;
  253. }
  254.  
  255. h2 {
  256. font-family:tahoma;
  257. text-transform:uppercase;
  258. padding:5px;
  259. color:{color:Link};
  260. }
  261.  
  262. #title {
  263. font-family:{font:Title};
  264. color:{color:Body};
  265. font-style:italic;
  266. font-weight:bold;
  267. font-size:17px;
  268. text-align:center;
  269. text-decoration:none;
  270. -webkit-transition: all 0.5s ease-in-out;
  271. -moz-transition: all 0.5s ease-in-out;
  272. -o-transition: all 0.5s ease-in-out;
  273. }
  274.  
  275. #sidebar {
  276. background:{color:Sidebar Background};
  277. position:fixed;
  278. width:200px;
  279. left:100px;
  280. padding:5px;
  281. top:200px;
  282. }
  283.  
  284. #sidebar img {
  285. width:190px;
  286. height:auto;
  287. text-align:center;
  288. }
  289.  
  290. #description {
  291. padding:10px;
  292. color:{color:Description};
  293. font-size:11px;
  294. text-align: center;
  295. font-family:{font:Body};
  296. }
  297.  
  298. #pagination {
  299. background:black;
  300. color:white;
  301. }
  302.  
  303. #links {
  304. text-align:center;
  305. }
  306.  
  307.  
  308. #links a{
  309. display:inline-block;
  310. background:white;
  311. padding:3px;
  312. color:{color:Link};
  313. -webkit-transition: all 0.2s ease-in-out;
  314. -moz-transition: all 0.2s ease-in-out;
  315. -o-transition: all 0.2s ease-in-out;
  316. }
  317.  
  318. #links a:hover{
  319. color:{color:Background};
  320. background:{color:Link Hover};
  321. -webkit-transition: all 0.5s ease-in-out;
  322. -moz-transition: all 0.5s ease-in-out;
  323. -o-transition: all 0.5s ease-in-out;
  324. }
  325.  
  326.  
  327. #entries {
  328. font-size:10px;
  329. margin-left: 390px;
  330. margin-top:40px;
  331. float: right;
  332. text-align: justify;
  333. }
  334.  
  335. #post {
  336. font-size:10px;
  337. padding: 5px;
  338. margin-bottom:30px;
  339. width: 450px;
  340. color:{color:Body};
  341. text-align: left;
  342. overflow:hidden;
  343. }
  344.  
  345. #info {
  346. padding: 5px;
  347. border-top:1px solid black;
  348. }
  349.  
  350. #credit a{
  351. position:fixed;
  352. right:3px;
  353. bottom:3px;
  354. padding:4px;
  355. background:#0dd7e2;
  356. font-size:12px;
  357. color:black;
  358. -moz-transition-duration:1s;
  359. -webkit-transition-duration:1s;
  360. -o-transition-duration:1s;
  361. }
  362.  
  363. #credit a:hover {
  364. opacity:1;
  365. color:white;
  366. background:black;
  367. -moz-transition-duration:1s;
  368. -webkit-transition-duration:1s;
  369. -o-transition-duration:1s;
  370. }
  371.  
  372.  
  373.  
  374.  
  375.  
  376. </style>
  377. <style type="text/css">{CustomCSS}</style>
  378. </head>
  379.  
  380. <body>
  381.  
  382. <div id="updates">
  383. <div id="utitle">UPDATES</div>
  384. <div id="words">
  385. <!-------------------------INSERT UPDATES HERE----------------------->
  386. Your Updates go here, the box is quite large, so you can fit alot of updates in it. I added a scroll bar, too, so you can use larger font.
  387. <h3>This is what a heading will look like</h3>
  388. <p> This is what a paragraph will look like</p>
  389. <!-------------------------------END-------------------------------->
  390.  
  391.  
  392. </div>
  393. <div id="box">
  394. <div id="line"> </div>
  395. <div class="arrow_box"></div>
  396.  
  397. </div>
  398.  
  399. <div id="box2">
  400. <div id="line2"> </div>
  401. <div class="arrow_box2"></div>
  402.  
  403. </div>
  404.  
  405. </div>
  406.  
  407.  
  408. </div>
  409. </div></div>
  410. <div id="sidebar">
  411. <div id="title">{Title}</div>
  412. <a href="/"><img src="{image:Sidebar}"/></a>
  413. {block:Description}{Description}{/block:Description}
  414. <div id="description"><div style="width:150px; height:100px; overflow-Y:scroll;"> This is your description. It will be accessed by clicking "Edit HTML" and going to the <_body_> (REMOVE THE _)
  415. <p>as you can see it is in a scroll box so it can be as long as you want it to be.</p>
  416. </div>
  417. </div>
  418. <!--"Scrolling Text" is where your description will go. -->
  419.  
  420. <center>
  421. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage} // {block:NextPage} <a href="{NextPage}">next</a>{/block:NextPage}</center>
  422.  
  423. <center><form name="gotolocation1" method="POST" ACTION=URI>
  424. <select name="cherrybammenu1" style="font-family:ARIAL; font-size:10px; color:#000; background:#fff;">
  425. <option >this is your links</option>
  426. <option value="{text:link1url}">{text:link1}</option>
  427. <option value="{text:link2url}">{text:link2}</option>
  428. <option value="{text:link3url}">{text:link3}</option>
  429. <option value="{text:link4url}">{text:link4}</option>
  430. <option value="{text:link5url}">{text:link5}</option>
  431. <option value="{text:link6url}">{text:link6}</option>
  432. </select></center>
  433.  
  434. </div>
  435. </div>
  436.  
  437.  
  438. <div id="entries">
  439. {block:Posts}
  440. <div id="post">
  441.  
  442. {block:Text}<h1>{title}</h1>{Body}{/block:Text}
  443.  
  444. {block:Quote}<h3>“{Quote}” </h3>
  445. <div style="text-align:right; padding-bottom:5px;">— {Source}</div>{/block:Quote}
  446.  
  447. {block:Link}<a href="{URL}" class="link" {Target}> <h2>{Name}</h2></a>
  448. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  449.  
  450. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  451. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  452.  
  453. {block:Chat}{block:Title}<h1>{Title}</h1><br>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  454. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  455.  
  456.  
  457.  
  458.  
  459. {block:Audio}
  460. {block:AudioPlayer}
  461. {AudioPlayerWhite}
  462. {/block:AudioPlayer}
  463. {block:AlbumArt}
  464. <img src="{AlbumArtURL}" width="200px"/>
  465. {/block:AlbumArt}
  466. <br>
  467. {block:TrackName}Track: {TrackName}{/block:TrackName}<br>
  468. {block:Artist}Artist: {Artist}{/block:Artist}<br>
  469. {block:Album}Album: {Album}{/block:Album}<br>
  470. {block:Playcount}Play count: {FormattedPlayCount}{/block:Playcount}
  471. {block:Caption}{Caption}{/block:Caption}
  472. {/block:Audio}
  473.  
  474. {block:Answer}
  475. <img src="{AskerPortraitURL-30}">
  476. {Asker} {text:Ask Text}: {Question}<br>
  477. {Answer}{/block:Answer}
  478.  
  479.  
  480.  
  481. <div id="info">
  482. posted {block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}
  483. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}{/block:NoteCount}{block:RebloggedFrom} (<a href="{ReblogParentURL}">via</a>{block:ContentSource} / <a href="{SourceURL}">source</a>{block:ContentSource}){/block:RebloggedFrom}<br>
  484. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  485.  
  486. </div>
  487. {/block:Posts}
  488.  
  489. {block:PostNotes}{PostNotes}{/block:PostNotes}
  490.  
  491. </div>
  492.  
  493.  
  494.  
  495.  
  496. <div id="credit"><a href="http://flyawayfromzayn.tumblr.com">Credit</a></div>
  497. </body>
  498. </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!